diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index edddb14b..bcfe1fb4 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,38 +1,36 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-	"name": "design-angular-kit",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	// "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm",
-	"build": {
-		"dockerfile": "Dockerfile"
-	},
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	"features": {
-		"ghcr.io/devcontainers-contrib/features/angular-cli:2": {
-			"version": "18.0.7"
-		},
-		"ghcr.io/devcontainers-contrib/features/cz-cli:1": {}
-	},
-	"mounts": [
-		"source=design-angular-kit-bundle-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" // deps volume
-	],
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
-	// Configure tool-specific properties.
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"angular.ng-template",
-				"cyrilletuzi.angular-schematics",
-				"esbenp.prettier-vscode",
-				"dbaeumer.vscode-eslint",
-				"vivaxy.vscode-conventional-commits"
-			]
-		}
-	}
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+  "name": "design-angular-kit",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "mounts": [
+    "source=design-angular-kit-bundle-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" // deps volume
+  ],
+  "remoteUser": "root",
+  "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
+  // "postStartCommand": "/bin/bash -c '.devcontainer/scripts/postStartCommand.sh \"${containerWorkspaceFolder}\"'",
+  "postStartCommand": "sh .devcontainer/scripts/postStartCommand.sh \"${containerWorkspaceFolder}\"",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "angular.ng-template",
+        "cyrilletuzi.angular-schematics",
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "vivaxy.vscode-conventional-commits"
+      ],
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.codeActionsOnSave": {
+          "source.organizeImports": "always"
+        }
+      }
+    }
+  },
+  "features": {
+    "ghcr.io/devcontainers-contrib/features/angular-cli:2": {
+      "version": "18.0.7"
+    },
+    "ghcr.io/devcontainers-contrib/features/cz-cli:1": {}
+  }
 }
diff --git a/.devcontainer/scripts/postCreateCommand.sh b/.devcontainer/scripts/postCreateCommand.sh
index 8e3de4ba..3019de0a 100644
--- a/.devcontainer/scripts/postCreateCommand.sh
+++ b/.devcontainer/scripts/postCreateCommand.sh
@@ -1,9 +1,12 @@
 #/bin/bash
+echo "lifecycle hook: postCreateCommand => start"
 
-echo "Set node_modules permission"
-sudo chown -R node:node node_modules
-echo "Set node_modules permission: done"
+# echo "Set node_modules permission"
+# sudo chown -R node:node node_modules
+# echo "Set node_modules permission: done"
 
 echo "Installing deps"
 npm i
-echo "Installing deps: done"
\ No newline at end of file
+echo "Installing deps: done"
+
+echo "lifecycle hook: postCreateCommand => done"
diff --git a/.devcontainer/scripts/postStartCommand.sh b/.devcontainer/scripts/postStartCommand.sh
new file mode 100644
index 00000000..83b73b96
--- /dev/null
+++ b/.devcontainer/scripts/postStartCommand.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+WORKSPACE_FOLDER=$1
+
+echo "lifecycle hook: postStartCommand => start"
+echo "Set $WORKSPACE_FOLDER as git safe directory"
+git config --global --add safe.directory $WORKSPACE_FOLDER
+# git config --global --add safe.directory /workspaces/design-angular-kit
+echo "lifecycle hook: postStartCommand => done"
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index 87c17ac8..b32176e0 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -24,4 +24,5 @@ jobs:
       - run: npm run build
       - run: npm run build:lib
       - run: npm run test
+      - run: npm run schematics:test
       - uses: codecov/codecov-action@v2
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2e41f5e..45446de8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+## [1.1.2](https://github.com/italia/design-angular-kit/compare/v1.1.1...v1.1.2) (2024-11-06)
+
+
+### Bug Fixes
+
+* readonly input problem in navscroll ([fceffc5](https://github.com/italia/design-angular-kit/commit/fceffc5e8467085de760300d303845f73ceb9493))
+
+## [1.1.1](https://github.com/italia/design-angular-kit/compare/v1.1.0...v1.1.1) (2024-10-31)
+
+
+### Bug Fixes
+
+* dimmer primary color ([1b91fb2](https://github.com/italia/design-angular-kit/commit/1b91fb278acf6a90abd0a5dd2ff14f28005e2f38))
+* forward example component ([7a5adfa](https://github.com/italia/design-angular-kit/commit/7a5adfa3490d37ef9529f8a2c3ff0048e6c06caa))
+* groups for radios toggles and checkboxes ([1b65209](https://github.com/italia/design-angular-kit/commit/1b65209414a8fcdba00bb3ae5fd3b5031570f06c))
+
+
+### Features
+
+* add angular schematics ([7e81151](https://github.com/italia/design-angular-kit/commit/7e81151da547a6e167101749d1aeb0395da03515))
+* component transfer ([bb26b09](https://github.com/italia/design-angular-kit/commit/bb26b09f7199cfd34ddaa9c9a8a71229af326f45))
+* navscroll component ([15c8caa](https://github.com/italia/design-angular-kit/commit/15c8caa658923bb21cc60c561843aff73405b623))
+
 # [1.1.0](https://github.com/italia/design-angular-kit/compare/v1.0.3...v1.1.0) (2024-07-18)
 
 
diff --git a/README.EN.md b/README.EN.md
index 47399c47..43cd5ab7 100644
--- a/README.EN.md
+++ b/README.EN.md
@@ -64,10 +64,25 @@ npm install design-angular-kit --save
 Choose the version corresponding to your Angular version:
 
 | Angular | design-angular-kit |
-|---------|--------------------|
+| ------- | ------------------ |
 | 18+     | v1.1.0 +           |
 | 17+     | v1.0.0 +           |
 
+Alternatively, you can run the command
+
+```sh
+ng add design-angular-kit --project <projectName>
+```
+
+He will consecutively perform:
+
+- choose the correct Angular version
+- install the dep
+- add the dep to package.json
+- application configuration
+
+The instruction of the next chapter, **Configuration**, will be executed automatically, except for the customization of \_i18n.
+
 ## Configuration
 
 ### App configuration
@@ -84,11 +99,8 @@ initialise the library's functionality.
 import { provideDesignAngularKit } from 'design-angular-kit';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    ...
-    provideDesignAngularKit(),
-  ]
-}
+  providers: [...provideDesignAngularKit()],
+};
 ```
 
 #### Modular application
@@ -100,28 +112,21 @@ using the `forRoot` method in order to initialise the library functionality and
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forRoot()
-  ]
+  imports: [...DesignAngularKitModule.forRoot()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 Uses the `forChild` method when importing the `DesignAngularKitModule` into other modules of the application to **import all library components**.
 
-
 ```typescript
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forChild()
-  ],
+  imports: [...DesignAngularKitModule.forChild()],
   exports: [DesignAngularKitModule],
 })
-export class SharedModule { }
+export class SharedModule {}
 ```
 
 #### Hybrid application
@@ -134,11 +139,9 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 
 @NgModule({
   imports: [],
-  providers: [
-    provideDesignAngularKit(),
-  ]
+  providers: [provideDesignAngularKit()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 #### Configuration Parameters
@@ -161,7 +164,7 @@ const initConfig: DesignAngularKitConfig | undefined = {
    * @default true
    */
   loadFont: boolean | undefined,
-  
+
   ...
 };
 
@@ -171,11 +174,12 @@ DesignAngularKitModule.forRoot(initConfig)
 ```
 
 ### Importing bootstrap styles
+
 Configure the required styles in the file `styles.scss`. Import the SCSS library as shown in the example below.
 
 ```scss
 // Importing bootstrap-italia SCSS library
-@import "bootstrap-italia/src/scss/bootstrap-italia";
+@import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
 
 <details>
@@ -190,7 +194,6 @@ The use of blue #0066CC should, however, be reserved for the central administrat
 State, and thus one may find oneself in the position of having to customise the values of the variables
 colour of Bootstrap Italy, setting new values for their own needs.
 
-
 This colour and the other tones are generated from the HSB triad, so the variables primary-h, primary-s and primary-b must be modified.
 To obtain the correspondence between the hexadecimal value of the colour and HSB, one can use the rgb.to portal, e.g. https://rgb.to/0066CC.
 
@@ -213,6 +216,7 @@ $font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;
 // Importing bootstrap-italia SCSS library
 @import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
+
 </details>
 
 ### Icon and asset support
@@ -250,6 +254,7 @@ Edit your `angular.json` by adding:
   ]
 }
 ```
+
 You can use the localised labels of the `design-angular-kit` library in your application, e.g. `{{'en.errors.required-field' | translate}}`. [See our labels](projects/design-angular-kit/assets/i18n/en.json)
 
 #### Existing location
@@ -257,7 +262,6 @@ You can use the localised labels of the `design-angular-kit` library in your app
 If you already use localisation files in your app, you can use the library [ngx-translate-multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader)
 to load both the app's localisation files and those of the `design-angular-kit` library
 
-
 **Using the `provideDesignAngularKit` function:**
 
 ```typescript
@@ -269,16 +273,18 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 provideDesignAngularKit({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 **Using the `DesignAngularKitModule`:**
+
 ```typescript
 import { HttpBackend } from '@angular/common/http';
 import { TranslateLoader } from '@ngx-translate/core';
@@ -288,18 +294,20 @@ import { DesignAngularKitModule } from 'design-angular-kit';
 DesignAngularKitModule.forRoot({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 #### Localisation customisation
 
 If you want to customise our labels:
+
 - Do not include i18n support in your `angular.json`.
   - Create your custom location files in your `assets/bootstrap-italia/i18n/` folder (create the path if it does not exist)
   - The json must have [this format](projects/design-angular-kit/assets/i18n/en.json).
@@ -317,13 +325,12 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
 
 @NgModule({
   imports: [
-    ItAlertComponent, 
-    ItPaginationComponent, 
-    ItBreadcrumbsModule // Includes ItBreadcrumbComponent and ItBreadcrumbItemComponent 
+    ItAlertComponent,
+    ItPaginationComponent,
+    ItBreadcrumbsModule, // Includes ItBreadcrumbComponent and ItBreadcrumbItemComponent
   ],
 })
-export class YourAppModule {
-}
+export class YourAppModule {}
 ```
 
 ```typescript
@@ -333,19 +340,18 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
   selector: 'app-product',
   standalone: true,
   imports: [ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule],
-  templateUrl: './product.component.html'
+  templateUrl: './product.component.html',
 })
-export class ProductComponent {
-}
+export class ProductComponent {}
 ```
 
 ## How to contribute 💙
 
 👉🏻 You can contribute to the library in various ways:
 
-*   With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-angular-kit/issues) of Angular Kit (a comment on the issue is also sufficient to notify the willingness to take charge).
-*   By reporting bugs or improvements to the [official repository](https://github.com/italia/design-angular-kit/) of Angular Kit.
-*   By writing to us on Slack's [dedicated channel](https://developersitalia.slack.com/messages/C04H3C19D52/).
+- With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-angular-kit/issues) of Angular Kit (a comment on the issue is also sufficient to notify the willingness to take charge).
+- By reporting bugs or improvements to the [official repository](https://github.com/italia/design-angular-kit/) of Angular Kit.
+- By writing to us on Slack's [dedicated channel](https://developersitalia.slack.com/messages/C04H3C19D52/).
 
 ## How to contribute the code
 
@@ -438,9 +444,9 @@ npm run test
 
 Special thanks to those who made the development of this library possible!
 
-[![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
---- | --- | --- |
-Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
+| [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| Antonino Bonanno                                                                                           | Cristian Borelli                                                                       | Alessio Napolitano                                                                             |
 
 and thanks to [NetService team](https://www.net-serv.it/):
 
@@ -448,7 +454,7 @@ and thanks to [NetService team](https://www.net-serv.it/):
 
 ---
 
-All contributors (*made with [contributors-img](https://contrib.rocks)*)
+All contributors (_made with [contributors-img](https://contrib.rocks)_)
 
 <a href = "https://github.com/italia/design-angular-kit/graphs/contributors">
   <img src = "https://contrib.rocks/image?repo=italia/design-angular-kit"/>
diff --git a/README.md b/README.md
index 0bfb9dd7..c024c206 100644
--- a/README.md
+++ b/README.md
@@ -64,10 +64,25 @@ npm install design-angular-kit --save
 Scegli la versione corrispondente alla tua versione Angular:
 
 | Angular | design-angular-kit |
-|---------|--------------------|
+| ------- | ------------------ |
 | 18+     | v1.1.0 +           |
 | 17+     | v1.0.0 +           |
 
+In alternativa, puoi lanciar il comando
+
+```sh
+ng add design-angular-kit --project <projectName>
+```
+
+Eseguirà in serie:
+
+- scelta della corretta versione da installare
+- installazione della dipendenza
+- aggiunta della dipendenza al package.json
+- configurazione dell'applicazione
+
+Le istruzioni del paragrafo successivo, **Configurazione**, verranno eseguite automaticamente, eccetto per la personalizzazione della configurazione di _i18n_.
+
 ## Configurazione
 
 ### Configurazione app
@@ -84,49 +99,39 @@ poter inizializzare le funzionalità della libreria.
 import { provideDesignAngularKit } from 'design-angular-kit';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    ...
-    provideDesignAngularKit(),
-  ]
-}
+  providers: [...provideDesignAngularKit()],
+};
 ```
 
 #### Applicazione modulare
 
-È necessario importare `DesignAngularKitModule` all'interno del modulo principale dell'applicazione (solitamente denominato **AppModule**) 
+È necessario importare `DesignAngularKitModule` all'interno del modulo principale dell'applicazione (solitamente denominato **AppModule**)
 utilizzando il metodo `forRoot` per poter inizializzare le funzionalità della libreria e **importare tutti i componenti**.
 
 ```typescript
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forRoot()
-  ]
+  imports: [...DesignAngularKitModule.forRoot()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 Utilizza il metodo `forChild` durante l'importazione del modulo `DesignAngularKitModule` in altri moduli dell'applicazione per **importare tutti i componenti** della libreria.
 
-
 ```typescript
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forChild()
-  ],
+  imports: [...DesignAngularKitModule.forChild()],
   exports: [DesignAngularKitModule],
 })
-export class SharedModule { }
+export class SharedModule {}
 ```
 
 #### Applicazione ibrida
 
-Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri **componenti con la configurazione _standalone_**, 
+Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri **componenti con la configurazione _standalone_**,
 utilizza la funzione `provideDesignAngularKit` all'interno del modulo principale dell'applicazione per poter inizializzare le funzionalità della libreria.
 
 ```typescript
@@ -134,11 +139,9 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 
 @NgModule({
   imports: [],
-  providers: [
-    provideDesignAngularKit(),
-  ]
+  providers: [provideDesignAngularKit()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 #### Parametri di configurazione
@@ -161,7 +164,7 @@ const initConfig: DesignAngularKitConfig | undefined = {
    * @default true
    */
   loadFont: boolean | undefined,
-  
+
   ...
 };
 
@@ -171,11 +174,12 @@ DesignAngularKitModule.forRoot(initConfig)
 ```
 
 ### Importazione stili bootstrap-italia
+
 Configura gli stili richiesti nel file `styles.scss`. Importa la libreria SCSS come mostrato nell'esempio qui sotto.
 
 ```scss
 // Importazione libreria SCSS di bootstrap-italia
-@import "bootstrap-italia/src/scss/bootstrap-italia";
+@import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
 
 <details>
@@ -190,7 +194,6 @@ L’utilizzo del blu #0066CC dovrebbe però essere riservato alle amministrazion
 Stato, e quindi ci si può trovare nella condizione di dover personalizzare i valori delle variabili
 colore di Bootstrap Italia, impostando nuovi valori per le proprie necessità.
 
-
 Questo colore e le altre tonalità vengono generate a partire dalla terna HSB, pertanto occorre modificare le variabili primary-h, primary-s e primary-b.
 Per avere la corrispondenza tra valore esadecimale del colore e HSB si può utilizzare il portale rgb.to, ad esempio https://rgb.to/0066CC.
 
@@ -213,6 +216,7 @@ $font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;
 // Importazione libreria SCSS di bootstrap-italia
 @import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
+
 </details>
 
 ### Supporto icone e assets
@@ -250,6 +254,7 @@ Modifica il tuo `angular.json` aggiungendo:
   ]
 }
 ```
+
 Puoi utilizzare le label localizzate della libreria `design-angular-kit` nella tua applicazione, ad esempio `{{'it.errors.required-field' | translate}}`. [Vedi le nostre label](projects/design-angular-kit/assets/i18n/it.json)
 
 #### Localizzazione esistente
@@ -257,7 +262,6 @@ Puoi utilizzare le label localizzate della libreria `design-angular-kit` nella t
 Se utilizzi già i file di localizzazione nella tua app, puoi utilizzare la libreria [ngx-translate-multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader)
 per caricare sia i file di localizzazione dell'app che quelli della libreria `design-angular-kit`
 
-
 **Utilizzando la funzione `provideDesignAngularKit`:**
 
 ```typescript
@@ -269,16 +273,18 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 provideDesignAngularKit({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 **Utilizzando il modulo `DesignAngularKitModule`:**
+
 ```typescript
 import { HttpBackend } from '@angular/common/http';
 import { TranslateLoader } from '@ngx-translate/core';
@@ -288,22 +294,24 @@ import { DesignAngularKitModule } from 'design-angular-kit';
 DesignAngularKitModule.forRoot({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 #### Personalizzazione della localizzazione
 
 Se vuoi personalizzare le nostre label:
-- Non includere il supporto i18n nel tuo `angular.json` 
-    - Crea i tuoi file di localizzazione personalizzati nella tua cartella `assets/bootstrap-italia/i18n/` (crea il percorso se non esiste)
-    - Il json deve avere [questo formato](projects/design-angular-kit/assets/i18n/it.json).
-    - Aggiungi nella configurazione iniziale della libreria il `translateLoader` custom, sostituendo la stringa `assets/bootstrap-italia/i18n/` all'attributo `itPrefix`  
+
+- Non includere il supporto i18n nel tuo `angular.json`
+  - Crea i tuoi file di localizzazione personalizzati nella tua cartella `assets/bootstrap-italia/i18n/` (crea il percorso se non esiste)
+  - Il json deve avere [questo formato](projects/design-angular-kit/assets/i18n/it.json).
+  - Aggiungi nella configurazione iniziale della libreria il `translateLoader` custom, sostituendo la stringa `assets/bootstrap-italia/i18n/` all'attributo `itPrefix`
 - Oppure, aggiungi le localizzazioni nei tuoi file json, sovrascrivendo le [chiavi del json della libreria](projects/design-angular-kit/assets/i18n/it.json).
 
 ### Utilizzo
@@ -317,13 +325,12 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
 
 @NgModule({
   imports: [
-    ItAlertComponent, 
-    ItPaginationComponent, 
-    ItBreadcrumbsModule // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent 
+    ItAlertComponent,
+    ItPaginationComponent,
+    ItBreadcrumbsModule, // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent
   ],
 })
-export class YourAppModule {
-}
+export class YourAppModule {}
 ```
 
 ```typescript
@@ -333,24 +340,23 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
   selector: 'app-product',
   standalone: true,
   imports: [ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule],
-  templateUrl: './product.component.html'
+  templateUrl: './product.component.html',
 })
-export class ProductComponent {
-}
+export class ProductComponent {}
 ```
 
 ## Come contribuire 💙
 
 👉🏻 È possibile contribuire alla libreria in vari modi:
 
-*   Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-angular-kit/issues) di Angular Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
-*   Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-angular-kit/) di Angular Kit.
-*   Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04H3C19D52/) di Slack.
+- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-angular-kit/issues) di Angular Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
+- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-angular-kit/) di Angular Kit.
+- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04H3C19D52/) di Slack.
 
 ## Come contribuire con il codice
 
 Vorresti dare una mano su Design Angular Kit? **Sei nel posto giusto!**
- 
+
 Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle
 [linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html),
 e fai riferimento alle [indicazioni su come contribuire a Design Angular Kit](https://github.com/italia/design-angular-kit/blob/main/CONTRIBUTING.md).
@@ -410,7 +416,7 @@ git clone https://github.com/italia/design-angular-kit.git
 
 3. Al caricamento, Visual Studio Code riconoscerà la presenta della configurazione di un Devcontainer. Aprire il progetto con il devcontainer. Altre info [qui](https://code.visualstudio.com/docs/devcontainers/create-dev-container).
 
-4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato. 
+4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato.
 
 5. Lanciare l'applicazione in locale
 
@@ -438,9 +444,9 @@ npm run test
 
 Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria
 
-[![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
---- | --- | --- |
-Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
+| [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| Antonino Bonanno                                                                                           | Cristian Borelli                                                                       | Alessio Napolitano                                                                             |
 
 e grazie in particolare al team di [NetService](https://www.net-serv.it/):
 
@@ -448,7 +454,7 @@ e grazie in particolare al team di [NetService](https://www.net-serv.it/):
 
 ---
 
-Tutti i contributor (*made with [contributors-img](https://contrib.rocks)*)
+Tutti i contributor (_made with [contributors-img](https://contrib.rocks)_)
 
 <a href = "https://github.com/italia/design-angular-kit/graphs/contributors">
   <img src = "https://contrib.rocks/image?repo=italia/design-angular-kit"/>
diff --git a/angular.json b/angular.json
index a58113d2..f9e65bf3 100644
--- a/angular.json
+++ b/angular.json
@@ -106,7 +106,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "design-angular-kit-bundle:build"
+            "buildTarget": "design-angular-kit-bundle:build",
+            "host": "127.0.0.1"
           },
           "configurations": {
             "production": {
diff --git a/package-lock.json b/package-lock.json
index db1ef7f3..f658b104 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "design-angular-kit-bundle",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "design-angular-kit-bundle",
-      "version": "1.1.0",
+      "version": "1.1.2",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@angular-devkit/schematics": "^18.0.7",
         "@angular/animations": "^18.0.6",
+        "@angular/cdk": "^18.2.10",
         "@angular/common": "^18.0.6",
         "@angular/compiler": "^18.0.6",
         "@angular/core": "^18.0.6",
@@ -21,7 +22,7 @@
         "@angular/router": "^18.0.6",
         "@ngx-translate/core": "^15.0.0",
         "@ngx-translate/http-loader": "^8.0.0",
-        "bootstrap-italia": "^2.8.8",
+        "bootstrap-italia": "^2.12.1",
         "core-js": "^3.37.1",
         "fp-ts": "^2.16.8",
         "io-ts": "^2.2.21",
@@ -54,12 +55,14 @@
         "@typescript-eslint/parser": "^7.15.0",
         "browserslist-config-design-italia": "^1.1.0",
         "concurrently": "^8.2.2",
+        "copyfiles": "^2.4.1",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "gh-pages": "^6.1.1",
         "husky": "^9.0.11",
         "is-ci": "^3.0.1",
+        "jasmine": "^5.4.0",
         "jasmine-core": "~5.1.2",
         "jasmine-spec-reporter": "~7.0.0",
         "karma": "~6.4.3",
@@ -718,6 +721,23 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "18.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.10.tgz",
+      "integrity": "sha512-Weh0slrfWNp5N6UO4m3tXzs2QBFexNsnJf1dq0oaLDBgfkuqUmxdCkurSv5+lWZRkTPLYmd/hQeJpvrhxMCleg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "18.0.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.0.7.tgz",
@@ -8370,10 +8390,9 @@
       }
     },
     "node_modules/bootstrap-italia": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/bootstrap-italia/-/bootstrap-italia-2.8.8.tgz",
-      "integrity": "sha512-2NJqPQRnyO2hb5stRNRXk/kQku42vLBKC8CGgDoekD9Fb8UALfeicpZiL0wqDdT/MxFwbQNz3sDLGjJKcXesXA==",
-      "license": "BSD-3-Clause",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-italia/-/bootstrap-italia-2.12.1.tgz",
+      "integrity": "sha512-D8ZRDs27YkCGC5ocEtHjLJVztTDjPoS2g/Vabl78QZ88ikNMApHPu1s9fQ8GCL1UxnRBfBKbNqvRN+IwRE4GMA==",
       "dependencies": {
         "@popperjs/core": "^2.11.2",
         "@splidejs/splide": "^3.6.12",
@@ -9675,6 +9694,80 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/copyfiles": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
+      "integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.0.5",
+        "minimatch": "^3.0.3",
+        "mkdirp": "^1.0.4",
+        "noms": "0.0.0",
+        "through2": "^2.0.1",
+        "untildify": "^4.0.0",
+        "yargs": "^16.1.0"
+      },
+      "bin": {
+        "copyfiles": "copyfiles",
+        "copyup": "copyfiles"
+      }
+    },
+    "node_modules/copyfiles/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/copyfiles/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/copyfiles/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.37.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
@@ -10810,7 +10903,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -14455,6 +14548,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/jasmine": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-5.4.0.tgz",
+      "integrity": "sha512-E2u4ylX5tgGYvbynImU6EUBKKrSVB1L72FEPjGh4M55ov1VsxR26RA2JU91L9YSPFgcjo4mCLyKn/QXvEYGBkA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^10.2.2",
+        "jasmine-core": "~5.4.0"
+      },
+      "bin": {
+        "jasmine": "bin/jasmine.js"
+      }
+    },
     "node_modules/jasmine-core": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.1.2.tgz",
@@ -14471,6 +14578,13 @@
         "colors": "1.4.0"
       }
     },
+    "node_modules/jasmine/node_modules/jasmine-core": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.4.0.tgz",
+      "integrity": "sha512-T4fio3W++llLd7LGSGsioriDHgWyhoL6YTu4k37uwJLF7DzOzspz7mNxRoM3cQdLWtL/ebazQpIf/yZGJx/gzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/java-properties": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz",
@@ -17085,6 +17199,44 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
+    "node_modules/noms": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
+      "integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "~1.0.31"
+      }
+    },
+    "node_modules/noms/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/noms/node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/noms/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nopt": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
@@ -20860,7 +21012,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "entities": "^4.4.0"
       },
@@ -24996,6 +25148,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
diff --git a/package.json b/package.json
index f4925160..d3decdbb 100644
--- a/package.json
+++ b/package.json
@@ -2,13 +2,14 @@
   "name": "design-angular-kit-bundle",
   "description": "Un toolkit Angular conforme alle linee guida di design per i servizi web della PA",
   "author": "Presidenza del Consiglio dei Ministri",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "BSD-3-Clause",
   "scripts": {
     "ng": "ng",
     "start": "npm run compodoc-compile && concurrently \"npm run nunjucks-compile -- -w --path .\" \"ng serve\"",
     "build": "npm run nunjucks-compile -- --path . && npm run compodoc-compile && ng build --base-href design-angular-kit",
     "build:lib": "ng build design-angular-kit",
+    "postbuild:lib": "tsc -p projects/design-angular-kit/tsconfig.schematics.json && node postbuildSchematics.js",
     "watch:lib": "ng build --configuration development --watch design-angular-kit",
     "test": "ng test design-angular-kit --browsers=ChromeHeadless --no-watch",
     "e2e": "npm run compodoc-compile && npm run nunjucks-compile && ng e2e",
@@ -19,7 +20,8 @@
     "postversion": "npm version $npm_package_version --prefix projects/design-angular-kit/ --no-git-tag-version",
     "documentation-deploy-to-gh-pages": "gh-pages -d dist/design-angular-kit-bundle/browser -m 'chore: update documentation'",
     "compodoc-compile": "compodoc -p projects/design-angular-kit/tsconfig.lib.json -e json -d src/assets",
-    "nunjucks-compile": "nunjucks --options nunjucks.json src/app/**/*.tpl"
+    "nunjucks-compile": "nunjucks --options nunjucks.json src/app/**/*.tpl",
+    "schematics:test": "ts-node --project projects/design-angular-kit/tsconfig.schematics.json node_modules/jasmine/bin/jasmine projects/design-angular-kit/schematics/**/*.spec.ts"
   },
   "browserslist": [
     "extends browserslist-config-design-italia"
@@ -63,6 +65,7 @@
   "dependencies": {
     "@angular-devkit/schematics": "^18.0.7",
     "@angular/animations": "^18.0.6",
+    "@angular/cdk": "^18.2.10",
     "@angular/common": "^18.0.6",
     "@angular/compiler": "^18.0.6",
     "@angular/core": "^18.0.6",
@@ -73,7 +76,7 @@
     "@angular/router": "^18.0.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.8.8",
+    "bootstrap-italia": "^2.12.1",
     "core-js": "^3.37.1",
     "fp-ts": "^2.16.8",
     "io-ts": "^2.2.21",
@@ -106,12 +109,14 @@
     "@typescript-eslint/parser": "^7.15.0",
     "browserslist-config-design-italia": "^1.1.0",
     "concurrently": "^8.2.2",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "gh-pages": "^6.1.1",
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",
+    "jasmine": "^5.4.0",
     "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.3",
diff --git a/postbuildSchematics.js b/postbuildSchematics.js
new file mode 100644
index 00000000..744100e6
--- /dev/null
+++ b/postbuildSchematics.js
@@ -0,0 +1,23 @@
+var copyfiles = require('copyfiles');
+
+var callback = function(e)  {
+    if(e) {
+        console.error(e)
+    }
+};
+
+// COPY collection.json
+
+//copyfiles -f projects/design-angular-kit/schematics/collection.json dist/design-angular-kit/schematics/
+var collectionSourcePath = 'projects/design-angular-kit/schematics/collection.json';
+var collectionDestionationPath = 'dist/design-angular-kit/schematics/';
+var collectionConfig =  {verbose: true, flat: true, up: 3};
+copyfiles([collectionSourcePath, collectionDestionationPath],collectionConfig, callback);
+
+// COPY schematics/*/schema.json
+
+//copyfiles -f projects/design-angular-kit/schematics/*/schema.json dist/design-angular-kit/"
+var schemajsonSourcePath = 'projects/design-angular-kit/schematics/*/schema.json';
+var schemajsonDestionationPath = 'dist/design-angular-kit/';
+var schemajsonConfig =  {verbose: true, flat: false, up: 2};
+copyfiles([schemajsonSourcePath, schemajsonDestionationPath], schemajsonConfig, callback);
\ No newline at end of file
diff --git a/projects/design-angular-kit/package.json b/projects/design-angular-kit/package.json
index d92a8e39..6c2b6443 100644
--- a/projects/design-angular-kit/package.json
+++ b/projects/design-angular-kit/package.json
@@ -27,6 +27,14 @@
       "url": "https://www.net-serv.it/"
     }
   ],
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/schema.json schematics/*/files/** schematics/collection.json ../../dist/my-lib/"
+  },
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
   "dependencies": {
     "tslib": "^2.6.3"
   },
@@ -40,5 +48,9 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "bootstrap-italia": "^2.8.8"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "devDependencies": {
+    "copyfiles": "file:../../node_modules/copyfiles",
+    "typescript": "file:../../node_modules/typescript"
+  }
 }
diff --git a/projects/design-angular-kit/schematics/collection.json b/projects/design-angular-kit/schematics/collection.json
new file mode 100644
index 00000000..2e9239fb
--- /dev/null
+++ b/projects/design-angular-kit/schematics/collection.json
@@ -0,0 +1,19 @@
+{
+    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+      "ng-add": {
+        "description": "Add my Design Angular Kit to the project.",
+        "factory": "./ng-add/index",
+        "schema": "./ng-add/schema.json",
+        "hidden": true,
+        "aliases": ["install"]
+      },
+      "ng-add-setup-project": {
+        "description": "Sets up the specified project after the ng-add dependencies have been installed",
+        "factory": "./ng-add/setup-project",
+        "schema": "./ng-add/schema.json",
+        "hidden": true,
+        "private": true
+      }
+    }
+  }
\ No newline at end of file
diff --git a/projects/design-angular-kit/schematics/ng-add/index.spec.ts b/projects/design-angular-kit/schematics/ng-add/index.spec.ts
new file mode 100644
index 00000000..27738944
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/index.spec.ts
@@ -0,0 +1,45 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import { Schema as SchematicOptions } from './schema';
+
+describe(`ng add design-angular-kit`, () => {
+  const collectionPath = path.join(__dirname, '../collection.json');
+  const runner = new SchematicTestRunner('schematics', collectionPath);
+
+  const defaultOptions: SchematicOptions = {
+    project: 'test-project', // Set your default project name
+  };
+
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    // Simulate an Angular workspace project before running the schematic
+    appTree = await runner.runExternalSchematic('@schematics/angular', 'workspace', {
+      name: 'workspace',
+      version: '6.0.0',
+      newProjectRoot: 'projects',
+    });
+
+    appTree = await runner.runExternalSchematic(
+      '@schematics/angular',
+      'application',
+      {
+        name: defaultOptions.project,
+        standalone: false,
+      },
+      appTree
+    );
+  });
+
+  it('should add DesignAngularKitModule to package.json', async () => {
+    const tree = await runner.runSchematic('ng-add', defaultOptions, appTree);
+
+    // Check if the package.json file exists
+    const packageJsonPath = '/package.json';
+    expect(tree.files).toContain(packageJsonPath);
+
+    // Check if the correct dependency was added
+    const content = tree.readContent(packageJsonPath);
+    expect(content).toContain(`"design-angular-kit"`);
+  });
+});
diff --git a/projects/design-angular-kit/schematics/ng-add/index.ts b/projects/design-angular-kit/schematics/ng-add/index.ts
new file mode 100644
index 00000000..5fbf89a9
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/index.ts
@@ -0,0 +1,36 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask, RunSchematicTask } from '@angular-devkit/schematics/tasks';
+
+import { Schema } from './schema';
+import { addPackageToPackageJson, getPackageVersionFromPackageJson, toSemVerObject } from './utils';
+import { getPackageVersion } from './versions-helper';
+
+const DESIGN_ANGULAR_KIT_PACKAGE_NAME = 'design-angular-kit';
+const NG_LATEST_VERSION = '19.0.0';
+
+export default function (options: Schema): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    // Get the version of `@angular/core`
+    // This tag should be preferred because all Angular dependencies should  have the same version tag if possible.
+    const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
+    const designAngularKitVersionRange = getPackageVersionFromPackageJson(host, DESIGN_ANGULAR_KIT_PACKAGE_NAME);
+    const angularDependencyVersion = ngCoreVersionTag || NG_LATEST_VERSION;
+
+    const { major: angularMajorVersion } = toSemVerObject(angularDependencyVersion);
+
+    const designAngularKitPackageVersion = getPackageVersion({ angularMajorVersion });
+
+    // The CLI inserts `design-angular-kit` into the `package.json` before this schematic runs.
+    // This means that we do not need to insert Design Angular Kit into `package.json` files again.
+    if (designAngularKitVersionRange === null) {
+      addPackageToPackageJson(host, DESIGN_ANGULAR_KIT_PACKAGE_NAME, designAngularKitPackageVersion);
+    }
+
+    addPackageToPackageJson(host, '@angular/cdk', angularDependencyVersion);
+    addPackageToPackageJson(host, '@angular/animations', angularDependencyVersion);
+
+    const installTaskId = context.addTask(new NodePackageInstallTask());
+
+    context.addTask(new RunSchematicTask('ng-add-setup-project', options), [installTaskId]);
+  };
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-animations.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-animations.ts
new file mode 100644
index 00000000..861c5ef5
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-animations.ts
@@ -0,0 +1,7 @@
+import { callRule, noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+export function addAnimations(): Rule {
+  //this dependency should be provided at application level instead of lib level. ref: provideDesignAngularKit
+  //provideAnimationsAsync(),
+  return (host: Tree, context: SchematicContext) => callRule(noop(), host, context);
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-assets.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-assets.ts
new file mode 100644
index 00000000..2ad0f95d
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-assets.ts
@@ -0,0 +1,45 @@
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
+import { Rule, Tree } from '@angular-devkit/schematics';
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const ASSETS_CONFIG = {
+  glob: '**/*',
+  input: './node_modules/bootstrap-italia/',
+  output: '/bootstrap-italia/',
+};
+
+export function addAssets(options: Schema): Rule {
+  return async (host: Tree) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    addAssetsToAngularJson(project);
+    await writeWorkspace(host, workspace);
+  };
+}
+
+function addAssetsToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const assets = targetOptions.assets as JsonArray | undefined;
+  if (!assets) {
+    targetOptions.assets = [ASSETS_CONFIG];
+  } else {
+    const existingAssets = assets.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, input] of existingAssets.entries()) {
+      if (input === ASSETS_CONFIG.input) {
+        return;
+      }
+    }
+    assets.push(ASSETS_CONFIG);
+  }
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-design-angular-kit.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-design-angular-kit.ts
new file mode 100644
index 00000000..505c3791
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-design-angular-kit.ts
@@ -0,0 +1,40 @@
+import { Rule, SchematicContext, Tree, callRule } from '@angular-devkit/schematics';
+import { isStandaloneApp } from '@angular/cdk/schematics';
+import { addRootImport, addRootProvider, readWorkspace } from '@schematics/angular/utility';
+import { getMainFilePath } from '@schematics/angular/utility/standalone/util';
+import { firstValueFrom, map } from 'rxjs';
+import { Schema } from '../../schema';
+import { NoMainFileException, NoProjectException } from './exceptions';
+
+export function addDesignAngularKit(options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await readWorkspace(host);
+    const projectName = options.project || (workspace.extensions.defaultProject as string);
+
+    // 1. getting project by name
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    // 2. getting main file for project
+    const mainFilePath = await getMainFilePath(host, projectName);
+    if (!mainFilePath || !host.read(mainFilePath)) {
+      throw new NoMainFileException(projectName);
+    }
+
+    const isNotStandaloneApp = !isStandaloneApp(host, mainFilePath);
+
+    const rule = isNotStandaloneApp
+      ? addRootImport(projectName, ({ code, external }) => code`${external('DesignAngularKitModule', 'design-angular-kit')}.forRoot()\n`)
+      : addRootProvider(projectName, ({ code, external }) => code`${external('provideDesignAngularKit', 'design-angular-kit')}()`);
+
+    return firstValueFrom(
+      callRule(rule, host, context).pipe(
+        map(() => {
+          return (): Rule => () => {};
+        })
+      )
+    );
+  };
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-http-client.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-http-client.ts
new file mode 100644
index 00000000..f0de5cae
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-http-client.ts
@@ -0,0 +1,7 @@
+import { Rule, SchematicContext, Tree, callRule, noop } from '@angular-devkit/schematics';
+
+export function addHttpClient(): Rule {
+  //this dependency should be provided at application level instead of lib level. ref: provideDesignAngularKit
+  //provideHttpClient(),
+  return (host: Tree, context: SchematicContext) => callRule(noop(), host, context);
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-import-to-style-file.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-import-to-style-file.ts
new file mode 100644
index 00000000..fbbfc71a
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-import-to-style-file.ts
@@ -0,0 +1,120 @@
+import { JsonArray, JsonObject, normalize, workspaces } from '@angular-devkit/core';
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+import * as path from 'path';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const BOOTSTRAP_ITALIA_CSS_FILEPATH = 'node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css';
+const SUPPORTED_BOOTSTRAP_ITALIA_STYLE_MAP: Record<string, string> = {
+  '.sass': `
+  /* Importazione libreria SCSS di bootstrap-italia */
+  @import 'bootstrap-italia/scss/bootstrap-italia'
+  `,
+  '.scss': `
+  /* Importazione libreria SCSS di bootstrap-italia */
+  @import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';
+  `,
+};
+
+/**
+ * if supported
+ *    add to styles.scss or to style.sass
+ * else
+ *  add css to assets in angular.json
+ * @param options
+ * @returns Rule
+ */
+export function addImportToStyleFile(options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    const styleFilePath = getProjectStyleFile(project as any) || '';
+    const styleFileExtension = path.extname(styleFilePath);
+    const styleFilePatch = SUPPORTED_BOOTSTRAP_ITALIA_STYLE_MAP[styleFileExtension];
+
+    // found supported styles
+    if (styleFilePatch) {
+      return addBootstrapItaliaToStylesFile(styleFilePath, styleFilePatch);
+    } else {
+      // found some styles, but unsupported
+      if (styleFileExtension !== '.css' && styleFileExtension !== '') {
+        context.logger.warn('messages.unsupportedStyles(styleFilePath)');
+      }
+
+      // just patching 'angular.json'
+      addBootstrapItaliaToAngularJson(project as any);
+      await writeWorkspace(host, workspace);
+    }
+  };
+}
+
+function addBootstrapItaliaToStylesFile(styleFilePath: string, styleFilePatch: string): Rule {
+  return async (host: Tree) => {
+    const styleContent = host.read(styleFilePath)!.toString('utf-8');
+
+    const recorder = host.beginUpdate(styleFilePath);
+    recorder.insertRight(styleContent.length, styleFilePatch);
+
+    host.commitUpdate(recorder);
+  };
+}
+
+function addBootstrapItaliaToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const styles = targetOptions.styles as JsonArray | undefined;
+  if (!styles) {
+    targetOptions.styles = [BOOTSTRAP_ITALIA_CSS_FILEPATH];
+  } else {
+    const existingStyles = styles.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, stylePath] of existingStyles.entries()) {
+      if (stylePath === BOOTSTRAP_ITALIA_CSS_FILEPATH) {
+        return;
+      }
+    }
+    styles.unshift(BOOTSTRAP_ITALIA_CSS_FILEPATH);
+  }
+}
+
+// Regular expression that matches all possible Angular CLI default style files
+const defaultStyleFileRegex = /styles\.(c|le|sc|sa)ss/;
+
+// Regular expression that matches all files that have a proper stylesheet extension
+const validStyleFileRegex = /\.(c|le|sc|sa)ss/;
+
+function getProjectStyleFile(project: workspaces.ProjectDefinition, extension?: string): string | null {
+  const buildOptions = getProjectTargetOptions(project, 'build');
+
+  if (buildOptions.styles && Array.isArray(buildOptions.styles) && buildOptions.styles.length) {
+    const styles = buildOptions.styles.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    // Look for the default style file that is generated for new projects by the Angular CLI. This
+    // default style file is usually called `styles.ext` unless it has been changed explicitly.
+    const defaultMainStylePath = styles.find(file => (extension ? file === `styles.${extension}` : defaultStyleFileRegex.test(file)));
+
+    if (defaultMainStylePath) {
+      return normalize(defaultMainStylePath);
+    }
+
+    // If no default style file could be found, use the first style file that matches the given
+    // extension. If no extension specified explicitly, we look for any file with a valid style
+    // file extension.
+    const fallbackStylePath = styles.find(file => (extension ? file.endsWith(`.${extension}`) : validStyleFileRegex.test(file)));
+
+    if (fallbackStylePath) {
+      return normalize(fallbackStylePath);
+    }
+  }
+
+  return null;
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-localisation.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-localisation.ts
new file mode 100644
index 00000000..8aed28eb
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/add-localisation.ts
@@ -0,0 +1,45 @@
+import { JsonArray, JsonObject, workspaces } from '@angular-devkit/core';
+import { Rule, Tree } from '@angular-devkit/schematics';
+import { readWorkspace, writeWorkspace } from '@schematics/angular/utility';
+
+import { Schema } from '../../schema';
+import { getProjectTargetOptions } from './angular-json-helper';
+import { NoProjectException } from './exceptions';
+
+const LOCALISATION_CONFIG = {
+  glob: '**/*',
+  input: './node_modules/design-angular-kit/assets/i18n',
+  output: '/bootstrap-italia/i18n/',
+};
+
+export function addLocalisation(options: Schema): Rule {
+  return async (host: Tree) => {
+    const workspace = await readWorkspace(host);
+
+    const projectName = options.project || workspace.extensions.defaultProject!.toString();
+    const project = workspace.projects.get(projectName);
+    if (!project) {
+      throw new NoProjectException(projectName);
+    }
+
+    addLocalisationToAngularJson(project);
+    await writeWorkspace(host, workspace);
+  };
+}
+
+function addLocalisationToAngularJson(project: workspaces.ProjectDefinition) {
+  const targetOptions = getProjectTargetOptions(project, 'build');
+  const assets = targetOptions.assets as JsonArray | undefined;
+  if (!assets) {
+    targetOptions.assets = [LOCALISATION_CONFIG];
+  } else {
+    const existingAssets = assets.map(s => (typeof s === 'string' ? s : (s as JsonObject)!['input'])) as Array<string>;
+
+    for (const [, input] of existingAssets.entries()) {
+      if (input === LOCALISATION_CONFIG.input) {
+        return;
+      }
+    }
+    assets.push(LOCALISATION_CONFIG);
+  }
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/angular-json-helper.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/angular-json-helper.ts
new file mode 100644
index 00000000..ad042cf8
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/angular-json-helper.ts
@@ -0,0 +1,11 @@
+import { workspaces } from '@angular-devkit/core';
+import { SchematicsException } from '@angular-devkit/schematics';
+
+export function getProjectTargetOptions(project: workspaces.ProjectDefinition, buildTarget: string) {
+  const buildTargetObject = project.targets.get(buildTarget);
+  if (buildTargetObject && buildTargetObject.options) {
+    return buildTargetObject.options;
+  }
+
+  throw new SchematicsException(`Cannot determine project target configuration for: ${buildTarget}.`);
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/exceptions.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/exceptions.ts
new file mode 100644
index 00000000..40940452
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/exceptions.ts
@@ -0,0 +1,13 @@
+import { SchematicsException } from '@angular-devkit/schematics';
+
+export class NoProjectException extends SchematicsException {
+  constructor(project: string) {
+    super(`Unable to find project '${project}' in the workspace`);
+  }
+}
+
+export class NoMainFileException extends SchematicsException {
+  constructor(project: string) {
+    super(`Unable to find 'build.options.main' file path for project "${project}`);
+  }
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/rules/setup-project/index.ts b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/index.ts
new file mode 100644
index 00000000..d9ba7d49
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/rules/setup-project/index.ts
@@ -0,0 +1,6 @@
+export * from './add-animations';
+export * from './add-assets';
+export * from './add-design-angular-kit';
+export * from './add-http-client';
+export * from './add-import-to-style-file';
+export * from './add-localisation';
diff --git a/projects/design-angular-kit/schematics/ng-add/schema.json b/projects/design-angular-kit/schematics/ng-add/schema.json
new file mode 100644
index 00000000..678a440a
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/schema.json
@@ -0,0 +1,16 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "design-angular-kit-ng-add",
+    "title": "Design Angular Hit ng-add schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project.",
+            "$default": {
+              "$source": "projectName"
+            }
+        }
+    },
+    "required": []
+}
\ No newline at end of file
diff --git a/projects/design-angular-kit/schematics/ng-add/schema.ts b/projects/design-angular-kit/schematics/ng-add/schema.ts
new file mode 100644
index 00000000..e7654820
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/schema.ts
@@ -0,0 +1,3 @@
+export interface Schema {
+  project: string;
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/setup-project.spec.ts b/projects/design-angular-kit/schematics/ng-add/setup-project.spec.ts
new file mode 100644
index 00000000..780cc6ad
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/setup-project.spec.ts
@@ -0,0 +1,166 @@
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import { Schema } from './schema';
+
+const createApp = async (
+  runner: SchematicTestRunner,
+  options: Schema,
+  { standalone, style }: { standalone: boolean; style: 'scss' | 'css' | 'sass' }
+) => {
+  let tree = await runner.runExternalSchematic('@schematics/angular', 'workspace', {
+    name: 'workspace',
+    version: '18.0.0',
+    newProjectRoot: 'projects',
+  });
+
+  tree = await runner.runExternalSchematic(
+    '@schematics/angular',
+    'application',
+    {
+      name: options.project,
+      standalone,
+      style,
+    },
+    tree
+  );
+
+  return { tree };
+};
+
+describe(`ng add design-angular-kit | setup-project - library providing`, () => {
+  const collectionPath = path.join(__dirname, '../collection.json');
+  const runner = new SchematicTestRunner('schematics', collectionPath);
+
+  const defaultOptions: Schema = {
+    project: 'test-project', // Set your default project name
+  };
+
+  it('should add DesignAngularKitModule to the root module - NgModule app', async () => {
+    const { tree: appTree } = await createApp(runner, defaultOptions, { standalone: false, style: 'scss' });
+    const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+    // Check if the app.module.ts file exists
+    const modulePath = '/projects/test-project/src/app/app.module.ts';
+    expect(tree.files).toContain(modulePath);
+
+    // Check if the correct import statement was added
+    const content = tree.readContent(modulePath);
+    expect(content).toContain(`import { DesignAngularKitModule } from 'design-angular-kit';`);
+    expect(content).toContain(`DesignAngularKitModule.forRoot()`);
+  });
+
+  it('should add provideDesignAngularKit() to the app config - Standalone app', async () => {
+    const { tree: appTree } = await createApp(runner, defaultOptions, { standalone: true, style: 'scss' });
+    const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+    // Check if the app.module.ts file exists
+    const appConfigPath = '/projects/test-project/src/app/app.config.ts';
+    expect(tree.files).toContain(appConfigPath);
+
+    // Check if the correct import statement was added
+    const content = tree.readContent(appConfigPath);
+    expect(content).toContain(`import { provideDesignAngularKit } from 'design-angular-kit';`);
+    expect(content).toContain(`provideDesignAngularKit()`);
+  });
+});
+
+for (const standalone of [true, false]) {
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - styles`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add .scss import to project style file', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'scss' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the styles.scss file exists
+      const styleFilePath = '/projects/test-project/src/styles.scss';
+      expect(tree.files).toContain(styleFilePath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(styleFilePath);
+      expect(content).toContain(`@import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';`);
+    });
+
+    it('should add .sass import to project style file', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'sass' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the styles.sass file exists
+      const styleFilePath = '/projects/test-project/src/styles.sass';
+      expect(tree.files).toContain(styleFilePath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(styleFilePath);
+      expect(content).toContain(`@import 'bootstrap-italia/scss/bootstrap-italia'`);
+    });
+
+    it('should add .css import to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      expect(content).toContain(`node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css`);
+    });
+  });
+
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - assets`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add bootstrap italia assets to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      //"./node_modules/bootstrap-italia/"
+      expect(content).toContain(`./node_modules/bootstrap-italia/`);
+      const angularJson = JSON.parse(content);
+      const assetsConfig = angularJson.projects[defaultOptions.project]?.architect?.build?.options?.assets?.find(
+        (item: { input: string }) => item.input === `./node_modules/bootstrap-italia/`
+      );
+      expect(assetsConfig).toBeDefined(assetsConfig);
+    });
+  });
+
+  describe(`ng add design-angular-kit | setup-project for ${standalone ? 'standalone' : 'NgModule'} app - localisation`, () => {
+    const collectionPath = path.join(__dirname, '../collection.json');
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+
+    const defaultOptions: Schema = {
+      project: 'test-project', // Set your default project name
+    };
+
+    it('should add bootstrap italia localisation to angular.json', async () => {
+      const { tree: appTree } = await createApp(runner, defaultOptions, { standalone, style: 'css' });
+      const tree = await runner.runSchematic('ng-add-setup-project', defaultOptions, appTree);
+
+      // Check if the angular.json file exists
+      const angularJsonPath = '/angular.json';
+      expect(tree.files).toContain(angularJsonPath);
+      // Check if the correct import statement was added
+      const content = tree.readContent(angularJsonPath);
+      //"./node_modules/bootstrap-italia/"
+      expect(content).toContain(`/node_modules/design-angular-kit/assets/i18n`);
+      const angularJson = JSON.parse(content);
+      const assetsConfig = angularJson.projects[defaultOptions.project]?.architect?.build?.options?.assets?.find(
+        (item: { input: string }) => item.input === `./node_modules/design-angular-kit/assets/i18n`
+      );
+      expect(assetsConfig).toBeDefined(assetsConfig);
+    });
+  });
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/setup-project.ts b/projects/design-angular-kit/schematics/ng-add/setup-project.ts
new file mode 100644
index 00000000..554f6b8f
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/setup-project.ts
@@ -0,0 +1,31 @@
+import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+import { getProjectFromWorkspace } from '@angular/cdk/schematics';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+import { addAnimations, addAssets, addDesignAngularKit, addHttpClient, addImportToStyleFile, addLocalisation } from './rules/setup-project';
+import { Schema } from './schema';
+
+import { ProjectType } from '@schematics/angular/utility/workspace-models';
+
+export default function (options: Schema): Rule {
+  return async (host: Tree, context: SchematicContext) => {
+    const workspace = await getWorkspace(host);
+    const project = getProjectFromWorkspace(workspace, options.project);
+    const isAProject = project.extensions['projectType'] === ProjectType.Application;
+
+    if (isAProject) {
+      return chain([
+        addAnimations(),
+        addHttpClient(),
+        addDesignAngularKit(options),
+        addImportToStyleFile(options),
+        addAssets(options),
+        addLocalisation(options),
+      ]);
+    }
+    context.logger.warn(
+      `Design Angular Kit has been set in your workspace. No additional setup required.\nIf you intend to run the schematics on a specific project, please use -- project option `
+    );
+    return;
+  };
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/utils.ts b/projects/design-angular-kit/schematics/ng-add/utils.ts
new file mode 100644
index 00000000..3e54c0b6
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/utils.ts
@@ -0,0 +1,71 @@
+import { Tree } from '@angular-devkit/schematics';
+
+interface PackageJson {
+  dependencies: Record<string, string>;
+}
+
+interface SemVerObject {
+  semVer?: string;
+  major?: string;
+  minor?: string;
+  patch?: string;
+  prerelease?: string;
+  buildmetadata?: string;
+}
+
+const SEMVER_WITH_PREFIX_REGEX =
+  /^[\^~]?(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9A-Za-z-][0-9A-Za-z-]*)(?:\.(?:0|[1-9A-Za-z-][0-9A-Za-z-]*))*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?$/;
+
+function sortObjectByKeys(obj: Record<string, string>) {
+  return Object.keys(obj)
+    .sort()
+    .reduce(
+      (result, key) => {
+        result[key] = obj[key];
+        return result;
+      },
+      {} as Record<string, string>
+    );
+}
+
+/** Get a SemVerObject given a semver string */
+export function toSemVerObject(versionString: string) {
+  const [semVer, major, minor, patch, prerelease, buildmetadata] = versionString.match(SEMVER_WITH_PREFIX_REGEX) ?? [];
+  return { semVer, major, minor, patch, prerelease, buildmetadata } satisfies SemVerObject;
+}
+
+/** Adds a package to the package.json in the given host tree. */
+export function addPackageToPackageJson(host: Tree, pkg: string, version: string): Tree {
+  if (host.exists('package.json')) {
+    const sourceText = host.read('package.json')!.toString('utf-8');
+    const json = JSON.parse(sourceText) as PackageJson;
+
+    if (!json.dependencies) {
+      json.dependencies = {};
+    }
+
+    if (!json.dependencies[pkg]) {
+      json.dependencies[pkg] = version;
+      json.dependencies = sortObjectByKeys(json.dependencies);
+    }
+
+    host.overwrite('package.json', JSON.stringify(json, null, 2));
+  }
+
+  return host;
+}
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8')) as PackageJson;
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}
diff --git a/projects/design-angular-kit/schematics/ng-add/versions-helper.ts b/projects/design-angular-kit/schematics/ng-add/versions-helper.ts
new file mode 100644
index 00000000..fd3fb268
--- /dev/null
+++ b/projects/design-angular-kit/schematics/ng-add/versions-helper.ts
@@ -0,0 +1,41 @@
+const ANGULAR_VERSIONS = {
+  v17: '17',
+  v18: '18',
+};
+
+const KIT_VERSION_1_0_0 = '1.0.0';
+const KIT_VERSION_1_1_0 = '1.1.0';
+const DEFAULT = 'DEFAULT';
+const LATEST = 'LATEST';
+
+const versionsMap: Record<string, string> = {
+  [DEFAULT]: KIT_VERSION_1_0_0,
+  [ANGULAR_VERSIONS.v17]: KIT_VERSION_1_0_0,
+  [ANGULAR_VERSIONS.v18]: KIT_VERSION_1_1_0,
+  [LATEST]: KIT_VERSION_1_1_0,
+};
+
+// Get Design Angular Kit package version given Angular major version
+export function getPackageVersion({ angularMajorVersion }: { angularMajorVersion: string }) {
+  if (isNaN(+angularMajorVersion)) {
+    throw new Error('Major version is not a number');
+  }
+
+  let version = versionsMap[DEFAULT];
+
+  switch (angularMajorVersion) {
+    case ANGULAR_VERSIONS.v17:
+      version = versionsMap[ANGULAR_VERSIONS.v17];
+      break;
+    case ANGULAR_VERSIONS.v18:
+      version = versionsMap[ANGULAR_VERSIONS.v18];
+      break;
+    default: {
+      if (Number(angularMajorVersion) > Number(ANGULAR_VERSIONS.v18)) {
+        version = versionsMap[LATEST];
+      }
+    }
+  }
+
+  return version;
+}
diff --git a/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.html b/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.html
index 16b66b5c..e59a9909 100644
--- a/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.html
@@ -1,5 +1,5 @@
 @if (active) {
-  <div class="dimmer" @fade [ngClass]="[color]">
+  <div class="dimmer" @fade [ngClass]="[color, 'show']">
     <div class="dimmer-inner">
       <ng-content></ng-content>
     </div>
diff --git a/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.ts b/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.ts
index d6f5f60a..84dbc20f 100644
--- a/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/dimmer/dimmer.component.ts
@@ -11,7 +11,7 @@ export type DimmerColor = '' | 'dimmer-primary';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('fade', [
-      transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.92 }))]),
+      transition(':enter', [style({ opacity: 0 }), animate('150ms', style({ opacity: 0.9 }))]),
       transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
     ]),
   ],
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
index cb8c6f8e..1cea9560 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
@@ -2,10 +2,10 @@
   @if (pinType === 'now') {
     <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
   }
-  <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+  <h3 class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
     <div class="pin-icon">
       @if (pinIcon) {
-        <it-icon [name]="pinIcon"></it-icon>
+        <it-icon [name]="pinIcon" [title]="pinIconTitle" [attr.role]="pinIconTitle ? 'img' : null"></it-icon>
       } @else {
         <it-icon name="code-circle"></it-icon>
       }
@@ -13,21 +13,23 @@
     <div class="pin-text">
       <span>{{ pinText }}</span>
     </div>
-  </div>
+  </h3>
   <div class="card-wrapper">
     <div class="card">
       <div class="card-body">
         @if ((categoryTitle && categoryLink) || eventDate) {
           <div class="category-top">
             @if (categoryTitle) {
+              <span class="visually-hidden">{{ categoryLabel }}</span>
               <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
             }
             @if (eventDate) {
+              <span class="visually-hidden">{{ dateLabel }}</span>
               <span class="data">{{ eventDate | date: dateFormat }}</span>
             }
           </div>
         }
-        <h5 class="card-title">{{ title }}</h5>
+        <h4 class="card-title">{{ title }}</h4>
         <p class="card-text">{{ text }}</p>
         @if (signature) {
           <span class="card-signature">{{ signature }}</span>
diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
index 54fae9a2..862204fa 100644
--- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
+++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts
@@ -62,6 +62,22 @@ export class ItTimelineItemComponent extends ItAbstractComponent {
    */
   @Input() pinIcon: IconName | undefined = 'code-circle';
 
+  /**
+   * Timeline element PIN icon
+   * @default code-circle
+   */
+  @Input() pinIconTitle: string | undefined;
+
+  /**
+   * Timeline element category label
+   */
+  @Input() categoryLabel: string | undefined = 'Categoria evento: ';
+
+  /**
+   * Timeline element date label
+   */
+  @Input() dateLabel: string | undefined = 'Data evento: ';
+
   /**
    * Timeline element category title
    */
diff --git a/projects/design-angular-kit/src/lib/components/form/form.module.ts b/projects/design-angular-kit/src/lib/components/form/form.module.ts
index ba56fcf7..ff00adc9 100644
--- a/projects/design-angular-kit/src/lib/components/form/form.module.ts
+++ b/projects/design-angular-kit/src/lib/components/form/form.module.ts
@@ -10,6 +10,7 @@ import { ItTextareaComponent } from './textarea/textarea.component';
 import { ItUploadDragDropComponent } from './upload-drag-drop/upload-drag-drop.component';
 import { ItUploadFileListComponent } from './upload-file-list/upload-file-list.component';
 import { ItAutocompleteComponent } from './autocomplete/autocomplete.component';
+import { ItTransferComponent } from './transfer/transfer.component';
 
 const formComponents = [
   ItAutocompleteComponent,
@@ -21,6 +22,7 @@ const formComponents = [
   ItRatingComponent,
   ItSelectComponent,
   ItTextareaComponent,
+  ItTransferComponent,
   ItUploadDragDropComponent,
   ItUploadFileListComponent,
 ];
diff --git a/projects/design-angular-kit/src/lib/components/form/rating/rating.component.html b/projects/design-angular-kit/src/lib/components/form/rating/rating.component.html
index 2614cd5e..acd9de06 100644
--- a/projects/design-angular-kit/src/lib/components/form/rating/rating.component.html
+++ b/projects/design-angular-kit/src/lib/components/form/rating/rating.component.html
@@ -15,7 +15,7 @@
       [attr.aria-hidden]="control.disabled"
       [formControl]="control" />
     <label class="full" [for]="id + '-' + starValue">
-      <it-icon name="star-full" size="sm"></it-icon>
+      <it-icon name="star-full" size="sm" aria-hidden="true"></it-icon>
       <span class="visually-hidden">
         {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}
       </span>
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.reducers.ts b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.reducers.ts
new file mode 100644
index 00000000..644e47e0
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.reducers.ts
@@ -0,0 +1,242 @@
+import { TransferItem, TransferItemSelection } from '../transfer.model';
+import { SelectionState, State } from './transfer.state';
+
+//#region private utility functions
+const generateSelectAll = <T>(checked: boolean, items: TransferItem<T>[]) => {
+  const selected = new Set<TransferItem<T>>();
+  if (checked) {
+    items.forEach(item => selected.add(item));
+  }
+
+  return selected;
+};
+
+const updateSelected = <T>(set: Set<TransferItem<T>>, item: TransferItem<T>) => {
+  if (set.has(item)) {
+    set.delete(item);
+  } else {
+    set.add(item);
+  }
+
+  return set;
+};
+//#endregion
+
+//#region reducers
+const init = <T>(state: State<T>, { source, target }: SelectionState<T>) => ({
+  ...state,
+  initialItems: {
+    source: [...source],
+    target: [...target],
+  },
+  current: {
+    source: [...source],
+    target: [...target],
+  },
+});
+
+const transfer = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      ...state.current,
+      source: state.current.source.filter(i => !state.selections.source.has(i)),
+      target: Array.from(new Set([...state.current.target, ...Array.from(state.selections.source)] as TransferItemSelection<T>)),
+    },
+    selections: {
+      ...state.selections,
+      source: new Set<TransferItem<T>>(),
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      transfer: false,
+      reset: true,
+    },
+  } satisfies State<T>;
+};
+
+const backtransfer = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      ...state.current,
+      target: state.current.target.filter(i => !state.selections.target.has(i)),
+      source: Array.from(new Set([...state.current.source, ...Array.from(state.selections.target)] as TransferItemSelection<T>)),
+    },
+    selections: {
+      ...state.selections,
+      target: new Set<TransferItem<T>>(),
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      backtransfer: false,
+      reset: true,
+    },
+  } satisfies State<T>;
+};
+
+const reset = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      source: [...state.initialItems.source],
+      target: [...state.initialItems.target],
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      reset: false,
+    },
+  } satisfies State<T>;
+};
+
+const selectAllSource = <T>(state: State<T>, { checked }: { checked: boolean }) => {
+  const items = state.current.source;
+  const selected = generateSelectAll(checked, items);
+  const transfer = Boolean(selected.size);
+
+  return {
+    ...state,
+    selections: {
+      ...state.selections,
+      source: selected,
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      transfer,
+    },
+  } satisfies State<T>;
+};
+
+const selectAllTarget = <T>(state: State<T>, { checked }: { checked: boolean }) => {
+  const items = state.current.target;
+  const selected = generateSelectAll(checked, items);
+  const backtransfer = Boolean(selected.size);
+
+  return {
+    ...state,
+    selections: {
+      ...state.selections,
+      target: selected,
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      backtransfer,
+    },
+  } satisfies State<T>;
+};
+
+const selectionItemSource = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
+  const selected = updateSelected(previousState.selections.source, item);
+  const selectedItems = Array.from(selected);
+  const transfer = Boolean(selectedItems.length);
+  const source = new Set([...selectedItems]);
+
+  const state = {
+    ...previousState,
+    selections: {
+      ...previousState.selections,
+      source,
+    },
+    operationsEnabled: {
+      ...previousState.operationsEnabled,
+      transfer,
+    },
+  } satisfies State<T>;
+
+  return state;
+};
+
+const selectionItemTarget = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
+  const selected = updateSelected(previousState.selections.target, item);
+  const selectedItems = Array.from(selected);
+  const backtransfer = Boolean(selectedItems.length);
+  const target = new Set([...selectedItems]);
+
+  const state = {
+    ...previousState,
+    selections: {
+      ...previousState.selections,
+      target,
+    },
+    operationsEnabled: {
+      ...previousState.operationsEnabled,
+      backtransfer,
+    },
+  } satisfies State<T>;
+
+  return state;
+};
+//#endregion reducers
+
+//#region public reducers
+const initialStateFn = <T>() => ({
+  initialItems: {
+    source: [],
+    target: [],
+  },
+  current: {
+    source: [],
+    target: [],
+  },
+  selections: {
+    source: new Set<TransferItem<T>>(),
+    target: new Set<TransferItem<T>>(),
+  },
+  operationsEnabled: {
+    transfer: false,
+    backtransfer: false,
+    reset: false,
+  },
+});
+const initFn =
+  <T>(payload: SelectionState<T>) =>
+  (state: State<T>) =>
+    init(state, payload);
+
+const transferFn =
+  <T>() =>
+  (state: State<T>) =>
+    transfer(state);
+
+const backtransferFn =
+  <T>() =>
+  (state: State<T>) =>
+    backtransfer(state);
+
+const resetFn =
+  <T>() =>
+  (state: State<T>) =>
+    reset(state);
+
+const selectAllSourceFn =
+  <T>({ checked }: { checked: boolean }) =>
+  (state: State<T>) =>
+    selectAllSource(state, { checked }) as State<T>;
+
+const selectAllTargetFn =
+  <T>({ checked }: { checked: boolean }) =>
+  (state: State<T>) =>
+    selectAllTarget(state, { checked }) as State<T>;
+
+const selectionItemSourceFn =
+  <T>({ item }: { item: TransferItem<T> }) =>
+  (state: State<T>) =>
+    selectionItemSource(state, { item }) as State<T>;
+
+const selectionItemTargetFn =
+  <T>({ item }: { item: TransferItem<T> }) =>
+  (state: State<T>) =>
+    selectionItemTarget(state, { item }) as State<T>;
+//#endregion
+
+export default {
+  initialStateFn,
+  initFn,
+  transferFn,
+  backtransferFn,
+  resetFn,
+  selectAllSourceFn,
+  selectAllTargetFn,
+  selectionItemSourceFn,
+  selectionItemTargetFn,
+};
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.state.ts b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.state.ts
new file mode 100644
index 00000000..5c6962ec
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.state.ts
@@ -0,0 +1,20 @@
+import { TransferItem } from '../transfer.model';
+
+export interface SelectionState<T> {
+  source: Array<TransferItem<T>>;
+  target: Array<TransferItem<T>>;
+}
+
+export interface State<T> {
+  initialItems: SelectionState<T>;
+  current: SelectionState<T>;
+  selections: {
+    source: Set<TransferItem<T>>;
+    target: Set<TransferItem<T>>;
+  };
+  operationsEnabled: {
+    transfer: boolean;
+    backtransfer: boolean;
+    reset: boolean;
+  };
+}
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.store.ts b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.store.ts
new file mode 100644
index 00000000..81e3cca4
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/store/transfer.store.ts
@@ -0,0 +1,88 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, distinctUntilChanged, map, of } from 'rxjs';
+import { SourceType, TransferItem } from '../transfer.model';
+import reducers from './transfer.reducers';
+import { SelectionState, State } from './transfer.state';
+
+@Injectable()
+export class TransferStore<T> {
+  private readonly _state = new BehaviorSubject<State<T>>(reducers.initialStateFn());
+
+  private readonly sourceItems = this._state.pipe(map(state => state.current.source));
+
+  private readonly targetItems = this._state.pipe(map(state => state.current.target));
+
+  readonly valueChanged = this._state.pipe(
+    map(state => state.current.target),
+    distinctUntilChanged()
+  );
+
+  readonly selectItems = (sourceType: SourceType) => {
+    if (sourceType === 'source') {
+      return this.sourceItems;
+    }
+
+    if (sourceType === 'target') {
+      return this.targetItems;
+    }
+
+    return of<TransferItem<T>[]>([]);
+  };
+
+  readonly selectSelectedItems = (sourceType: SourceType) => {
+    if (sourceType === 'source') {
+      return this._state.pipe(map(state => state.selections.source));
+    }
+
+    if (sourceType === 'target') {
+      return this._state.pipe(map(state => state.selections.target));
+    }
+
+    return of(new Set<TransferItem<T>>());
+  };
+
+  readonly transferEnabled = this._state.pipe(map(state => state.operationsEnabled.transfer));
+
+  readonly backtransferEnabled = this._state.pipe(map(state => state.operationsEnabled.backtransfer));
+
+  readonly resetEnabled = this._state.pipe(map(state => state.operationsEnabled.reset));
+
+  init({ source, target }: SelectionState<T>) {
+    this.updateState(reducers.initFn({ source, target }));
+  }
+
+  transfer() {
+    this.updateState(reducers.transferFn());
+  }
+  backtransfer() {
+    this.updateState(reducers.backtransferFn());
+  }
+
+  reset() {
+    this.updateState(reducers.resetFn());
+  }
+
+  checkboxSelection(item: TransferItem<T>, sourceType: SourceType) {
+    if (sourceType === 'source') {
+      this.updateState(reducers.selectionItemSourceFn({ item }));
+    }
+
+    if (sourceType === 'target') {
+      this.updateState(reducers.selectionItemTargetFn({ item }));
+    }
+  }
+
+  selectAllSelection(checked: boolean, sourceType: SourceType) {
+    if (sourceType === 'source') {
+      this.updateState(reducers.selectAllSourceFn({ checked }));
+    }
+
+    if (sourceType === 'target') {
+      this.updateState(reducers.selectAllTargetFn({ checked }));
+    }
+  }
+
+  private updateState(reducerFn: (state: State<T>) => State<T>) {
+    this._state.next(reducerFn(this._state.value));
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html
new file mode 100644
index 00000000..fdbf34b7
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html
@@ -0,0 +1,42 @@
+<div class="it-transfer-wrapper source">
+  <div class="transfer-header">
+    <div class="form-check" aria-describedby="">
+      <input
+        #selectAllCheckbox
+        type="checkbox"
+        id="{{ instanceId }}checkbox{{ title }}"
+        [disabled]="selectAllDisabled | async"
+        (click)="checkboxSelectAllHandler($event)" />
+      <label for="{{ instanceId }}checkbox{{ title }}">
+        <span>
+          @if (numberOfItems$ | async; as numberOfItems) {
+            <span class="num"> {{ numberOfItems.length }} </span>
+            <span> {{ numberOfItems.length > 1 ? 'ITEMS' : 'ITEM' }} </span>
+          }
+        </span>
+        <span class="descr">{{ title | titlecase }}</span>
+      </label>
+    </div>
+    <!-- form check -->
+  </div>
+  <!-- transfer-header -->
+  <div class="transfer-scroll">
+    <div class="transfer-group">
+      @for (item of items$ | async; track item.value) {
+        <div class="form-check" aria-describedby="">
+          <input
+            type="checkbox"
+            id="{{ instanceId }}-{{ item.value }}"
+            [checked]="item.selected"
+            (click)="checkboxSelectionHandler(item)" />
+          <label for="{{ instanceId }}-{{ item.value }}">
+            <span>
+              <span>{{ item.text }}</span>
+            </span>
+          </label>
+        </div>
+      }
+    </div>
+  </div>
+</div>
+<!-- it-transfer-wrapper -->
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts
new file mode 100644
index 00000000..a8953f07
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HostAttributeToken } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { TransferStore } from '../store/transfer.store';
+import { ItTransferListComponent } from './transfer-list.component';
+
+describe('ItTransferListComponent', <T>() => {
+  let component: ItTransferListComponent<T>;
+  let fixture: ComponentFixture<ItTransferListComponent<T>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItTransferListComponent],
+      providers: [
+        TransferStore,
+        TranslateService,
+        { provide: new HostAttributeToken('title'), useValue: 'title' },
+        { provide: new HostAttributeToken('sourceType'), useValue: 'source' },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTransferListComponent<T>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts
new file mode 100644
index 00000000..3859a446
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts
@@ -0,0 +1,93 @@
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, inject, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { combineLatest, distinctUntilChanged, map, shareReplay, skip, startWith, tap } from 'rxjs';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { TransferStore } from '../store/transfer.store';
+
+import { SourceType, TransferItem } from '../transfer.model';
+
+interface SelectableTransferItem<T> extends TransferItem<T> {
+  selected: boolean;
+}
+
+@Component({
+  selector: 'it-transfer-list',
+  standalone: true,
+  imports: [AsyncPipe, TitleCasePipe],
+  templateUrl: './transfer-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItTransferListComponent<T> extends ItAbstractComponent {
+  /**
+   * Widget title
+   */
+  readonly title = inject(new HostAttributeToken('title'), { optional: true });
+
+  readonly sourceType = inject(new HostAttributeToken('sourceType'), { optional: true }) as SourceType;
+
+  private readonly items = this.store.selectItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+  private readonly selected = this.store.selectSelectedItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+
+  readonly numberOfItems$ = this.items.pipe(
+    map(items => ({ length: items.length })),
+    startWith({ length: 0 })
+  );
+  readonly selectAllDisabled = this.items.pipe(map(items => items.length === 0));
+  /**
+   * Items of the list
+   * @default []
+   */
+  readonly items$ = combineLatest([this.items, this.selected]).pipe(
+    map(([items, selected]) =>
+      items.map(item => {
+        (item as SelectableTransferItem<T>).selected = selected.has(item);
+        return item as SelectableTransferItem<T>;
+      })
+    )
+  );
+
+  @ViewChild('selectAllCheckbox')
+  selectAllCheckboxRef!: ElementRef<HTMLInputElement>;
+
+  readonly instanceId = this.getInstanceId();
+
+  constructor(private readonly store: TransferStore<T>) {
+    super();
+    this.onItemsUpdate();
+  }
+  /**
+   * Checkbox selection click handler
+   */
+  checkboxSelectionHandler(item: TransferItem<T>) {
+    this.store.checkboxSelection(item, this.sourceType);
+  }
+  /**
+   * Checkbox select all selection handler
+   */
+  checkboxSelectAllHandler(event: Event) {
+    const checked = ((event as PointerEvent).target as HTMLInputElement).checked;
+    this.store.selectAllSelection(checked, this.sourceType);
+  }
+
+  /**
+   * Items update subscription
+   */
+  private onItemsUpdate() {
+    this.items
+      .pipe(
+        takeUntilDestroyed(),
+        skip(1),
+        tap(() => {
+          if (this.selectAllCheckboxRef) {
+            this.selectAllCheckboxRef.nativeElement.checked = false;
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  private getInstanceId() {
+    return Math.floor(Math.random() * 100000000).toString();
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html
new file mode 100644
index 00000000..61f30baf
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html
@@ -0,0 +1,52 @@
+<div class="form-group">
+  @if (label) {
+    <label [for]="id" [class.active]="!!control.value">{{ label }}</label>
+  }
+  <div class="row">
+    <div class="col-xs-12 col-md-5">
+      <it-transfer-list sourceType="source" title="source"></it-transfer-list>
+    </div>
+    <!-- col -->
+    <div class="col-xs-12 col-md-2">
+      <!-- transfer buttons-->
+      <div class="it-transfer-buttons">
+        <a
+          class="transfer"
+          role="button"
+          href="#"
+          [ngClass]="{ active: transferEnabled | async }"
+          (click)="transferClickHandler($event)"
+          (keypress)="transferKeyPressHandler($event)"
+          aria-label="Sposta avanti">
+          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
+        </a>
+        <span class="visually-hidden">Etichetta per freccia destra</span>
+        <a
+          class="backtransfer"
+          role="button"
+          href="#"
+          [ngClass]="{ active: backtransferEnabled | async }"
+          (click)="backtransferClickHandler($event)"
+          (keypress)="backtransferKeyPressHandler($event)"
+          aria-label="Sposta indietro">
+          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
+        </a>
+        <span class="visually-hidden">Etichetta for freccia sinistra</span>
+        <a
+          class="reset"
+          role="button"
+          href="#"
+          [ngClass]="{ active: resetEnabled | async }"
+          (click)="resetClickHandler($event)"
+          (keypress)="resetKeyPressHandler($event)"
+          aria-label="Reset">
+          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-restore"></use></svg>
+        </a>
+        <span class="visually-hidden">Etichetta per icona di reset</span>
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-5">
+      <it-transfer-list sourceType="target" title="target"></it-transfer-list>
+    </div>
+  </div>
+</div>
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.spec.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.spec.ts
new file mode 100644
index 00000000..9e7120d1
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.spec.ts
@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TranslateFakeLoader, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TransferStore } from './store/transfer.store';
+import { ItTransferComponent } from './transfer.component';
+
+describe('ItTransferComponent', () => {
+  let component: ItTransferComponent;
+  let fixture: ComponentFixture<ItTransferComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ItTransferComponent,
+        //https://stackoverflow.com/a/52461467/2642723
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateFakeLoader,
+          },
+        }),
+      ],
+      providers: [TransferStore, TranslateService],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTransferComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts
new file mode 100644
index 00000000..08c9801b
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts
@@ -0,0 +1,157 @@
+import { AsyncPipe, NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, OnInit, Optional, Output, Self } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControlName, NgControl, NgModel, ReactiveFormsModule } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { tap } from 'rxjs';
+import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
+import { TransferStore } from './store/transfer.store';
+import { ItTransferListComponent } from './transfer-list/transfer-list.component';
+import { TransferItem } from './transfer.model';
+
+/**
+ * Transfer
+ * @description Component that allows the creation of checkbox lists.
+ */
+@Component({
+  selector: 'it-transfer',
+  standalone: true,
+  templateUrl: './transfer.component.html',
+  imports: [ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule],
+  providers: [TransferStore],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItTransferComponent<T = any> extends ItAbstractFormComponent<T> implements OnInit {
+  /**
+   * The select options (left side)
+   */
+  @Input() options = [];
+  /**
+   * The selected options (right side)
+   */
+  @Input() selected = [];
+  /**
+   * Fired when there is a transfer, a backtransfer or a reset event
+   */
+  @Output() readonly transferChanges = new EventEmitter<TransferItem<T>[]>();
+
+  /**
+   * Enable transfer button
+   * @default false
+   */
+  readonly transferEnabled = this.store.transferEnabled;
+  /**
+   * Enable backtransfer button
+   * @default false
+   */
+  readonly backtransferEnabled = this.store.backtransferEnabled;
+  /**
+   * Enable reset button
+   * @default false
+   */
+  readonly resetEnabled = this.store.resetEnabled;
+
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    @Self()
+    @Optional()
+    override readonly _ngControl: NgControl,
+    override readonly _translateService: TranslateService,
+    private readonly store: TransferStore<T>
+  ) {
+    super(_translateService, _ngControl);
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.storeInit();
+    this.onStoreValueChanged();
+  }
+
+  /**
+   * Transfer button click handler
+   */
+  transferClickHandler(event: MouseEvent) {
+    this.buttonEventHandler(event, () => this.store.transfer());
+  }
+  /**
+   * Transfer button keypress handler
+   */
+  transferKeyPressHandler(event: KeyboardEvent) {
+    this.buttonEventHandler(event, () => this.store.transfer());
+  }
+  /**
+   * Backtransfer button click handler
+   */
+  backtransferClickHandler(event: MouseEvent) {
+    this.buttonEventHandler(event, () => this.store.backtransfer());
+  }
+  /**
+   * Backtransfer button keypress handler
+   */
+  backtransferKeyPressHandler(event: KeyboardEvent) {
+    this.buttonEventHandler(event, () => this.store.backtransfer());
+  }
+  /**
+   * Reset button click handler
+   */
+  resetClickHandler(event: MouseEvent) {
+    this.buttonEventHandler(event, () => this.store.reset());
+  }
+  /**
+   * Reset button keypress handler
+   */
+  resetKeyPressHandler(event: KeyboardEvent) {
+    this.buttonEventHandler(event, () => this.store.reset());
+  }
+
+  private buttonEventHandler(event: Event, updateStoreCb: () => void) {
+    event.preventDefault();
+    updateStoreCb();
+  }
+
+  private storeInit() {
+    let target = [];
+    const ngControl = this._ngControl;
+    const isNgControlDefined = Boolean(this._ngControl);
+
+    // if ngControl is defined, take values from it. Input() target will be ignored
+    if (isNgControlDefined) {
+      console.debug('ngControl instanceof NgModel:', ngControl instanceof NgModel);
+      console.debug('ngControl instanceof FormControlName:', ngControl instanceof FormControlName);
+
+      // if ngControl is an ngModel (template-driven form use case), take values from it
+      if (ngControl instanceof NgModel) {
+        console.debug('ngControl instanceof NgModel');
+        const model = (ngControl as NgModel).model;
+        target = Array.isArray(model) ? model : [];
+      }
+
+      // if ngControl is an FormControlName (reactive form use case), take values from it
+      if (ngControl instanceof FormControlName) {
+        console.debug('ngControl instanceof FormControlName');
+        const model = (ngControl as FormControlName).control.value;
+        target = Array.isArray(model) ? model : [];
+      }
+
+      console.debug('ngControl is defined. Input() target will be ignored');
+    } else if (this.selected && Array.isArray(this.selected)) {
+      target = [...this.selected];
+    }
+
+    console.debug('target:', this.selected, 'formControl:', this.control.value, 'ngModel:', this._ngControl);
+    this.store.init({ source: [...this.options], target });
+  }
+
+  private onStoreValueChanged() {
+    this.store.valueChanged
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        tap(value => this.writeValue(value as T)),
+        tap(value => this.onChange(value as T)),
+        tap(value => this.transferChanges.emit(value))
+      )
+      .subscribe();
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.model.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.model.ts
new file mode 100644
index 00000000..8d77bc3a
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.model.ts
@@ -0,0 +1,13 @@
+//Qs
+//Aria hidden?
+//state management with service?
+//interface?
+
+export interface TransferItem<ValueType> {
+  text: string;
+  value: ValueType;
+}
+
+export type TransferItemSelection<ValueType> = Array<TransferItem<ValueType>>;
+
+export type SourceType = 'source' | 'target';
diff --git a/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html b/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html
index 96503133..4e2a9ee0 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html
@@ -2,7 +2,7 @@
   #backToTop
   [id]="id"
   href="#"
-  aria-hidden="true"
+  [attr.aria-label]="ariaLabel"
   class="back-to-top"
   [class.back-to-top-small]="small"
   [class.shadow]="shadow"
diff --git a/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts b/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts
index ef794f32..68e210a2 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts
+++ b/projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts
@@ -13,6 +13,12 @@ import { inputToBoolean } from '../../../utils/coercion';
   imports: [ItIconComponent],
 })
 export class ItBackToTopComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * Aria label for the component
+   * @default 'Torna su'
+   */
+  @Input() ariaLabel: string = 'Torna su';
+
   /**
    * Show small button
    * @default false
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-item.component.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-item.component.ts
new file mode 100644
index 00000000..f5daf512
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-item.component.ts
@@ -0,0 +1,95 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  IsActiveMatchOptions,
+  NavigationEnd,
+  Router,
+  Event as RouterEvent,
+  RouterLink,
+  RouterLinkActive,
+  RouterLinkWithHref,
+  Scroll,
+} from '@angular/router';
+import { AsyncSubject, filter, switchMap, tap } from 'rxjs';
+import { ItNavscrollListItemsComponent } from './navscroll-list-items.component';
+import { NavscrollItem } from './navscroll.model';
+import { NavscrollStore } from './navscroll.store';
+
+const ROUTER_LINK_ACTIVE_OPTIONS: IsActiveMatchOptions = {
+  fragment: 'exact',
+  paths: 'exact',
+  queryParams: 'exact',
+  matrixParams: 'exact',
+};
+
+@Component({
+  selector: 'it-navscroll-list-item',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, RouterLinkWithHref, ItNavscrollListItemsComponent, AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <a
+      class="nav-link"
+      [class.active]="active | async"
+      [routerLink]="[]"
+      routerLinkActive
+      [fragment]="item?.href"
+      [routerLinkActiveOptions]="routerLinkActiveOptions"
+      ariaCurrentWhenActive="page"
+      #rtl="routerLinkActive"
+      (click)="clickHandler($event)"
+      ><span>{{ item?.title }}</span></a
+    >
+  `,
+})
+export class ItNavscrollListItemComponent implements OnInit {
+  @Input() item!: NavscrollItem;
+
+  @Output() readonly checkActive = new EventEmitter<NavscrollItem>();
+
+  @ViewChild('rtl')
+  readonly rtl: any;
+
+  readonly routerLinkActiveOptions = ROUTER_LINK_ACTIVE_OPTIONS;
+
+  readonly #initIsActive = new AsyncSubject<NavscrollItem>();
+
+  readonly active = this.#initIsActive.asObservable().pipe(switchMap(item => this.#store.isActive$(item)));
+
+  readonly #router = inject(Router);
+
+  readonly #store = inject(NavscrollStore);
+
+  readonly #destroyRef = inject(DestroyRef);
+
+  ngOnInit() {
+    this.#initIsActiveSub();
+    this.#router.events
+      .pipe(
+        takeUntilDestroyed(this.#destroyRef),
+        filter((event: RouterEvent) => {
+          const isNavigationEndEvent = event instanceof NavigationEnd;
+          const isScrollEvent = event instanceof Scroll && (event as Scroll).routerEvent instanceof NavigationEnd;
+          return isNavigationEndEvent || isScrollEvent;
+        }),
+        tap(() => {
+          if (this.rtl?.isActive) {
+            this.#store.setActive(this.item);
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  clickHandler(event: Event) {
+    event.preventDefault();
+    this.#store.selectMenuItem();
+    this.#router.navigate([], { fragment: this.item.href });
+  }
+
+  #initIsActiveSub() {
+    this.#initIsActive.next(this.item);
+    this.#initIsActive.complete();
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-items.component.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-items.component.ts
new file mode 100644
index 00000000..076cb753
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll-list-items.component.ts
@@ -0,0 +1,27 @@
+import { JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+import { ItNavscrollListItemComponent } from './navscroll-list-item.component';
+import { NavscrollItems } from './navscroll.model';
+
+@Component({
+  selector: 'it-navscroll-list-items',
+  standalone: true,
+  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, RouterLinkWithHref, JsonPipe, ItNavscrollListItemComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ul class="link-list">
+      @for (item of items; track item.href) {
+        <li class="nav-item">
+          <it-navscroll-list-item [item]="item"></it-navscroll-list-item>
+          @if (item.childs?.length) {
+            <it-navscroll-list-items [items]="item.childs"></it-navscroll-list-items>
+          }
+        </li>
+      }
+    </ul>
+  `,
+})
+export class ItNavscrollListItemsComponent {
+  @Input() items!: NavscrollItems;
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html
new file mode 100644
index 00000000..3a604667
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.html
@@ -0,0 +1,101 @@
+<div class="container py-lg-5">
+  <div class="row">
+    <div class="col-12 col-lg-4">
+      <div class="it-navscroll-sticky" [ngClass]="{ 'it-navscroll-sticky-mobile': isMobile | async }" data-bs-stackable="true">
+        <nav
+          class="navbar it-navscroll-wrapper navbar-expand-lg"
+          [class.it-top-navscroll]="alignment === 'top'"
+          [class.it-bottom-navscroll]="alignment === 'bottom'"
+          [class.it-left-side]="borderPosition === 'left'"
+          [class.it-right-side]="borderPosition === 'right'"
+          [class.theme-dark-mobile]="theme === 'dark'"
+          [class.theme-dark-desktop]="theme === 'dark'">
+          <button
+            class="custom-navbar-toggler"
+            type="button"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+            data-bs-toggle="navbarcollapsible"
+            data-bs-target="#navbarNav"
+            #toggleButtonRef>
+            <span class="it-list"></span>{{ selectedTitle | async }}
+          </button>
+          <div class="progress custom-navbar-progressbar">
+            <div
+              class="progress-bar it-navscroll-progressbar"
+              role="progressbar"
+              [style.width.%]="progressBarValue | async"
+              [attr.aria-valuenow]="progressBarValue | async"
+              aria-valuemin="0"
+              aria-valuemax="100"></div>
+          </div>
+          <div class="navbar-collapsable" id="navbarNav">
+            <div class="overlay"></div>
+            <div class="close-div visually-hidden">
+              <button class="btn close-menu" type="button"><span class="it-close"></span>Chiudi</button>
+            </div>
+            <button type="button" class="it-back-button btn w-100 text-start">
+              <svg class="icon icon-sm icon-primary align-top">
+                <use
+                  href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left"
+                  xlink:href="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-left"></use>
+              </svg>
+              <span>Indietro</span>
+            </button>
+            <div class="menu-wrapper">
+              <div class="link-list-wrapper">
+                <h3>{{ header }}</h3>
+                <div class="progress">
+                  <div
+                    class="progress-bar it-navscroll-progressbar"
+                    role="progressbar"
+                    [style.width.%]="progressBarValue | async"
+                    [attr.aria-valuenow]="progressBarValue | async"
+                    aria-valuemin="0"
+                    aria-valuemax="100"></div>
+                </div>
+                <it-navscroll-list-items [items]="items"></it-navscroll-list-items>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+    <div class="col-12 col-lg-8 it-page-sections-container">
+      <ng-container
+        *ngTemplateOutlet="pageSectionsTemplate ? pageSectionsTemplate : defaultPageSectionsTemplate; context: { items: items }">
+      </ng-container>
+    </div>
+  </div>
+</div>
+
+<ng-template #defaultPageSectionsTemplate let-items="items">
+  @for (item of items; track item.href) {
+    <ng-container *ngTemplateOutlet="paragraphTemplate; context: { item: item, level: 1 }"></ng-container>
+  }
+</ng-template>
+
+<ng-template #paragraphTemplate let-item="item" let-level="level" let-nextLevel="level+1">
+  @switch (level) {
+    @case (1) {
+      <h2 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h2>
+    }
+    @case (2) {
+      <h3 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h3>
+    }
+    @case (3) {
+      <h4 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h4>
+    }
+    @case (4) {
+      <h5 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h5>
+    }
+    @default {
+      <h6 class="it-page-section" id="{{ item.href }}">{{ item.title }}</h6>
+    }
+  }
+  <p>{{ item.text }}</p>
+  @for (item of item.childs; track item.href) {
+    <ng-container *ngTemplateOutlet="paragraphTemplate; context: { item: item, level: nextLevel }"></ng-container>
+  }
+</ng-template>
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.scss b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.scss
new file mode 100644
index 00000000..7be7002f
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.scss
@@ -0,0 +1,9 @@
+.it-navscroll-sticky {
+  // data-bs-toggle="sticky"
+  position: sticky;
+  top: 0;
+}
+
+.it-navscroll-sticky-mobile {
+  z-index: 1020;
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.ts
new file mode 100644
index 00000000..0e766a45
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.component.ts
@@ -0,0 +1,143 @@
+import { AsyncPipe, NgClass, NgTemplateOutlet, ViewportScroller } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  HostListener,
+  inject,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+import { delay, filter, map, tap, withLatestFrom } from 'rxjs';
+import { ItNavscrollListItemsComponent } from './navscroll-list-items.component';
+import { NavscrollItem } from './navscroll.model';
+import { NavscrollStore } from './navscroll.store';
+
+/**
+ * Navscroll
+ * @description Show a list of links to anchor of the document.
+ */
+@Component({
+  selector: 'it-navscroll',
+  standalone: true,
+  imports: [
+    ItNavscrollListItemsComponent,
+    AsyncPipe,
+    NgTemplateOutlet,
+    RouterLink,
+    RouterLinkActive,
+    RouterLinkWithHref,
+    AsyncPipe,
+    NgClass,
+  ],
+  templateUrl: './navscroll.component.html',
+  styleUrl: './navscroll.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [NavscrollStore],
+})
+export class ItNavscrollComponent implements OnInit {
+  /**
+   * Header of the Navscroll
+   */
+  @Input() header = '';
+  /**
+   * A list of links
+   */
+  @Input() items!: Array<NavscrollItem>;
+  /**
+   * Border position
+   * @default left
+   */
+  @Input() borderPosition: 'left' | 'right' = 'left';
+  /**
+   * Alignment
+   * @default top
+   */
+  @Input() alignment: 'top' | 'bottom' = 'top';
+
+  /**
+   * Theme
+   * @default light
+   */
+  @Input() theme: 'light' | 'dark' = 'light';
+
+  /**
+   * Custom template for the content section
+   */
+  @Input()
+  pageSectionsTemplate?: TemplateRef<any>;
+
+  @HostListener('window:scroll', ['$event']) // for window scroll events
+  onScroll() {
+    const sectionContainer = this.#elementRef.nativeElement.querySelector('.it-page-sections-container');
+    this.#store.updateProgressBar(sectionContainer);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.#setMobile();
+  }
+
+  @ViewChild('toggleButtonRef')
+  readonly toggleButtonRef!: ElementRef<HTMLButtonElement>;
+
+  readonly #store = inject(NavscrollStore);
+
+  readonly #scroller = inject(ViewportScroller);
+
+  readonly #destroyRef = inject(DestroyRef);
+
+  readonly #elementRef = inject(ElementRef);
+
+  readonly selectedTitle = this.#store.selected.pipe(map(selected => selected?.title ?? ''));
+
+  readonly progressBarValue = this.#store.progressBar;
+
+  readonly isMobile = this.#store.isMobile;
+
+  constructor() {
+    this.#store.menuItemSelected
+      .pipe(
+        takeUntilDestroyed(),
+        withLatestFrom(this.isMobile),
+        tap(v => {
+          const isMobile = v[1];
+          if (isMobile) {
+            this.toggleButtonRef.nativeElement.click();
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnInit(): void {
+    this.#initViewScrollerSubscription();
+    this.#store.init(this.items);
+    this.#setMobile();
+  }
+
+  #initViewScrollerSubscription() {
+    this.#store.selected
+      .pipe(
+        takeUntilDestroyed(this.#destroyRef),
+        filter(selected => Boolean(selected)),
+        map(v => v as NavscrollItem),
+        delay(0), //WA
+        tap({
+          next: ({ href }) => {
+            this.#scroller.scrollToAnchor(href);
+          },
+        })
+      )
+      .subscribe();
+  }
+
+  #setMobile() {
+    this.#store.setMobile(window);
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.model.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.model.ts
new file mode 100644
index 00000000..4b7b4b6f
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.model.ts
@@ -0,0 +1,12 @@
+export interface NavscrollItem {
+  title: string;
+  text: string;
+  href: string;
+  childs: NavscrollItems;
+}
+
+export type NavscrollItems = Array<NavscrollItem>;
+
+export interface NavscrollItemActive {
+  active: boolean;
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.store.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.store.ts
new file mode 100644
index 00000000..102847af
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.store.ts
@@ -0,0 +1,93 @@
+import { BehaviorSubject, distinctUntilChanged, map, Subject } from 'rxjs';
+import { NavscrollItem } from './navscroll.model';
+import { flattenNavscrollItems, search } from './navscroll.utils';
+
+interface NavscrollState {
+  items: Set<NavscrollItem>;
+  active: Array<NavscrollItem>;
+  selected?: NavscrollItem;
+  progressBar: number;
+  isMobile: boolean;
+}
+
+export class NavscrollStore {
+  readonly #state = new BehaviorSubject<NavscrollState>({
+    items: new Set<NavscrollItem>(),
+    active: [],
+    selected: undefined,
+    progressBar: 0,
+    isMobile: false,
+  });
+
+  readonly #state$ = this.#state.asObservable();
+
+  readonly selected = this.#state$.pipe(
+    map(({ selected }) => selected),
+    distinctUntilChanged()
+  );
+
+  readonly progressBar = this.#state$.pipe(
+    map(({ progressBar }) => progressBar),
+    distinctUntilChanged()
+  );
+
+  readonly isMobile = this.#state$.pipe(
+    map(({ isMobile }) => isMobile),
+    distinctUntilChanged()
+  );
+
+  readonly #menuItemSelected = new Subject();
+
+  readonly menuItemSelected = this.#menuItemSelected.asObservable();
+
+  init(navscrollItems: Array<NavscrollItem>) {
+    const flattenItems = flattenNavscrollItems(navscrollItems);
+    //the first item is selected by default
+    const selected = ((flattenItems && flattenItems.length && flattenItems[0]) as NavscrollItem) ?? undefined;
+
+    const state = {
+      items: new Set(flattenItems),
+      active: selected ? [selected] : [],
+      selected: selected,
+      progressBar: 0,
+      isMobile: false,
+    };
+
+    this.#state.next(state);
+  }
+
+  setActive(item: NavscrollItem) {
+    const { items } = this.#state.value;
+
+    const active = search(items, item);
+    const state = this.#state.value;
+    this.#state.next({ ...state, items, selected: item, active });
+  }
+
+  isActive$(item: NavscrollItem) {
+    return this.#state.asObservable().pipe(map(state => state.active.includes(item)));
+  }
+
+  updateProgressBar(container: HTMLElement) {
+    if (!container) {
+      return;
+    }
+    const offset = Math.abs(container.getBoundingClientRect().top);
+    const height = container.getBoundingClientRect().height;
+    const scrollAmount = (offset / height) * 100;
+    const scrollValue = Math.min(100, Math.max(0, scrollAmount));
+    const state = this.#state.value;
+    this.#state.next({ ...state, progressBar: scrollValue });
+  }
+
+  selectMenuItem() {
+    this.#menuItemSelected.next(undefined);
+  }
+
+  setMobile({ innerWidth }: { innerWidth: number }) {
+    const isLessThan992px = innerWidth < 992;
+    const isMobile = isLessThan992px;
+    const state = this.#state.value;
+    this.#state.next({ ...state, isMobile });
+  }
+}
diff --git a/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.utils.ts b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.utils.ts
new file mode 100644
index 00000000..bb4fd13f
--- /dev/null
+++ b/projects/design-angular-kit/src/lib/components/navigation/navscroll/navscroll.utils.ts
@@ -0,0 +1,28 @@
+import { NavscrollItem, NavscrollItems } from './navscroll.model';
+
+function searchFn(items: Set<NavscrollItem>, item: NavscrollItem): Array<NavscrollItem> {
+  //ricerca
+  const nodes = Array.from(items);
+  const parent = nodes.find(i => i.childs.includes(item));
+  const ancestors = parent?.childs?.length ? searchFn(items, parent) : [];
+  return [item, ...ancestors];
+}
+
+function flattenNavscrollItemsFn(items: NavscrollItems): NavscrollItems {
+  const result: NavscrollItems = [];
+
+  function flatten(items: NavscrollItems): void {
+    for (const item of items) {
+      result.push(item);
+      if (item.childs && item.childs.length > 0) {
+        flatten(item.childs);
+      }
+    }
+  }
+
+  flatten(items);
+  return result;
+}
+
+export const search = searchFn;
+export const flattenNavscrollItems = flattenNavscrollItemsFn;
diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
index 7a9d315e..4de49797 100644
--- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
+++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts
@@ -1,6 +1,4 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { DesignAngularKitConfig } from './interfaces/design-angular-kit-config';
-import { provideDesignAngularKit } from './provide-design-angular-kit';
 import { ItAccordionComponent } from './components/core/accordion/accordion.component';
 import { ItAlertComponent } from './components/core/alert/alert.component';
 import { ItAvatarModule } from './components/core/avatar/avatar.module';
@@ -16,7 +14,6 @@ import { ItDropdownModule } from './components/core/dropdown/dropdown.module';
 import { ItForwardDirective } from './components/core/forward/forward.directive';
 import { ItLinkComponent } from './components/core/link/link.component';
 import { ItListModule } from './components/core/list/list.module';
-import { ItMegamenuComponent } from './components/navigation/megamenu/megamenu.component';
 import { ItModalComponent } from './components/core/modal/modal.component';
 import { ItNotificationsComponent } from './components/core/notifications/notifications.component';
 import { ItPaginationComponent } from './components/core/pagination/pagination.component';
@@ -27,22 +24,26 @@ import { ItSpinnerComponent } from './components/core/spinner/spinner.component'
 import { ItSteppersModule } from './components/core/steppers/steppers.module';
 import { ItTabModule } from './components/core/tab/tab.module';
 import { ItTableModule } from './components/core/table/table.module';
+import { ItTimelineModule } from './components/core/timeline/timeline.module';
 import { ItTooltipDirective } from './components/core/tooltip/tooltip.directive';
 import { ItFormModule } from './components/form/form.module';
 import { ItBackButtonComponent } from './components/navigation/back-button/back-button.component';
 import { ItBackToTopComponent } from './components/navigation/back-to-top/back-to-top.component';
 import { ItBreadcrumbsModule } from './components/navigation/breadcrumbs/breadcrumbs.module';
 import { ItHeaderComponent } from './components/navigation/header/header.component';
+import { ItMegamenuComponent } from './components/navigation/megamenu/megamenu.component';
 import { ItNavBarModule } from './components/navigation/navbar/navbar.module';
+import { ItNavscrollComponent } from './components/navigation/navscroll/navscroll.component';
 import { ItSidebarComponent } from './components/navigation/sidebar/sidebar.component';
 import { ItErrorPageComponent } from './components/utils/error-page/error-page.component';
 import { ItIconComponent } from './components/utils/icon/icon.component';
 import { ItLanguageSwitcherComponent } from './components/utils/language-switcher/language-switcher.component';
+import { DesignAngularKitConfig } from './interfaces/design-angular-kit-config';
 import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
-import { ItTimelineModule } from './components/core/timeline/timeline.module';
 import { ItSkiplinkComponent } from './components/navigation/skiplink/skiplink.component';
+import { provideDesignAngularKit } from './provide-design-angular-kit';
 
 /**
  * Core components
@@ -89,6 +90,7 @@ const navigation = [
   ItSidebarComponent,
   ItMegamenuComponent,
   ItSkiplinkComponent,
+  ItNavscrollComponent,
 ];
 
 /**
diff --git a/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts b/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts
index f8f9dfb1..81389d4d 100644
--- a/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts
+++ b/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts
@@ -1,10 +1,10 @@
+import { HttpClient, provideHttpClient } from '@angular/common/http';
 import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, makeEnvironmentProviders, Provider } from '@angular/core';
-import { DesignAngularKitConfig, IT_ASSET_BASE_PATH } from './interfaces/design-angular-kit-config';
-import { loadFonts } from 'bootstrap-italia';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { HttpClient, provideHttpClient } from '@angular/common/http';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { loadFonts } from 'bootstrap-italia';
+import { DesignAngularKitConfig, IT_ASSET_BASE_PATH } from './interfaces/design-angular-kit-config';
 
 /**
  * Configures DesignAngularKit library
diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts
index d3bb6639..f5e506ff 100644
--- a/projects/design-angular-kit/src/public_api.ts
+++ b/projects/design-angular-kit/src/public_api.ts
@@ -2,45 +2,45 @@
  * Public API Surface of design-angular-kit
  */
 
-export * from './lib/provide-design-angular-kit';
 export * from './lib/design-angular-kit.module';
+export * from './lib/provide-design-angular-kit';
 
 // Core components
 export * from './lib/components/core/accordion/accordion.component';
 export * from './lib/components/core/alert/alert.component';
 
-export * from './lib/components/core/avatar/avatar.module';
-export * from './lib/components/core/avatar/avatar.directive';
 export * from './lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component';
 export * from './lib/components/core/avatar/avatar-group/avatar-group.component';
+export * from './lib/components/core/avatar/avatar.directive';
+export * from './lib/components/core/avatar/avatar.module';
 
 export * from './lib/components/core/badge/badge.directive';
 export * from './lib/components/core/button/button.directive';
 export * from './lib/components/core/callout/callout.component';
 export * from './lib/components/core/card/card.component';
 
+export * from './lib/components/core/carousel/carousel-item/carousel-item.component';
 export * from './lib/components/core/carousel/carousel.module';
 export * from './lib/components/core/carousel/carousel/carousel.component';
-export * from './lib/components/core/carousel/carousel-item/carousel-item.component';
 
 export * from './lib/components/core/chip/chip.component';
 export * from './lib/components/core/collapse/collapse.component';
 
-export * from './lib/components/core/dimmer/dimmer.module';
-export * from './lib/components/core/dimmer/dimmer.component';
 export * from './lib/components/core/dimmer/dimmer-buttons/dimmer-buttons.component';
 export * from './lib/components/core/dimmer/dimmer-icon/dimmer-icon.component';
+export * from './lib/components/core/dimmer/dimmer.component';
+export * from './lib/components/core/dimmer/dimmer.module';
 
+export * from './lib/components/core/dropdown/dropdown-item/dropdown-item.component';
 export * from './lib/components/core/dropdown/dropdown.module';
 export * from './lib/components/core/dropdown/dropdown/dropdown.component';
-export * from './lib/components/core/dropdown/dropdown-item/dropdown-item.component';
 
 export * from './lib/components/core/forward/forward.directive';
 export * from './lib/components/core/link/link.component';
 
+export * from './lib/components/core/list/list-item/list-item.component';
 export * from './lib/components/core/list/list.module';
 export * from './lib/components/core/list/list/list.component';
-export * from './lib/components/core/list/list-item/list-item.component';
 
 export * from './lib/components/core/modal/modal.component';
 export * from './lib/components/core/notifications/notifications.component';
@@ -50,29 +50,29 @@ export * from './lib/components/core/progress-bar/progress-bar.component';
 export * from './lib/components/core/progress-button/progress-button.component';
 export * from './lib/components/core/spinner/spinner.component';
 
-export * from './lib/components/core/steppers/steppers.module';
 export * from './lib/components/core/steppers/steppers-container/steppers-container.component';
 export * from './lib/components/core/steppers/steppers-item/steppers-item.component';
+export * from './lib/components/core/steppers/steppers.module';
 
-export * from './lib/components/core/tab/tab.module';
 export * from './lib/components/core/tab/tab-container/tab-container.component';
 export * from './lib/components/core/tab/tab-item/tab-item.component';
+export * from './lib/components/core/tab/tab.module';
 
-export * from './lib/components/core/table/table.module';
-export * from './lib/components/core/table/table.component';
-export * from './lib/components/core/table/sort/sort.directive';
 export * from './lib/components/core/table/sort/sort-header/sort-header.component';
+export * from './lib/components/core/table/sort/sort.directive';
+export * from './lib/components/core/table/table.component';
+export * from './lib/components/core/table/table.module';
 
-export * from './lib/components/core/timeline/timeline.module';
-export * from './lib/components/core/timeline/timeline.component';
 export * from './lib/components/core/timeline/timeline-item/timeline-item.component';
+export * from './lib/components/core/timeline/timeline.component';
+export * from './lib/components/core/timeline/timeline.module';
 
 export * from './lib/components/core/tooltip/tooltip.directive';
 
 // Forms components
-export * from './lib/components/form/form.module';
 export * from './lib/components/form/autocomplete/autocomplete.component';
 export * from './lib/components/form/checkbox/checkbox.component';
+export * from './lib/components/form/form.module';
 export * from './lib/components/form/input/input.component';
 export * from './lib/components/form/password-input/password-input.component';
 export * from './lib/components/form/radio-button/radio-button.component';
@@ -80,6 +80,8 @@ export * from './lib/components/form/range/range.component';
 export * from './lib/components/form/rating/rating.component';
 export * from './lib/components/form/select/select.component';
 export * from './lib/components/form/textarea/textarea.component';
+export * from './lib/components/form/transfer/transfer.component';
+export * from './lib/components/form/transfer/transfer.model';
 export * from './lib/components/form/upload-drag-drop/upload-drag-drop.component';
 export * from './lib/components/form/upload-file-list/upload-file-list.component';
 
@@ -87,16 +89,19 @@ export * from './lib/components/form/upload-file-list/upload-file-list.component
 export * from './lib/components/navigation/back-button/back-button.component';
 export * from './lib/components/navigation/back-to-top/back-to-top.component';
 
-export * from './lib/components/navigation/breadcrumbs/breadcrumbs.module';
-export * from './lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component';
 export * from './lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component';
+export * from './lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.component';
+export * from './lib/components/navigation/breadcrumbs/breadcrumbs.module';
 
 export * from './lib/components/navigation/header/header.component';
 export * from './lib/components/navigation/megamenu/megamenu.component';
 
+export * from './lib/components/navigation/navbar/navbar-item/navbar-item.component';
 export * from './lib/components/navigation/navbar/navbar.module';
 export * from './lib/components/navigation/navbar/navbar/navbar.component';
-export * from './lib/components/navigation/navbar/navbar-item/navbar-item.component';
+
+export * from './lib/components/navigation/navscroll/navscroll.component';
+export * from './lib/components/navigation/navscroll/navscroll.model';
 
 export * from './lib/components/navigation/sidebar/sidebar.component';
 export * from './lib/components/navigation/skiplink/skiplink.component';
@@ -124,9 +129,9 @@ export * from './lib/interfaces/icon';
 export * from './lib/interfaces/utils';
 
 // Utils
-export * from './lib/utils/regex';
 export * from './lib/utils/date-utils';
 export * from './lib/utils/file-utils';
+export * from './lib/utils/regex';
 
 // Validators
 export * from './lib/validators/it-validators';
diff --git a/projects/design-angular-kit/tsconfig.schematics.json b/projects/design-angular-kit/tsconfig.schematics.json
new file mode 100644
index 00000000..2b1c343d
--- /dev/null
+++ b/projects/design-angular-kit/tsconfig.schematics.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["es2018", "dom"],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/design-angular-kit/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": ["jasmine", "node"]
+  },
+  "include": ["schematics/**/*"],
+  "exclude": ["schematics/*/files/**/*"]
+}
diff --git a/publiccode.yml b/publiccode.yml
index 572b575d..37c2cbe4 100644
--- a/publiccode.yml
+++ b/publiccode.yml
@@ -62,8 +62,8 @@ maintenance:
 name: Design Angular Kit
 platforms:
   - web
-releaseDate: '2024-07-18'
+releaseDate: '2024-11-06'
 roadmap: 'https://github.com/italia/design-angular-kit/issues'
 softwareType: library
-softwareVersion: v1.1.0
+softwareVersion: v1.1.2
 url: 'https://github.com/italia/design-angular-kit'
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0da51e00..3d2fc4f2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
+import { RouterModule, Routes } from '@angular/router';
 import { ItErrorPageComponent } from 'design-angular-kit/components/utils/error-page/error-page.component';
+import { EXAMPLES_ROUTES } from './examples/routes';
+import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'info', pathMatch: 'full' },
@@ -69,8 +70,11 @@ const routes: Routes = [
       { path: 'sidebar', loadChildren: () => import('src/app/sidebar/sidebar.module').then(m => m.SidebarModule) },
       { path: 'timeline', loadChildren: () => import('src/app/timeline/timeline.module').then(m => m.TimelineModule) },
       { path: 'skiplink', loadChildren: () => import('src/app/skiplink/skiplink.module').then(m => m.SkiplinkModule) },
+      { path: 'navscroll', loadChildren: () => import('src/app/navscroll/navscroll.module').then(m => m.NavscrollModule) },
+      { path: 'transfer', loadChildren: () => import('src/app/transfer/transfer.module').then(m => m.TransferModule) },
     ],
   },
+  { path: 'esempi', component: RouterDispatcherComponent, children: EXAMPLES_ROUTES },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
   { path: 'error/forbidden', component: ItErrorPageComponent, data: { errorCode: 403 } },
   { path: 'error/server-error', component: ItErrorPageComponent, data: { errorCode: 500 } },
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 85f39617..de0d8d15 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -79,8 +79,9 @@ <h2 class="bd-logo-subtitle">
           data-focus-mouse="false">
           <small class="pe-2 m-0">v{{ version }}</small>
           <svg class="icon icon-sm icon-light">
-            <use href="bootstrap-italia/dist/svg/sprites.svg#it-files" xlink:href="/dist/svg/sprites.svg#it-files"></use></svg
-          ><span class="visually-hidden">Changelog</span>
+            <use href="bootstrap-italia/dist/svg/sprites.svg#it-files" xlink:href="/dist/svg/sprites.svg#it-files"></use>
+          </svg>
+          <span class="visually-hidden">Changelog</span>
         </a>
       </li>
       <li class="nav-item pe-2">
@@ -93,8 +94,9 @@ <h2 class="bd-logo-subtitle">
           rel="noopener noreferrer"
           aria-label="GitHub">
           <svg class="icon icon-sm icon-light">
-            <use href="bootstrap-italia/dist/svg/sprites.svg#it-github" xlink:href="/dist/svg/sprites.svg#it-github"></use></svg
-          ><span class="visually-hidden">GitHub</span>
+            <use href="bootstrap-italia/dist/svg/sprites.svg#it-github" xlink:href="/dist/svg/sprites.svg#it-github"></use>
+          </svg>
+          <span class="visually-hidden">GitHub</span>
         </a>
       </li>
     </ul>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4ea33e56..8ecb71f8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,19 +1,21 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
+import { NgTemplateOutlet } from '@angular/common';
+import { TranslateStore } from '@ngx-translate/core';
+import { DesignAngularKitModule } from 'design-angular-kit/design-angular-kit.module';
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { TableOfContentComponent } from './table-of-content/table-of-content.component';
-import { TableOfContentItemComponent } from './table-of-content-item/table-of-content-item.component';
-import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
+import { EXAMPLES_MODULES } from './examples';
 import { LinkSortPipe } from './link-sort.pipe';
-import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
-import { TranslateStore } from '@ngx-translate/core';
-import { DesignAngularKitModule } from 'design-angular-kit/design-angular-kit.module';
+import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
+import { TableOfContentItemComponent } from './table-of-content-item/table-of-content-item.component';
+import { TableOfContentComponent } from './table-of-content/table-of-content.component';
 
 @NgModule({
   declarations: [AppComponent, TableOfContentComponent, TableOfContentItemComponent, RouterDispatcherComponent, LinkSortPipe],
-  imports: [BrowserModule, AppRoutingModule, DesignAngularKitModule.forRoot()],
+  imports: [BrowserModule, AppRoutingModule, DesignAngularKitModule.forRoot(), NgTemplateOutlet, ...EXAMPLES_MODULES],
   providers: [
     TranslateStore,
     {
diff --git a/src/app/badge/badge-example/badge-example.component.html b/src/app/badge/badge-example/badge-example.component.html
index becec07a..ec5bcb26 100644
--- a/src/app/badge/badge-example/badge-example.component.html
+++ b/src/app/badge/badge-example/badge-example.component.html
@@ -36,6 +36,10 @@ <h5>
       </h5>
 
       <h5>Link di esempio <a href="#" [itBadge]="selectedColor" [rounded]="isRounded">link</a></h5>
+      <button class="mb-5" [itButton]="'primary'">
+        Profilo <span [itBadge]="selectedColor" [rounded]="isRounded">9</span>
+        <span class="visually-hidden">Messaggi non letti</span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html
index 894830d1..b08fada4 100644
--- a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html
+++ b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html
@@ -1,7 +1,7 @@
 <h3>Esempio Breadcrumb</h3>
 <div class="bd-example">
   <it-breadcrumb [dark]="isDark" [separator]="separator">
-    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon">
+    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon" [active]="item.active">
       {{ item.label }}
     </it-breadcrumb-item>
   </it-breadcrumb>
diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts
index 3030aa6d..cd924378 100644
--- a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts
+++ b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts
@@ -19,15 +19,18 @@ export class BreadcrumbExampleComponent {
   separator = '/';
   isDark = false;
   items = [
-    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon },
-    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon },
-    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon },
+    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon, active: false },
+    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon, active: false },
+    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon, active: true },
   ];
 
   i = 4;
 
   insert() {
-    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon });
+    for (const item of this.items) {
+      item.active = false;
+    }
+    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon, active: true });
     this.i++;
   }
 
diff --git a/src/app/button/button-example-color-dark/button-example-color-dark.component.scss b/src/app/button/button-example-color-dark/button-example-color-dark.component.scss
index ac902f23..f12efc71 100644
--- a/src/app/button/button-example-color-dark/button-example-color-dark.component.scss
+++ b/src/app/button/button-example-color-dark/button-example-color-dark.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-example-color/button-example-color.component.scss b/src/app/button/button-example-color/button-example-color.component.scss
index ac902f23..f12efc71 100644
--- a/src/app/button/button-example-color/button-example-color.component.scss
+++ b/src/app/button/button-example-color/button-example-color.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-example-size/button-example-size.component.scss b/src/app/button/button-example-size/button-example-size.component.scss
index ac902f23..f12efc71 100644
--- a/src/app/button/button-example-size/button-example-size.component.scss
+++ b/src/app/button/button-example-size/button-example-size.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-examples/button-examples.component.scss b/src/app/button/button-examples/button-examples.component.scss
index ac902f23..f12efc71 100644
--- a/src/app/button/button-examples/button-examples.component.scss
+++ b/src/app/button/button-examples/button-examples.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/card/card-big/card-big.component.html b/src/app/card/card-big/card-big.component.html
index 7e41d8d1..5564ec76 100644
--- a/src/app/card/card-big/card-big.component.html
+++ b/src/app/card/card-big/card-big.component.html
@@ -23,7 +23,7 @@ <h3 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing eli
     </div>
     <div class="col-12 col-lg-6">
       <div class="card-wrapper card-space">
-        <it-card space="true" background="true" big="true" borderBottom="true">
+        <it-card background="true" big="true" borderBottom="true">
           <ng-container beforeBody>
             <div class="flag-icon"></div>
             <div class="etichetta">
diff --git a/src/app/card/card-image/card-image.component.html b/src/app/card/card-image/card-image.component.html
index e42da187..e185fc9c 100644
--- a/src/app/card/card-image/card-image.component.html
+++ b/src/app/card/card-image/card-image.component.html
@@ -11,7 +11,7 @@ <h3>Card con immagine</h3>
               <div class="img-responsive">
                 <figure class="img-wrapper">
                   <img
-                    src="https://via.placeholder.com/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
+                    src="https://placehold.co/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
                     title="titolo immagine"
                     alt="descrizione immagine" />
                 </figure>
@@ -36,7 +36,7 @@ <h3 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing eli
               <div class="img-responsive img-responsive-panoramic">
                 <figure class="img-wrapper">
                   <img
-                    src="https://via.placeholder.com/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
+                    src="https://placehold.co/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
                     title="titolo immagine"
                     alt="descrizione immagine" />
                 </figure>
@@ -61,7 +61,7 @@ <h3 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing eli
               <div class="img-responsive">
                 <figure class="img-wrapper">
                   <img
-                    src="https://via.placeholder.com/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
+                    src="https://placehold.co/310x190/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
                     title="titolo immagine"
                     alt="descrizione immagine" />
                 </figure>
@@ -90,7 +90,7 @@ <h3 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing eli
               <div class="img-responsive img-responsive-panoramic">
                 <figure class="img-wrapper">
                   <img
-                    src="https://via.placeholder.com/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
+                    src="https://placehold.co/310x94/0066cc/FFFFFF/?text=IMMAGINE%20DI%20ESEMPIO"
                     title="titolo immagine"
                     alt="descrizione immagine" />
                 </figure>
diff --git a/src/app/card/card-shadow/card-shadow.component.html b/src/app/card/card-shadow/card-shadow.component.html
index d4a6cbdc..77d1b75f 100644
--- a/src/app/card/card-shadow/card-shadow.component.html
+++ b/src/app/card/card-shadow/card-shadow.component.html
@@ -5,7 +5,7 @@ <h3>Card con ombreggiatura</h3>
   <div class="row">
     <div class="col-12 col-lg-6">
       <div class="card-wrapper">
-        <it-card space="true" background="true">
+        <it-card background="true">
           <h3 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h3>
           <p class="card-text font-serif">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
diff --git a/src/app/card/card-special/card-special.component.html b/src/app/card/card-special/card-special.component.html
index 3fd29813..4e8b0e2e 100644
--- a/src/app/card/card-special/card-special.component.html
+++ b/src/app/card/card-special/card-special.component.html
@@ -11,7 +11,7 @@ <h3>Card speciale</h3>
               <div class="img-responsive">
                 <figure class="img-wrapper">
                   <img
-                    src="https://via.placeholder.com/174x214/F9F9FE/0066CC/?text=IMMAGINE%20DI%20ESEMPIO"
+                    src="https://placehold.co/174x214/F9F9FE/0066CC/?text=IMMAGINE%20DI%20ESEMPIO"
                     title="titolo immagine"
                     alt="descrizione immagine" />
                 </figure>
diff --git a/src/app/carousel/carousel-featured-image-example/carousel-featured-image-example.component.html b/src/app/carousel/carousel-featured-image-example/carousel-featured-image-example.component.html
index 3c9f88bb..4580dbb8 100644
--- a/src/app/carousel/carousel-featured-image-example/carousel-featured-image-example.component.html
+++ b/src/app/carousel/carousel-featured-image-example/carousel-featured-image-example.component.html
@@ -6,10 +6,7 @@ <h3>Card con immagine in evidenza</h3>
         <div class="img-responsive-wrapper">
           <div class="img-responsive">
             <div class="img-wrapper">
-              <img
-                src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine1"
-                title="titolo immagine"
-                alt="descrizione immagine" />
+              <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine" />
             </div>
           </div>
         </div>
@@ -42,10 +39,7 @@ <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipi
         <div class="img-responsive-wrapper">
           <div class="img-responsive">
             <div class="img-wrapper">
-              <img
-                src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine2"
-                title="titolo immagine"
-                alt="descrizione immagine" />
+              <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine" />
             </div>
           </div>
         </div>
@@ -78,10 +72,7 @@ <h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipi
         <div class="img-responsive-wrapper">
           <div class="img-responsive">
             <div class="img-wrapper">
-              <img
-                src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine3"
-                title="titolo immagine"
-                alt="descrizione immagine" />
+              <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine" />
             </div>
           </div>
         </div>
diff --git a/src/app/carousel/carousel-fullscreen-image-example/carousel-fullscreen-image-example.component.html b/src/app/carousel/carousel-fullscreen-image-example/carousel-fullscreen-image-example.component.html
index 66172a94..cc0ea07d 100644
--- a/src/app/carousel/carousel-fullscreen-image-example/carousel-fullscreen-image-example.component.html
+++ b/src/app/carousel/carousel-fullscreen-image-example/carousel-fullscreen-image-example.component.html
@@ -7,10 +7,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine1"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -24,10 +21,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine2"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -41,10 +35,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine3"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -58,10 +49,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine4"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -75,10 +63,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine5"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -92,10 +77,7 @@ <h3>Fullscreen di immagini</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine6"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
diff --git a/src/app/carousel/carousel-fullscreen-image-standard-example/carousel-fullscreen-image-standard-example.component.html b/src/app/carousel/carousel-fullscreen-image-standard-example/carousel-fullscreen-image-standard-example.component.html
index 082481e8..be3c33e0 100644
--- a/src/app/carousel/carousel-fullscreen-image-standard-example/carousel-fullscreen-image-standard-example.component.html
+++ b/src/app/carousel/carousel-fullscreen-image-standard-example/carousel-fullscreen-image-standard-example.component.html
@@ -7,10 +7,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine1"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -24,10 +21,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine2"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -41,10 +35,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine3"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -58,10 +49,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine4"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -75,10 +63,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine5"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -92,10 +77,7 @@ <h3>Fullscreen di immagini di dimensioni standard</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine6"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
diff --git a/src/app/carousel/carousel-image-above-example/carousel-image-above-example.component.html b/src/app/carousel/carousel-image-above-example/carousel-image-above-example.component.html
index 21c9c64b..ca84e292 100644
--- a/src/app/carousel/carousel-image-above-example/carousel-image-above-example.component.html
+++ b/src/app/carousel/carousel-image-above-example/carousel-image-above-example.component.html
@@ -7,10 +7,7 @@ <h3>Card con immagine in alto</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine1"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -31,10 +28,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine2"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -55,10 +49,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine3"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -79,10 +70,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine4"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -103,10 +91,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine5"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -127,10 +112,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine6"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
diff --git a/src/app/carousel/carousel-special-cards-example/carousel-special-cards-example.component.html b/src/app/carousel/carousel-special-cards-example/carousel-special-cards-example.component.html
index 1363455e..3c7b4781 100644
--- a/src/app/carousel/carousel-special-cards-example/carousel-special-cards-example.component.html
+++ b/src/app/carousel/carousel-special-cards-example/carousel-special-cards-example.component.html
@@ -7,10 +7,7 @@ <h3>Card speciali</h3>
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine1"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -27,10 +24,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine2"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -47,10 +41,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine3"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -67,10 +58,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine4"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -87,10 +75,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine5"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
@@ -107,10 +92,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit
           <div class="img-responsive-wrapper" beforeBody>
             <div class="img-responsive">
               <div class="img-wrapper">
-                <img
-                  src="https://via.placeholder.com/480x360/ebebeb/808080/?text=Immagine6"
-                  title="titolo immagine"
-                  alt="descrizione immagine" />
+                <img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine" />
               </div>
             </div>
           </div>
diff --git a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html
index 03e52e14..0a0eb30f 100644
--- a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html
+++ b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html
@@ -1,20 +1,23 @@
 <h3>Gruppi</h3>
 <div class="bd-example">
-  <p class="example-section">
-    <it-checkbox label="Prima checkbox raggruppata" group="true">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
-    </it-checkbox>
-    <it-checkbox label="Seconda checkbox raggruppata" group="true">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit. Maecenas molestie liber
-    </it-checkbox>
-    <it-checkbox group="true">
-      <ng-container label>
-        Terza <a href="https://italia.github.io/bootstrap-italia/docs/form/checkbox/">checkbox</a> raggruppata</ng-container
-      >
+  <div class="example-section">
+    <fieldset>
+      <legend>Gruppo di checkbox</legend>
+      <it-checkbox label="Prima checkbox raggruppata" group="true">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
+      </it-checkbox>
+      <it-checkbox label="Seconda checkbox raggruppata" group="true">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Maecenas molestie liber
+      </it-checkbox>
+      <it-checkbox group="true">
+        <ng-container label>
+          Terza <a href="https://italia.github.io/bootstrap-italia/docs/form/checkbox/">checkbox</a> raggruppata</ng-container
+        >
 
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
-    </it-checkbox>
-  </p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
+      </it-checkbox>
+    </fieldset>
+  </div>
 </div>
diff --git a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss
index 139597f9..e69de29b 100644
--- a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss
+++ b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html
index 4af32c12..e18e6183 100644
--- a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html
+++ b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html
@@ -1,6 +1,9 @@
 <h3>Inline</h3>
 <div class="bd-example">
-  <it-checkbox label="label 1" inline="true"></it-checkbox>
-  <it-checkbox label="label 2" inline="true"></it-checkbox>
-  <it-checkbox label="label 3" inline="true"></it-checkbox>
+  <fieldset>
+    <legend>Gruppo di checkbox</legend>
+    <it-checkbox label="label 1" inline="true"></it-checkbox>
+    <it-checkbox label="label 2" inline="true"></it-checkbox>
+    <it-checkbox label="label 3" inline="true"></it-checkbox>
+  </fieldset>
 </div>
diff --git a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss
index 139597f9..e69de29b 100644
--- a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss
+++ b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/checkbox/checkbox-example/checkbox-example.component.html b/src/app/checkbox/checkbox-example/checkbox-example.component.html
index 599d2145..c3d2e95b 100644
--- a/src/app/checkbox/checkbox-example/checkbox-example.component.html
+++ b/src/app/checkbox/checkbox-example/checkbox-example.component.html
@@ -1,16 +1,19 @@
 <h3>Configurazione checkbox</h3>
 
 <div class="bd-example">
-  <p class="example-section">
-    <it-checkbox [(ngModel)]="checked" label="Spuntato"></it-checkbox>
-    <it-checkbox [(ngModel)]="disabled" label="Disabilitato"></it-checkbox>
-    <it-checkbox [(ngModel)]="indeterminate" label="Indeterminato"></it-checkbox>
-    <it-checkbox [(ngModel)]="link" label="Testo con link"></it-checkbox>
-  </p>
-
+  <div class="example-section">
+    <fieldset>
+      <legend>Gruppo di checkbox</legend>
+      <it-checkbox [(ngModel)]="checked" label="Spuntato"></it-checkbox>
+      <it-checkbox [(ngModel)]="disabled" label="Disabilitato"></it-checkbox>
+      <it-checkbox [(ngModel)]="indeterminate" label="Indeterminato"></it-checkbox>
+      <it-checkbox [(ngModel)]="link" label="Testo con link"></it-checkbox>
+    </fieldset>
+  </div>
+  <hr />
   <h4>Risultato</h4>
 
-  <p class="example-section">
+  <div class="example-section">
     <it-checkbox [(ngModel)]="checked" [indeterminate]="indeterminate" [disabled]="disabled">
       <ng-container label>
         <ng-container *ngIf="link; else simpleLabel">
@@ -19,5 +22,5 @@ <h4>Risultato</h4>
         <ng-template #simpleLabel> Sono una checkbox </ng-template>
       </ng-container>
     </it-checkbox>
-  </p>
+  </div>
 </div>
diff --git a/src/app/checkbox/checkbox-example/checkbox-example.component.scss b/src/app/checkbox/checkbox-example/checkbox-example.component.scss
index 139597f9..e69de29b 100644
--- a/src/app/checkbox/checkbox-example/checkbox-example.component.scss
+++ b/src/app/checkbox/checkbox-example/checkbox-example.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/examples/index.ts b/src/app/examples/index.ts
new file mode 100644
index 00000000..2b113dce
--- /dev/null
+++ b/src/app/examples/index.ts
@@ -0,0 +1,3 @@
+import { NavscrollExampleModule } from './navscroll-example/navscroll-example.module';
+
+export const EXAMPLES_MODULES = [NavscrollExampleModule];
diff --git a/src/app/examples/navscroll-example/navscroll-example.component.ts b/src/app/examples/navscroll-example/navscroll-example.component.ts
new file mode 100644
index 00000000..df0e7568
--- /dev/null
+++ b/src/app/examples/navscroll-example/navscroll-example.component.ts
@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { NavscrollItems } from 'projects/design-angular-kit/src/public_api';
+
+const template = `
+<!-- 
+<ng-template #contentTemplate>
+  <h1>ciao</h1>
+</ng-template>
+
+<it-navscroll [header]="header" [items]="items" borderPosition="right" [pageSectionsTemplate]="contentTemplate"></it-navscroll> 
+-->
+<it-navscroll [header]="header" [items]="items" borderPosition="right"></it-navscroll>
+<p><a routerLink="/componenti/navscroll">Documentazione </a></p>
+`;
+
+@Component({
+  template,
+})
+export class NavscrollExampleComponent {
+  readonly header = 'Default example';
+  readonly items = [
+    {
+      title: 'Prima Sezione',
+      text: 'Testo prima sezione. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+      href: 'primaSezione',
+      childs: [
+        {
+          title: 'Sottosezione 1.1',
+          text: 'Testo sottosezione 1.1. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+          href: 's11',
+          childs: [
+            {
+              title: 'Sottosezione 1.1.1',
+              text: 'Testo sottosezione 1.1.1. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+              href: 's111',
+              childs: [
+                {
+                  title: 'Sottosezione 1.1.1.1',
+                  text: 'Testo sottosezione 1.1.1.1. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+                  href: 's1111',
+                  childs: [],
+                },
+              ],
+            },
+            {
+              title: 'Sottosezione 1.1.2',
+              text: 'Testo sottosezione 1.1.2. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+              href: 's112',
+              childs: [],
+            },
+          ],
+        },
+        {
+          title: 'Sottosezione 1.2',
+          text: 'Testo sottosezione 1.2. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+          href: 's12',
+          childs: [],
+        },
+        {
+          title: 'Sottosezione 1.3',
+          text: 'Testo sottosezione 1.3. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+          href: 's13',
+          childs: [],
+        },
+      ],
+    },
+    {
+      title: 'Seconda Sezione',
+      text: 'Testo seconda sezione. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+      href: 'secondaSezione',
+      childs: [
+        {
+          title: 'Sottosezione 2.1',
+          text: 'Testo sottosezione 2.1. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+          href: 's21',
+          childs: [
+            {
+              title: 'Sottosezione 2.1.1',
+              text: 'Testo sottosezione 2.1.1. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+              href: 's211',
+              childs: [],
+            },
+          ],
+        },
+        {
+          title: 'Sottosezione 2.2',
+          text: 'Testo sottosezione 2.2. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+          href: 's22',
+          childs: [],
+        },
+      ],
+    },
+  ] satisfies NavscrollItems;
+}
diff --git a/src/app/examples/navscroll-example/navscroll-example.module.ts b/src/app/examples/navscroll-example/navscroll-example.module.ts
new file mode 100644
index 00000000..1a0e366c
--- /dev/null
+++ b/src/app/examples/navscroll-example/navscroll-example.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { DesignAngularKitModule } from 'projects/design-angular-kit/src/public_api';
+import { NavscrollExampleComponent } from './navscroll-example.component';
+
+@NgModule({
+  declarations: [NavscrollExampleComponent],
+  exports: [NavscrollExampleComponent],
+  imports: [DesignAngularKitModule, RouterModule],
+})
+export class NavscrollExampleModule {}
diff --git a/src/app/examples/routes.ts b/src/app/examples/routes.ts
new file mode 100644
index 00000000..e2bc08b4
--- /dev/null
+++ b/src/app/examples/routes.ts
@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { NavscrollExampleComponent } from './navscroll-example/navscroll-example.component';
+
+export const EXAMPLES_ROUTES = [{ path: 'navscroll', component: NavscrollExampleComponent }] satisfies Routes;
diff --git a/src/app/forward/forward-example/forward-example.component.html b/src/app/forward/forward-example/forward-example.component.html
index cdef24ae..1d2c5dc5 100644
--- a/src/app/forward/forward-example/forward-example.component.html
+++ b/src/app/forward/forward-example/forward-example.component.html
@@ -1,18 +1,10 @@
 <h3>Configurazione forward</h3>
 <div class="bd-example">
-  <div class="row justify-content-center my-4">
-    <div class="col-auto">
-      <a href="#" [itForward]="refH3" aria-label="Vai a: H3 a cui navigare">
-        <it-icon [name]="icon" [color]="color" [size]="size"></it-icon>
-      </a>
-    </div>
-    <div class="col-auto">
-      <a href="#" [itForward]="'#idH3'" aria-label="Vai a: H3 a cui navigare">
-        <it-icon [name]="icon" [color]="color" [size]="size"></it-icon>
-      </a>
-    </div>
+  <div class="row">
+    <a href="#" [itForward]="refH3" aria-label="Vai a: H3 a cui navigare">
+      <it-icon [name]="icon" [color]="color" [size]="size"></it-icon>
+    </a>
   </div>
-
   <div class="row">
     <div class="col">
       <p>
diff --git a/src/app/header/header-example/header-example.component.html b/src/app/header/header-example/header-example.component.html
index 3cf8c040..cec13ea1 100644
--- a/src/app/header/header-example/header-example.component.html
+++ b/src/app/header/header-example/header-example.component.html
@@ -75,7 +75,7 @@ <h3>Componente Header</h3>
                 <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
                   <figure class="figure">
                     <img
-                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"
                       class="figure-img img-fluid rounded"
                       alt="Segnaposto" />
                   </figure>
diff --git a/src/app/list/list-image/list-image.component.html b/src/app/list/list-image/list-image.component.html
index 7627b8cc..577980da 100644
--- a/src/app/list/list-image/list-image.component.html
+++ b/src/app/list/list-image/list-image.component.html
@@ -3,13 +3,13 @@ <h3>Lista con Immagini</h3>
 
 <div class="bd-example">
   <it-list>
-    <it-list-item image="https://via.placeholder.com/40x40.png?text=40x40">
+    <it-list-item image="https://placehold.co/40x40.png?text=40x40">
       <span class="text">Lista 1</span>
     </it-list-item>
-    <it-list-item image="https://via.placeholder.com/40x40.png?text=40x40">
+    <it-list-item image="https://placehold.co/40x40.png?text=40x40">
       <span class="text">Lista 2</span>
     </it-list-item>
-    <it-list-item image="https://via.placeholder.com/40x40.png?text=40x40">
+    <it-list-item image="https://placehold.co/40x40.png?text=40x40">
       <span class="text">Lista 3</span>
     </it-list-item>
   </it-list>
diff --git a/src/app/list/list-multiple/list-multiple.component.html b/src/app/list/list-multiple/list-multiple.component.html
index c62bd047..e2d60905 100644
--- a/src/app/list/list-multiple/list-multiple.component.html
+++ b/src/app/list/list-multiple/list-multiple.component.html
@@ -4,7 +4,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
 <div class="bd-example">
   <it-list>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Link lista 1</span>
+      <div>
+        <h4 class="text m-0">Link lista 1</h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <a href="#" aria-label="Testo - Azione 1">
           <it-icon name="code-circle" color="primary"></it-icon>
@@ -18,7 +21,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
       </ng-container>
     </it-list-item>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Link lista 2</span>
+      <div>
+        <h4 class="text m-0">Link lista 2</h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <span class="metadata">metadata testo</span>
         <a href="#" aria-label="Testo - Azione 1">
@@ -33,7 +39,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
       </ng-container>
     </it-list-item>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Testo<em>Lorem ipsum dolor sit amet.</em></span>
+      <div>
+        <h4 class="text m-0">Testo <em>Lorem ipsum dolor sit amet.</em></h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <span class="metadata">metadata testo</span>
         <a href="#" aria-label="Testo - Azione 1">
diff --git a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
index 7787d48e..483a0b21 100644
--- a/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
+++ b/src/app/megamenu/megamenu-cta-bottom/megamenu-cta-bottom.component.html
@@ -11,7 +11,7 @@ <h3>Componente Megamenu con CTA in basso</h3>
                 <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
                   <figure class="figure">
                     <img
-                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"
                       class="figure-img img-fluid rounded"
                       alt="Segnaposto" />
                   </figure>
diff --git a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
index 83b16ef4..62bdf9c2 100644
--- a/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
+++ b/src/app/megamenu/megamenu-cta-right/megamenu-cta-right.component.html
@@ -11,7 +11,7 @@ <h3>Componente Megamenu con CTA a destra</h3>
                 <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
                   <figure class="figure">
                     <img
-                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"
                       class="figure-img img-fluid rounded"
                       alt="Segnaposto" />
                   </figure>
diff --git a/src/app/megamenu/megamenu-example/megamenu-example.component.html b/src/app/megamenu/megamenu-example/megamenu-example.component.html
index 35f0dfd1..ebb00c09 100644
--- a/src/app/megamenu/megamenu-example/megamenu-example.component.html
+++ b/src/app/megamenu/megamenu-example/megamenu-example.component.html
@@ -11,7 +11,7 @@ <h3>Componente Megamenu completo</h3>
                 <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
                   <figure class="figure">
                     <img
-                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"
                       class="figure-img img-fluid rounded"
                       alt="Segnaposto" />
                   </figure>
diff --git a/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.html b/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.html
new file mode 100644
index 00000000..1db105d4
--- /dev/null
+++ b/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.html
@@ -0,0 +1,6 @@
+<ng-template #contentTemplate>
+  <h1>This is a custom template</h1>
+  <p>All the paragraphs will be displayed here</p>
+</ng-template>
+
+<it-navscroll [header]="header" [items]="items" [pageSectionsTemplate]="contentTemplate"></it-navscroll>
diff --git a/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.ts b/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.ts
new file mode 100644
index 00000000..9acf7b8e
--- /dev/null
+++ b/src/app/navscroll/navscroll-custom-template-example/navscroll-custom-template-example.component.ts
@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { NavscrollItems } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-navscroll-custom-template-example',
+  templateUrl: './navscroll-custom-template-example.component.html',
+})
+export class NavscrollCustomTemplateExampleComponent {
+  readonly header = 'Custom template example';
+  readonly items = [
+    {
+      title: 'Prima Sezione',
+      text: 'Testo prima sezione',
+      href: '#',
+      childs: [
+        {
+          title: 'Sottosezione 1.1',
+          text: 'Testo sottosezione 1.1',
+          href: '#',
+          childs: [
+            {
+              title: 'Sottosezione 1.1.1',
+              text: 'Testo sottosezione 1.1.1',
+              href: '#',
+              childs: [
+                {
+                  title: 'Sottosezione 1.1.1.1',
+                  text: 'Testo sottosezione 1.1.1.1',
+                  href: '#',
+                  childs: [],
+                },
+              ],
+            },
+            {
+              title: 'Sottosezione 1.1.2',
+              text: 'Testo sottosezione 1.1.2',
+              href: '#',
+              childs: [],
+            },
+          ],
+        },
+        {
+          title: 'Sottosezione 1.2',
+          text: 'Testo sottosezione 1.2',
+          href: '#',
+          childs: [],
+        },
+        {
+          title: 'Sottosezione 1.3',
+          text: 'Testo sottosezione 1.3',
+          href: '#',
+          childs: [],
+        },
+      ],
+    },
+    {
+      title: 'Seconda Sezione',
+      text: 'Testo seconda sezione',
+      href: '#',
+      childs: [
+        {
+          title: 'Sottosezione 2.1',
+          text: 'Testo sottosezione 2.1',
+          href: '#',
+          childs: [],
+        },
+        {
+          title: 'Sottosezione 2.2',
+          text: 'Testo sottosezione 2.2',
+          href: '#',
+          childs: [],
+        },
+      ],
+    },
+  ] satisfies NavscrollItems;
+}
diff --git a/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.html b/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.html
new file mode 100644
index 00000000..30bd7798
--- /dev/null
+++ b/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.html
@@ -0,0 +1 @@
+<it-navscroll [header]="header" [items]="items"></it-navscroll>
diff --git a/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.ts b/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.ts
new file mode 100644
index 00000000..7612c317
--- /dev/null
+++ b/src/app/navscroll/navscroll-default-example/navscroll-default-example.component.ts
@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { NavscrollItems } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-navscroll-default-example',
+  templateUrl: './navscroll-default-example.component.html',
+})
+export class NavscrollDefaultExampleComponent {
+  readonly header = 'Default example';
+  readonly items = [
+    {
+      title: 'Prima Sezione',
+      text: 'Testo prima sezione',
+      href: '#',
+      childs: [
+        {
+          title: 'Sottosezione 1.1',
+          text: 'Testo sottosezione 1.1',
+          href: '#',
+          childs: [
+            {
+              title: 'Sottosezione 1.1.1',
+              text: 'Testo sottosezione 1.1.1',
+              href: '#',
+              childs: [
+                {
+                  title: 'Sottosezione 1.1.1.1',
+                  text: 'Testo sottosezione 1.1.1.1',
+                  href: '#',
+                  childs: [],
+                },
+              ],
+            },
+            {
+              title: 'Sottosezione 1.1.2',
+              text: 'Testo sottosezione 1.1.2',
+              href: '#',
+              childs: [],
+            },
+          ],
+        },
+        {
+          title: 'Sottosezione 1.2',
+          text: 'Testo sottosezione 1.2',
+          href: '#',
+          childs: [],
+        },
+        {
+          title: 'Sottosezione 1.3',
+          text: 'Testo sottosezione 1.3',
+          href: '#',
+          childs: [],
+        },
+      ],
+    },
+    {
+      title: 'Seconda Sezione',
+      text: 'Testo seconda sezione',
+      href: '#',
+      childs: [
+        {
+          title: 'Sottosezione 2.1',
+          text: 'Testo sottosezione 2.1',
+          href: '#',
+          childs: [],
+        },
+        {
+          title: 'Sottosezione 2.2',
+          text: 'Testo sottosezione 2.2',
+          href: '#',
+          childs: [],
+        },
+      ],
+    },
+  ] satisfies NavscrollItems;
+}
diff --git a/src/app/navscroll/navscroll-examples/navscroll-examples.component.scss b/src/app/navscroll/navscroll-examples/navscroll-examples.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/navscroll/navscroll-examples/navscroll-examples.component.tpl b/src/app/navscroll/navscroll-examples/navscroll-examples.component.tpl
new file mode 100644
index 00000000..18945d94
--- /dev/null
+++ b/src/app/navscroll/navscroll-examples/navscroll-examples.component.tpl
@@ -0,0 +1,30 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set htmlColor %}
+  {% include "../navscroll-default-example/navscroll-default-example.component.html" %}
+{% endset %}
+
+{% set typescriptColor %}
+  {% include "../navscroll-default-example/navscroll-default-example.component.ts" %}
+{% endset %}
+
+<h3>Esempio di default</h3>
+<!-- <it-navscroll-default-example></it-navscroll-default-example> -->
+
+<it-source-display html="{$ sanitize(htmlColor) $}" typescript="{$ sanitize(typescriptColor) $}" >
+</it-source-display>
+
+{% set customTemplateHtmlColor %}
+  {% include "../navscroll-custom-template-example/navscroll-custom-template-example.component.html" %}
+{% endset %}
+
+{% set customTemplateTypescriptColor %}
+  {% include "../navscroll-custom-template-example/navscroll-custom-template-example.component.ts" %}
+{% endset %}
+
+<h3>Esempio con template personalizzato</h3>
+<!-- <it-navscroll-custom-template-example></it-navscroll-custom-template-example> -->
+
+<it-source-display html="{$ sanitize(customTemplateHtmlColor) $}" typescript="{$ sanitize(customTemplateTypescriptColor) $}" >
+</it-source-display>
+
diff --git a/src/app/navscroll/navscroll-examples/navscroll-examples.component.ts b/src/app/navscroll/navscroll-examples/navscroll-examples.component.ts
new file mode 100644
index 00000000..b405a8e1
--- /dev/null
+++ b/src/app/navscroll/navscroll-examples/navscroll-examples.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-navscroll-examples',
+  templateUrl: './navscroll-examples.component.html',
+  styleUrl: './navscroll-examples.component.scss',
+})
+export class NavscrollExamplesComponent {}
diff --git a/src/app/navscroll/navscroll-index/navscroll-index.component.html b/src/app/navscroll/navscroll-index/navscroll-index.component.html
new file mode 100644
index 00000000..87d8ea6c
--- /dev/null
+++ b/src/app/navscroll/navscroll-index/navscroll-index.component.html
@@ -0,0 +1,12 @@
+<h1 class="bd-title">Navscroll</h1>
+<p class="bd-lead">Componente che presenta liste di link con ancore a sezioni della pagina in cui è contenuto.</p>
+<div [innerHTML]="component.description"></div>
+<p><a routerLink="/esempi/navscroll">Esempio funzionante </a></p>
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-navscroll-examples></it-navscroll-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/navscroll/navscroll-index/navscroll-index.component.ts b/src/app/navscroll/navscroll-index/navscroll-index.component.ts
new file mode 100644
index 00000000..1a0d2455
--- /dev/null
+++ b/src/app/navscroll/navscroll-index/navscroll-index.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-navscroll-index',
+  templateUrl: './navscroll-index.component.html',
+})
+export class NavscrollIndexComponent {
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItNavscrollComponent');
+  }
+}
diff --git a/src/app/navscroll/navscroll-routing.module.ts b/src/app/navscroll/navscroll-routing.module.ts
new file mode 100644
index 00000000..ce6dd05c
--- /dev/null
+++ b/src/app/navscroll/navscroll-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NavscrollIndexComponent } from './navscroll-index/navscroll-index.component';
+
+export const ROUTES = [{ path: '', component: NavscrollIndexComponent }] satisfies Routes;
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule],
+})
+export class NavscrollRoutingModule {}
diff --git a/src/app/navscroll/navscroll.module.ts b/src/app/navscroll/navscroll.module.ts
new file mode 100644
index 00000000..ae323f9e
--- /dev/null
+++ b/src/app/navscroll/navscroll.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { NavscrollDefaultExampleComponent } from './navscroll-default-example/navscroll-default-example.component';
+import { NavscrollExamplesComponent } from './navscroll-examples/navscroll-examples.component';
+import { NavscrollIndexComponent } from './navscroll-index/navscroll-index.component';
+import { NavscrollRoutingModule } from './navscroll-routing.module';
+
+@NgModule({
+  imports: [NavscrollRoutingModule, SharedModule],
+  declarations: [NavscrollIndexComponent, NavscrollExamplesComponent, NavscrollDefaultExampleComponent],
+})
+export class NavscrollModule {}
diff --git a/src/app/popover/popover-examples/popover-examples.component.scss b/src/app/popover/popover-examples/popover-examples.component.scss
index 67b7c114..80895767 100644
--- a/src/app/popover/popover-examples/popover-examples.component.scss
+++ b/src/app/popover/popover-examples/popover-examples.component.scss
@@ -1,7 +1,6 @@
 .example-section {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    height: 60px;
-  }
-  
\ No newline at end of file
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
+}
diff --git a/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss b/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss
index b0b9c35a..e43b83aa 100644
--- a/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss
+++ b/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss
@@ -1,5 +1,4 @@
 .example-section {
-    align-content: center;
-    align-items: center;
+  align-content: center;
+  align-items: center;
 }
-  
\ No newline at end of file
diff --git a/src/app/radio/radio-checked-example/radio-checked-example.component.html b/src/app/radio/radio-checked-example/radio-checked-example.component.html
index 2db87f96..5414aec7 100644
--- a/src/app/radio/radio-checked-example/radio-checked-example.component.html
+++ b/src/app/radio/radio-checked-example/radio-checked-example.component.html
@@ -1,12 +1,14 @@
 <h3>Radio checked</h3>
 <div class="bd-example">
   <div class="example-section">
-    <it-radio-button name="nation" value="USA" label="USA" [(ngModel)]="selectedNation"></it-radio-button>
+    <fieldset>
+      <legend>Seleziona la nazionalità</legend>
+      <it-radio-button name="nation" value="USA" label="USA" [(ngModel)]="selectedNation"></it-radio-button>
 
-    <it-radio-button name="nation" value="Italia" label="Italia" [(ngModel)]="selectedNation"></it-radio-button>
+      <it-radio-button name="nation" value="Italia" label="Italia" [(ngModel)]="selectedNation"></it-radio-button>
 
-    <it-radio-button name="nation" value="Spagna" label="Spagna" [(ngModel)]="selectedNation"></it-radio-button>
+      <it-radio-button name="nation" value="Spagna" label="Spagna" [(ngModel)]="selectedNation"></it-radio-button>
+    </fieldset>
   </div>
-
   <div class="example-selected-value">Nazione selezionata: {{ selectedNation }}</div>
 </div>
diff --git a/src/app/radio/radio-example/radio-example.component.html b/src/app/radio/radio-example/radio-example.component.html
index 81857164..23efe00a 100644
--- a/src/app/radio/radio-example/radio-example.component.html
+++ b/src/app/radio/radio-example/radio-example.component.html
@@ -7,25 +7,33 @@ <h3>Configurazione Radio button</h3>
   <h4>Risultato</h4>
 
   <div class="example-section">
-    <it-radio-button
-      *ngFor="let color of colors; let i = index"
-      [id]="'color-' + i"
-      [(ngModel)]="selectedColor"
-      [disabled]="disabled"
-      [value]="color"
-      [label]="color"></it-radio-button>
+    <fieldset>
+      <legend>Seleziona il tuo colore preferito</legend>
+      <it-radio-button
+        *ngFor="let color of colors; let i = index"
+        [id]="'color-' + i"
+        [(ngModel)]="selectedColor"
+        [disabled]="disabled"
+        [value]="color"
+        [label]="color"></it-radio-button>
+    </fieldset>
     <div class="example-selected-value">Colore selezionato: {{ selectedColor }}</div>
   </div>
 </div>
 
 <div class="bd-example">
   <h4>Radio con link</h4>
-  <it-radio-button [(ngModel)]="link" name="radio-link" value="bootstrap-italia">
-    <ng-container label>Label con <a href="https://italia.github.io/bootstrap-italia/">link</a></ng-container>
-  </it-radio-button>
-  <it-radio-button [(ngModel)]="link" name="radio-link" value="radio-button">
-    <ng-container label>Altra label con <a href="https://italia.github.io/bootstrap-italia/docs/form/radio-button/">link</a></ng-container>
-  </it-radio-button>
+  <fieldset>
+    <legend>Gruppo di radio</legend>
+    <it-radio-button [(ngModel)]="link" name="radio-link" value="bootstrap-italia">
+      <ng-container label>Label con <a href="https://italia.github.io/bootstrap-italia/">link</a></ng-container>
+    </it-radio-button>
+    <it-radio-button [(ngModel)]="link" name="radio-link" value="radio-button">
+      <ng-container label
+        >Altra label con <a href="https://italia.github.io/bootstrap-italia/docs/form/radio-button/">link</a></ng-container
+      >
+    </it-radio-button>
+  </fieldset>
 
   <div class="example-selected-value">
     Link selezionato: <strong>{{ link }}</strong>
@@ -36,10 +44,13 @@ <h4>Radio con link</h4>
   <h4>Radio in Reactive Form</h4>
   <p>Qual è il tuo sesso?</p>
   <form [formGroup]="genderFormGroup">
-    <it-radio-button formControlName="gender" value="MALE" label="Maschio"></it-radio-button>
-    <it-radio-button formControlName="gender" value="FEMALE" label="Femmina"></it-radio-button>
-    <it-radio-button formControlName="gender" value="OTHERS" label="Altro"></it-radio-button>
-    <it-radio-button formControlName="gender" value="UNDEFINED" label="Preferisco non dirlo"></it-radio-button>
+    <fieldset>
+      <legend>Gruppo di radio</legend>
+      <it-radio-button formControlName="gender" value="MALE" label="Maschio"></it-radio-button>
+      <it-radio-button formControlName="gender" value="FEMALE" label="Femmina"></it-radio-button>
+      <it-radio-button formControlName="gender" value="OTHERS" label="Altro"></it-radio-button>
+      <it-radio-button formControlName="gender" value="UNDEFINED" label="Preferisco non dirlo"></it-radio-button>
+    </fieldset>
   </form>
 
   <div class="example-selected-value">
diff --git a/src/app/shared/source-display/source-display.component.scss b/src/app/shared/source-display/source-display.component.scss
index a5ac1fdd..22b3ba22 100644
--- a/src/app/shared/source-display/source-display.component.scss
+++ b/src/app/shared/source-display/source-display.component.scss
@@ -1,5 +1,5 @@
 .bd-example {
-    border-top: none;
-    margin-top: auto;
-    padding-top: 20px;
+  border-top: none;
+  margin-top: auto;
+  padding-top: 20px;
 }
diff --git a/src/app/table-of-content-item/table-of-content-item.component.scss b/src/app/table-of-content-item/table-of-content-item.component.scss
index b9a5d258..c33e8a96 100644
--- a/src/app/table-of-content-item/table-of-content-item.component.scss
+++ b/src/app/table-of-content-item/table-of-content-item.component.scss
@@ -20,10 +20,10 @@
 
 .bd-toc-link {
   display: block;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   @include media-breakpoint-up(md) {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
   color: $gray-800;
 
@@ -33,33 +33,32 @@
 }
 
 .bd-toc-item {
-    background-color: $white;
-    &.active {
-      > .bd-toc-link {
-        color: $primary;
-        font-weight: 600;
+  background-color: $white;
+  &.active {
+    > .bd-toc-link {
+      color: $primary;
+      font-weight: 600;
 
-        &:hover {
-          background-color: transparent;
-        }
+      &:hover {
+        background-color: transparent;
       }
+    }
 
-      .bd-sidenav {
-        display: block;
-      }
+    .bd-sidenav {
+      display: block;
     }
+  }
 }
 
 .bd-sidenav {
   display: none;
 }
 
-
 // All levels of nav
 .nav {
   > li > a {
     display: inline-block;
-    padding: .25rem .5rem .25rem 1.5rem;
+    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
     font-size: 16px;
     color: $gray-800;
     &:hover {
diff --git a/src/app/table-of-content/table-of-content.component.scss b/src/app/table-of-content/table-of-content.component.scss
index 33c77c07..435a9853 100644
--- a/src/app/table-of-content/table-of-content.component.scss
+++ b/src/app/table-of-content/table-of-content.component.scss
@@ -4,7 +4,7 @@
 
 .bd-sidebar {
   order: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
       position: sticky;
@@ -12,12 +12,12 @@
       height: calc(100vh - 5rem);
       overflow-y: auto;
     }
-    border-right: 1px solid rgba(0, 0, 0, .1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
   @include media-breakpoint-up(md) {
     padding: 1.5rem 0;
-    border-right: 1px solid rgba(0, 0, 0, .1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
   @include media-breakpoint-up(xl) {
@@ -40,7 +40,3 @@
     display: block !important;
   }
 }
-
-
-
-
diff --git a/src/app/toggle/toggle-example/toggle-example.component.html b/src/app/toggle/toggle-example/toggle-example.component.html
index 3420e4bf..711aa134 100644
--- a/src/app/toggle/toggle-example/toggle-example.component.html
+++ b/src/app/toggle/toggle-example/toggle-example.component.html
@@ -1,10 +1,11 @@
 <h3>Configurazione toggle</h3>
 <div class="bd-example">
-  <p class="example-section">
+  <fieldset>
+    <legend>Seleziona le caratteristiche</legend>
     <it-checkbox [(ngModel)]="checked" label="Spuntato" toggle="true"></it-checkbox>
     <it-checkbox [(ngModel)]="disabled" label="Disabilitato" toggle="true"></it-checkbox>
-  </p>
-
+  </fieldset>
+  <hr />
   <h4>Risultato</h4>
   <p class="example-section">
     <it-checkbox [(ngModel)]="checked" [label]="label" [disabled]="disabled" toggle="true"></it-checkbox>
diff --git a/src/app/toggle/toggle-example/toggle-example.component.scss b/src/app/toggle/toggle-example/toggle-example.component.scss
index ed6303f7..80895767 100644
--- a/src/app/toggle/toggle-example/toggle-example.component.scss
+++ b/src/app/toggle/toggle-example/toggle-example.component.scss
@@ -1,7 +1,6 @@
 .example-section {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    height: 60px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
 }
-  
\ No newline at end of file
diff --git a/src/app/tooltip/tooltip-placements-example/tooltip-placements-example.component.html b/src/app/tooltip/tooltip-placements-example/tooltip-placements-example.component.html
index d4a082fd..d1876b58 100644
--- a/src/app/tooltip/tooltip-placements-example/tooltip-placements-example.component.html
+++ b/src/app/tooltip/tooltip-placements-example/tooltip-placements-example.component.html
@@ -39,7 +39,6 @@ <h3>Le quattro direzioni</h3>
       type="button"
       class="btn btn-lg btn-danger me-4"
       itTooltip="Tooltip di esempio"
-      it-title="Titolo del Tooltip"
       [tooltipPlacement]="currentPlacement"
       triggers="click">
       Clicca per il tooltip ricollocabile
diff --git a/src/app/transfer/transfer-default-example/transfer-default-example.component.html b/src/app/transfer/transfer-default-example/transfer-default-example.component.html
new file mode 100644
index 00000000..2fa06b68
--- /dev/null
+++ b/src/app/transfer/transfer-default-example/transfer-default-example.component.html
@@ -0,0 +1,9 @@
+<h3>Esempio senza form</h3>
+<div class="bd-example">
+  <div class="row">
+    <div class="col">
+      <h5>Esempio di default</h5>
+      <it-transfer [options]="options" [selected]="selected" (transferChanges)="transferChangesHandler($event)"></it-transfer>
+    </div>
+  </div>
+</div>
diff --git a/src/app/transfer/transfer-default-example/transfer-default-example.component.ts b/src/app/transfer/transfer-default-example/transfer-default-example.component.ts
new file mode 100644
index 00000000..33c9cd35
--- /dev/null
+++ b/src/app/transfer/transfer-default-example/transfer-default-example.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TransferItem } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-transfer-default-example',
+  templateUrl: './transfer-default-example.component.html',
+})
+export class TransferDefaultExampleComponent {
+  readonly options: TransferItem<number>[] = [
+    {
+      text: 'Item 1',
+      value: 1,
+    },
+    {
+      text: 'Item 2',
+      value: 2,
+    },
+  ];
+  readonly selected: TransferItem<number>[] = [
+    {
+      text: 'Item 3',
+      value: 3,
+    },
+  ];
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  transferChangesHandler(_: TransferItem<number>[]) {
+    // handle changing data
+  }
+}
diff --git a/src/app/transfer/transfer-examples/transfer-examples.component.tpl b/src/app/transfer/transfer-examples/transfer-examples.component.tpl
new file mode 100644
index 00000000..2b02fc50
--- /dev/null
+++ b/src/app/transfer/transfer-examples/transfer-examples.component.tpl
@@ -0,0 +1,37 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../transfer-default-example/transfer-default-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../transfer-default-example/transfer-default-example.component.ts" %}
+{% endset %}
+
+<it-transfer-default-example></it-transfer-default-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
+
+{% set html %}
+  {% include "../transfer-template-form-example/transfer-template-form-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../transfer-template-form-example/transfer-template-form-example.component.ts" %}
+{% endset %}
+
+<it-transfer-template-form-example></it-transfer-template-form-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
+
+{% set html %}
+  {% include "../transfer-reactive-form-example/transfer-reactive-form-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../transfer-reactive-form-example/transfer-reactive-form-example.component.ts" %}
+{% endset %}
+
+<it-transfer-reactive-form-example></it-transfer-reactive-form-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
\ No newline at end of file
diff --git a/src/app/transfer/transfer-examples/transfer-examples.component.ts b/src/app/transfer/transfer-examples/transfer-examples.component.ts
new file mode 100644
index 00000000..1658cc03
--- /dev/null
+++ b/src/app/transfer/transfer-examples/transfer-examples.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-transfer-examples',
+  templateUrl: './transfer-examples.component.html',
+})
+export class TransferExamplesComponent {}
diff --git a/src/app/transfer/transfer-index/transfer-index.component.html b/src/app/transfer/transfer-index/transfer-index.component.html
new file mode 100644
index 00000000..acf170b1
--- /dev/null
+++ b/src/app/transfer/transfer-index/transfer-index.component.html
@@ -0,0 +1,13 @@
+<h1 class="bd-title">Transfer</h1>
+<p class="bd-lead">Componente che consente la creazione di liste di checkbox</p>
+<div [innerHTML]="component.description"></div>
+
+<it-tab-container>
+  <it-tab-item label="Esempi" active="true" class="pt-3">
+    <it-transfer-examples></it-transfer-examples>
+  </it-tab-item>
+  <it-tab-item label="API" class="pt-3">
+    <h3>ItTransferComponent</h3>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/transfer/transfer-index/transfer-index.component.ts b/src/app/transfer/transfer-index/transfer-index.component.ts
new file mode 100644
index 00000000..b837f641
--- /dev/null
+++ b/src/app/transfer/transfer-index/transfer-index.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-transfer-index',
+  templateUrl: './transfer-index.component.html',
+})
+export class TransferIndexComponent {
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'ItTransferComponent');
+  }
+}
diff --git a/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.html b/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.html
new file mode 100644
index 00000000..68e80434
--- /dev/null
+++ b/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.html
@@ -0,0 +1,11 @@
+<h3>Esempio con Reactive Form</h3>
+<div class="bd-example">
+  <div class="row">
+    <div class="col">
+      <h5>FormGroup</h5>
+      <form [formGroup]="formGroup">
+        <it-transfer formControlName="transfer" [options]="options"></it-transfer>
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.ts b/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.ts
new file mode 100644
index 00000000..c3c4b008
--- /dev/null
+++ b/src/app/transfer/transfer-reactive-form-example/transfer-reactive-form-example.component.ts
@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { TransferItem } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-transfer-reactive-form-example',
+  templateUrl: './transfer-reactive-form-example.component.html',
+})
+export class TransferReactiveFormExampleComponent {
+  readonly options: TransferItem<number>[] = [
+    {
+      text: 'Item 1',
+      value: 1,
+    },
+    {
+      text: 'Item 2',
+      value: 2,
+    },
+  ];
+  readonly selected: TransferItem<number>[] = [
+    {
+      text: 'Item 3',
+      value: 3,
+    },
+  ];
+
+  readonly formGroup = inject(FormBuilder).group({
+    transfer: [this.selected],
+  });
+}
diff --git a/src/app/transfer/transfer-routing.module.ts b/src/app/transfer/transfer-routing.module.ts
new file mode 100644
index 00000000..cd058c97
--- /dev/null
+++ b/src/app/transfer/transfer-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TransferIndexComponent } from './transfer-index/transfer-index.component';
+
+const routes = [
+  {
+    path: '',
+    component: TransferIndexComponent,
+  },
+] satisfies Routes;
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TransferRoutingModule {}
diff --git a/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.html b/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.html
new file mode 100644
index 00000000..7311b2d2
--- /dev/null
+++ b/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.html
@@ -0,0 +1,9 @@
+<h3>Esempio con Template Form</h3>
+<div class="bd-example">
+  <div class="row">
+    <div class="col">
+      <h5>NgModel</h5>
+      <it-transfer [(ngModel)]="transferModel" [options]="options"></it-transfer>
+    </div>
+  </div>
+</div>
diff --git a/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.ts b/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.ts
new file mode 100644
index 00000000..b18b4e35
--- /dev/null
+++ b/src/app/transfer/transfer-template-form-example/transfer-template-form-example.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { TransferItem } from 'projects/design-angular-kit/src/public_api';
+
+@Component({
+  selector: 'it-transfer-template-form-example',
+  templateUrl: './transfer-template-form-example.component.html',
+})
+export class TransferTemplateFormExampleComponent {
+  readonly options: TransferItem<number>[] = [
+    {
+      text: 'Item 1',
+      value: 1,
+    },
+    {
+      text: 'Item 2',
+      value: 2,
+    },
+  ];
+  readonly selected: TransferItem<number>[] = [
+    {
+      text: 'Item 3',
+      value: 3,
+    },
+  ];
+
+  transferModel = this.selected;
+}
diff --git a/src/app/transfer/transfer.module.ts b/src/app/transfer/transfer.module.ts
new file mode 100644
index 00000000..e54fca8c
--- /dev/null
+++ b/src/app/transfer/transfer.module.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from '../shared/shared.module';
+import { TransferDefaultExampleComponent } from './transfer-default-example/transfer-default-example.component';
+import { TransferExamplesComponent } from './transfer-examples/transfer-examples.component';
+import { TransferIndexComponent } from './transfer-index/transfer-index.component';
+import { TransferReactiveFormExampleComponent } from './transfer-reactive-form-example/transfer-reactive-form-example.component';
+import { TransferRoutingModule } from './transfer-routing.module';
+import { TransferTemplateFormExampleComponent } from './transfer-template-form-example/transfer-template-form-example.component';
+
+@NgModule({
+  declarations: [
+    TransferIndexComponent,
+    TransferDefaultExampleComponent,
+    TransferTemplateFormExampleComponent,
+    TransferReactiveFormExampleComponent,
+    TransferExamplesComponent,
+  ],
+  imports: [TransferRoutingModule, SharedModule, FormsModule, ReactiveFormsModule, CommonModule],
+})
+export class TransferModule {}
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index cd585be3..e0415764 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -190,6 +190,14 @@
         {
           "label": "Skiplink",
           "link": "/componenti/skiplink"
+        },
+        {
+          "label": "Navscroll",
+          "link": "/componenti/navscroll"
+        },
+        {
+          "label": "Transfer",
+          "link": "/componenti/transfer"
         }
       ]
     }