diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml
index 76971211296..59216da3bbc 100644
--- a/.github/workflows/browser-tests.yml
+++ b/.github/workflows/browser-tests.yml
@@ -73,8 +73,6 @@ jobs:
 
             - name: Configure E2E app
               run: |
-                  echo 'APP_ENV=prod' >> .env.local
-                  echo 'APP_DEBUG=0' >> .env.local
                   echo 'APP_SECRET=df4c071596e64cc75a349456f2887ae2419ae650' >> .env.local
               working-directory: apps/e2e
 
@@ -83,11 +81,12 @@ jobs:
               with:
                   working-directory: apps/e2e
                   dependency-versions: highest
-                  composer-options: --no-dev
                   custom-cache-suffix: symfony-${{ matrix.symfony }}
 
             - name: Prepare E2E app
               run: |
+                  echo 'APP_ENV=prod' >> .env.local
+                  echo 'APP_DEBUG=0' >> .env.local
                   symfony composer dump-autoload --classmap-authoritative --no-dev
                   symfony composer dump-env
                   symfony console asset-map:compile
diff --git a/apps/e2e/.env b/apps/e2e/.env
index c5badfcd659..ae8e8d47fba 100644
--- a/apps/e2e/.env
+++ b/apps/e2e/.env
@@ -23,7 +23,7 @@ APP_SECRET=
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
 #
-DATABASE_URL="sqlite:///%kernel.project_dir%/var/data_%kernel.environment%.db"
+DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=8.0.32&charset=utf8mb4"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
 # DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"
diff --git a/apps/e2e/.symfony.local.yaml b/apps/e2e/.symfony.local.yaml
index 3d0a7009141..8d425e86b43 100644
--- a/apps/e2e/.symfony.local.yaml
+++ b/apps/e2e/.symfony.local.yaml
@@ -1,2 +1,3 @@
 http:
     port: 9876
+    no_tls: true
diff --git a/apps/e2e/README.md b/apps/e2e/README.md
index 4795b30333d..1205bf2a9eb 100644
--- a/apps/e2e/README.md
+++ b/apps/e2e/README.md
@@ -1,8 +1,8 @@
 # E2E App
 
-This is a Symfony application designed for end-to-end testing. 
+This is a Symfony application designed for end-to-end testing.
 
-It serves for testing UX packages in a real-world scenario, 
+It serves for testing UX packages in a real-world scenario,
 to ensure they work as expected for multiple Symfony versions and various browsers.
 
 ## Requirements
@@ -16,7 +16,7 @@ to ensure they work as expected for multiple Symfony versions and various browse
 
 ```shell
 docker compose up -d
-symfony php ../.github/build-packages.php
+symfony php ../../.github/build-packages.php
 
 SYMFONY_REQUIRE=6.4.* symfony composer update
 # or...
diff --git a/apps/e2e/assets/app.js b/apps/e2e/assets/app.js
index 5b1ceb0c4e7..a237aff12dd 100644
--- a/apps/e2e/assets/app.js
+++ b/apps/e2e/assets/app.js
@@ -2,6 +2,8 @@ import { registerVueControllerComponents } from '@symfony/ux-vue';
 import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
 import { registerReactControllerComponents } from '@symfony/ux-react';
 import './bootstrap.js';
+import { trans } from "./translator.js";
+
 /*
  * Welcome to your app's main JavaScript file!
  *
@@ -16,3 +18,5 @@ console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
 registerReactControllerComponents();
 registerSvelteControllerComponents();
 registerVueControllerComponents();
+
+export { trans };
diff --git a/apps/e2e/assets/controllers/movie-autocomplete_controller.js b/apps/e2e/assets/controllers/movie-autocomplete_controller.js
new file mode 100644
index 00000000000..be8682958c3
--- /dev/null
+++ b/apps/e2e/assets/controllers/movie-autocomplete_controller.js
@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('movie-selected', { title });
+        });
+    }
+}
diff --git a/apps/e2e/assets/controllers/videogame-autocomplete_controller.js b/apps/e2e/assets/controllers/videogame-autocomplete_controller.js
new file mode 100644
index 00000000000..0b30e1c1eba
--- /dev/null
+++ b/apps/e2e/assets/controllers/videogame-autocomplete_controller.js
@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('videogame-selected', { title });
+        });
+    }
+}
diff --git a/apps/e2e/assets/icons/mdi/search.svg b/apps/e2e/assets/icons/mdi/search.svg
new file mode 100644
index 00000000000..c5c75c4d193
--- /dev/null
+++ b/apps/e2e/assets/icons/mdi/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5"/></svg>
\ No newline at end of file
diff --git a/apps/e2e/assets/translator.js b/apps/e2e/assets/translator.js
index a0efa830ae4..320d791650b 100644
--- a/apps/e2e/assets/translator.js
+++ b/apps/e2e/assets/translator.js
@@ -1,5 +1,6 @@
-import { localeFallbacks } from '@app/translations/configuration';
-import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+import { createTranslator } from "@symfony/ux-translator";
+import { messages, localeFallbacks } from "../var/translations/index.js";
+
 /*
  * This file is part of the Symfony UX Translator package.
  *
@@ -9,8 +10,9 @@ import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-tra
  * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
  */
 
-setLocaleFallbacks(localeFallbacks);
-
-export { trans };
+export const translator = createTranslator({
+    messages,
+    localeFallbacks,
+});
 
-export * from '@app/translations';
+export const { trans, setLocale } = translator;
diff --git a/apps/e2e/composer.json b/apps/e2e/composer.json
index b22dc2bc498..8a868cfc154 100644
--- a/apps/e2e/composer.json
+++ b/apps/e2e/composer.json
@@ -7,7 +7,8 @@
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
             "assets:install %PUBLIC_DIR%": "symfony-cmd",
-            "importmap:install": "symfony-cmd"
+            "importmap:install": "symfony-cmd",
+            "foundry:load-fixtures": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"
@@ -37,7 +38,10 @@
         "symfony/http-client": "6.4.*|7.3.*",
         "symfony/intl": "6.4.*|7.3.*",
         "symfony/monolog-bundle": "^3.10",
+        "symfony/property-access": "6.4.*|7.3.*",
+        "symfony/property-info": "6.4.*|7.3.*",
         "symfony/runtime": "6.4.*|7.3.*",
+        "symfony/serializer": "6.4.*|7.3.*",
         "symfony/stimulus-bundle": "^2.29.1",
         "symfony/twig-bundle": "6.4.*|7.3.*",
         "symfony/ux-autocomplete": "^2.29.1",
@@ -61,6 +65,7 @@
         "symfony/ux-typed": "^2.29.1",
         "symfony/ux-vue": "^2.29.1",
         "symfony/yaml": "6.4.*|7.3.*",
+        "symfonycasts/dynamic-forms": "^0.2",
         "twig/extra-bundle": "^3.21",
         "twig/twig": "^3.21.1"
     },
@@ -68,7 +73,8 @@
         "symfony/debug-bundle": "6.4.*|7.3.*",
         "symfony/maker-bundle": "^1.64",
         "symfony/stopwatch": "6.4.*|7.3.*",
-        "symfony/web-profiler-bundle": "6.4.*|7.3.*"
+        "symfony/web-profiler-bundle": "6.4.*|7.3.*",
+        "zenstruck/foundry": "^2.8"
     },
     "config": {
         "platform": {
diff --git a/apps/e2e/config/bundles.php b/apps/e2e/config/bundles.php
index a90e1a7edd1..0354973075c 100644
--- a/apps/e2e/config/bundles.php
+++ b/apps/e2e/config/bundles.php
@@ -30,4 +30,5 @@
     Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
     Symfony\UX\Typed\TypedBundle::class => ['all' => true],
     Symfony\UX\Vue\VueBundle::class => ['all' => true],
+    Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
 ];
diff --git a/apps/e2e/config/packages/zenstruck_foundry.yaml b/apps/e2e/config/packages/zenstruck_foundry.yaml
new file mode 100644
index 00000000000..2f60dd01843
--- /dev/null
+++ b/apps/e2e/config/packages/zenstruck_foundry.yaml
@@ -0,0 +1,16 @@
+when@dev: &dev
+    # See full configuration: https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#full-default-bundle-configuration
+    zenstruck_foundry:
+        persistence:
+            # Flush only once per call of `PersistentObjectFactory::create()`
+            flush_once: true
+
+    # If you use the `make:factory --test` command, you may need to uncomment the following.
+    # See https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#generate
+    #services:
+    #    App\Tests\Factory\:
+    #        resource: '%kernel.project_dir%/tests/Factory/'
+    #        autowire: true
+    #        autoconfigure: true
+
+when@test: *dev
diff --git a/apps/e2e/importmap.php b/apps/e2e/importmap.php
index fd47adc87d8..a522562e05b 100644
--- a/apps/e2e/importmap.php
+++ b/apps/e2e/importmap.php
@@ -139,12 +139,6 @@
     '@symfony/ux-translator' => [
         'path' => './vendor/symfony/ux-translator/assets/dist/translator_controller.js',
     ],
-    '@app/translations' => [
-        'path' => './var/translations/index.js',
-    ],
-    '@app/translations/configuration' => [
-        'path' => './var/translations/configuration.js',
-    ],
     'typed.js' => [
         'version' => '2.1.0',
     ],
diff --git a/apps/e2e/public/images/example.jpg b/apps/e2e/public/images/example.jpg
new file mode 100644
index 00000000000..49649fb6ca3
Binary files /dev/null and b/apps/e2e/public/images/example.jpg differ
diff --git a/apps/e2e/src/Controller/AutocompleteController.php b/apps/e2e/src/Controller/AutocompleteController.php
index 42d875fe685..2e1f21d99c3 100644
--- a/apps/e2e/src/Controller/AutocompleteController.php
+++ b/apps/e2e/src/Controller/AutocompleteController.php
@@ -2,14 +2,67 @@
 
 namespace App\Controller;
 
-use Psr\Log\LoggerInterface;
+use App\Form\FruitAutocompleteField;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
-use Symfony\UX\Chartjs\Model\Chart;
 
-#[Route('/ux-autocomplete')]
+#[Route('/ux-autocomplete', name: 'app_ux_autocomplete_')]
 final class AutocompleteController extends AbstractController
 {
+    #[Route('/without-ajax', name: 'without_ajax')]
+    public function withoutAjax(): Response
+    {
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', ChoiceType::class, [
+            'autocomplete' => true,
+            'label' => 'Your favorite fruit:',
+            'choices' => [
+                'Apple' => 'apple',
+                'Banana' => 'banana',
+                'Cherry' => 'cherry',
+                'Coconut' => 'coconut',
+                'Grape' => 'grape',
+                'Kiwi' => 'kiwi',
+                'Lemon' => 'lemon',
+                'Mango' => 'mango',
+                'Orange' => 'orange',
+                'Papaya' => 'papaya',
+                'Peach' => 'peach',
+                'Pineapple' => 'pineapple',
+                'Pear' => 'pear',
+                'Pomegranate' => 'pomegranate',
+                'Pomelo' => 'pomelo',
+                'Raspberry' => 'raspberry',
+                'Strawberry' => 'strawberry',
+                'Watermelon' => 'watermelon',
+            ],
+        ]);
+
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/without_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
+    }
+
+    #[Route('/with-ajax', name: 'with_ajax')]
+    public function withAjax(): Response
+    {
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', FruitAutocompleteField::class);
+
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/with_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
+    }
+
+    #[Route('/custom-controller', name: 'custom_controller')]
+    public function customController(): Response
+    {
+        return $this->render('ux_autocomplete/custom_controller.html.twig');
+    }
 }
diff --git a/apps/e2e/src/Controller/ChartjsController.php b/apps/e2e/src/Controller/ChartjsController.php
index f303b2382c7..f5f63564abe 100644
--- a/apps/e2e/src/Controller/ChartjsController.php
+++ b/apps/e2e/src/Controller/ChartjsController.php
@@ -8,10 +8,10 @@
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Model\Chart;
 
-#[Route('/ux-chartjs')]
+#[Route('/ux-chartjs', name: 'app_ux_chartjs_')]
 final class ChartjsController extends AbstractController
 {
-    #[Route('/without-options')]
+    #[Route('/without-options', name: 'without_options')]
     public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
     {
         $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
@@ -33,7 +33,7 @@ public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
         ]);
     }
 
-    #[Route('/with-options')]
+    #[Route('/with-options', name: 'with_options')]
     public function withOptions(ChartBuilderInterface $chartBuilder): Response
     {
         $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
@@ -58,4 +58,69 @@ public function withOptions(ChartBuilderInterface $chartBuilder): Response
             'chart' => $chart,
         ]);
     }
+
+    #[Route('/pie', name: 'pie')]
+    public function pie(ChartBuilderInterface $chartBuilder): Response
+    {
+        $chart = $chartBuilder->createChart(Chart::TYPE_PIE);
+
+        $chart->setData([
+            'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            'datasets' => [
+                [
+                    'label' => 'My First Dataset',
+                    'data' => [12, 19, 3, 5, 2, 3],
+                    'backgroundColor' => [
+                        'rgb(255, 99, 132)',
+                        'rgb(54, 162, 235)',
+                        'rgb(255, 205, 86)',
+                        'rgb(75, 192, 192)',
+                        'rgb(153, 102, 255)',
+                        'rgb(255, 159, 64)',
+                    ],
+                ],
+            ],
+        ]);
+
+        return $this->render('ux_chartjs/index.html.twig', [
+            'chart' => $chart,
+        ]);
+    }
+
+    #[Route('/pie-with-options', name: 'pie_with_options')]
+    public function pieWithOptions(ChartBuilderInterface $chartBuilder): Response
+    {
+        $chart = $chartBuilder->createChart(Chart::TYPE_PIE);
+
+        $chart->setData([
+            'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            'datasets' => [
+                [
+                    'label' => 'My First Dataset',
+                    'data' => [12, 19, 3, 5, 2, 3],
+                    'backgroundColor' => [
+                        'rgb(255, 99, 132)',
+                        'rgb(54, 162, 235)',
+                        'rgb(255, 205, 86)',
+                        'rgb(75, 192, 192)',
+                        'rgb(153, 102, 255)',
+                        'rgb(255, 159, 64)',
+                    ],
+                ],
+            ],
+        ]);
+
+        $chart->setOptions([
+            'responsive' => true,
+            'plugins' => [
+                'legend' => [
+                    'position' => 'top',
+                ],
+            ],
+        ]);
+
+        return $this->render('ux_chartjs/index.html.twig', [
+            'chart' => $chart,
+        ]);
+    }
 }
diff --git a/apps/e2e/src/Controller/CropperjsController.php b/apps/e2e/src/Controller/CropperjsController.php
index cf9363c4dbc..7ea31d9dbac 100644
--- a/apps/e2e/src/Controller/CropperjsController.php
+++ b/apps/e2e/src/Controller/CropperjsController.php
@@ -3,17 +3,77 @@
 namespace App\Controller;
 
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\UX\Cropperjs\Factory\CropperInterface;
+use Symfony\UX\Cropperjs\Form\CropperType;
 
-#[Route('/ux-cropperjs')]
+#[Route('/ux-cropperjs', name: 'app_ux_cropperjs_')]
 final class CropperjsController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+    public function __construct(
+        #[Autowire('%kernel.project_dir%/public')]
+        private string $publicDir
+    ) {}
+
+    #[Route('/crop', name: 'crop')]
+    public function crop(CropperInterface $cropper, Request $request): Response
     {
-        return $this->render('ux_cropperjs/index.html.twig', [
-            'controller_name' => 'CropperjsController',
+        $crop = $cropper->createCrop($this->publicDir . '/images/example.jpg');
+        $crop->setCroppedMaxSize(800, 600);
+
+        $form = $this->createFormBuilder(['crop' => $crop])
+            ->add('crop', CropperType::class, [
+                'public_url' => '/images/example.jpg',
+                'cropper_options' => [
+                    'viewMode' => 1,
+                ],
+            ])
+            ->getForm();
+
+        $form->handleRequest($request);
+
+        $croppedImageData = null;
+        if ($form->isSubmitted() && $form->isValid()) {
+            // Get the cropped image as base64
+            $croppedImageData = base64_encode($crop->getCroppedImage());
+        }
+
+        return $this->render('ux_cropperjs/crop.html.twig', [
+            'form' => $form,
+            'croppedImageData' => $croppedImageData,
+        ]);
+    }
+
+    #[Route('/crop-with-aspect-ratio', name: 'crop_with_aspect_ratio')]
+    public function cropWithAspectRatio(CropperInterface $cropper, Request $request): Response
+    {
+        $crop = $cropper->createCrop($this->publicDir . '/images/example.jpg');
+        $crop->setCroppedMaxSize(1920, 1080);
+
+        $form = $this->createFormBuilder(['crop' => $crop])
+            ->add('crop', CropperType::class, [
+                'public_url' => '/images/example.jpg',
+                'cropper_options' => [
+                    'aspectRatio' => 16 / 9,
+                    'viewMode' => 1,
+                ],
+            ])
+            ->getForm();
+
+        $form->handleRequest($request);
+
+        $croppedImageData = null;
+        if ($form->isSubmitted() && $form->isValid()) {
+            // Get the cropped image as base64
+            $croppedImageData = base64_encode($crop->getCroppedImage());
+        }
+
+        return $this->render('ux_cropperjs/crop.html.twig', [
+            'form' => $form,
+            'croppedImageData' => $croppedImageData,
         ]);
     }
 }
diff --git a/apps/e2e/src/Controller/DropzoneController.php b/apps/e2e/src/Controller/DropzoneController.php
index 1dfe103d6f5..baa4b73bf00 100644
--- a/apps/e2e/src/Controller/DropzoneController.php
+++ b/apps/e2e/src/Controller/DropzoneController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-dropzone')]
+#[Route('/ux-dropzone', name: 'app_ux_dropzone_')]
 final class DropzoneController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_dropzone/index.html.twig', [
diff --git a/apps/e2e/src/Controller/HomeController.php b/apps/e2e/src/Controller/HomeController.php
index 31e48e7d8a8..76f7402fa88 100644
--- a/apps/e2e/src/Controller/HomeController.php
+++ b/apps/e2e/src/Controller/HomeController.php
@@ -2,7 +2,6 @@
 
 namespace App\Controller;
 
-use App\Repository\ExampleRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
@@ -10,10 +9,8 @@
 final class HomeController extends AbstractController
 {
     #[Route('/', name: 'app_home')]
-    public function index(ExampleRepository $exampleRepository): Response
+    public function index(): Response
     {
-        return $this->render('home.html.twig', [
-            'examples_by_package' => $exampleRepository->findAllByPackage(),
-        ]);
+        return $this->render('home.html.twig');
     }
 }
diff --git a/apps/e2e/src/Controller/IconsController.php b/apps/e2e/src/Controller/IconsController.php
index 81b47258867..b0f0d6c89ef 100644
--- a/apps/e2e/src/Controller/IconsController.php
+++ b/apps/e2e/src/Controller/IconsController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-icons')]
+#[Route('/ux-icons', name: 'app_ux_icons_')]
 final class IconsController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_icons/index.html.twig', [
diff --git a/apps/e2e/src/Controller/LiveComponentController.php b/apps/e2e/src/Controller/LiveComponentController.php
index c348f73d733..b85474a3774 100644
--- a/apps/e2e/src/Controller/LiveComponentController.php
+++ b/apps/e2e/src/Controller/LiveComponentController.php
@@ -6,14 +6,68 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-live-component')]
+#[Route('/ux-live-component', name: 'app_ux_live_component_')]
 final class LiveComponentController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+    #[Route('/counter', name: 'counter')]
+    public function counter(): Response
     {
-        return $this->render('ux_live_component/index.html.twig', [
-            'controller_name' => 'LiveComponentController',
+        return $this->render('ux_live_component/counter.html.twig');
+    }
+
+    #[Route('/registration-form', name: 'registration_form')]
+    public function registrationForm(): Response
+    {
+        return $this->render('ux_live_component/registration_form.html.twig');
+    }
+
+    #[Route('/fruits/{page?1}', name: 'fruits')]
+    public function fruits(int $page): Response
+    {
+        return $this->render('ux_live_component/fruits.html.twig', [
+            'page' => $page,
         ]);
     }
+
+    #[Route('/with-dto', name: 'with_dto')]
+    public function withDto(): Response
+    {
+        return $this->render('ux_live_component/with_dto.html.twig');
+    }
+
+    #[Route('/with-dto-collection', name: 'with_dto_collection')]
+    public function withDtoCollection(): Response
+    {
+        return $this->render('ux_live_component/with_dto_collection.html.twig');
+    }
+
+    #[Route('/with-dto-and-serializer', name: 'with_dto_and_serializer')]
+    public function withDtoAndSerializer(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_serializer.html.twig');
+    }
+
+    #[Route('/with-dto-and-custom-hydration-methods', name: 'with_dto_and_custom_hydration_methods')]
+    public function withDtoAndCustomHydrationMethods(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_custom_hydration_methods.html.twig');
+    }
+
+    #[Route('/with-dto-and-hydration-extension', name: 'with_dto_and_hydration_extension')]
+    public function withDtoAndHydrationExtension(): Response
+    {
+        return $this->render('ux_live_component/with_dto_and_hydration_extension.html.twig');
+    }
+
+    #[Route('/item-list', name: 'item_list')]
+    public function itemList(): Response
+    {
+        return $this->render('ux_live_component/item_list.html.twig');
+    }
+
+    #[Route('/with-aliased-live-props', name: 'with_aliased_live_props')]
+    public function withAliasedLiveProps(): Response
+    {
+        return $this->render('ux_live_component/with_aliased_live_props.html.twig');
+    }
 }
diff --git a/apps/e2e/src/Controller/MapController.php b/apps/e2e/src/Controller/MapController.php
index b374a859317..2b0c3589b4a 100644
--- a/apps/e2e/src/Controller/MapController.php
+++ b/apps/e2e/src/Controller/MapController.php
@@ -19,10 +19,10 @@
 use Symfony\UX\Map\Polyline;
 use Symfony\UX\Map\Rectangle;
 
-#[Route('/ux-map')]
+#[Route('/ux-map', name: 'app_ux_map_')]
 final class MapController extends AbstractController
 {
-    #[Route('/basic')]
+    #[Route('/basic', name: 'basic')]
     public function basic(
         #[MapQueryParameter] MapRenderer $renderer
     ): Response {
@@ -34,7 +34,7 @@ public function basic(
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-fit-bounds-to-markers')]
+    #[Route('/with-markers-and-fit-bounds-to-markers', name: 'with_markers_and_fit_bounds_to_markers')]
     public function withMarkersAndFitBoundsToMarkers(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -52,7 +52,7 @@ public function withMarkersAndFitBoundsToMarkers(#[MapQueryParameter] MapRendere
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-zoomed-on-paris')]
+    #[Route('/with-markers-and-zoomed-on-paris', name: 'with_markers_and_zoomed_on_paris')]
     public function withMarkersZoomedOnParis(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -71,7 +71,7 @@ public function withMarkersZoomedOnParis(#[MapQueryParameter] MapRenderer $rende
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-info-windows')]
+    #[Route('/with-markers-and-info-windows', name: 'with_markers_and_info_windows')]
     public function withMarkersAndInfoWindows(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -91,7 +91,7 @@ public function withMarkersAndInfoWindows(#[MapQueryParameter] MapRenderer $rend
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-markers-and-custom-icons')]
+    #[Route('/with-markers-and-custom-icons', name: 'with_markers_and_custom_icons')]
     public function withMarkersAndCustomIcons(
         #[MapQueryParameter] MapRenderer $renderer,
         #[Autowire(service: 'asset_mapper.asset_package')] PackageInterface $package,
@@ -119,7 +119,7 @@ public function withMarkersAndCustomIcons(
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-polygons')]
+    #[Route('/with-polygons', name: 'with_polygons')]
     public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -160,7 +160,7 @@ public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Respon
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-polylines')]
+    #[Route('/with-polylines', name: 'with_polylines')]
     public function withPolylines(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -192,7 +192,7 @@ public function withPolylines(#[MapQueryParameter] MapRenderer $renderer): Respo
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-circles')]
+    #[Route('/with-circles', name: 'with_circles')]
     public function withCircles(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
@@ -217,7 +217,7 @@ public function withCircles(#[MapQueryParameter] MapRenderer $renderer): Respons
         return $this->render('ux_map/render_map.html.twig', ['map' => $map]);
     }
 
-    #[Route('/with-rectangles')]
+    #[Route('/with-rectangles', name: 'with_rectangles')]
     public function withRectangles(#[MapQueryParameter] MapRenderer $renderer): Response
     {
         $map = (new Map(rendererName: $renderer->value))
diff --git a/apps/e2e/src/Controller/NotifyController.php b/apps/e2e/src/Controller/NotifyController.php
index 9f53da9ade6..a1f81b2d6b2 100644
--- a/apps/e2e/src/Controller/NotifyController.php
+++ b/apps/e2e/src/Controller/NotifyController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-notify')]
+#[Route('/ux-notify', name: 'app_ux_notify_')]
 final class NotifyController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_notify/index.html.twig', [
diff --git a/apps/e2e/src/Controller/ReactController.php b/apps/e2e/src/Controller/ReactController.php
index 5f45a282737..8ab8b99527c 100644
--- a/apps/e2e/src/Controller/ReactController.php
+++ b/apps/e2e/src/Controller/ReactController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-react')]
+#[Route('/ux-react', name: 'app_ux_react_')]
 final class ReactController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_react/index.html.twig');
diff --git a/apps/e2e/src/Controller/SvelteController.php b/apps/e2e/src/Controller/SvelteController.php
index b17d5bfacb3..e807cbb0d5b 100644
--- a/apps/e2e/src/Controller/SvelteController.php
+++ b/apps/e2e/src/Controller/SvelteController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-svelte')]
+#[Route('/ux-svelte', name: 'app_ux_svelte_')]
 final class SvelteController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_svelte/index.html.twig');
diff --git a/apps/e2e/src/Controller/TestAutocompleteController.php b/apps/e2e/src/Controller/TestAutocompleteController.php
new file mode 100644
index 00000000000..9a12f7a6b7c
--- /dev/null
+++ b/apps/e2e/src/Controller/TestAutocompleteController.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/test-autocomplete', name: 'app_test_autocomplete_')]
+final class TestAutocompleteController extends AbstractController
+{
+    #[Route('/dynamic-form', name: 'dynamic_form')]
+    public function dynamicForm(): Response
+    {
+        return $this->render('test/autocomplete_dynamic_form.html.twig');
+    }
+
+    #[Route('/movie', name: 'movie')]
+    public function movie(Request $request): JsonResponse
+    {
+        $query = $request->query->get('query', '');
+
+        $movies = [
+            ['value' => 'movie_1', 'text' => 'The Matrix (1999)', 'title' => 'movie Movie #1'],
+            ['value' => 'movie_2', 'text' => 'Inception (2010)', 'title' => 'movie Movie #2'],
+            ['value' => 'movie_3', 'text' => 'The Dark Knight (2008)', 'title' => 'movie Movie #3'],
+            ['value' => 'movie_4', 'text' => 'Interstellar (2014)', 'title' => 'movie Movie #4'],
+            ['value' => 'movie_5', 'text' => 'Pulp Fiction (1994)', 'title' => 'movie Movie #5'],
+        ];
+
+        $results = array_filter($movies, function ($movie) use ($query) {
+            return '' === $query || false !== stripos($movie['text'], $query);
+        });
+
+        return $this->json([
+            'results' => array_values($results),
+        ]);
+    }
+
+    #[Route('/videogame', name: 'videogame')]
+    public function videogame(Request $request): JsonResponse
+    {
+        $query = $request->query->get('query', '');
+
+        $games = [
+            ['value' => 'videogame_1', 'text' => 'Halo: Combat Evolved (2001)', 'title' => 'videogame Game #1'],
+            ['value' => 'videogame_2', 'text' => 'The Legend of Zelda (1986)', 'title' => 'videogame Game #2'],
+            ['value' => 'videogame_3', 'text' => 'Half-Life 2 (2004)', 'title' => 'videogame Game #3'],
+            ['value' => 'videogame_4', 'text' => 'Portal (2007)', 'title' => 'videogame Game #4'],
+            ['value' => 'videogame_5', 'text' => 'Mass Effect 2 (2010)', 'title' => 'videogame Game #5'],
+        ];
+
+        $results = array_filter($games, function ($game) use ($query) {
+            return '' === $query || false !== stripos($game['text'], $query);
+        });
+
+        return $this->json([
+            'results' => array_values($results),
+        ]);
+    }
+}
diff --git a/apps/e2e/src/Controller/TranslatorController.php b/apps/e2e/src/Controller/TranslatorController.php
index 0d3ecf2611c..f09184fbd24 100644
--- a/apps/e2e/src/Controller/TranslatorController.php
+++ b/apps/e2e/src/Controller/TranslatorController.php
@@ -6,52 +6,52 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-translator')]
+#[Route('/ux-translator', name: 'app_ux_translator_')]
 final class TranslatorController extends AbstractController
 {
-    #[Route('/basic')]
+    #[Route('/basic', name: 'basic')]
     public function basic(): Response
     {
         return $this->render('ux_translator/basic.html.twig');
     }
 
-    #[Route('/with-parameter')]
+    #[Route('/with-parameter', name: 'with_parameter')]
     public function withParameter(): Response
     {
         return $this->render('ux_translator/with_parameter.html.twig');
     }
 
-    #[Route('/icu-select')]
+    #[Route('/icu-select', name: 'icu_select')]
     public function icuSelect(): Response
     {
         return $this->render('ux_translator/icu_select.html.twig');
     }
 
-    #[Route('/icu-plural')]
+    #[Route('/icu-plural', name: 'icu_plural')]
     public function icuPlural(): Response
     {
         return $this->render('ux_translator/icu_plural.html.twig');
     }
 
-    #[Route('/icu-selectordinal')]
+    #[Route('/icu-selectordinal', name: 'icu_selectordinal')]
     public function icuSelectOrdinal(): Response
     {
         return $this->render('ux_translator/icu_selectordinal.html.twig');
     }
 
-    #[Route('/icu-date-time')]
+    #[Route('/icu-date-time', name: 'icu_date_time')]
     public function icuDateTime(): Response
     {
         return $this->render('ux_translator/icu_date_time.html.twig');
     }
 
-    #[Route('/icu-number-percent')]
+    #[Route('/icu-number-percent', name: 'icu_number_percent')]
     public function icuNumberPercent(): Response
     {
         return $this->render('ux_translator/icu_number_percent.html.twig');
     }
 
-    #[Route('/icu-number-currency')]
+    #[Route('/icu-number-currency', name: 'icu_number_currency')]
     public function icuNumberCurrency(): Response
     {
         return $this->render('ux_translator/icu_number_currency.html.twig');
diff --git a/apps/e2e/src/Controller/TurboController.php b/apps/e2e/src/Controller/TurboController.php
index 52646713c9b..9b3ec0b5db6 100644
--- a/apps/e2e/src/Controller/TurboController.php
+++ b/apps/e2e/src/Controller/TurboController.php
@@ -3,17 +3,57 @@
 namespace App\Controller;
 
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\UX\Turbo\TurboBundle;
 
-#[Route('/ux-turbo')]
+#[Route('/ux-turbo', name: 'app_ux_turbo_')]
 final class TurboController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+
+    #[Route('/drive', name: 'drive')]
+    public function drive(
+        #[MapQueryParameter] int $page = 1,
+    ): Response
     {
-        return $this->render('ux_turbo/index.html.twig', [
-            'controller_name' => 'TurboController',
+        if ($page === 2) {
+            return $this->render('ux_turbo/drive_page_2.html.twig', [
+                'current_time' => (new \DateTimeImmutable())->format(\DateTimeInterface::RFC3339_EXTENDED),
+            ]);
+        }
+
+        return $this->render('ux_turbo/drive.html.twig', [
+            'current_time' => (new \DateTimeImmutable())->format(\DateTimeInterface::RFC3339_EXTENDED),
         ]);
     }
+
+
+    #[Route('/frame', name: 'frame')]
+    public function frame(): Response
+    {
+        return $this->render('ux_turbo/frame.html.twig');
+    }
+
+    #[Route('/frame-content', name: 'frame_content')]
+    public function frameContent(): Response
+    {
+        return $this->render('ux_turbo/frame_content.html.twig');
+    }
+
+    #[Route('/stream', name: 'stream')]
+    public function streamAction(Request $request): Response
+    {
+        if ($request->isMethod('POST')) {
+            if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
+                $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
+                return $this->render('ux_turbo/stream_response.html.twig');
+            }
+
+            return $this->redirectToRoute('app_ux_turbo_stream');
+        }
+
+        return $this->render('ux_turbo/stream.html.twig');
+    }
 }
diff --git a/apps/e2e/src/Controller/TwigComponentController.php b/apps/e2e/src/Controller/TwigComponentController.php
index ffd489a0ae7..05f0e103204 100644
--- a/apps/e2e/src/Controller/TwigComponentController.php
+++ b/apps/e2e/src/Controller/TwigComponentController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-twig-component')]
+#[Route('/ux-twig-component', name: 'app_ux_twig_component_')]
 final class TwigComponentController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_twig_component/index.html.twig', [
diff --git a/apps/e2e/src/Controller/TypedController.php b/apps/e2e/src/Controller/TypedController.php
index 1d9c76906ec..00999ab3604 100644
--- a/apps/e2e/src/Controller/TypedController.php
+++ b/apps/e2e/src/Controller/TypedController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-typed')]
+#[Route('/ux-typed', name: 'app_ux_typed_')]
 final class TypedController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_typed/index.html.twig', [
diff --git a/apps/e2e/src/Controller/VueController.php b/apps/e2e/src/Controller/VueController.php
index 938858ea9c0..3988b4f66a7 100644
--- a/apps/e2e/src/Controller/VueController.php
+++ b/apps/e2e/src/Controller/VueController.php
@@ -6,10 +6,10 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
-#[Route('/ux-vue')]
+#[Route('/ux-vue', name: 'app_ux_vue_')]
 final class VueController extends AbstractController
 {
-    #[Route('/')]
+    #[Route('/', name: 'index')]
     public function index(): Response
     {
         return $this->render('ux_vue/index.html.twig');
diff --git a/apps/e2e/src/Entity/Fruit.php b/apps/e2e/src/Entity/Fruit.php
new file mode 100644
index 00000000000..3ad9f798b9a
--- /dev/null
+++ b/apps/e2e/src/Entity/Fruit.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Entity;
+
+use App\Repository\FruitRepository;
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity(repositoryClass: FruitRepository::class)]
+class Fruit
+{
+    #[ORM\Id]
+    #[ORM\Column(length: 64, nullable: false)]
+    private string $id;
+
+    #[ORM\Column(length: 64, nullable: false)]
+    private string $name;
+
+    public static function create(string $id, string $name): self
+    {
+        $fruit = new self();
+        $fruit->id = $id;
+        $fruit->name = $name;
+
+        return $fruit;
+    }
+
+    public function getId(): string
+    {
+        return $this->id;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+}
diff --git a/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php b/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php
index 1b056a18c0d..79f203e19bd 100644
--- a/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php
+++ b/apps/e2e/src/EventListener/ResolveExampleForUrlListener.php
@@ -30,7 +30,7 @@ public function __invoke(RequestEvent $event): void
             return;
         }
 
-        $example = $this->exampleRepository->findOneByUrl($event->getRequest()->getRequestUri());
+        $example = $this->exampleRepository->findOneByRoute($event->getRequest()->attributes->get('_route'));
         $event->getRequest()->attributes->set('_example', $example);
     }
 }
diff --git a/apps/e2e/src/Example.php b/apps/e2e/src/Example.php
index 9ecade603f4..4adab0b2597 100644
--- a/apps/e2e/src/Example.php
+++ b/apps/e2e/src/Example.php
@@ -17,7 +17,8 @@ public function __construct(
         public UxPackage $uxPackage,
         public string $name,
         public string $description,
-        public string $url
+        public string $routeName,
+        public array $routeParameters = [],
     ) {
     }
 }
diff --git a/apps/e2e/src/Factory/FruitFactory.php b/apps/e2e/src/Factory/FruitFactory.php
new file mode 100644
index 00000000000..b30b525f577
--- /dev/null
+++ b/apps/e2e/src/Factory/FruitFactory.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Factory;
+
+use App\Entity\Fruit;
+use Zenstruck\Foundry\Object\Instantiator;
+use Zenstruck\Foundry\Persistence\PersistentProxyObjectFactory;
+
+/**
+ * @extends PersistentProxyObjectFactory<Fruit>
+ */
+final class FruitFactory extends PersistentProxyObjectFactory
+{
+    public static function class(): string
+    {
+        return Fruit::class;
+    }
+
+    /**
+     * @see https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#model-factories
+     */
+    protected function defaults(): array|callable
+    {
+        return [];
+    }
+
+    /**
+     * @see https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#initialization
+     */
+    protected function initialize(): static
+    {
+        return $this
+            ->instantiateWith(Instantiator::namedConstructor('create'))
+        ;
+    }
+}
diff --git a/apps/e2e/src/Form/FruitAutocompleteField.php b/apps/e2e/src/Form/FruitAutocompleteField.php
new file mode 100644
index 00000000000..33d0d1776d5
--- /dev/null
+++ b/apps/e2e/src/Form/FruitAutocompleteField.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Form;
+
+use App\Entity\Fruit;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\Autocomplete\Form\AsEntityAutocompleteField;
+use Symfony\UX\Autocomplete\Form\BaseEntityAutocompleteType;
+
+#[AsEntityAutocompleteField]
+class FruitAutocompleteField extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'class' => Fruit::class,
+            'placeholder' => 'Choose a Fruit',
+            'choice_value' => static fn (?Fruit $fruit) => $fruit?->getId(),
+            'choice_label' => static fn (Fruit $fruit) => $fruit->getName(),
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return BaseEntityAutocompleteType::class;
+    }
+}
diff --git a/apps/e2e/src/Form/Model/ProductionDto.php b/apps/e2e/src/Form/Model/ProductionDto.php
new file mode 100644
index 00000000000..8c6f2c028d2
--- /dev/null
+++ b/apps/e2e/src/Form/Model/ProductionDto.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Form\Model;
+
+class ProductionDto
+{
+    public ?string $type = null;
+
+    public ?string $movieSearch = null;
+
+    public ?string $videogameSearch = null;
+
+    public ?string $title = null;
+}
diff --git a/apps/e2e/src/Form/Type/MovieAutocompleteType.php b/apps/e2e/src/Form/Type/MovieAutocompleteType.php
new file mode 100644
index 00000000000..b487bd79495
--- /dev/null
+++ b/apps/e2e/src/Form/Type/MovieAutocompleteType.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class MovieAutocompleteType extends AbstractType
+{
+    public function __construct(
+        private UrlGeneratorInterface $urlGenerator
+    ) {
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'autocomplete' => true,
+            'autocomplete_url' => $this->urlGenerator->generate('app_test_autocomplete_movie'),
+            'tom_select_options' => [
+                'maxOptions' => null,
+            ],
+            'attr' => [
+                'data-test-id' => 'movie-autocomplete',
+                'data-controller' => 'movie-autocomplete',
+            ],
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return TextType::class;
+    }
+}
diff --git a/apps/e2e/src/Form/Type/ProductionType.php b/apps/e2e/src/Form/Type/ProductionType.php
new file mode 100644
index 00000000000..137148e56df
--- /dev/null
+++ b/apps/e2e/src/Form/Type/ProductionType.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Form\Type;
+
+use App\Form\Model\ProductionDto;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfonycasts\DynamicForms\DependentField;
+use Symfonycasts\DynamicForms\DynamicFormBuilder;
+
+class ProductionType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder = new DynamicFormBuilder($builder);
+
+        $builder
+            ->add('type', ChoiceType::class, [
+                'choices' => [
+                    'Movie' => 'movie',
+                    'Videogame' => 'videogame',
+                ],
+                'placeholder' => 'Select a type',
+                'attr' => [
+                    'data-test-id' => 'production-type',
+                ],
+            ])
+            ->addDependent('movieSearch', ['type'], function (DependentField $field, ?string $type) {
+                if ('movie' !== $type) {
+                    return;
+                }
+
+                $field->add(MovieAutocompleteType::class, [
+                    'label' => 'Search Movies',
+                    'required' => false,
+                ]);
+            })
+            ->addDependent('videogameSearch', ['type'], function (DependentField $field, ?string $type) {
+                if ('videogame' !== $type) {
+                    return;
+                }
+
+                $field->add(VideogameAutocompleteType::class, [
+                    'label' => 'Search Videogames',
+                    'required' => false,
+                ]);
+            })
+            ->add('title', TextType::class, [
+                'required' => false,
+                'attr' => [
+                    'data-test-id' => 'production-title',
+                ],
+            ])
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'data_class' => ProductionDto::class,
+        ]);
+    }
+}
diff --git a/apps/e2e/src/Form/Type/VideogameAutocompleteType.php b/apps/e2e/src/Form/Type/VideogameAutocompleteType.php
new file mode 100644
index 00000000000..dcd7abb2f4b
--- /dev/null
+++ b/apps/e2e/src/Form/Type/VideogameAutocompleteType.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class VideogameAutocompleteType extends AbstractType
+{
+    public function __construct(
+        private UrlGeneratorInterface $urlGenerator
+    ) {
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'autocomplete' => true,
+            'autocomplete_url' => $this->urlGenerator->generate('app_test_autocomplete_videogame'),
+            'tom_select_options' => [
+                'maxOptions' => null,
+            ],
+            'attr' => [
+                'data-test-id' => 'videogame-autocomplete',
+                'data-controller' => 'videogame-autocomplete',
+            ],
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return TextType::class;
+    }
+}
diff --git a/apps/e2e/src/Hydration/PointHydrationExtension.php b/apps/e2e/src/Hydration/PointHydrationExtension.php
new file mode 100644
index 00000000000..cd9c7af561f
--- /dev/null
+++ b/apps/e2e/src/Hydration/PointHydrationExtension.php
@@ -0,0 +1,48 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Hydration;
+
+use App\Model\Point;
+use Symfony\UX\LiveComponent\Hydration\HydrationExtensionInterface;
+
+/**
+ * @template TData of Point
+ * @template TDehydrated of array{point-x: float; point-y: float}
+ */
+class PointHydrationExtension implements HydrationExtensionInterface
+{
+    public function supports(string $className): bool
+    {
+        return is_a($className, Point::class, true);
+    }
+
+    /**
+     * @param TDehydrated $value
+     * @return null|TData
+     */
+    public function hydrate(mixed $value, string $className): ?object
+    {
+        return Point::create($value['px'], $value['py']);
+    }
+
+    /**
+     * @param TData $object
+     * @return TDehydrated
+     */
+    public function dehydrate(object $object): mixed
+    {
+        return [
+            'px' => $object->x,
+            'py' => $object->y,
+        ];
+    }
+}
diff --git a/apps/e2e/src/Model/Address.php b/apps/e2e/src/Model/Address.php
new file mode 100644
index 00000000000..58e600c05e1
--- /dev/null
+++ b/apps/e2e/src/Model/Address.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Model;
+
+class Address
+{
+    public string $country;
+    public string $city;
+
+    public static function create(string $country, string $city): self
+    {
+        $address = new self();
+        $address->country = $country;
+        $address->city = $city;
+
+        return $address;
+    }
+}
diff --git a/apps/e2e/src/Model/Point.php b/apps/e2e/src/Model/Point.php
new file mode 100644
index 00000000000..cad0cec6bce
--- /dev/null
+++ b/apps/e2e/src/Model/Point.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Model;
+
+class Point
+{
+    public float $x;
+    public float $y;
+
+    public static function create(float $x, float $y): self
+    {
+        $point = new self();
+        $point->x = $x;
+        $point->y = $y;
+
+        return $point;
+    }
+}
diff --git a/apps/e2e/src/Normalizer/AddressNormalizer.php b/apps/e2e/src/Normalizer/AddressNormalizer.php
new file mode 100644
index 00000000000..b84328741da
--- /dev/null
+++ b/apps/e2e/src/Normalizer/AddressNormalizer.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Normalizer;
+
+use App\Model\Address;
+use Symfony\Component\Serializer\Normalizer\DenormalizerInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizableInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+class AddressNormalizer implements NormalizerInterface, DenormalizerInterface
+{
+    public function supportsNormalization(mixed $data, ?string $format = null, array $context = []): bool
+    {
+        return $data instanceof Address;
+    }
+
+    /**
+     * @param Address $data
+     */
+    public function normalize(mixed $data, ?string $format = null, array $context = []): array
+    {
+        return [
+            'serialized_country' => $data->country,
+            'serialized_city' => $data->city,
+        ];
+    }
+
+    public function supportsDenormalization(mixed $data, string $type, ?string $format = null, array $context = []): bool
+    {
+        return $type === Address::class;
+    }
+
+    public function denormalize($data, string $type, ?string $format = null, array $context = []): object
+    {
+        return Address::create(
+            country: $data['serialized_country'],
+            city: $data['serialized_city'],
+        );
+    }
+
+    public function getSupportedTypes(?string $format): array
+    {
+        return [Address::class => true];
+    }
+}
\ No newline at end of file
diff --git a/apps/e2e/src/Repository/ExampleRepository.php b/apps/e2e/src/Repository/ExampleRepository.php
index 51f3e2a3f9b..61379893b09 100644
--- a/apps/e2e/src/Repository/ExampleRepository.php
+++ b/apps/e2e/src/Repository/ExampleRepository.php
@@ -21,37 +21,60 @@ class ExampleRepository
      */
     private array $examples;
 
-    public function __construct() {
+    public function __construct()
+    {
         $this->examples = [
-            new Example(UxPackage::Map, 'Basic map (Leaflet)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=leaflet'),
-            new Example(UxPackage::Map, 'Basic map (Google)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=google'),
-            new Example(UxPackage::Map, 'With markers, fit bounds (Leaflet)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With markers, fit bounds (Google)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=google'),
-            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Leaflet)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Google)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=google'),
-            new Example(UxPackage::Map, 'With markers and info windows (Leaflet)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With markers and info windows (Google)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=google'),
-            new Example(UxPackage::Map, 'With custom icon markers (Leaflet)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With custom icon markers (Google)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=google'),
-            new Example(UxPackage::Map, 'With polygons (Leaflet)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With polygons (Google)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=google'),
-            new Example(UxPackage::Map, 'With polylines (Leaflet)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With polylines (Google)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=google'),
-            new Example(UxPackage::Map, 'With circles (Leaflet)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With circles (Google)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=google'),
-            new Example(UxPackage::Map, 'With rectangles (Leaflet)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=leaflet'),
-            new Example(UxPackage::Map, 'With rectangles (Google)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=google'),
-            new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', '/ux-react/'),
-            new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', '/ux-svelte/'),
-           new Example(UxPackage::Translator, 'Basic translation', 'A simple translation example using the Translator component', '/ux-translator/basic'),
-           new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', '/ux-translator/with-parameter'),
-           new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', '/ux-translator/icu-select'),
-           new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', '/ux-translator/icu-plural'),
-           new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', '/ux-translator/icu-selectordinal'),
-           new Example(UxPackage::Translator, 'ICU Translation with `date` and `time` arguments', 'ICU message format example using `date` and `time` arguments', '/ux-translator/icu-date-time'),
-           new Example(UxPackage::Translator, 'ICU Translation with `number` and `percent` arguments', 'ICU message format example using `number` and `percent` arguments', '/ux-translator/icu-number-percent'),
-           new Example(UxPackage::Translator, 'ICU Translation with `number` and `currency` arguments', 'ICU message format example using `number` and `currency` arguments', '/ux-translator/icu-number-currency'),
-            new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'),
+            new Example(UxPackage::Autocomplete, 'Autocomplete (without AJAX)', 'An autocomplete form field, by using the choses from the choice type field.', 'app_ux_autocomplete_without_ajax'),
+            new Example(UxPackage::Autocomplete, 'Autocomplete (custom controller)', 'An autocomplete form field, with a custom Stimulus controller for AJAX results.', 'app_ux_autocomplete_custom_controller'),
+            new Example(UxPackage::ChartJs, 'Line chart without options', 'A basic line chart displaying monthly data without additional options.', 'app_ux_chartjs_without_options'),
+            new Example(UxPackage::ChartJs, 'Line chart with options', 'A line chart with custom options (showLines: false) that displays data points without connecting lines.', 'app_ux_chartjs_with_options'),
+            new Example(UxPackage::ChartJs, 'Pie chart', 'A pie chart displaying data distribution across different categories.', 'app_ux_chartjs_pie'),
+            new Example(UxPackage::ChartJs, 'Pie chart with options', 'A pie chart with custom options to control the appearance and behavior.', 'app_ux_chartjs_pie_with_options'),
+            new Example(UxPackage::Cropperjs, 'Image cropper', 'Crop an image with Cropper.js using default options.', 'app_ux_cropperjs_crop'),
+            new Example(UxPackage::Cropperjs, 'Image cropper with aspect ratio', 'Crop an image with a fixed 16:9 aspect ratio constraint.', 'app_ux_cropperjs_crop_with_aspect_ratio'),
+            new Example(UxPackage::LiveComponent, 'Examples filtering', "On this page, you can filter all examples by query terms, and observe how the UI and URLs update during and after processing.", 'app_home'),
+            new Example(UxPackage::LiveComponent, 'Counter', 'A basic counter that you can increment or decrement.', 'app_ux_live_component_counter'),
+            new Example(UxPackage::Turbo, 'Turbo Drive navigation', 'Navigate between pages without full page reload using Turbo Drive.', 'app_ux_turbo_drive'),
+            new Example(UxPackage::Turbo, 'Turbo Frame', 'A scoped section that navigates independently from the rest of the page.', 'app_ux_turbo_frame'),
+            new Example(UxPackage::Turbo, 'Turbo Stream after form submit', 'Update page content with Turbo Streams after a form submission.', 'app_ux_turbo_stream'),
+            new Example(UxPackage::LiveComponent, 'Registration form', 'A registration form with live validation using Symfony Forms and the Validator component.', 'app_ux_live_component_registration_form'),
+            new Example(UxPackage::LiveComponent, 'Paginated fruits list', 'A paginated list of fruits, where the current page is persisted in the URL as a path parameter.', 'app_ux_live_component_fruits'),
+            new Example(UxPackage::LiveComponent, 'With DTO', 'A live component that uses a DTO to encapsulate its state.', 'app_ux_live_component_with_dto'),
+            new Example(UxPackage::LiveComponent, 'With DTO Collection', 'A live component that uses a collection of Data Transfer Objects (DTOs) to encapsulate its state.', 'app_ux_live_component_with_dto_collection'),
+            new Example(UxPackage::LiveComponent, 'With DTO and Serializer', 'A live component that uses a DTO along with the Symfony Serializer component.', 'app_ux_live_component_with_dto_and_serializer'),
+            new Example(UxPackage::LiveComponent, 'With DTO and custom Hydration/Dehydration methods', 'A live component that uses a DTO along with custom methods to hydrate/dehydrate the DTO.', 'app_ux_live_component_with_dto_and_custom_hydration_methods'),
+            new Example(UxPackage::LiveComponent, 'With DTO and dedicated HydrationExtension', 'A live component that uses a DTO along with dedicated HydrationExtension to hydrate/dehydrate the DTO.', 'app_ux_live_component_with_dto_and_hydration_extension'),
+            new Example(UxPackage::LiveComponent, 'Item list', 'A live component with LiveProp, LiveAction and LiveArg.', 'app_ux_live_component_item_list'),
+            new Example(UxPackage::LiveComponent, 'With aliased LiveProps', 'A live component with LiveProps statically and dynamically aliased.', 'app_ux_live_component_with_aliased_live_props'),
+            new Example(UxPackage::Map, 'Basic map (Leaflet)', 'A basic map centered on Paris with zoom level 12', 'app_ux_map_basic', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'Basic map (Google)', 'A basic map centered on Paris with zoom level 12', 'app_ux_map_basic', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With markers, fit bounds (Leaflet)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', 'app_ux_map_with_markers_and_fit_bounds_to_markers', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With markers, fit bounds (Google)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', 'app_ux_map_with_markers_and_fit_bounds_to_markers', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Leaflet)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', 'app_ux_map_with_markers_and_zoomed_on_paris', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Google)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', 'app_ux_map_with_markers_and_zoomed_on_paris', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With markers and info windows (Leaflet)', 'A map with 2 markers (Paris and Lyon), each with an info window', 'app_ux_map_with_markers_and_info_windows', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With markers and info windows (Google)', 'A map with 2 markers (Paris and Lyon), each with an info window', 'app_ux_map_with_markers_and_info_windows', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With custom icon markers (Leaflet)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', 'app_ux_map_with_markers_and_custom_icons', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With custom icon markers (Google)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', 'app_ux_map_with_markers_and_custom_icons', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With polygons (Leaflet)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', 'app_ux_map_with_polygons', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With polygons (Google)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', 'app_ux_map_with_polygons', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With polylines (Leaflet)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', 'app_ux_map_with_polylines', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With polylines (Google)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', 'app_ux_map_with_polylines', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With circles (Leaflet)', 'A map with two circles: one centered on Paris, the other on Lyon', 'app_ux_map_with_circles', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With circles (Google)', 'A map with two circles: one centered on Paris, the other on Lyon', 'app_ux_map_with_circles', ['renderer' => 'google']),
+            new Example(UxPackage::Map, 'With rectangles (Leaflet)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', 'app_ux_map_with_rectangles', ['renderer' => 'leaflet']),
+            new Example(UxPackage::Map, 'With rectangles (Google)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', 'app_ux_map_with_rectangles', ['renderer' => 'google']),
+            new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', 'app_ux_react_index'),
+            new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', 'app_ux_svelte_index'),
+            new Example(UxPackage::Translator, 'Basic translation', 'A simple translation example using the Translator component', 'app_ux_translator_basic'),
+            new Example(UxPackage::Translator, 'Translation with parameter', 'Translation example with dynamic parameters', 'app_ux_translator_with_parameter'),
+            new Example(UxPackage::Translator, 'ICU Translation with `select` argument', 'ICU message format example using the `select` argument', 'app_ux_translator_icu_select'),
+            new Example(UxPackage::Translator, 'ICU Translation with `plural` argument', 'ICU message format example using the `plural` argument', 'app_ux_translator_icu_plural'),
+            new Example(UxPackage::Translator, 'ICU Translation with `selectordinal` argument', 'ICU message format example using the `selectordinal` argument', 'app_ux_translator_icu_selectordinal'),
+            new Example(UxPackage::Translator, 'ICU Translation with `date` and `time` arguments', 'ICU message format example using `date` and `time` arguments', 'app_ux_translator_icu_date_time'),
+            new Example(UxPackage::Translator, 'ICU Translation with `number` and `percent` arguments', 'ICU message format example using `number` and `percent` arguments', 'app_ux_translator_icu_number_percent'),
+            new Example(UxPackage::Translator, 'ICU Translation with `number` and `currency` arguments', 'ICU message format example using `number` and `currency` arguments', 'app_ux_translator_icu_number_currency'),
+            new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', 'app_ux_vue_index'),
         ];
     }
 
@@ -63,21 +86,32 @@ public function findAll(): array
         return $this->examples;
     }
 
-    public function findAllByPackage(): array
+    /**
+     * @return array<string, list<Example>>
+     */
+    public function findAllGroupedByPackage(string|null $query = null): array
     {
         $grouped = [];
+        $examples = $this->examples;
 
-        foreach ($this->examples as $example) {
+        if (null !== $query) {
+            $query = strtolower($query);
+            $examples = array_filter($examples,
+                fn(Example $example) => false !== mb_stripos($example->uxPackage->name . ' ' . $example->name . ' ' . $example->description, $query)
+            );
+        }
+
+        foreach ($examples as $example) {
             $grouped[$example->uxPackage->value][] = $example;
         }
 
         return $grouped;
     }
 
-    public function findOneByUrl(string $url): ?Example
+    public function findOneByRoute(string $routeName): ?Example
     {
         foreach ($this->examples as $example) {
-            if ($example->url === $url) {
+            if ($example->routeName === $routeName) {
                 return $example;
             }
         }
diff --git a/apps/e2e/src/Repository/FruitRepository.php b/apps/e2e/src/Repository/FruitRepository.php
new file mode 100644
index 00000000000..6d7bf4f12f8
--- /dev/null
+++ b/apps/e2e/src/Repository/FruitRepository.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Repository;
+
+use App\Entity\Fruit;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<Fruit>
+ */
+class FruitRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Fruit::class);
+    }
+
+    /**
+     * @param positive-int $page
+     * @param positive-int $perPage
+     * @return Fruit[]
+     */
+    public function paginate(int $page, int $perPage): array
+    {
+        return $this->createQueryBuilder('f')
+            ->setFirstResult(($page - 1) * $perPage)
+            ->setMaxResults($perPage)
+            ->getQuery()
+            ->getResult();
+    }
+}
diff --git a/apps/e2e/src/Story/AppStory.php b/apps/e2e/src/Story/AppStory.php
new file mode 100644
index 00000000000..07b1bc46459
--- /dev/null
+++ b/apps/e2e/src/Story/AppStory.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Story;
+
+use App\Factory\FruitFactory;
+use Zenstruck\Foundry\Attribute\AsFixture;
+use Zenstruck\Foundry\Story;
+
+#[AsFixture(name: 'main')]
+final class AppStory extends Story
+{
+    public function build(): void
+    {
+        FruitFactory::createSequence([
+            ['id' => 'apple', 'name' => 'Apple'],
+            ['id' => 'banana', 'name' => 'Banana'],
+            ['id' => 'cherry', 'name' => 'Cherry'],
+            ['id' => 'coconut', 'name' => 'Coconut'],
+            ['id' => 'grape', 'name' => 'Grape'],
+            ['id' => 'kiwi', 'name' => 'Kiwi'],
+            ['id' => 'lemon', 'name' => 'Lemon'],
+            ['id' => 'mango', 'name' => 'Mango'],
+            ['id' => 'orange', 'name' => 'Orange'],
+            ['id' => 'papaya', 'name' => 'Papaya'],
+            ['id' => 'peach', 'name' => 'Peach'],
+            ['id' => 'pineapple', 'name' => 'Pineapple'],
+            ['id' => 'pear', 'name' => 'Pear'],
+            ['id' => 'pomegranate', 'name' => 'Pomegranate'],
+            ['id' => 'pomelo', 'name' => 'Pomelo'],
+            ['id' => 'raspberry', 'name' => 'Raspberry'],
+            ['id' => 'strawberry', 'name' => 'Strawberry'],
+            ['id' => 'watermelon', 'name' => 'Watermelon'],
+        ]);
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithAliasedLiveProps.php b/apps/e2e/src/Twig/Components/LiveComponentWithAliasedLiveProps.php
new file mode 100644
index 00000000000..5e5d62b302d
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithAliasedLiveProps.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\Metadata\UrlMapping;
+
+#[AsLiveComponent]
+final class LiveComponentWithAliasedLiveProps
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true, url: new UrlMapping(as: 'q'))]
+    public string $query = '';
+
+    #[LiveProp(writable: true, url: true, modifier: 'modifyCategoryProp')]
+    public string $category = '';
+
+    public function modifyCategoryProp(LiveProp $liveProp): LiveProp
+    {
+        return $liveProp->withUrl(new UrlMapping(as: 'cat'));
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithDto.php b/apps/e2e/src/Twig/Components/LiveComponentWithDto.php
new file mode 100644
index 00000000000..7c187c9c91d
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithDto.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Address;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsLiveComponent]
+final class LiveComponentWithDto
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: true, writable: ['country', 'city'])]
+    public Address $address;
+
+    #[PreMount()]
+    public function preMount(array $data): array
+    {
+        $this->address = Address::create(
+            country: 'France',
+            city: 'Lyon',
+        );
+
+        return $data;
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndCustomHydrationMethods.php b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndCustomHydrationMethods.php
new file mode 100644
index 00000000000..9d5fee1237e
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndCustomHydrationMethods.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Address;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class LiveComponentWithDtoAndCustomHydrationMethods
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: true, hydrateWith: 'hydrateAddress', dehydrateWith: 'dehydrateAddress')]
+    public Address|null $address = null;
+
+    #[LiveAction]
+    public function initAddress(): void
+    {
+        $this->address = Address::create(
+            country: 'France',
+            city: 'Lyon',
+        );
+    }
+
+    public function dehydrateAddress(Address|null $address): array|null
+    {
+        if (null === $address) {
+            return null;
+        }
+
+        return [
+            'x-country' => $address->country,
+            'x-city' => $address->city
+        ];
+    }
+
+    public function hydrateAddress(array|null $data): Address
+    {
+        $address = new Address();
+
+        if (null !== $data) {
+            $address->country = $data['x-country'];
+            $address->city = $data['x-city'];
+        }
+
+        return $address;
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndHydrationExtension.php b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndHydrationExtension.php
new file mode 100644
index 00000000000..fb833886c75
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndHydrationExtension.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Point;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class LiveComponentWithDtoAndHydrationExtension
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: true)]
+    public Point|null $point = null;
+
+    #[LiveAction]
+    public function initPoint(): void
+    {
+        $this->point = Point::create(
+            x: 69.420,
+            y: -1.337,
+        );
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndSerializer.php b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndSerializer.php
new file mode 100644
index 00000000000..9fa5a78bf2a
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithDtoAndSerializer.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Address;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class LiveComponentWithDtoAndSerializer
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: true, useSerializerForHydration: true)]
+    public Address|null $address = null;
+
+    #[LiveAction]
+    public function initAddress(): void
+    {
+        $this->address = Address::create(
+            country: 'France',
+            city: 'Lyon',
+        );
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveComponentWithDtoCollection.php b/apps/e2e/src/Twig/Components/LiveComponentWithDtoCollection.php
new file mode 100644
index 00000000000..0f473f8468a
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveComponentWithDtoCollection.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Address;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsLiveComponent]
+final class LiveComponentWithDtoCollection
+{
+    use DefaultActionTrait;
+
+    /**
+     * @var Address[]
+     */
+    #[LiveProp(url: true)]
+    public array $addresses = [];
+
+    #[LiveAction]
+    public function addAddress(): void
+    {
+        if (!$this->canAddAddress()) {
+            return;
+        }
+
+        match(count($this->addresses)) {
+            0 => $this->addresses[] = Address::create(
+                country: 'France',
+                city: 'Lyon',
+            ),
+            1 => $this->addresses[] = Address::create(
+                country: 'South Korea',
+                city: 'Seoul',
+            ),
+            default => null,
+        };
+    }
+
+    #[LiveAction]
+    public function reset(): void
+    {
+        $this->addresses = [];
+    }
+
+    public function canAddAddress(): bool
+    {
+        return count($this->addresses) < 2;
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveCounter.php b/apps/e2e/src/Twig/Components/LiveCounter.php
new file mode 100644
index 00000000000..241ab6d43c5
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveCounter.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class LiveCounter
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: true)]
+    public int $value = 0;
+
+    #[LiveAction]
+    public function decrement(): void
+    {
+        $this->value -= 1;
+    }
+
+    #[LiveAction]
+    public function increment(): void
+    {
+        $this->value += 1;
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveExamplesSearch.php b/apps/e2e/src/Twig/Components/LiveExamplesSearch.php
new file mode 100644
index 00000000000..ebbbb295f71
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveExamplesSearch.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Repository\ExampleRepository;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+final class LiveExamplesSearch
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true, url: true)]
+    public string $query = '';
+
+    public function __construct(
+        private ExampleRepository $exampleRepository,
+    ) {
+    }
+
+    public function getExamplesGroupedByPackage(): iterable
+    {
+        return $this->exampleRepository->findAllGroupedByPackage($this->query);
+    }
+
+    #[LiveAction]
+    public function clearQuery(): void
+    {
+        $this->query = '';
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveFruitsPagination.php b/apps/e2e/src/Twig/Components/LiveFruitsPagination.php
new file mode 100644
index 00000000000..8a850290612
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveFruitsPagination.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Repository\FruitRepository;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\Metadata\UrlMapping;
+
+#[AsLiveComponent]
+final class LiveFruitsPagination
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(url: new UrlMapping(mapPath: true))]
+    public int $page = 1;
+
+    public function __construct(
+        private FruitRepository $fruitRepository,
+    )    {
+    }
+
+    public function getFruits(): array
+    {
+        $page = $this->page < 1 ? 1 : $this->page;
+
+        return $this->fruitRepository->paginate(page: $page, perPage: 5);
+    }
+
+    public function hasPreviousPage(): bool
+    {
+        return $this->page > 1;
+    }
+
+    public function hasNextPage(): bool
+    {
+        // not very efficient, but good enough for this example
+        return \count($this->fruitRepository->paginate(page: $this->page + 1, perPage: 8)) > 0;
+    }
+
+    #[LiveAction]
+    public function goToPreviousPage(): void
+    {
+        if ($this->hasPreviousPage()) {
+            $this->page--;
+        }
+    }
+
+    #[LiveAction]
+    public function goToNextPage(): void
+    {
+        if ($this->hasNextPage()) {
+            $this->page++;
+        }
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveItemList.php b/apps/e2e/src/Twig/Components/LiveItemList.php
new file mode 100644
index 00000000000..bdc1799f297
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveItemList.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Model\Address;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsLiveComponent]
+final class LiveItemList
+{
+    use DefaultActionTrait;
+
+    /**
+     * @var string[]
+     */
+    #[LiveProp(writable: true, url: true)]
+    public array $items = [];
+
+    #[LiveAction]
+    public function addItem(): void
+    {
+        $this->items[] = '';
+    }
+
+    #[LiveAction]
+    public function deleteItems(): void
+    {
+        $this->items = [];
+    }
+
+    #[LiveAction]
+    public function deleteItem(#[LiveArg] int $key): void
+    {
+        unset($this->items[$key]);
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/LiveRegistrationForm.php b/apps/e2e/src/Twig/Components/LiveRegistrationForm.php
new file mode 100644
index 00000000000..c4c88ecf653
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/LiveRegistrationForm.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormFactoryInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+#[AsLiveComponent]
+final class LiveRegistrationForm
+{
+    use DefaultActionTrait;
+    use ComponentWithFormTrait;
+
+    #[LiveProp]
+    public bool $isSuccessful = false;
+
+    public function __construct(
+        private FormFactoryInterface $formFactory,
+    ) {
+    }
+
+    public function hasValidationErrors(): bool
+    {
+        return $this->getForm()->isSubmitted() && !$this->getForm()->isValid();
+    }
+
+    #[LiveAction]
+    public function saveRegistration(): void
+    {
+        $this->submitForm();
+        $this->isSuccessful = true;
+    }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->formFactory->createBuilder()
+            ->add('email', EmailType::class, [
+                'constraints' => [
+                    new Assert\NotBlank(),
+                    new Assert\Email(),
+                ],
+            ])
+            ->add('password', PasswordType::class, [
+                'constraints' => [
+                    new Assert\NotBlank(),
+                    new Assert\Length(['min' => 8]),
+                ],
+                // prevent password from being emptied on re-render
+                'always_empty' => false,
+            ])
+            ->getForm();
+    }
+}
diff --git a/apps/e2e/src/Twig/Components/ProductionForm.php b/apps/e2e/src/Twig/Components/ProductionForm.php
new file mode 100644
index 00000000000..3c67094744f
--- /dev/null
+++ b/apps/e2e/src/Twig/Components/ProductionForm.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Form\Model\ProductionDto;
+use App\Form\Type\ProductionType;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Form\FormInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveListener;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\ComponentToolsTrait;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent]
+class ProductionForm extends AbstractController
+{
+    use ComponentToolsTrait;
+    use ComponentWithFormTrait;
+    use DefaultActionTrait;
+
+    #[LiveProp]
+    public ?ProductionDto $initialFormData = null;
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->createForm(ProductionType::class, $this->initialFormData ?? new ProductionDto());
+    }
+
+    #[LiveListener('movie-selected')]
+    public function onMovieSelected(#[LiveArg] string $title): void
+    {
+        $this->formValues['title'] = $title;
+    }
+
+    #[LiveListener('videogame-selected')]
+    public function onVideogameSelected(#[LiveArg] string $title): void
+    {
+        $this->formValues['title'] = $title;
+    }
+}
diff --git a/apps/e2e/src/Twig/Extension/AppExtension.php b/apps/e2e/src/Twig/Extension/AppExtension.php
new file mode 100644
index 00000000000..82437bb1d01
--- /dev/null
+++ b/apps/e2e/src/Twig/Extension/AppExtension.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Twig\Extension;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class AppExtension extends AbstractExtension
+{
+    public function getFunctions(): iterable
+    {
+        yield new TwigFunction('print_r', function (mixed $value): string {
+            return '<pre>'.print_r($value, true).'</pre>';
+        }, ['is_safe' => ['html']]);
+    }
+}
\ No newline at end of file
diff --git a/apps/e2e/src/UxPackage.php b/apps/e2e/src/UxPackage.php
index 8e53867765e..14325d19856 100644
--- a/apps/e2e/src/UxPackage.php
+++ b/apps/e2e/src/UxPackage.php
@@ -17,6 +17,7 @@ enum UxPackage: string
     case ChartJs = 'UX Chart';
     case Cropperjs = 'UX Cropperjs';
     case Icons = 'UX Icons';
+    case LiveComponent = 'UX LiveComponent';
     //case LazyImage = 'UX LazyImage'; // deprecated/removed
     case Map = 'UX Map';
     case Notify = 'UX Notify';
@@ -28,7 +29,6 @@ enum UxPackage: string
     // case Toolkit; // not subject to E2E
     case Translator = 'UX Translator';
     case Turbo = 'UX Turbo';
-    case TwigComponent = 'UX TwigComponent';
     // case Typed; // deprecated
     case Vue = 'UX Vue';
 
@@ -39,6 +39,7 @@ public function getDocumentationUrl(): string
             self::ChartJs => 'https://ux.symfony.com/chartjs',
             self::Cropperjs => 'https://ux.symfony.com/cropperjs',
             self::Icons => 'https://ux.symfony.com/icons',
+            self::LiveComponent => 'https://ux.symfony.com/live-component',
             self::Map => 'https://ux.symfony.com/map',
             self::Notify => 'https://ux.symfony.com/notify',
             self::React => 'https://ux.symfony.com/react',
@@ -46,7 +47,6 @@ public function getDocumentationUrl(): string
             self::Svelte => 'https://ux.symfony.com/svelte',
             self::Translator => 'https://ux.symfony.com/translator',
             self::Turbo => 'https://ux.symfony.com/turbo',
-            self::TwigComponent => 'https://ux.symfony.com/twig-component',
             self::Vue => 'https://ux.symfony.com/vue',
         };
     }
diff --git a/apps/e2e/symfony.lock b/apps/e2e/symfony.lock
index fc7be91565d..e84905f5a25 100644
--- a/apps/e2e/symfony.lock
+++ b/apps/e2e/symfony.lock
@@ -452,5 +452,18 @@
     },
     "twig/extra-bundle": {
         "version": "v3.21.0"
+    },
+    "zenstruck/foundry": {
+        "version": "2.8",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.7",
+            "ref": "7fc98f546dfeaa83cc2110634f8ff078d070b965"
+        },
+        "files": [
+            "config/packages/zenstruck_foundry.yaml",
+            "src/Story/AppStory.php"
+        ]
     }
 }
diff --git a/apps/e2e/templates/base.html.twig b/apps/e2e/templates/base.html.twig
index 001a22a5580..ba9bef57d0c 100644
--- a/apps/e2e/templates/base.html.twig
+++ b/apps/e2e/templates/base.html.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>{% block title %}Symfony UX's E2E App{% endblock %}</title>
@@ -8,6 +8,10 @@
         {% endblock %}
 
         {% block javascripts %}
+            <script>
+                const theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+                document.documentElement.setAttribute('data-bs-theme', theme === 'light' ? 'light' : 'dark');
+            </script>
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
diff --git a/apps/e2e/templates/components/LiveComponentWithAliasedLiveProps.html.twig b/apps/e2e/templates/components/LiveComponentWithAliasedLiveProps.html.twig
new file mode 100644
index 00000000000..f76b32d56b8
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithAliasedLiveProps.html.twig
@@ -0,0 +1,12 @@
+<div{{ attributes }}>
+    <form>
+        <div>
+            <label for="query" class="form-label">Query:</label>
+            <input id="query" class="form-control" data-model="debounce(250)|query" value="{{ query }}">
+        </div>
+        <div class="mt-3">
+            <label for="category" class="form-label">Category:</label>
+            <input id="category" class="form-control" data-model="debounce(250)|category" value="{{ category }}">
+        </div>
+    </form>
+</div>
diff --git a/apps/e2e/templates/components/LiveComponentWithDto.html.twig b/apps/e2e/templates/components/LiveComponentWithDto.html.twig
new file mode 100644
index 00000000000..466f14c70b9
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithDto.html.twig
@@ -0,0 +1,17 @@
+<div{{ attributes }}>
+    <form>
+        <div>
+            <label for="country" class="form-label">Country:</label>
+            <input id="country" class="form-control" data-model="address.country" value="{{ address.country }}">
+        </div>
+        <div class="mt-3">
+            <label for="city" class="form-label">City:</label>
+            <input id="city" class="form-control" data-model="address.city" value="{{ address.city }}">
+        </div>
+    </form>
+
+    <hr>
+
+    <h2>Address (<code>print_r</code>)</h2>
+    <output>{{ print_r(address) }}</output>
+</div>
diff --git a/apps/e2e/templates/components/LiveComponentWithDtoAndCustomHydrationMethods.html.twig b/apps/e2e/templates/components/LiveComponentWithDtoAndCustomHydrationMethods.html.twig
new file mode 100644
index 00000000000..555cf183574
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithDtoAndCustomHydrationMethods.html.twig
@@ -0,0 +1,12 @@
+<div{{ attributes }}>
+    <button
+        type="button"
+        class="btn btn-primary"
+        {{ live_action('initAddress') }}
+    >Init address</button>
+
+    <hr>
+
+    <h2>Address (<code>print_r</code>)</h2>
+    <output>{{ print_r(address) }}</output>
+</div>
diff --git a/apps/e2e/templates/components/LiveComponentWithDtoAndHydrationExtension.html.twig b/apps/e2e/templates/components/LiveComponentWithDtoAndHydrationExtension.html.twig
new file mode 100644
index 00000000000..514c1886b92
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithDtoAndHydrationExtension.html.twig
@@ -0,0 +1,12 @@
+<div{{ attributes }}>
+    <button
+        type="button"
+        class="btn btn-primary"
+        {{ live_action('initPoint') }}
+    >Init point</button>
+
+    <hr>
+
+    <h2>Point (<code>print_r</code>)</h2>
+    <output>{{ print_r(point) }}</output>
+</div>
diff --git a/apps/e2e/templates/components/LiveComponentWithDtoAndSerializer.html.twig b/apps/e2e/templates/components/LiveComponentWithDtoAndSerializer.html.twig
new file mode 100644
index 00000000000..555cf183574
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithDtoAndSerializer.html.twig
@@ -0,0 +1,12 @@
+<div{{ attributes }}>
+    <button
+        type="button"
+        class="btn btn-primary"
+        {{ live_action('initAddress') }}
+    >Init address</button>
+
+    <hr>
+
+    <h2>Address (<code>print_r</code>)</h2>
+    <output>{{ print_r(address) }}</output>
+</div>
diff --git a/apps/e2e/templates/components/LiveComponentWithDtoCollection.html.twig b/apps/e2e/templates/components/LiveComponentWithDtoCollection.html.twig
new file mode 100644
index 00000000000..2f59055c544
--- /dev/null
+++ b/apps/e2e/templates/components/LiveComponentWithDtoCollection.html.twig
@@ -0,0 +1,17 @@
+<div{{ attributes }}>
+    <button
+        type="button"
+        class="btn btn-primary"
+        {{ this.canAddAddress ? '' : 'disabled' }}
+        {{ live_action('addAddress') }}
+    >Add address</button>
+    <button
+        type="button"
+        class="btn btn-danger"
+        {{ live_action('reset') }}
+    >Reset</button>
+
+    <hr>
+    <h2>Addresses (<code>print_r</code>)</h2>
+    <output>{{ print_r(addresses) }}</output>
+</div>
diff --git a/apps/e2e/templates/components/LiveCounter.html.twig b/apps/e2e/templates/components/LiveCounter.html.twig
new file mode 100644
index 00000000000..ac741f22a02
--- /dev/null
+++ b/apps/e2e/templates/components/LiveCounter.html.twig
@@ -0,0 +1,19 @@
+<div{{ attributes }}>
+    <div class="input-group">
+        <button
+            type="button"
+            class="btn btn-primary"
+            title="Decrement"
+            {{ live_action('decrement') }}
+        >-</button>
+        <span class="input-group-text" data-testid="value">
+            {{ value }}
+        </span>
+        <button
+            type="button"
+            class="btn btn-primary"
+            title="Increment"
+            {{ live_action('increment') }}
+        >+</button>
+    </div>
+</div>
diff --git a/apps/e2e/templates/components/LiveExamplesSearch.html.twig b/apps/e2e/templates/components/LiveExamplesSearch.html.twig
new file mode 100644
index 00000000000..ff26ba0387d
--- /dev/null
+++ b/apps/e2e/templates/components/LiveExamplesSearch.html.twig
@@ -0,0 +1,44 @@
+<div{{ attributes }}>
+    <div style="display: grid; grid-template-columns: auto 300px min-content; gap: 0.5rem; align-items: center; margin-bottom: 1rem;">
+        <label for="query" class="form-label mb-0 text-end">Search for examples:</label>
+        <div class="input-group">
+            <span class="input-group-text">
+                <twig:ux:icon name="mdi:search" />
+            </span>
+            <input
+                id="query"
+                placeholder="Results update as you type..."
+                class="form-control"
+                data-model="debounce(250)|query"
+                data-loading="addAttribute(disabled)"
+            />
+        </div>
+        <button
+            type="button"
+            class="btn btn-secondary"
+            {{ query|length == 0 ? 'disabled' }}
+            {{ live_action('clearQuery') }}
+        >Clear</button>
+    </div>
+    <div data-loading="addClass(opacity-50)">
+        {% for package, examples in computed.examplesGroupedByPackage %}
+            {% set package = enum('App\\UxPackage').from(package)  %}
+            <h2 style="margin-top: 2rem;">{{ package.value }} <a href="{{ package.documentationUrl }}" title="{{ package.value }} documentation">📖</a></h2>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                {% for example in examples %}
+                    <div>
+                        <div class="card" data-testid="card-example">
+                            <div class="card-body">
+                                <h5 class="card-title">{{ example.name }}</h5>
+                                <p class="card-text">{{ example.description }}</p>
+                                <a href="{{ path(example.routeName, example.routeParameters) }}">See example</a>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            No results found.
+        {% endfor %}
+    </div>
+</div>
diff --git a/apps/e2e/templates/components/LiveFruitsPagination.html.twig b/apps/e2e/templates/components/LiveFruitsPagination.html.twig
new file mode 100644
index 00000000000..5db302a627c
--- /dev/null
+++ b/apps/e2e/templates/components/LiveFruitsPagination.html.twig
@@ -0,0 +1,22 @@
+<div{{ attributes }}>
+    <h2>Page {{ page }}</h2>
+    <ul>
+        {% for fruit in this.fruits %}
+            <li>{{ fruit.name }}</li>
+        {% endfor %}
+    </ul>
+    <div class="pagination-controls">
+        <button
+            type="button"
+            class="btn btn-secondary"
+            {{ this.hasPreviousPage ? '' : 'disabled' }}
+            {{ live_action('goToPreviousPage') }}
+        >Previous</button>
+        <button
+            type="button"
+            class="btn btn-secondary"
+            {{ this.hasNextPage ? '' : 'disabled' }}
+            {{ live_action('goToNextPage') }}
+        >Next</button>
+    </div>
+</div>
diff --git a/apps/e2e/templates/components/LiveItemList.html.twig b/apps/e2e/templates/components/LiveItemList.html.twig
new file mode 100644
index 00000000000..b8a758e3b77
--- /dev/null
+++ b/apps/e2e/templates/components/LiveItemList.html.twig
@@ -0,0 +1,34 @@
+<div{{ attributes }}>
+    <div class="d-flex gap-2 mb-2">
+        <button
+            type="button"
+            class="btn btn-primary "
+            {{ live_action('addItem') }}
+        >Add item</button>
+
+        <button
+            type="button"
+            class="btn btn-danger"
+            {{ live_action('deleteItems') }}
+        >Delete all</button>
+    </div>
+
+    {% if items|length > 0 %}
+        <ul class="list-group" style="--bs-list-group-item-padding-y: .5rem; --bs-list-group-item-padding-x: .5rem;">
+            {% for key, item in items %}
+                <li key="{{ key }}" class="list-group-item d-flex align-items-center gap-2">
+                    <label for="item-{{ key }}" class="text-nowrap fw-bold">Item #{{ key }}</label>
+                    <input id="item-{{ key }}" data-model="debounce(250)|items.{{ key }}" value="{{ item }}" class="form-control"/>
+                    <button
+                        type="button"
+                        class="btn btn-danger btn-sm"
+                        title="Delete item #{{ key }}"
+                        {{ live_action('deleteItem', { key }) }}
+                    >Delete</button>
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <div class="alert alert-info">No items.</div>
+    {% endif %}
+</div>
diff --git a/apps/e2e/templates/components/LiveRegistrationForm.html.twig b/apps/e2e/templates/components/LiveRegistrationForm.html.twig
new file mode 100644
index 00000000000..5e2f1da01c6
--- /dev/null
+++ b/apps/e2e/templates/components/LiveRegistrationForm.html.twig
@@ -0,0 +1,27 @@
+{% form_theme form 'bootstrap_5_layout.html.twig' %}
+<div{{ attributes }}>
+    {% if isSuccessful %}
+        <div class="alert alert-success">
+            Registration successful!
+        </div>
+    {% else %}
+        {{ form_start(form, {
+            attr: {
+                novalidate: true,
+                'data-action': 'live#action:prevent',
+                'data-live-action-param': 'saveRegistration',
+            }
+        }) }}
+            {{ form_row(form.email) }}
+            {{ form_row(form.password) }}
+
+            <button
+                type="submit"
+                class="btn btn-primary"
+                {{ this.hasValidationErrors ? 'disabled' }}
+            >Register</button>
+
+            {{ form_rest(form) }}
+        {{ form_end(form) }}
+    {% endif %}
+</div>
diff --git a/apps/e2e/templates/components/ProductionForm.html.twig b/apps/e2e/templates/components/ProductionForm.html.twig
new file mode 100644
index 00000000000..fb37b60d318
--- /dev/null
+++ b/apps/e2e/templates/components/ProductionForm.html.twig
@@ -0,0 +1,34 @@
+{% form_theme form 'bootstrap_5_layout.html.twig' %}
+<div {{ attributes }}>
+    {{ form_start(form) }}
+        <div class="mb-3">
+            {{ form_label(form.type) }}
+            {{ form_widget(form.type) }}
+            {{ form_errors(form.type) }}
+        </div>
+
+        {% if form.movieSearch is defined %}
+            <div class="mb-3">
+                {{ form_label(form.movieSearch) }}
+                {{ form_widget(form.movieSearch) }}
+                {{ form_errors(form.movieSearch) }}
+            </div>
+        {% endif %}
+
+        {% if form.videogameSearch is defined %}
+            <div class="mb-3">
+                {{ form_label(form.videogameSearch) }}
+                {{ form_widget(form.videogameSearch) }}
+                {{ form_errors(form.videogameSearch) }}
+            </div>
+        {% endif %}
+
+        <div class="mb-3">
+            {{ form_label(form.title) }}
+            {{ form_widget(form.title) }}
+            {{ form_errors(form.title) }}
+        </div>
+
+        <button type="submit" class="btn btn-primary" data-test-id="submit-button">Submit</button>
+    {{ form_end(form) }}
+</div>
diff --git a/apps/e2e/templates/home.html.twig b/apps/e2e/templates/home.html.twig
index a5f188ab23c..3e0040a3086 100644
--- a/apps/e2e/templates/home.html.twig
+++ b/apps/e2e/templates/home.html.twig
@@ -13,22 +13,6 @@
     </div>
 
     <div class="container">
-        {% for package, examples in examples_by_package %}
-            {% set package = enum('App\\UxPackage').from(package)  %}
-            <h2 style="margin-top: 2rem;">{{ package.value }} <a href="{{ package.documentationUrl }}" title="{{ package.value }} documentation">📖</a></h2>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-                {% for example in examples %}
-                    <div>
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">{{ example.name }}</h5>
-                                <p class="card-text">{{ example.description }}</p>
-                                <a href="{{ example.url }}">See example</a>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-        {% endfor %}
+        <twig:LiveExamplesSearch />
     </div>
 {% endblock %}
diff --git a/apps/e2e/templates/test/autocomplete_dynamic_form.html.twig b/apps/e2e/templates/test/autocomplete_dynamic_form.html.twig
new file mode 100644
index 00000000000..f262bd6b044
--- /dev/null
+++ b/apps/e2e/templates/test/autocomplete_dynamic_form.html.twig
@@ -0,0 +1,12 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Autocomplete Dynamic Form Test{% endblock %}
+
+{% block main %}
+    <div class="container mt-4" data-test-id="test-page">
+        <h1>Autocomplete with Dynamic Forms</h1>
+        <p>This test page demonstrates dynamic autocomplete fields within a LiveComponent form.</p>
+
+        <twig:ProductionForm />
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_autocomplete/custom_controller.html.twig b/apps/e2e/templates/ux_autocomplete/custom_controller.html.twig
new file mode 100644
index 00000000000..7793a3d8d94
--- /dev/null
+++ b/apps/e2e/templates/ux_autocomplete/custom_controller.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    {{ component('ProductionForm') }}
+{% endblock %}
diff --git a/apps/e2e/templates/ux_autocomplete/index.html.twig b/apps/e2e/templates/ux_autocomplete/index.html.twig
deleted file mode 100644
index 78c01e96007..00000000000
--- a/apps/e2e/templates/ux_autocomplete/index.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{% extends 'example.html.twig' %}
-
-{% block example %}{% endblock %}
diff --git a/apps/e2e/templates/ux_autocomplete/with_ajax.html.twig b/apps/e2e/templates/ux_autocomplete/with_ajax.html.twig
new file mode 100644
index 00000000000..f99295f8d25
--- /dev/null
+++ b/apps/e2e/templates/ux_autocomplete/with_ajax.html.twig
@@ -0,0 +1,7 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    {{ form_start(form) }}
+    {{ form_row(form.favorite_fruit) }}
+    {{ form_end(form) }}
+{% endblock %}
diff --git a/apps/e2e/templates/ux_autocomplete/without_ajax.html.twig b/apps/e2e/templates/ux_autocomplete/without_ajax.html.twig
new file mode 100644
index 00000000000..f99295f8d25
--- /dev/null
+++ b/apps/e2e/templates/ux_autocomplete/without_ajax.html.twig
@@ -0,0 +1,7 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    {{ form_start(form) }}
+    {{ form_row(form.favorite_fruit) }}
+    {{ form_end(form) }}
+{% endblock %}
diff --git a/apps/e2e/templates/ux_chartjs/index.html.twig b/apps/e2e/templates/ux_chartjs/index.html.twig
index 78c01e96007..40c8655d3f7 100644
--- a/apps/e2e/templates/ux_chartjs/index.html.twig
+++ b/apps/e2e/templates/ux_chartjs/index.html.twig
@@ -1,3 +1,14 @@
 {% extends 'example.html.twig' %}
 
-{% block example %}{% endblock %}
+{% block example %}
+    <div style="max-width: 600px; margin: 0 auto;">
+        {{ render_chart(chart, {'id': 'test-chart'}) }}
+    </div>
+
+    <script>
+        const canvas = document.querySelector('#test-chart');
+        canvas.addEventListener('chartjs:connect', (event) => {
+            window.__chartInstance = event.detail.chart;
+        });
+    </script>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_cropperjs/crop.html.twig b/apps/e2e/templates/ux_cropperjs/crop.html.twig
new file mode 100644
index 00000000000..057c6a176f3
--- /dev/null
+++ b/apps/e2e/templates/ux_cropperjs/crop.html.twig
@@ -0,0 +1,26 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div class="row">
+        <div class="col-md-8 mx-auto">
+            {% if croppedImageData %}
+                <div class="alert alert-success mb-4" id="crop-success">
+                    <h5>Image cropped successfully!</h5>
+                    <p>Here is your cropped image:</p>
+                    <img src="data:image/jpeg;base64,{{ croppedImageData }}"
+                         alt="Cropped image"
+                         id="cropped-result"
+                         class="img-fluid border"
+                         style="max-width: 100%;">
+                </div>
+            {% endif %}
+
+            {{ form_start(form, { attr: { 'data-turbo': 'false' } }) }}
+                {{ form_row(form.crop) }}
+                <div class="mt-3">
+                    <button type="submit" class="btn btn-primary" id="crop-submit">Crop Image</button>
+                </div>
+            {{ form_end(form) }}
+        </div>
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_cropperjs/index.html.twig b/apps/e2e/templates/ux_cropperjs/index.html.twig
deleted file mode 100644
index 78c01e96007..00000000000
--- a/apps/e2e/templates/ux_cropperjs/index.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{% extends 'example.html.twig' %}
-
-{% block example %}{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/counter.html.twig b/apps/e2e/templates/ux_live_component/counter.html.twig
new file mode 100644
index 00000000000..b86b3ab7e09
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/counter.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveCounter />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/fruits.html.twig b/apps/e2e/templates/ux_live_component/fruits.html.twig
new file mode 100644
index 00000000000..8e462a75715
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/fruits.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveFruitsPagination />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/index.html.twig b/apps/e2e/templates/ux_live_component/index.html.twig
deleted file mode 100644
index 78c01e96007..00000000000
--- a/apps/e2e/templates/ux_live_component/index.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{% extends 'example.html.twig' %}
-
-{% block example %}{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/item_list.html.twig b/apps/e2e/templates/ux_live_component/item_list.html.twig
new file mode 100644
index 00000000000..6a1f90fee35
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/item_list.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveItemList />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/registration_form.html.twig b/apps/e2e/templates/ux_live_component/registration_form.html.twig
new file mode 100644
index 00000000000..65ad46ababc
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/registration_form.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveRegistrationForm />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_aliased_live_props.html.twig b/apps/e2e/templates/ux_live_component/with_aliased_live_props.html.twig
new file mode 100644
index 00000000000..51e5d7bd49c
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_aliased_live_props.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithAliasedLiveProps />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_dto.html.twig b/apps/e2e/templates/ux_live_component/with_dto.html.twig
new file mode 100644
index 00000000000..152c417cac2
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_dto.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithDto />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_dto_and_custom_hydration_methods.html.twig b/apps/e2e/templates/ux_live_component/with_dto_and_custom_hydration_methods.html.twig
new file mode 100644
index 00000000000..4402fa18e47
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_dto_and_custom_hydration_methods.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithDtoAndCustomHydrationMethods />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_dto_and_hydration_extension.html.twig b/apps/e2e/templates/ux_live_component/with_dto_and_hydration_extension.html.twig
new file mode 100644
index 00000000000..49034186e18
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_dto_and_hydration_extension.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithDtoAndHydrationExtension />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_dto_and_serializer.html.twig b/apps/e2e/templates/ux_live_component/with_dto_and_serializer.html.twig
new file mode 100644
index 00000000000..e6e02942def
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_dto_and_serializer.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithDtoAndSerializer />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_live_component/with_dto_collection.html.twig b/apps/e2e/templates/ux_live_component/with_dto_collection.html.twig
new file mode 100644
index 00000000000..d385c205864
--- /dev/null
+++ b/apps/e2e/templates/ux_live_component/with_dto_collection.html.twig
@@ -0,0 +1,5 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <twig:LiveComponentWithDtoCollection />
+{% endblock %}
diff --git a/apps/e2e/templates/ux_translator/basic.html.twig b/apps/e2e/templates/ux_translator/basic.html.twig
index 476d2f335b6..c07aefc9572 100644
--- a/apps/e2e/templates/ux_translator/basic.html.twig
+++ b/apps/e2e/templates/ux_translator/basic.html.twig
@@ -11,15 +11,14 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { HELLO } from '@app/translations';
+        import { trans } from 'app';
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(HELLO, {}, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(HELLO, {}, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('hello', {}, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('hello', {}, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_date_time.html.twig b/apps/e2e/templates/ux_translator/icu_date_time.html.twig
index 9d7740fb956..90cf7a6ecfa 100644
--- a/apps/e2e/templates/ux_translator/icu_date_time.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_date_time.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { PUBLISHED_AT } from '@app/translations';
+        import { trans } from 'app';
 
         const inputDate = document.querySelector('#date');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('published_at', { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('published_at', { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_number_currency.html.twig b/apps/e2e/templates/ux_translator/icu_number_currency.html.twig
index 1a8e2e5c533..c20a16b9a0e 100644
--- a/apps/e2e/templates/ux_translator/icu_number_currency.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_number_currency.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { VALUE_OF_OBJECT } from '@app/translations';
+        import { trans } from 'app';
 
         const inputPrice = document.querySelector('#price');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('value_of_object', { price: inputPrice.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('value_of_object', { price: inputPrice.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_number_percent.html.twig b/apps/e2e/templates/ux_translator/icu_number_percent.html.twig
index 458ec1cf687..7ecee257128 100644
--- a/apps/e2e/templates/ux_translator/icu_number_percent.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_number_percent.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { PROGRESS } from '@app/translations';
+        import { trans } from 'app';
 
         const inputProgress = document.querySelector('#progress');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('progress', { progress: inputProgress.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('progress', { progress: inputProgress.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_plural.html.twig b/apps/e2e/templates/ux_translator/icu_plural.html.twig
index 1a340a443b0..5234731ccb7 100644
--- a/apps/e2e/templates/ux_translator/icu_plural.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_plural.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { NUM_OF_APPLES } from '@app/translations';
+        import { trans } from 'app';
 
         const inputApples = document.querySelector('#apples');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('num_of_apples', { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('num_of_apples', { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_select.html.twig b/apps/e2e/templates/ux_translator/icu_select.html.twig
index 163c87fbf67..f56e4b3990e 100644
--- a/apps/e2e/templates/ux_translator/icu_select.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_select.html.twig
@@ -20,8 +20,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { INVITATION_TITLE } from '@app/translations';
+        import { trans } from 'app';
 
         const selectGender = document.querySelector('#gender');
 
@@ -29,8 +28,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('invitation_title', { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('invitation_title', { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/icu_selectordinal.html.twig b/apps/e2e/templates/ux_translator/icu_selectordinal.html.twig
index e70e490d121..c783bbab04f 100644
--- a/apps/e2e/templates/ux_translator/icu_selectordinal.html.twig
+++ b/apps/e2e/templates/ux_translator/icu_selectordinal.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { FINISH_PLACE } from '@app/translations';
+        import { trans } from 'app';
 
         const inputPlace = document.querySelector('#place');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(FINISH_PLACE, { place: inputPlace.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(FINISH_PLACE, { place: inputPlace.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('finish_place', { place: inputPlace.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('finish_place', { place: inputPlace.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_translator/with_parameter.html.twig b/apps/e2e/templates/ux_translator/with_parameter.html.twig
index 9bbc86ef33f..3191d5af90b 100644
--- a/apps/e2e/templates/ux_translator/with_parameter.html.twig
+++ b/apps/e2e/templates/ux_translator/with_parameter.html.twig
@@ -15,8 +15,7 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { SAY_HELLO } from '@app/translations';
+        import { trans } from 'app';
 
         const inputName = document.querySelector('#name');
 
@@ -24,8 +23,8 @@
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(SAY_HELLO, { name: inputName.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(SAY_HELLO, { name: inputName.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('say_hello', { name: inputName.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('say_hello', { name: inputName.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }
diff --git a/apps/e2e/templates/ux_turbo/drive.html.twig b/apps/e2e/templates/ux_turbo/drive.html.twig
new file mode 100644
index 00000000000..33322468d67
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/drive.html.twig
@@ -0,0 +1,15 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div>
+        <h2>Turbo Drive Navigation - Page 1</h2>
+        <p>This page was loaded at: <strong id="page-load-time">{{ current_time }}</strong></p>
+        <p>This paragraph should stay visible during navigation (no full page reload).</p>
+
+        <div class="mt-4">
+            <a href="{{ path(app.request.attributes.get('_route'), { page: 2 }) }}" class="btn btn-primary" id="navigate-to-page-2">
+                Navigate to Page 2 (with Turbo Drive)
+            </a>
+        </div>
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_turbo/drive_page_2.html.twig b/apps/e2e/templates/ux_turbo/drive_page_2.html.twig
new file mode 100644
index 00000000000..2fe7f463a39
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/drive_page_2.html.twig
@@ -0,0 +1,15 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div>
+        <h2>Turbo Drive Navigation - Page 2</h2>
+        <p>This page was loaded at: <strong id="page-load-time">{{ current_time }}</strong></p>
+        <p>You navigated here without a full page reload thanks to Turbo Drive!</p>
+
+        <div class="mt-4">
+            <a href="{{ path('app_ux_turbo_drive') }}" class="btn btn-secondary" id="navigate-back">
+                Go back to Page 1
+            </a>
+        </div>
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_turbo/frame.html.twig b/apps/e2e/templates/ux_turbo/frame.html.twig
new file mode 100644
index 00000000000..da539065fda
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/frame.html.twig
@@ -0,0 +1,21 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div>
+        <h2>Turbo Frame Demo</h2>
+        <p>The frame below will navigate independently from the rest of the page.</p>
+
+        <turbo-frame id="demo-frame">
+            <div class="alert alert-info">
+                <p id="frame-initial-content">This is the initial frame content.</p>
+                <a href="{{ path('app_ux_turbo_frame_content') }}" class="btn btn-primary" id="load-frame-content">
+                    Load content in frame
+                </a>
+            </div>
+        </turbo-frame>
+
+        <div class="mt-4">
+            <p id="content-outside-frame">This content is outside the frame and will not change when navigating inside the frame.</p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_turbo/frame_content.html.twig b/apps/e2e/templates/ux_turbo/frame_content.html.twig
new file mode 100644
index 00000000000..757df04b5ba
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/frame_content.html.twig
@@ -0,0 +1,8 @@
+<turbo-frame id="demo-frame">
+    <div class="alert alert-success">
+        <p id="frame-updated-content">The frame content has been updated! This happened without a full page reload.</p>
+        <a href="{{ path('app_ux_turbo_frame') }}" class="btn btn-secondary">
+            Go back
+        </a>
+    </div>
+</turbo-frame>
\ No newline at end of file
diff --git a/apps/e2e/templates/ux_turbo/stream.html.twig b/apps/e2e/templates/ux_turbo/stream.html.twig
new file mode 100644
index 00000000000..02a016e314f
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/stream.html.twig
@@ -0,0 +1,20 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div>
+        <h2>Turbo Stream Demo</h2>
+        <p>Submit the form to update content with Turbo Streams.</p>
+
+        <div id="form-container">
+            <form method="POST" action="{{ path('app_ux_turbo_stream') }}">
+                <button type="submit" class="btn btn-primary" id="submit-turbo-stream">
+                    Submit form
+                </button>
+            </form>
+        </div>
+
+        <div id="stream-target" class="mt-4">
+            <p>Content before form submission</p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/apps/e2e/templates/ux_turbo/stream_response.html.twig b/apps/e2e/templates/ux_turbo/stream_response.html.twig
new file mode 100644
index 00000000000..33fa4fa6f8e
--- /dev/null
+++ b/apps/e2e/templates/ux_turbo/stream_response.html.twig
@@ -0,0 +1,11 @@
+<turbo-stream action="replace" target="stream-target">
+    <template>
+        <div id="stream-target" class="alert alert-success">
+            <p id="updated-by-stream">This content was updated by a Turbo Stream!</p>
+        </div>
+    </template>
+</turbo-stream>
+
+<turbo-stream action="remove" target="form-container">
+    <template></template>
+</turbo-stream>
diff --git a/apps/encore/assets/app.js b/apps/encore/assets/app.js
index 33bcb1aa3ba..e3eceb55bc7 100644
--- a/apps/encore/assets/app.js
+++ b/apps/encore/assets/app.js
@@ -11,12 +11,12 @@ import './bootstrap.js';
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
-import { THIS_FIELD_IS_MISSING, trans } from './translator';
+import { trans } from './translator';
 
 registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
 registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
 registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log(trans(THIS_FIELD_IS_MISSING));
+    console.log(trans('say_hello', { name: 'Fabien' }));
 })
diff --git a/apps/encore/assets/translator.js b/apps/encore/assets/translator.js
index 0d5ae86bd3b..320d791650b 100644
--- a/apps/encore/assets/translator.js
+++ b/apps/encore/assets/translator.js
@@ -1,5 +1,6 @@
-import { localeFallbacks } from '../var/translations/configuration';
-import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+import { createTranslator } from "@symfony/ux-translator";
+import { messages, localeFallbacks } from "../var/translations/index.js";
+
 /*
  * This file is part of the Symfony UX Translator package.
  *
@@ -9,8 +10,9 @@ import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-tra
  * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
  */
 
-setLocaleFallbacks(localeFallbacks);
-
-export { trans };
+export const translator = createTranslator({
+    messages,
+    localeFallbacks,
+});
 
-export * from '../var/translations';
\ No newline at end of file
+export const { trans, setLocale } = translator;
diff --git a/apps/encore/translations/messages+intl-icu.en.yaml b/apps/encore/translations/messages+intl-icu.en.yaml
new file mode 100644
index 00000000000..586751534c1
--- /dev/null
+++ b/apps/encore/translations/messages+intl-icu.en.yaml
@@ -0,0 +1 @@
+say_hello: 'Hello {name}!'
diff --git a/splitsh.json b/splitsh.json
new file mode 100644
index 00000000000..aa499f20897
--- /dev/null
+++ b/splitsh.json
@@ -0,0 +1,28 @@
+{
+    "subtrees": {
+        "stimulus-bundle": "src/StimulusBundle",
+        "ux-autocomplete": "src/Autocomplete",
+        "ux-dropzone": "src/Dropzone",
+        "ux-chartjs": "src/Chartjs",
+        "ux-cropperjs": "src/Cropperjs",
+        "ux-icons": "src/Icons",
+        "ux-lazy-image": "src/LazyImage",
+        "ux-live-component": "src/LiveComponent",
+        "ux-map": {
+            "prefixes": [{ "from": "src/Map", "to": "", "excludes": ["src/Bridge"] }]
+        },
+        "ux-google-map": "src/Map/src/Bridge/Google",
+        "ux-leaflet-map": "src/Map/src/Bridge/Leaflet",
+        "ux-notify": "src/Notify",
+        "ux-react": "src/React",
+        "ux-svelte": "src/Svelte",
+        "ux-toggle-password": "src/TogglePassword",
+        "ux-toolkit": "src/Toolkit",
+        "ux-translator": "src/Translator",
+        "ux-turbo": "src/Turbo",
+        "ux-swup": "src/Swup",
+        "ux-twig-component": "src/TwigComponent",
+        "ux-typed": "src/Typed",
+        "ux-vue": "src/Vue"
+    }
+}
diff --git a/src/Autocomplete/.gitignore b/src/Autocomplete/.gitignore
index 1784dd6561c..91aef664849 100644
--- a/src/Autocomplete/.gitignore
+++ b/src/Autocomplete/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Autocomplete/assets/dist/controller.d.ts b/src/Autocomplete/assets/dist/controller.d.ts
index e03b841b16d..199f31b0414 100644
--- a/src/Autocomplete/assets/dist/controller.d.ts
+++ b/src/Autocomplete/assets/dist/controller.d.ts
@@ -32,7 +32,7 @@ declare class export_default extends Controller {
     readonly tomSelectOptionsValue: object;
     readonly hasPreloadValue: boolean;
     readonly preloadValue: string;
-    tomSelect: TomSelect;
+    tomSelect: TomSelect | undefined;
     private mutationObserver;
     private isObserving;
     private hasLoadedChoicesPreviously;
diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js
index 6a60498e682..e061fca8cce 100644
--- a/src/Autocomplete/assets/dist/controller.js
+++ b/src/Autocomplete/assets/dist/controller.js
@@ -65,6 +65,9 @@ var controller_default = class extends Controller {
   }
   disconnect() {
     this.stopMutationObserver();
+    if (!this.tomSelect) {
+      return;
+    }
     let currentSelectedValues = [];
     if (this.selectElement) {
       if (this.selectElement.multiple) {
@@ -74,6 +77,7 @@ var controller_default = class extends Controller {
       }
     }
     this.tomSelect.destroy();
+    this.tomSelect = void 0;
     if (this.selectElement) {
       if (this.selectElement.multiple) {
         Array.from(this.selectElement.options).forEach((option) => {
@@ -136,6 +140,9 @@ var controller_default = class extends Controller {
     }
   }
   changeTomSelectDisabledState(isDisabled) {
+    if (!this.tomSelect) {
+      return;
+    }
     this.stopMutationObserver();
     if (isDisabled) {
       this.tomSelect.disable();
@@ -244,11 +251,14 @@ getCommonConfig_fn = function() {
     plugins,
     // clear the text input after selecting a value
     onItemAdd: () => {
-      this.tomSelect.setTextboxValue("");
+      this.tomSelect?.setTextboxValue("");
     },
     closeAfterSelect: true,
     // fix positioning (in the dropdown) of options added through addOption()
     onOptionAdd: (value, data) => {
+      if (!this.tomSelect) {
+        return;
+      }
       let parentElement = this.tomSelect.input;
       let optgroupData = null;
       const optgroup = data[this.tomSelect.settings.optgroupField];
@@ -300,9 +310,9 @@ createAutocompleteWithHtmlContents_fn = function() {
   const config = __privateMethod(this, _instances, mergeConfigs_fn).call(this, commonConfig, {
     maxOptions: this.getMaxOptions(),
     score: (search) => {
-      const scoringFunction = this.tomSelect.getScoreFunction(search);
+      const scoringFunction = this.tomSelect?.getScoreFunction(search);
       return (item) => {
-        return scoringFunction({ ...item, text: __privateMethod(this, _instances, stripTags_fn).call(this, item[labelField]) });
+        return scoringFunction?.({ ...item, text: __privateMethod(this, _instances, stripTags_fn).call(this, item[labelField]) });
       };
     },
     render: {
@@ -345,7 +355,7 @@ createAutocompleteWithRemoteData_fn = function(autocompleteEndpointUrl, minChara
     },
     optgroupField: "group_by",
     // avoid extra filtering after results are returned
-    score: (search) => (item) => 1,
+    score: (_search) => (_item) => 1,
     render: {
       option: (item) => `<div>${item[labelField]}</div>`,
       item: (item) => `<div>${item[labelField]}</div>`,
diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts
index 593fba9994b..646e084bb1e 100644
--- a/src/Autocomplete/assets/src/controller.ts
+++ b/src/Autocomplete/assets/src/controller.ts
@@ -46,7 +46,7 @@ export default class extends Controller {
     declare readonly tomSelectOptionsValue: object;
     declare readonly hasPreloadValue: boolean;
     declare readonly preloadValue: string;
-    tomSelect: TomSelect;
+    tomSelect: TomSelect | undefined;
 
     private mutationObserver: MutationObserver;
     private isObserving = false;
@@ -98,6 +98,10 @@ export default class extends Controller {
     disconnect() {
         this.stopMutationObserver();
 
+        if (!this.tomSelect) {
+            return;
+        }
+
         // TomSelect.destroy() resets the element to its original HTML. This
         // causes the selected value to be lost. We store it.
         let currentSelectedValues: string[] = [];
@@ -114,6 +118,7 @@ export default class extends Controller {
         }
 
         this.tomSelect.destroy();
+        this.tomSelect = undefined;
 
         if (this.selectElement) {
             if (this.selectElement.multiple) {
@@ -163,11 +168,15 @@ export default class extends Controller {
             plugins,
             // clear the text input after selecting a value
             onItemAdd: () => {
-                this.tomSelect.setTextboxValue('');
+                this.tomSelect?.setTextboxValue('');
             },
             closeAfterSelect: true,
             // fix positioning (in the dropdown) of options added through addOption()
             onOptionAdd: (value: string, data: { [key: string]: any }) => {
+                if (!this.tomSelect) {
+                    return;
+                }
+
                 let parentElement = this.tomSelect.input as Element;
                 let optgroupData = null;
 
@@ -232,10 +241,10 @@ export default class extends Controller {
         const config = this.#mergeConfigs(commonConfig, {
             maxOptions: this.getMaxOptions(),
             score: (search: string) => {
-                const scoringFunction = this.tomSelect.getScoreFunction(search);
+                const scoringFunction = this.tomSelect?.getScoreFunction(search);
                 return (item: any) => {
                     // strip HTML tags from each option's searchable text
-                    return scoringFunction({ ...item, text: this.#stripTags(item[labelField]) });
+                    return scoringFunction?.({ ...item, text: this.#stripTags(item[labelField]) });
                 };
             },
             render: {
@@ -295,7 +304,7 @@ export default class extends Controller {
             },
             optgroupField: 'group_by',
             // avoid extra filtering after results are returned
-            score: (search: string) => (item: any) => 1,
+            score: (_search: string) => (_item: any) => 1,
             render: {
                 option: (item: any) => `<div>${item[labelField]}</div>`,
                 item: (item: any) => `<div>${item[labelField]}</div>`,
@@ -439,6 +448,10 @@ export default class extends Controller {
     }
 
     private changeTomSelectDisabledState(isDisabled: boolean): void {
+        if (!this.tomSelect) {
+            return;
+        }
+
         this.stopMutationObserver();
         if (isDisabled) {
             this.tomSelect.disable();
diff --git a/src/Autocomplete/assets/test/browser/autocomplete.test.ts b/src/Autocomplete/assets/test/browser/autocomplete.test.ts
new file mode 100644
index 00000000000..fb6f7c35db5
--- /dev/null
+++ b/src/Autocomplete/assets/test/browser/autocomplete.test.ts
@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test';
+
+test('Can display and interact with AJAX-based autocomplete field', async ({ page }) => {
+    await page.goto('/ux-autocomplete/with-ajax');
+
+    await expect(page.locator('css=.ts-wrapper'), 'TomSelect has not been initialized.').toBeVisible();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('');
+
+    await page.getByRole('combobox', { name: 'Favorite fruit' }).click();
+    await page.waitForResponse('**/autocomplete/fruit_autocomplete_field?query=');
+    await page.getByRole('option', { name: 'Apple' }).click();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('apple');
+
+    await page.getByText('⨯').click();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('');
+
+    await page.getByRole('combobox', { name: 'Favorite fruit' }).click();
+    await page.getByRole('option', { name: 'Grape' }).click();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('grape');
+});
+
+test('Can display and interact with non-AJAX-based autocomplete field', async ({ page }) => {
+    await page.goto('/ux-autocomplete/without-ajax');
+
+    await expect(page.locator('css=.ts-wrapper'), 'TomSelect has not been initialized.').toBeVisible();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('apple');
+
+    await page.getByText('⨯').click();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('');
+
+    await page.getByRole('combobox', { name: 'Favorite fruit' }).click();
+    await page.getByRole('option', { name: 'Grape' }).filter({ visible: true }).click();
+    await expect(page.locator('css=select[id="form_favorite_fruit"]')).toHaveValue('grape');
+});
diff --git a/src/Autocomplete/assets/test/browser/dynamic-form.test.ts b/src/Autocomplete/assets/test/browser/dynamic-form.test.ts
new file mode 100644
index 00000000000..c11bff9a535
--- /dev/null
+++ b/src/Autocomplete/assets/test/browser/dynamic-form.test.ts
@@ -0,0 +1,125 @@
+import { expect, type Page, test } from '@playwright/test';
+
+async function typeInTomSelect(page: Page, testId: string, text: string) {
+    const wrapper = page.locator(`[data-test-id="${testId}"]`).locator('..');
+    const tsControl = wrapper.locator('.ts-control');
+    await tsControl.waitFor({ state: 'visible', timeout: 10000 });
+    await tsControl.click();
+    await tsControl.locator('input').fill(text);
+}
+
+async function waitForAutocomplete(page: Page, testId: string) {
+    const element = page.locator(`[data-test-id="${testId}"]`);
+    await element.waitFor({ state: 'attached', timeout: 10000 });
+    const wrapper = element.locator('..');
+    await wrapper.locator('.ts-control').waitFor({ state: 'visible', timeout: 10000 });
+}
+
+test.describe('Autocomplete with Dynamic Forms', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/test-autocomplete/dynamic-form');
+        await expect(page.locator('[data-test-id="test-page"]')).toBeVisible();
+    });
+
+    test('should not throw "Tom Select already initialized" error when switching between dynamic autocomplete fields', async ({
+        page,
+    }) => {
+        const consoleErrors: string[] = [];
+        page.on('console', (msg) => {
+            if (msg.type() === 'error') {
+                consoleErrors.push(msg.text());
+            }
+        });
+
+        await page.selectOption('[data-test-id="production-type"]', 'movie');
+        await waitForAutocomplete(page, 'movie-autocomplete');
+
+        await typeInTomSelect(page, 'movie-autocomplete', 'Matrix');
+        await page.waitForTimeout(500);
+
+        const optionsAfterFirstFill = page.locator('[data-test-id="autocomplete-option"]');
+        if ((await optionsAfterFirstFill.count()) > 0) {
+            await optionsAfterFirstFill.first().click();
+            await page.waitForTimeout(1000);
+        }
+
+        await page.selectOption('[data-test-id="production-type"]', 'videogame');
+        await waitForAutocomplete(page, 'videogame-autocomplete');
+
+        await typeInTomSelect(page, 'videogame-autocomplete', 'Halo');
+        await page.waitForTimeout(500);
+
+        const optionsAfterSecondFill = page.locator('[data-test-id="autocomplete-option"]');
+        if ((await optionsAfterSecondFill.count()) > 0) {
+            await optionsAfterSecondFill.first().click();
+        }
+
+        await page.selectOption('[data-test-id="production-type"]', 'movie');
+        await waitForAutocomplete(page, 'movie-autocomplete');
+
+        await typeInTomSelect(page, 'movie-autocomplete', 'Inception');
+        await page.waitForTimeout(500);
+
+        const tomSelectError = consoleErrors.find((error) => error.includes('Tom Select already initialized'));
+
+        expect(tomSelectError).toBeUndefined();
+
+        await expect(page.locator('[data-test-id="autocomplete-option"]')).toHaveCount(1);
+    });
+
+    test('should properly disconnect and reconnect Tom Select on rapid type changes', async ({ page }) => {
+        const consoleErrors: string[] = [];
+        page.on('console', (msg) => {
+            if (msg.type() === 'error') {
+                consoleErrors.push(msg.text());
+            }
+        });
+
+        for (let i = 0; i < 5; i++) {
+            await page.selectOption('[data-test-id="production-type"]', 'movie');
+            await page.waitForTimeout(100);
+            await page.selectOption('[data-test-id="production-type"]', 'videogame');
+            await page.waitForTimeout(100);
+        }
+
+        await page.selectOption('[data-test-id="production-type"]', 'movie');
+        await waitForAutocomplete(page, 'movie-autocomplete');
+
+        await typeInTomSelect(page, 'movie-autocomplete', 'Test');
+
+        expect(consoleErrors).toHaveLength(0);
+    });
+
+    test('should handle autocomplete in morphed LiveComponent without errors', async ({ page }) => {
+        const consoleErrors: string[] = [];
+        page.on('console', (msg) => {
+            if (msg.type() === 'error') {
+                consoleErrors.push(msg.text());
+            }
+        });
+
+        await page.selectOption('[data-test-id="production-type"]', 'movie');
+        await waitForAutocomplete(page, 'movie-autocomplete');
+
+        await typeInTomSelect(page, 'movie-autocomplete', 'Matrix');
+        await page.waitForTimeout(500);
+
+        const dropdown = page.locator('.ts-dropdown');
+        await dropdown.waitFor({ state: 'visible', timeout: 5000 });
+
+        const firstOption = dropdown.locator('.option').first();
+        if (await firstOption.isVisible()) {
+            await firstOption.click();
+        }
+
+        await page.waitForTimeout(1000);
+
+        await typeInTomSelect(page, 'movie-autocomplete', 'Inception');
+        await page.waitForTimeout(1000);
+
+        expect(consoleErrors).toHaveLength(0);
+
+        const dropdownVisible = await dropdown.isVisible();
+        expect(dropdownVisible).toBe(true);
+    });
+});
diff --git a/src/Autocomplete/assets/test/browser/placeholder.test.ts b/src/Autocomplete/assets/test/browser/placeholder.test.ts
deleted file mode 100644
index f5f1d10f22e..00000000000
--- a/src/Autocomplete/assets/test/browser/placeholder.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('Can see homepage', async ({ page }) => {
-    await page.goto('/');
-
-    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
-});
diff --git a/src/Autocomplete/assets/test/unit/controller.test.ts b/src/Autocomplete/assets/test/unit/controller.test.ts
index 4d91b94b61a..aaada5e44b5 100644
--- a/src/Autocomplete/assets/test/unit/controller.test.ts
+++ b/src/Autocomplete/assets/test/unit/controller.test.ts
@@ -1113,4 +1113,97 @@ describe('AutocompleteController', () => {
             'input_autogrow',
         ]);
     });
+
+    it('disconnect() should clear the tomSelect reference to prevent double-initialization (issue #2623)', async () => {
+        // This test verifies the fix for issue #2623:
+        // When disconnect() is called, it MUST clear the this.tomSelect reference
+        // to prevent a subsequent urlValueChanged() from triggering resetTomSelect()
+        // on a stale (destroyed) TomSelect instance.
+        //
+        // In real-world scenarios with Turbo, this race condition manifests as:
+        // "Error: Tom Select already initialized on this element"
+        //
+        // The fix: this.tomSelect = undefined; after this.tomSelect.destroy();
+
+        const { container, tomSelect: firstTomSelect } = await startAutocompleteTest(`
+            <label for="the-select">Items</label>
+            <select
+                id="the-select"
+                data-testid="main-element"
+                data-controller="autocomplete"
+                data-autocomplete-url-value="/path/to/autocomplete"
+            ></select>
+        `);
+
+        expect(firstTomSelect).not.toBeNull();
+        const selectElement = getByTestId(container, 'main-element') as HTMLSelectElement;
+
+        // Verify TomSelect is initialized
+        expect(container.querySelector('.ts-wrapper')).toBeInTheDocument();
+
+        // Simulate what happens during Turbo navigation:
+        // 1. Element is removed from DOM → disconnect() is called
+        selectElement.remove();
+        await shortDelay(50);
+
+        // At this point, with the fix: controller.tomSelect should be undefined
+        // Without the fix: controller.tomSelect still references destroyed instance
+        // If urlValueChanged() is called now, it would:
+        //   - With fix: Exit early because if (!this.tomSelect) is true
+        //   - Without fix: Try to reinitialize, causing double-initialization error
+
+        // 2. Element is re-added with changed attribute
+        // This is what Turbo does when restoring from cache with modified HTML
+        const newSelect = document.createElement('select');
+        newSelect.id = 'the-select';
+        newSelect.setAttribute('data-testid', 'main-element');
+        newSelect.setAttribute('data-controller', 'autocomplete');
+        // Changed URL triggers urlValueChanged() callback
+        newSelect.setAttribute('data-autocomplete-url-value', '/path/to/autocomplete-v2');
+        container.appendChild(newSelect);
+
+        // Setup for potential reconnection
+        fetchMock.mockResponseOnce(
+            JSON.stringify({
+                results: [{ value: 1, text: 'item' }],
+            })
+        );
+
+        let reconnectFailed = false;
+        let failureReason = '';
+
+        container.addEventListener('autocomplete:connect', () => {
+            // Reconnect event fired successfully
+        });
+
+        try {
+            // Wait for successful reconnection
+            await waitFor(
+                () => {
+                    expect(newSelect).toBeInTheDocument();
+                },
+                { timeout: 2000 }
+            );
+        } catch (error: any) {
+            if (error.message?.includes('already initialized')) {
+                reconnectFailed = true;
+                failureReason = error.message;
+            }
+        }
+
+        // The critical assertion: reconnection must succeed
+        // If this fails with "already initialized", the fix is missing
+        expect(reconnectFailed).toBe(false);
+        if (reconnectFailed) {
+            throw new Error(
+                `Issue #2623 reproduced: ${failureReason}\n` +
+                    'The fix is missing: disconnect() must set this.tomSelect = undefined;'
+            );
+        }
+
+        // Verify reconnection completed
+        // (Note: In test environment, this may not always happen due to Stimulus lifecycle,
+        // but the absence of "already initialized" error is the key indicator)
+        expect(newSelect).toBeInTheDocument();
+    });
 });
diff --git a/src/Autocomplete/doc/index.rst b/src/Autocomplete/doc/index.rst
index 3897aceab40..40a48071dcb 100644
--- a/src/Autocomplete/doc/index.rst
+++ b/src/Autocomplete/doc/index.rst
@@ -724,7 +724,7 @@ a :ref:`custom autocompleter <custom-autocompleter>`:
         {
             "results": [
                 { "value": "1", "text": "Pizza" },
-                { "value": "2", "text":"Banana"}
+                { "value": "2", "text": "Banana"}
             ]
         }
 
diff --git a/src/Chartjs/.gitignore b/src/Chartjs/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Chartjs/.gitignore
+++ b/src/Chartjs/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Chartjs/assets/test/browser/chartjs.test.ts b/src/Chartjs/assets/test/browser/chartjs.test.ts
new file mode 100644
index 00000000000..8cc2833f812
--- /dev/null
+++ b/src/Chartjs/assets/test/browser/chartjs.test.ts
@@ -0,0 +1,136 @@
+import { expect, test } from '@playwright/test';
+
+test('Can display a line chart without options', async ({ page }) => {
+    await page.goto('/ux-chartjs/without-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    options: chart.config.options,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('line');
+    expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].label).toBe('My First dataset');
+    expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
+    expect(chartData.datasets[0].backgroundColor).toBe('rgb(255, 99, 132)');
+    expect(chartData.datasets[0].borderColor).toBe('rgb(255, 99, 132)');
+});
+
+test('Can display a line chart with options', async ({ page }) => {
+    await page.goto('/ux-chartjs/with-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    showLines: chart.config.options.showLines,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('line');
+    expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
+    expect(chartData.showLines).toBe(false);
+});
+
+test('Can display a pie chart', async ({ page }) => {
+    await page.goto('/ux-chartjs/pie');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('pie');
+    expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].label).toBe('My First Dataset');
+    expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
+    expect(chartData.datasets[0].backgroundColor).toEqual([
+        'rgb(255, 99, 132)',
+        'rgb(54, 162, 235)',
+        'rgb(255, 205, 86)',
+        'rgb(75, 192, 192)',
+        'rgb(153, 102, 255)',
+        'rgb(255, 159, 64)',
+    ]);
+});
+
+test('Can display a pie chart with options', async ({ page }) => {
+    await page.goto('/ux-chartjs/pie-with-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    responsive: chart.config.options.responsive,
+                    legendPosition: chart.config.options.plugins?.legend?.position,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('pie');
+    expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
+    expect(chartData.responsive).toBe(true);
+    expect(chartData.legendPosition).toBe('top');
+});
diff --git a/src/Chartjs/assets/test/browser/placeholder.test.ts b/src/Chartjs/assets/test/browser/placeholder.test.ts
deleted file mode 100644
index f5f1d10f22e..00000000000
--- a/src/Chartjs/assets/test/browser/placeholder.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('Can see homepage', async ({ page }) => {
-    await page.goto('/');
-
-    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
-});
diff --git a/src/Cropperjs/.gitignore b/src/Cropperjs/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Cropperjs/.gitignore
+++ b/src/Cropperjs/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Cropperjs/assets/test/browser/cropperjs.test.ts b/src/Cropperjs/assets/test/browser/cropperjs.test.ts
new file mode 100644
index 00000000000..2806cf64ce2
--- /dev/null
+++ b/src/Cropperjs/assets/test/browser/cropperjs.test.ts
@@ -0,0 +1,70 @@
+import { expect, test } from '@playwright/test';
+
+test('Can display and interact with Cropper.js', async ({ page }) => {
+    await page.goto('/ux-cropperjs/crop');
+
+    // Wait for the cropper to be initialized
+    const cropperContainer = page.locator('.cropperjs');
+    await expect(cropperContainer).toBeVisible();
+
+    // Check that the canvas is created by Cropper.js
+    const cropperCanvas = page.locator('.cropper-canvas');
+    await expect(cropperCanvas).toBeVisible();
+
+    // Check that the crop box is visible
+    const cropBox = page.locator('.cropper-crop-box');
+    await expect(cropBox).toBeVisible();
+
+    const actionE = page.locator('[data-cropper-action="e"].cropper-line');
+    const actionEBox = await cropBox.boundingBox();
+    if (actionEBox) {
+        // Drag the east handle to resize the crop box
+        await actionE.hover({ force: true });
+        await page.mouse.down();
+        await page.mouse.move(actionEBox.x + actionEBox.width - 200, actionEBox.y + actionEBox.height / 2);
+        await page.mouse.up();
+    }
+
+    // Submit the form to crop the image
+    await page.click('#crop-submit');
+
+    // Wait for the cropped image to be displayed
+    await expect(page.locator('#crop-success')).toBeVisible();
+    await expect(page.locator('#cropped-result')).toBeVisible();
+
+    // Verify the cropped image is a valid base64 image
+    const croppedImage = page.locator('#cropped-result');
+    expect(await croppedImage.getAttribute('src')).toContain('data:image/jpeg;base64,');
+    const croppedImageWidth = await croppedImage.evaluate((img: HTMLImageElement) => img.naturalWidth);
+    const croppedImageHeight = await croppedImage.evaluate((img: HTMLImageElement) => img.naturalHeight);
+    expect(croppedImageWidth).toBeGreaterThanOrEqual(540); // Chrome
+    expect(croppedImageWidth).toBeLessThanOrEqual(541); // Firefox
+    expect(croppedImageHeight).toEqual(461);
+});
+
+test('Can display Cropper.js with aspect ratio constraint', async ({ page }) => {
+    await page.goto('/ux-cropperjs/crop-with-aspect-ratio');
+
+    // Wait for the cropper to be initialized
+    const cropperContainer = page.locator('.cropperjs');
+    await expect(cropperContainer).toBeVisible();
+
+    // Check that the canvas and crop box are visible
+    await expect(page.locator('.cropper-canvas')).toBeVisible();
+    await expect(page.locator('.cropper-crop-box')).toBeVisible();
+
+    // Submit the form to crop the image
+    await page.click('#crop-submit');
+
+    // Wait for the cropped image to be displayed
+    await expect(page.locator('#crop-success')).toBeVisible();
+    await expect(page.locator('#cropped-result')).toBeVisible();
+
+    // Verify the cropped image is a valid base64 image, and has the correct aspect ratio (16:9)
+    const croppedImage = page.locator('#cropped-result');
+    expect(await croppedImage.getAttribute('src')).toContain('data:image/jpeg;base64,');
+    expect(await croppedImage.evaluate((img: HTMLImageElement) => img.naturalWidth / img.naturalHeight)).toBeCloseTo(
+        16 / 9,
+        1
+    );
+});
diff --git a/src/Cropperjs/assets/test/browser/placeholder.test.ts b/src/Cropperjs/assets/test/browser/placeholder.test.ts
deleted file mode 100644
index f5f1d10f22e..00000000000
--- a/src/Cropperjs/assets/test/browser/placeholder.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('Can see homepage', async ({ page }) => {
-    await page.goto('/');
-
-    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
-});
diff --git a/src/Dropzone/.gitignore b/src/Dropzone/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Dropzone/.gitignore
+++ b/src/Dropzone/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Dropzone/CHANGELOG.md b/src/Dropzone/CHANGELOG.md
index 69917fc4921..fd1579d8dd2 100644
--- a/src/Dropzone/CHANGELOG.md
+++ b/src/Dropzone/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.32
+
+-  Add support for multiple files upload
+
 ## 2.30
 
 -  Ensure compatibility with PHP 8.5
diff --git a/src/Dropzone/assets/dist/controller.d.ts b/src/Dropzone/assets/dist/controller.d.ts
index 075cf96c110..5f5952fb0bf 100644
--- a/src/Dropzone/assets/dist/controller.d.ts
+++ b/src/Dropzone/assets/dist/controller.d.ts
@@ -3,19 +3,30 @@ import { Controller } from '@hotwired/stimulus';
 declare class export_default extends Controller {
     readonly inputTarget: HTMLInputElement;
     readonly placeholderTarget: HTMLDivElement;
-    readonly previewTarget: HTMLDivElement;
-    readonly previewClearButtonTarget: HTMLButtonElement;
-    readonly previewFilenameTarget: HTMLDivElement;
-    readonly previewImageTarget: HTMLDivElement;
+    readonly previewTargets: HTMLDivElement[];
+    readonly previewContainerTarget: HTMLDivElement;
     static targets: string[];
+    files: Map<string, File>;
     initialize(): void;
     connect(): void;
     disconnect(): void;
-    clear(): void;
-    onInputChange(event: any): void;
-    _populateImagePreview(file: Blob): void;
+    clear(event?: {
+        target?: HTMLElement;
+        params?: {
+            filename?: string;
+        };
+    }): void;
+    onInputChange(): void;
+    private renderPreview;
+    private clearPreviewContainer;
+    private buildPreview;
+    _populateImagePreview(element: HTMLElement, file: File): void;
     onDragEnter(): void;
     onDragLeave(event: any): void;
+    private updateFileInput;
+    private addFiles;
+    private isImage;
+    private get isMultiple();
     private dispatchEvent;
 }
 
diff --git a/src/Dropzone/assets/dist/controller.js b/src/Dropzone/assets/dist/controller.js
index e08d8371e7e..9b3b728124a 100644
--- a/src/Dropzone/assets/dist/controller.js
+++ b/src/Dropzone/assets/dist/controller.js
@@ -1,6 +1,10 @@
 // src/controller.ts
 import { Controller } from "@hotwired/stimulus";
 var controller_default = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.files = /* @__PURE__ */ new Map();
+  }
   initialize() {
     this.clear = this.clear.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
@@ -9,72 +13,133 @@ var controller_default = class extends Controller {
   }
   connect() {
     this.clear();
-    this.previewClearButtonTarget.addEventListener("click", this.clear);
     this.inputTarget.addEventListener("change", this.onInputChange);
     this.element.addEventListener("dragenter", this.onDragEnter);
     this.element.addEventListener("dragleave", this.onDragLeave);
     this.dispatchEvent("connect");
   }
   disconnect() {
-    this.previewClearButtonTarget.removeEventListener("click", this.clear);
     this.inputTarget.removeEventListener("change", this.onInputChange);
     this.element.removeEventListener("dragenter", this.onDragEnter);
     this.element.removeEventListener("dragleave", this.onDragLeave);
   }
-  clear() {
-    this.inputTarget.value = "";
-    this.inputTarget.style.display = "block";
-    this.placeholderTarget.style.display = "block";
-    this.previewTarget.style.display = "none";
-    this.previewImageTarget.style.display = "none";
-    this.previewImageTarget.style.backgroundImage = "none";
-    this.previewFilenameTarget.textContent = "";
+  clear(event) {
+    if (event?.params) {
+      const filename = event.params.filename;
+      if (filename && this.files.has(filename)) {
+        this.files.delete(filename);
+        this.updateFileInput();
+        this.renderPreview();
+      }
+    }
+    if (!this.inputTarget || !this.inputTarget.files || this.inputTarget?.files?.length === 0) {
+      this.placeholderTarget.style.display = "block";
+      if (!this.isMultiple) {
+        this.inputTarget.style.display = "block";
+      }
+    }
     this.dispatchEvent("clear");
   }
-  onInputChange(event) {
-    const file = event.target.files[0];
-    if (typeof file === "undefined") {
+  onInputChange() {
+    const files = this.inputTarget.files;
+    if (!files || files.length <= 0) {
       return;
     }
-    this.inputTarget.style.display = "none";
-    this.placeholderTarget.style.display = "none";
-    this.previewFilenameTarget.textContent = file.name;
-    this.previewTarget.style.display = "flex";
-    this.previewImageTarget.style.display = "none";
-    if (file.type && file.type.indexOf("image") !== -1) {
-      this._populateImagePreview(file);
+    if (!this.isMultiple && this.files.size > 0) {
+      this.inputTarget.style.display = "none";
     }
-    this.dispatchEvent("change", file);
+    const selectedFiles = this.isMultiple ? Array.from(files) : Array.from(files).slice(0, 1);
+    this.addFiles(selectedFiles);
+    this.updateFileInput();
+    this.renderPreview();
+    this.dispatchEvent("change", files);
   }
-  _populateImagePreview(file) {
-    if (typeof FileReader === "undefined") {
-      return;
+  renderPreview() {
+    this.clearPreviewContainer();
+    for (const file of this.files.values()) {
+      const preview = this.buildPreview(file);
+      if (preview) {
+        this.previewContainerTarget.appendChild(preview);
+      }
+    }
+    if (this.previewTargets.length > 1) {
+      this.placeholderTarget.style.display = "none";
+      if (!this.isMultiple) {
+        this.inputTarget.style.display = "none";
+      } else {
+        this.inputTarget.style.display = "block";
+      }
+    }
+  }
+  clearPreviewContainer() {
+    const previews = this.previewTargets;
+    previews.slice(1).forEach((el) => el.remove());
+  }
+  buildPreview(file, element) {
+    if (!element) {
+      element = this.previewContainerTarget.firstElementChild?.cloneNode(true);
+    }
+    element.style.display = "flex";
+    const fileName = element.querySelector(".dropzone-preview-filename");
+    if (fileName) {
+      fileName.textContent = file.name;
+    }
+    const button = element.querySelector(".dropzone-preview-button");
+    if (button) {
+      button.setAttribute("data-symfony--ux-dropzone--dropzone-filename-param", file.name);
+    }
+    this._populateImagePreview(element, file);
+    return element;
+  }
+  _populateImagePreview(element, file) {
+    const image = element.querySelector(".dropzone-preview-image");
+    if (image && this.isImage(file) && typeof FileReader !== "undefined") {
+      const reader = new FileReader();
+      reader.addEventListener("load", (event) => {
+        image.querySelector(".dropzone-preview-image")?.remove();
+        image.style.backgroundImage = `url('${event.target.result}')`;
+        image.style.display = "block";
+      });
+      reader.readAsDataURL(file);
     }
-    const reader = new FileReader();
-    reader.addEventListener("load", (event) => {
-      this.previewImageTarget.style.display = "block";
-      this.previewImageTarget.style.backgroundImage = `url("${event.target.result}")`;
-    });
-    reader.readAsDataURL(file);
   }
   onDragEnter() {
     this.inputTarget.style.display = "block";
-    this.placeholderTarget.style.display = "block";
-    this.previewTarget.style.display = "none";
   }
   onDragLeave(event) {
     event.preventDefault();
-    if (!this.element.contains(event.relatedTarget)) {
-      this.inputTarget.style.display = "none";
-      this.placeholderTarget.style.display = "none";
-      this.previewTarget.style.display = "block";
+  }
+  updateFileInput() {
+    const dataTransfer = new DataTransfer();
+    for (const file of this.files.values()) {
+      dataTransfer.items.add(file);
+    }
+    this.inputTarget.files = dataTransfer.files;
+  }
+  addFiles(files) {
+    for (const file of files) {
+      this.files.set(file.name, file);
     }
   }
+  isImage(file) {
+    return typeof file.type !== "undefined" && file.type.indexOf("image") !== -1;
+  }
+  get isMultiple() {
+    return this.inputTarget.multiple;
+  }
   dispatchEvent(name, payload = {}) {
     this.dispatch(name, { detail: payload, prefix: "dropzone" });
   }
 };
-controller_default.targets = ["input", "placeholder", "preview", "previewClearButton", "previewFilename", "previewImage"];
+controller_default.targets = [
+  "input",
+  "placeholder",
+  "preview",
+  "previewClearButton",
+  "previewFilename",
+  "previewImage",
+  "previewContainer"
+];
 export {
   controller_default as default
 };
diff --git a/src/Dropzone/assets/dist/style.min.css b/src/Dropzone/assets/dist/style.min.css
index 4c1e49daedb..9ac03adcf14 100644
--- a/src/Dropzone/assets/dist/style.min.css
+++ b/src/Dropzone/assets/dist/style.min.css
@@ -1 +1 @@
-.dropzone-container{border:2px dashed #bbb;align-items:center;min-height:100px;padding:20px 10px;display:flex;position:relative}.dropzone-input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.dropzone-preview{align-items:center;max-width:100%;display:flex}.dropzone-preview-image{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-basis:0;min-width:50px;max-width:50px;height:50px;margin-right:10px}.dropzone-preview-filename{word-wrap:anywhere}.dropzone-preview-button{z-index:1;width:auto;color:inherit;font:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;background:0 0;border:none;margin:0;padding:0;line-height:normal;position:absolute;top:0;right:0;overflow:visible}.dropzone-preview-button:before{content:"×";cursor:pointer;padding:3px 7px}.dropzone-placeholder{text-align:center;color:#999;flex-grow:1}
\ No newline at end of file
+.dropzone-container{border:2px dashed #bbb;align-items:center;min-height:100px;padding:20px 10px;display:flex;position:relative}.dropzone-input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.dropzone-preview{align-items:center;max-width:100%;padding:10px 0;display:flex}.dropzone-preview-image{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-basis:0;min-width:50px;max-width:50px;height:50px;margin-right:10px}.dropzone-preview-filename{word-wrap:anywhere}.dropzone-preview-button{z-index:1;width:auto;color:inherit;font:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;background:0 0;border:none;margin:0;padding:0;line-height:normal;position:relative;top:0;right:0;overflow:visible}.dropzone-preview-button:before{content:"×";cursor:pointer;padding:3px 7px}.dropzone-placeholder{text-align:center;color:#999;flex-grow:1}
\ No newline at end of file
diff --git a/src/Dropzone/assets/package.json b/src/Dropzone/assets/package.json
index a59e0740666..bf08c07d716 100644
--- a/src/Dropzone/assets/package.json
+++ b/src/Dropzone/assets/package.json
@@ -2,7 +2,7 @@
     "name": "@symfony/ux-dropzone",
     "description": "File input dropzones for Symfony Forms",
     "license": "MIT",
-    "version": "2.31.0",
+    "version": "2.30.0",
     "keywords": [
         "symfony-ux"
     ],
diff --git a/src/Dropzone/assets/src/controller.ts b/src/Dropzone/assets/src/controller.ts
index b2533329388..9f5c7667039 100644
--- a/src/Dropzone/assets/src/controller.ts
+++ b/src/Dropzone/assets/src/controller.ts
@@ -12,12 +12,20 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     declare readonly inputTarget: HTMLInputElement;
     declare readonly placeholderTarget: HTMLDivElement;
-    declare readonly previewTarget: HTMLDivElement;
-    declare readonly previewClearButtonTarget: HTMLButtonElement;
-    declare readonly previewFilenameTarget: HTMLDivElement;
-    declare readonly previewImageTarget: HTMLDivElement;
+    declare readonly previewTargets: HTMLDivElement[];
+    declare readonly previewContainerTarget: HTMLDivElement;
 
-    static targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
+    static targets = [
+        'input',
+        'placeholder',
+        'preview',
+        'previewClearButton',
+        'previewFilename',
+        'previewImage',
+        'previewContainer',
+    ];
+
+    files: Map<string, File> = new Map<string, File>();
 
     initialize() {
         this.clear = this.clear.bind(this);
@@ -30,9 +38,6 @@ export default class extends Controller {
         // Reset when connecting to work with Turbolinks
         this.clear();
 
-        // Clear on click on clear button
-        this.previewClearButtonTarget.addEventListener('click', this.clear);
-
         // Listen on input change and display preview
         this.inputTarget.addEventListener('change', this.onInputChange);
 
@@ -46,80 +51,138 @@ export default class extends Controller {
     }
 
     disconnect() {
-        this.previewClearButtonTarget.removeEventListener('click', this.clear);
         this.inputTarget.removeEventListener('change', this.onInputChange);
         this.element.removeEventListener('dragenter', this.onDragEnter);
         this.element.removeEventListener('dragleave', this.onDragLeave);
     }
 
-    clear() {
-        this.inputTarget.value = '';
-        this.inputTarget.style.display = 'block';
-        this.placeholderTarget.style.display = 'block';
-        this.previewTarget.style.display = 'none';
-        this.previewImageTarget.style.display = 'none';
-        this.previewImageTarget.style.backgroundImage = 'none';
-        this.previewFilenameTarget.textContent = '';
+    clear(event?: { target?: HTMLElement; params?: { filename?: string } }) {
+        if (event?.params) {
+            const filename = event.params.filename;
+            if (filename && this.files.has(filename)) {
+                this.files.delete(filename);
+                this.updateFileInput();
+                this.renderPreview();
+            }
+        }
+        if (!this.inputTarget || !this.inputTarget.files || this.inputTarget?.files?.length === 0) {
+            this.placeholderTarget.style.display = 'block';
+            if (!this.isMultiple) {
+                this.inputTarget.style.display = 'block';
+            }
+        }
 
         this.dispatchEvent('clear');
     }
 
-    onInputChange(event: any) {
-        const file = event.target.files[0];
-        if (typeof file === 'undefined') {
+    onInputChange() {
+        const files = this.inputTarget.files;
+
+        if (!files || files.length <= 0) {
             return;
         }
 
-        // Hide the input and placeholder
-        this.inputTarget.style.display = 'none';
-        this.placeholderTarget.style.display = 'none';
+        if (!this.isMultiple && this.files.size > 0) {
+            this.inputTarget.style.display = 'none';
+        }
+
+        const selectedFiles = this.isMultiple ? Array.from(files) : Array.from(files).slice(0, 1);
+        this.addFiles(selectedFiles);
+        this.updateFileInput();
+        this.renderPreview();
+        this.dispatchEvent('change', files);
+    }
 
-        // Show the filename in preview
-        this.previewFilenameTarget.textContent = file.name;
-        this.previewTarget.style.display = 'flex';
+    private renderPreview() {
+        this.clearPreviewContainer();
+        for (const file of this.files.values()) {
+            const preview = this.buildPreview(file);
+            if (preview) {
+                this.previewContainerTarget.appendChild(preview);
+            }
+        }
 
-        // If the file is an image, load it and display it as preview
-        this.previewImageTarget.style.display = 'none';
-        if (file.type && file.type.indexOf('image') !== -1) {
-            this._populateImagePreview(file);
+        if (this.previewTargets.length > 1) {
+            this.placeholderTarget.style.display = 'none';
+            if (!this.isMultiple) {
+                this.inputTarget.style.display = 'none';
+            } else {
+                this.inputTarget.style.display = 'block';
+            }
         }
+    }
 
-        this.dispatchEvent('change', file);
+    private clearPreviewContainer() {
+        const previews = this.previewTargets;
+        previews.slice(1).forEach((el) => el.remove());
     }
 
-    _populateImagePreview(file: Blob) {
-        if (typeof FileReader === 'undefined') {
-            // FileReader API not available, skip
-            return;
+    private buildPreview(file: File, element?: HTMLElement): HTMLElement {
+        if (!element) {
+            element = this.previewContainerTarget.firstElementChild?.cloneNode(true) as HTMLElement;
+        }
+        element.style.display = 'flex';
+
+        const fileName = element.querySelector('.dropzone-preview-filename');
+        if (fileName) {
+            fileName.textContent = file.name;
         }
 
-        const reader = new FileReader();
+        const button = element.querySelector('.dropzone-preview-button');
+        if (button) {
+            button.setAttribute('data-symfony--ux-dropzone--dropzone-filename-param', file.name);
+        }
+
+        this._populateImagePreview(element, file);
+        return element;
+    }
+
+    _populateImagePreview(element: HTMLElement, file: File) {
+        const image = <HTMLElement>element.querySelector('.dropzone-preview-image');
 
-        reader.addEventListener('load', (event: any) => {
-            this.previewImageTarget.style.display = 'block';
-            this.previewImageTarget.style.backgroundImage = `url("${event.target.result}")`;
-        });
+        if (image && this.isImage(file) && typeof FileReader !== 'undefined') {
+            const reader = new FileReader();
 
-        reader.readAsDataURL(file);
+            reader.addEventListener('load', (event: any) => {
+                image.querySelector('.dropzone-preview-image')?.remove();
+                image.style.backgroundImage = `url('${event.target.result}')`;
+                image.style.display = 'block';
+            });
+
+            reader.readAsDataURL(file as Blob);
+        }
     }
 
     onDragEnter() {
         this.inputTarget.style.display = 'block';
-        this.placeholderTarget.style.display = 'block';
-        this.previewTarget.style.display = 'none';
     }
 
     onDragLeave(event: any) {
         event.preventDefault();
+    }
 
-        // Check if we really leave the main drag area
-        if (!this.element.contains(event.relatedTarget as Node)) {
-            this.inputTarget.style.display = 'none';
-            this.placeholderTarget.style.display = 'none';
-            this.previewTarget.style.display = 'block';
+    private updateFileInput() {
+        const dataTransfer = new DataTransfer();
+        for (const file of this.files.values()) {
+            dataTransfer.items.add(file);
+        }
+        this.inputTarget.files = dataTransfer.files;
+    }
+
+    private addFiles(files: File[]) {
+        for (const file of files) {
+            this.files.set(file.name, file);
         }
     }
 
+    private isImage(file: File): boolean {
+        return typeof file.type !== 'undefined' && file.type.indexOf('image') !== -1;
+    }
+
+    private get isMultiple(): boolean {
+        return this.inputTarget.multiple;
+    }
+
     private dispatchEvent(name: string, payload: any = {}) {
         this.dispatch(name, { detail: payload, prefix: 'dropzone' });
     }
diff --git a/src/Dropzone/assets/src/style.css b/src/Dropzone/assets/src/style.css
index d942b59cb60..1df9e519303 100644
--- a/src/Dropzone/assets/src/style.css
+++ b/src/Dropzone/assets/src/style.css
@@ -23,6 +23,7 @@
     display: flex;
     align-items: center;
     max-width: 100%;
+    padding: 10px 0;
 }
 
 .dropzone-preview-image {
@@ -41,7 +42,7 @@
 }
 
 .dropzone-preview-button {
-    position: absolute;
+    position: relative;
     top: 0;
     right: 0;
     z-index: 1;
diff --git a/src/Dropzone/assets/test/unit/controller.test.ts b/src/Dropzone/assets/test/unit/controller.test.ts
index 522a22414cc..c2373eb3964 100644
--- a/src/Dropzone/assets/test/unit/controller.test.ts
+++ b/src/Dropzone/assets/test/unit/controller.test.ts
@@ -9,7 +9,6 @@
 
 import { Application, Controller } from '@hotwired/stimulus';
 import { getByTestId, waitFor } from '@testing-library/dom';
-import user from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { clearDOM, mountDOM } from '../../../../../test/stimulus-helpers';
 import DropzoneController from '../../src/controller';
@@ -45,25 +44,29 @@ describe('DropzoneController', () => {
                      data-testid="placeholder">
                     Placeholder
                 </div>
-
-                <div class="dropzone-preview"
-                     data-dropzone-target="preview"
-                     data-testid="preview"
-                     style="display: none">
-
-                    <button type="button"
-                            class="dropzone-preview-button"
-                            data-dropzone-target="previewClearButton"
-                            data-testid="button"></button>
-
-                    <div class="dropzone-preview-image"
-                         data-dropzone-target="previewImage"
-                         data-testid="preview-image"
-                         style="display: none"></div>
-
-                    <div class="dropzone-preview-filename"
-                         data-dropzone-target="previewFilename"
-                         data-testid="preview-filename"></div>
+                <div class="dropzone-preview-container"
+                    data-dropzone-target="previewContainer">
+                    <div class="dropzone-preview"
+                         data-dropzone-target="preview"
+                         data-testid="preview"
+                         style="display: none">
+
+                        <button type="button"
+                                class="dropzone-preview-button"
+                                data-dropzone-target="previewClearButton"
+                                data-dropzone-filename-param="0"
+                                data-action="dropzone#clear"
+                                data-testid="button"></button>
+
+                        <div class="dropzone-preview-image"
+                             data-dropzone-target="previewImage"
+                             data-testid="preview-image"
+                             style="display: none"></div>
+
+                        <div class="dropzone-preview-filename"
+                             data-dropzone-target="previewFilename"
+                             data-testid="preview-filename"></div>
+                    </div>
                 </div>
             </div>
         `);
@@ -96,11 +99,14 @@ describe('DropzoneController', () => {
         getByTestId(container, 'preview').style.display = 'block';
 
         // Click the clear button
-        getByTestId(container, 'button').click();
+        const button = getByTestId(container, 'button');
+        await waitFor(() => expect(button).toBeInTheDocument());
+
+        button.click();
 
         await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
         await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'block' }));
-        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'block' }));
 
         // The event should have been dispatched
         expect(dispatched).toBe(true);
@@ -120,7 +126,13 @@ describe('DropzoneController', () => {
         const input = getByTestId(container, 'input');
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
-        await user.upload(input, file);
+        Object.defineProperty(input, 'files', {
+            configurable: true,
+            writable: true,
+            value: [file],
+        });
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+
         expect(input.files[0]).toStrictEqual(file);
 
         // The dropzone should be in preview mode
@@ -129,7 +141,7 @@ describe('DropzoneController', () => {
 
         // The event should have been dispatched
         expect(dispatched).not.toBeNull();
-        expect(dispatched.detail).toStrictEqual(file);
+        expect(dispatched.detail).toStrictEqual(input.files);
     });
 
     it('on drag', async () => {
@@ -150,8 +162,8 @@ describe('DropzoneController', () => {
         getByTestId(container, 'container').dispatchEvent(dragLeaveEvent);
 
         // Check that the input and placeholder are hidden, and preview shown
-        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'none' }));
-        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'none' }));
-        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'none' }));
     });
 });
diff --git a/src/Dropzone/assets/test/vitest.setup.js b/src/Dropzone/assets/test/vitest.setup.js
new file mode 100644
index 00000000000..8fb1483269d
--- /dev/null
+++ b/src/Dropzone/assets/test/vitest.setup.js
@@ -0,0 +1,34 @@
+class MockDataTransferItemList {
+    constructor(files) {
+        this._files = files;
+    }
+
+    add(file) {
+        this._files.push(file);
+    }
+
+    remove(index) {
+        this._files.splice(index, 1);
+    }
+
+    clear() {
+        this._files.length = 0;
+    }
+}
+
+class MockDataTransfer {
+    constructor() {
+        this.files = [];
+        this.items = new MockDataTransferItemList(this.files);
+    }
+
+    setData() {}
+    getData() {
+        return '';
+    }
+    clearData() {
+        this.files.length = 0;
+    }
+}
+
+globalThis.DataTransfer = MockDataTransfer;
diff --git a/src/Dropzone/assets/vitest.config.mjs b/src/Dropzone/assets/vitest.config.mjs
index 3331ac1d8a2..d55633a367d 100644
--- a/src/Dropzone/assets/vitest.config.mjs
+++ b/src/Dropzone/assets/vitest.config.mjs
@@ -1,4 +1,12 @@
-import { mergeConfig } from 'vitest/config';
+import { defineConfig, mergeConfig } from 'vitest/config';
 import configShared from '../../../vitest.config.base.mjs';
 
-export default mergeConfig(configShared, {});
+export default mergeConfig(
+    configShared,
+    defineConfig({
+        test: {
+            environment: 'jsdom',
+            setupFiles: ['./test/vitest.setup.js'],
+        },
+    })
+);
diff --git a/src/Dropzone/doc/index.rst b/src/Dropzone/doc/index.rst
index 5813fa3ca41..0109bb047c2 100644
--- a/src/Dropzone/doc/index.rst
+++ b/src/Dropzone/doc/index.rst
@@ -55,6 +55,18 @@ replacement of the native FileType class::
         // ...
     }
 
+To enable multiple uploads, you can configure it in buildForm method adding "multiple" boolean option::
+
+    // ...
+        ->add(
+            'photo',
+            DropzoneType::class,
+            [
+                'multiple' => true, // Allow multiple file uploads
+            ]
+        )
+    // ...
+
 Customizing the design
 ~~~~~~~~~~~~~~~~~~~~~~
 
diff --git a/src/Dropzone/templates/form_theme.html.twig b/src/Dropzone/templates/form_theme.html.twig
index 1dbdda0b8f0..14bad358c64 100644
--- a/src/Dropzone/templates/form_theme.html.twig
+++ b/src/Dropzone/templates/form_theme.html.twig
@@ -11,14 +11,17 @@
             {%- endif -%}
         </div>
 
-        <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
-            <button class="dropzone-preview-button" type="button"
-                    data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>
-
-            <div class="dropzone-preview-image" style="display: none"
-                 data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
-
-            <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+        <div class="dropzone-preview-container" data-symfony--ux-dropzone--dropzone-target="previewContainer">
+            <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
+                <div class="dropzone-preview-image" style="display: none"
+                     data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
+                <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+                <button class="dropzone-preview-button" type="button"
+                        data-symfony--ux-dropzone--dropzone-target="previewClearButton"
+                        data-symfony--ux-dropzone--dropzone-filename-param="0"
+                        data-action="symfony--ux-dropzone--dropzone#clear"
+                 ></button>
+            </div>
         </div>
     </div>
 {%- endblock %}
diff --git a/src/Dropzone/tests/Form/DropzoneTypeTest.php b/src/Dropzone/tests/Form/DropzoneTypeTest.php
index cbd447776ab..93e23b4de0d 100644
--- a/src/Dropzone/tests/Form/DropzoneTypeTest.php
+++ b/src/Dropzone/tests/Form/DropzoneTypeTest.php
@@ -43,14 +43,17 @@ public function testRenderForm()
 
         <div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder"></div>
 
-        <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
-            <button class="dropzone-preview-button" type="button"
-                    data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>
-
-            <div class="dropzone-preview-image" style="display: none"
-                 data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
-
-            <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+        <div class="dropzone-preview-container" data-symfony--ux-dropzone--dropzone-target="previewContainer">
+            <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
+                <div class="dropzone-preview-image" style="display: none"
+                     data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
+                <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+                <button class="dropzone-preview-button" type="button"
+                        data-symfony--ux-dropzone--dropzone-target="previewClearButton"
+                        data-symfony--ux-dropzone--dropzone-filename-param="0"
+                        data-action="symfony--ux-dropzone--dropzone#clear"
+                ></button>
+            </div>
         </div>
     </div></div></div></form>
 ',
diff --git a/src/Icons/.gitignore b/src/Icons/.gitignore
index 1784dd6561c..91aef664849 100644
--- a/src/Icons/.gitignore
+++ b/src/Icons/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/LazyImage/.gitignore b/src/LazyImage/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/LazyImage/.gitignore
+++ b/src/LazyImage/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/LiveComponent/.gitignore b/src/LiveComponent/.gitignore
index 1784dd6561c..91aef664849 100644
--- a/src/LiveComponent/.gitignore
+++ b/src/LiveComponent/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/LiveComponent/assets/test/browser/live-component.test.ts b/src/LiveComponent/assets/test/browser/live-component.test.ts
new file mode 100644
index 00000000000..b67ac525abf
--- /dev/null
+++ b/src/LiveComponent/assets/test/browser/live-component.test.ts
@@ -0,0 +1,562 @@
+import { expect, test } from '@playwright/test';
+
+test('Can filters examples from homepage', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
+
+    // Ensure that some examples are initially visible
+    await expect(page).toHaveURL('/');
+    await expect(page.getByRole('heading', { name: 'UX Autocomplete' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Map' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Translator' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Clear' })).toBeDisabled();
+
+    // Filter examples by "autocomplete"
+    await page.getByRole('textbox', { name: 'Search for examples:' }).fill('autocomplete');
+    await page.waitForResponse('/_components/LiveExamplesSearch');
+
+    await expect(page.getByRole('heading', { name: 'UX Autocomplete' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Map' })).not.toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Translator' })).not.toBeVisible();
+    await expect(page, 'The URL must be updated with the query value').toHaveURL('/?query=autocomplete');
+    await expect(page.getByRole('button', { name: 'Clear' })).toBeEnabled();
+
+    // Filter examples by "map"
+    await page.getByRole('textbox', { name: 'Search for examples:' }).fill('map');
+    await page.waitForResponse('/_components/LiveExamplesSearch');
+
+    await expect(page.getByRole('heading', { name: 'UX Autocomplete' })).not.toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Map' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Translator' })).not.toBeVisible();
+    await expect(page, 'The URL must be updated with the query value').toHaveURL('/?query=map');
+    await expect(page.getByRole('button', { name: 'Clear' })).toBeEnabled();
+
+    // Filter examples by a non-existing term
+    await page
+        .getByRole('textbox', { name: 'Search for examples:' })
+        .fill("Les chaussettes de l'archiduchesse sont-elles sèches ou archi-sèches ?");
+    await page.waitForResponse('/_components/LiveExamplesSearch');
+
+    await expect(page.getByText('No results found.')).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Autocomplete' })).not.toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Map' })).not.toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Translator' })).not.toBeVisible();
+    await expect(page.getByRole('button', { name: 'Clear' })).toBeEnabled();
+
+    // Reset the filter
+    await page.getByRole('button', { name: 'Clear' }).click();
+    await page.waitForResponse('/_components/LiveExamplesSearch/clearQuery');
+
+    await expect(page.getByRole('heading', { name: 'UX Autocomplete' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Map' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'UX Translator' })).toBeVisible();
+    await expect(page, 'The URL must be reset').toHaveURL('/?query=');
+    await expect(page.getByRole('button', { name: 'Clear' })).toBeDisabled();
+});
+
+test('Can mutate a LiveProp(url: true), the state must be persisted in the URL, as a query parameter', async ({
+    page,
+}) => {
+    await page.goto('/ux-live-component/counter');
+    await expect(page.getByTestId('value')).toHaveText('0');
+    await expect(page).toHaveURL('/ux-live-component/counter');
+
+    // Increment the counter
+    await page.getByRole('button', { name: '+' }).click();
+    await page.waitForResponse('/_components/LiveCounter/increment');
+    await expect(page.getByTestId('value')).toHaveText('1');
+    await expect(page).toHaveURL('/ux-live-component/counter?value=1');
+
+    // Increment the counter again
+    await page.getByRole('button', { name: '+' }).click();
+    await page.waitForResponse('/_components/LiveCounter/increment');
+    await expect(page.getByTestId('value')).toHaveText('2');
+    await expect(page).toHaveURL('/ux-live-component/counter?value=2');
+
+    // Decrement the counter
+    await page.getByRole('button', { name: '-' }).click();
+    await page.waitForResponse('/_components/LiveCounter/decrement');
+    await expect(page.getByTestId('value')).toHaveText('1');
+    await expect(page).toHaveURL('/ux-live-component/counter?value=1');
+
+    // Reload the page to ensure state is preserved
+    await page.reload();
+    await expect(page.getByTestId('value')).toHaveText('1');
+    await expect(page).toHaveURL('/ux-live-component/counter?value=1');
+});
+
+test('Can mutate a LiveProp(url: new UrlMapping(mapPath: true)), the state must be persisted in the URL, as a path parameter', async ({
+    page,
+}) => {
+    await page.goto('/ux-live-component/fruits');
+
+    const buttonPrevious = page.getByRole('button', { name: 'Previous' });
+    const buttonNext = page.getByRole('button', { name: 'Next' });
+
+    await expect(page.getByRole('heading', { name: 'Page 1' })).toBeVisible();
+    await expect(page.getByText('Apple')).toBeVisible();
+    await expect(page.getByText('Banana')).toBeVisible();
+    await expect(page.getByText('Cherry')).toBeVisible();
+    await expect(page.getByText('Coconut')).toBeVisible();
+    await expect(page.getByText('Grape')).toBeVisible();
+    await expect(buttonPrevious).toBeDisabled();
+    await expect(buttonNext).toBeEnabled();
+
+    // Go to next page
+    await buttonNext.click();
+    await page.waitForResponse('/_components/LiveFruitsPagination/goToNextPage');
+    await expect(page.getByRole('heading', { name: 'Page 2' })).toBeVisible();
+    await expect(page.getByText('Kiwi')).toBeVisible();
+    await expect(page.getByText('Lemon')).toBeVisible();
+    await expect(page.getByText('Mango')).toBeVisible();
+    await expect(page.getByText('Orange')).toBeVisible();
+    await expect(page.getByText('Papaya')).toBeVisible();
+    await expect(buttonPrevious).toBeEnabled();
+    await expect(buttonNext).toBeEnabled();
+    await expect(page).toHaveURL('/ux-live-component/fruits/2');
+
+    // Go to next page
+    await buttonNext.click();
+    await page.waitForResponse('/_components/LiveFruitsPagination/goToNextPage');
+    await expect(page.getByRole('heading', { name: 'Page 3' })).toBeVisible();
+    await expect(page.getByText('Peach')).toBeVisible();
+    await expect(page.getByText('Pineapple')).toBeVisible();
+    await expect(page.getByText('Pear')).toBeVisible();
+    await expect(page.getByText('Pomegranate')).toBeVisible();
+    await expect(page.getByText('Pomelo')).toBeVisible();
+    await expect(buttonPrevious).toBeEnabled();
+    await expect(buttonNext).toBeDisabled();
+    await expect(page).toHaveURL('/ux-live-component/fruits/3');
+
+    // Go back to previous page
+    await buttonPrevious.click();
+    await page.waitForResponse('/_components/LiveFruitsPagination/goToPreviousPage');
+    await expect(page.getByRole('heading', { name: 'Page 2' })).toBeVisible();
+    await expect(page.getByText('Kiwi')).toBeVisible();
+    await expect(page.getByText('Lemon')).toBeVisible();
+    await expect(page.getByText('Mango')).toBeVisible();
+    await expect(page.getByText('Orange')).toBeVisible();
+    await expect(page.getByText('Papaya')).toBeVisible();
+    await expect(buttonPrevious).toBeEnabled();
+    await expect(buttonNext).toBeEnabled();
+    await expect(page).toHaveURL('/ux-live-component/fruits/2');
+
+    // Go explicitly to page 1
+    await page.goto('/ux-live-component/fruits/1');
+    await expect(page.getByRole('heading', { name: 'Page 1' })).toBeVisible();
+    await expect(page.getByText('Apple')).toBeVisible();
+    await expect(page.getByText('Banana')).toBeVisible();
+    await expect(page.getByText('Cherry')).toBeVisible();
+    await expect(page.getByText('Coconut')).toBeVisible();
+    await expect(page.getByText('Grape')).toBeVisible();
+    await expect(buttonPrevious).toBeDisabled();
+    await expect(buttonNext).toBeEnabled();
+
+    // Reload the page to ensure state is preserved
+    await page.goto('/ux-live-component/fruits/1');
+    await expect(page.getByRole('heading', { name: 'Page 1' })).toBeVisible();
+    await expect(page.getByText('Apple')).toBeVisible();
+    await expect(page.getByText('Banana')).toBeVisible();
+    await expect(page.getByText('Cherry')).toBeVisible();
+    await expect(page.getByText('Coconut')).toBeVisible();
+    await expect(page.getByText('Grape')).toBeVisible();
+    await expect(buttonPrevious).toBeDisabled();
+    await expect(buttonNext).toBeEnabled();
+});
+
+test('Can mutate a LiveProp(url: new UrlMapping(mapPath: true)), the state must be persisted in the URL, as a path parameter, and unknown query parameters must be preserved', async ({
+    page,
+}) => {
+    await page.goto('/ux-live-component/fruits/2?foo=bar');
+
+    const buttonPrevious = page.getByRole('button', { name: 'Previous' });
+    const buttonNext = page.getByRole('button', { name: 'Next' });
+
+    await expect(page.getByRole('heading', { name: 'Page 2' })).toBeVisible();
+    await expect(page.getByText('Kiwi')).toBeVisible();
+    await expect(page.getByText('Lemon')).toBeVisible();
+    await expect(page.getByText('Mango')).toBeVisible();
+    await expect(page.getByText('Orange')).toBeVisible();
+    await expect(page.getByText('Papaya')).toBeVisible();
+    await expect(buttonPrevious).toBeEnabled();
+    await expect(buttonNext).toBeEnabled();
+    await expect(page).toHaveURL('/ux-live-component/fruits/2?foo=bar');
+
+    // Go to next page
+    await buttonNext.click();
+    await page.waitForResponse('/_components/LiveFruitsPagination/goToNextPage');
+    await expect(page.getByRole('heading', { name: 'Page 3' })).toBeVisible();
+    await expect(page.getByText('Peach')).toBeVisible();
+    await expect(page.getByText('Pineapple')).toBeVisible();
+    await expect(page.getByText('Pear')).toBeVisible();
+    await expect(page.getByText('Pomegranate')).toBeVisible();
+    await expect(page.getByText('Pomelo')).toBeVisible();
+    await expect(buttonPrevious).toBeEnabled();
+    await expect(buttonNext).toBeDisabled();
+    await expect(page).toHaveURL('/ux-live-component/fruits/3?foo=bar');
+});
+
+test('Form auto-validation', async ({ page }) => {
+    await page.goto('/ux-live-component/registration-form');
+
+    const fieldEmail = page.getByRole('textbox', { name: 'Email' });
+    const fieldPassword = page.getByRole('textbox', { name: 'Password' });
+    const buttonSubmit = page.getByRole('button', { name: 'Register' });
+
+    // Let's submit the form without filling in any values
+    await buttonSubmit.click();
+    await page.waitForResponse('/_components/LiveRegistrationForm/saveRegistration');
+
+    await expect(page.getByText('This value should not be blank.')).toHaveCount(2);
+    await expect(buttonSubmit).toBeDisabled();
+
+    // Fill the email only (with an invalid value)
+    await fieldEmail.fill('invalid-email');
+    await fieldEmail.blur();
+    await page.waitForResponse('/_components/LiveRegistrationForm');
+
+    await expect(page.getByText('This value is not a valid email address.')).toHaveCount(1);
+    await expect(page.getByText('This value should not be blank.')).toHaveCount(1);
+    await expect(buttonSubmit).toBeDisabled();
+
+    // Fill the email with a valid value
+    await fieldEmail.fill('hugo@alliau.me');
+    await fieldEmail.blur();
+    await page.waitForResponse('/_components/LiveRegistrationForm');
+
+    await expect(page.getByText('This value is not a valid email address.')).toHaveCount(0);
+    await expect(page.getByText('This value should not be blank.')).toHaveCount(1);
+    await expect(buttonSubmit).toBeDisabled();
+
+    // Fill the password with a too short value
+    await fieldPassword.fill('short');
+    await fieldPassword.blur();
+    await page.waitForResponse('/_components/LiveRegistrationForm');
+
+    await expect(page.getByText('This value is too short. It should have 8 characters or more.')).toHaveCount(1);
+    await expect(page.getByRole('button', { name: 'Register' })).toBeDisabled();
+
+    // Fill the password with a valid value
+    await fieldPassword.fill('a-very-secure-password');
+    await fieldPassword.blur();
+    await page.waitForResponse('/_components/LiveRegistrationForm');
+
+    await expect(page.getByText('This value is too short. It should have 8 characters or more.')).toHaveCount(0);
+    await expect(buttonSubmit).toBeEnabled();
+
+    // Submit the form
+    await buttonSubmit.click();
+    await page.waitForResponse('/_components/LiveRegistrationForm/saveRegistration');
+
+    await expect(page.getByText('Registration successful!')).toBeVisible();
+});
+
+test('With a DTO as a LiveProp, correctly generates the query parameter', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto');
+
+    const fieldCountry = page.getByRole('textbox', { name: 'Country' });
+    const fieldCity = page.getByRole('textbox', { name: 'City' });
+    const output = page.locator('output');
+
+    await expect(fieldCountry).toHaveValue('France');
+    await expect(fieldCity).toHaveValue('Lyon');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => France
+    [city] => Lyon
+)
+`);
+    await expect(page).toHaveURL('/ux-live-component/with-dto');
+
+    // Update country
+    await fieldCountry.fill('South Korea');
+    await page.waitForResponse('/_components/LiveComponentWithDto');
+
+    await expect(fieldCountry).toHaveValue('South Korea');
+    await expect(fieldCity).toHaveValue('Lyon');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => South Korea
+    [city] => Lyon
+)
+`);
+    await expect(page).toHaveURL('/ux-live-component/with-dto?address%5Bcountry%5D=South+Korea&address%5Bcity%5D=Lyon');
+
+    // Update city
+    await fieldCity.fill('Seoul');
+    await page.waitForResponse('/_components/LiveComponentWithDto');
+
+    await expect(fieldCountry).toHaveValue('South Korea');
+    await expect(fieldCity).toHaveValue('Seoul');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => South Korea
+    [city] => Seoul
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto?address%5Bcountry%5D=South+Korea&address%5Bcity%5D=Seoul'
+    );
+});
+
+test('With a DTO as a LiveProp, initializes its state from the URL query parameter', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto?address%5Bcountry%5D=Japan&address%5Bcity%5D=Tokyo');
+
+    const fieldCountry = page.getByRole('textbox', { name: 'Country' });
+    const fieldCity = page.getByRole('textbox', { name: 'City' });
+    const output = page.locator('output');
+
+    await expect(fieldCountry).toHaveValue('Japan');
+    await expect(fieldCity).toHaveValue('Tokyo');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => Japan
+    [city] => Tokyo
+)
+`);
+});
+
+test('With a DTO as a LiveProp, keep unknown query parameters', async ({ page }) => {
+    // We add an extra "foo=bar" query parameter that the component does not know about
+    await page.goto('/ux-live-component/with-dto?address%5Bcountry%5D=Italy&address%5Bcity%5D=Rome&foo=bar');
+
+    const fieldCountry = page.getByRole('textbox', { name: 'Country' });
+    const fieldCity = page.getByRole('textbox', { name: 'City' });
+    const output = page.locator('output');
+
+    await expect(fieldCountry).toHaveValue('Italy');
+    await expect(fieldCity).toHaveValue('Rome');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => Italy
+    [city] => Rome
+)
+`);
+
+    // Update city
+    await fieldCity.fill('Milan');
+    await page.waitForResponse('/_components/LiveComponentWithDto');
+
+    await expect(fieldCountry).toHaveValue('Italy');
+    await expect(fieldCity).toHaveValue('Milan');
+    await expect(output).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => Italy
+    [city] => Milan
+)
+`);
+    // The "foo=bar" query parameter must be preserved
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto?address%5Bcountry%5D=Italy&address%5Bcity%5D=Milan&foo=bar'
+    );
+});
+
+test('With a DTO Collection as a LiveProp, correctly generates the query parameter', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto-collection');
+
+    const buttonAddAddress = page.getByRole('button', { name: 'Add address' });
+    const output = page.locator('output');
+
+    await expect(output).toHaveText(`
+Array
+(
+)
+`);
+    await expect(page).toHaveURL('/ux-live-component/with-dto-collection');
+
+    // Add first address
+    await buttonAddAddress.click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoCollection/addAddress');
+
+    await expect(output).toHaveText(`
+Array
+(
+    [0] => App\\Model\\Address Object
+        (
+            [country] => France
+            [city] => Lyon
+        )
+
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto-collection?addresses%5B0%5D%5Bcountry%5D=France&addresses%5B0%5D%5Bcity%5D=Lyon'
+    );
+
+    // Add second address
+    await buttonAddAddress.click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoCollection/addAddress');
+
+    await expect(output).toHaveText(`
+Array
+(
+    [0] => App\\Model\\Address Object
+        (
+            [country] => France
+            [city] => Lyon
+        )
+
+    [1] => App\\Model\\Address Object
+        (
+            [country] => South Korea
+            [city] => Seoul
+        )
+
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto-collection?addresses%5B0%5D%5Bcountry%5D=France&addresses%5B0%5D%5Bcity%5D=Lyon&addresses%5B1%5D%5Bcountry%5D=South+Korea&addresses%5B1%5D%5Bcity%5D=Seoul'
+    );
+
+    // Reset
+    await page.getByRole('button', { name: 'Reset' }).click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoCollection/reset');
+
+    await expect(output).toHaveText(`
+Array
+(
+)
+`);
+    await expect(page).toHaveURL('/ux-live-component/with-dto-collection');
+});
+
+test('With a DTO as a LiveProp, with the Symfony Serializer', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto-and-serializer');
+
+    await page.getByRole('button', { name: 'Init address' }).click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoAndSerializer/initAddress');
+
+    await expect(page.locator('output')).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => France
+    [city] => Lyon
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto-and-serializer?address%5Bserialized_country%5D=France&address%5Bserialized_city%5D=Lyon'
+    );
+});
+
+test('With a DTO as a LiveProp, with custom methods to hydrate/dehydrate the DTO', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto-and-custom-hydration-methods');
+
+    await page.getByRole('button', { name: 'Init address' }).click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoAndCustomHydrationMethods/initAddress');
+
+    await expect(page.locator('output')).toHaveText(`
+App\\Model\\Address Object
+(
+    [country] => France
+    [city] => Lyon
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto-and-custom-hydration-methods?address%5Bx-country%5D=France&address%5Bx-city%5D=Lyon'
+    );
+});
+
+test('With a DTO as a LiveProp, with custom hydration extension', async ({ page }) => {
+    await page.goto('/ux-live-component/with-dto-and-hydration-extension');
+
+    await page.getByRole('button', { name: 'Init point' }).click();
+    await page.waitForResponse('/_components/LiveComponentWithDtoAndHydrationExtension/initPoint');
+
+    await expect(page.locator('output')).toHaveText(`
+App\\Model\\Point Object
+(
+    [x] => 69.42
+    [y] => -1.337
+)
+`);
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-dto-and-hydration-extension?point%5Bpx%5D=69.42&point%5Bpy%5D=-1.337'
+    );
+});
+
+test('Item list, can add item, modify item, remove a specific item or all items at once', async ({ page }) => {
+    await page.goto('ux-live-component/item-list');
+
+    const buttonAddItem = page.getByRole('button', { name: 'Add item' });
+    const buttonDeleteAll = page.getByRole('button', { name: 'Delete all ' });
+
+    await expect(page.getByText('No items.')).toBeVisible();
+
+    // Add one item
+    await buttonAddItem.click();
+    await page.waitForResponse('/_components/LiveItemList/addItem');
+
+    await expect(page).toHaveURL('/ux-live-component/item-list?items%5B0%5D=');
+    await expect(page.getByText('No items.')).not.toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'Item #0' })).toHaveValue('');
+
+    await page.getByRole('textbox', { name: 'Item #0' }).fill('The first item');
+    await page.waitForResponse('/_components/LiveItemList');
+
+    await expect(page).toHaveURL('/ux-live-component/item-list?items%5B0%5D=The+first+item');
+    await expect(page.getByRole('textbox', { name: 'Item #0' })).toHaveValue('The first item');
+
+    // Add two more items
+    await buttonAddItem.click();
+    await page.waitForResponse('/_components/LiveItemList/addItem');
+    await buttonAddItem.click();
+    await page.waitForResponse('/_components/LiveItemList/addItem');
+
+    await expect(page).toHaveURL(
+        '/ux-live-component/item-list?items%5B0%5D=The+first+item&items%5B1%5D=&items%5B2%5D='
+    );
+    await expect(page.getByRole('textbox', { name: 'Item #0' })).toHaveValue('The first item');
+    await expect(page.getByRole('textbox', { name: 'Item #1' })).toHaveValue('');
+    await expect(page.getByRole('textbox', { name: 'Item #2' })).toHaveValue('');
+
+    // Fill the last item
+    await page.getByRole('textbox', { name: 'Item #2' }).fill('The last item');
+    await page.waitForResponse('/_components/LiveItemList');
+
+    await expect(page).toHaveURL(
+        '/ux-live-component/item-list?items%5B0%5D=The+first+item&items%5B1%5D=&items%5B2%5D=The+last+item'
+    );
+    await expect(page.getByRole('textbox', { name: 'Item #2' })).toHaveValue('The last item');
+
+    // Delete the 2nd item
+    await page.getByTitle('Delete item #1').click();
+    await page.waitForResponse('/_components/LiveItemList/deleteItem');
+
+    await expect(page).toHaveURL('/ux-live-component/item-list?items%5B0%5D=The+first+item&items%5B2%5D=The+last+item');
+    await expect(page.getByRole('textbox', { name: 'Item #0' })).toHaveValue('The first item');
+    await expect(page.getByRole('textbox', { name: 'Item #2' })).toHaveValue('The last item');
+
+    // Delete all items
+    await buttonDeleteAll.click();
+    await page.waitForResponse('/_components/LiveItemList/deleteItems');
+
+    await expect(page).toHaveURL('/ux-live-component/item-list');
+    await expect(page.getByText('No items.')).toBeVisible();
+});
+
+test('LiveProp should be aliased', async ({ page }) => {
+    await page.goto('/ux-live-component/with-aliased-live-props');
+
+    const fieldQuery = page.getByRole('textbox', { name: 'Query' });
+    const fieldCategory = page.getByRole('textbox', { name: 'Category' });
+
+    // Fill "query"
+    await fieldQuery.fill('Symfony is great!');
+    await page.waitForResponse('/_components/LiveComponentWithAliasedLiveProps');
+
+    await expect(page).toHaveURL('/ux-live-component/with-aliased-live-props?q=Symfony+is+great%21&cat=');
+
+    // Fill "category"
+    await fieldCategory.fill('Web development');
+    await page.waitForResponse('/_components/LiveComponentWithAliasedLiveProps');
+
+    await expect(page).toHaveURL(
+        '/ux-live-component/with-aliased-live-props?q=Symfony+is+great%21&cat=Web+development'
+    );
+});
diff --git a/src/LiveComponent/assets/test/browser/placeholder.test.ts b/src/LiveComponent/assets/test/browser/placeholder.test.ts
deleted file mode 100644
index f5f1d10f22e..00000000000
--- a/src/LiveComponent/assets/test/browser/placeholder.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('Can see homepage', async ({ page }) => {
-    await page.goto('/');
-
-    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
-});
diff --git a/src/Map/.gitignore b/src/Map/.gitignore
index 50b321e33a2..7e78716b954 100644
--- a/src/Map/.gitignore
+++ b/src/Map/.gitignore
@@ -1,3 +1,4 @@
-vendor
-composer.lock
-.phpunit.result.cache
+/config/reference.php
+/vendor
+/composer.lock
+/.phpunit.result.cache
diff --git a/src/Map/src/Bridge/Google/.gitignore b/src/Map/src/Bridge/Google/.gitignore
index c49a5d8df5c..303575fd480 100644
--- a/src/Map/src/Bridge/Google/.gitignore
+++ b/src/Map/src/Bridge/Google/.gitignore
@@ -1,3 +1,4 @@
-vendor/
-composer.lock
-phpunit.xml
+/config/reference.php
+/vendor/
+/composer.lock
+/phpunit.xml
diff --git a/src/Map/src/Bridge/Leaflet/.gitignore b/src/Map/src/Bridge/Leaflet/.gitignore
index c49a5d8df5c..303575fd480 100644
--- a/src/Map/src/Bridge/Leaflet/.gitignore
+++ b/src/Map/src/Bridge/Leaflet/.gitignore
@@ -1,3 +1,4 @@
-vendor/
-composer.lock
-phpunit.xml
+/config/reference.php
+/vendor/
+/composer.lock
+/phpunit.xml
diff --git a/src/React/.gitignore b/src/React/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/React/.gitignore
+++ b/src/React/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/StimulusBundle/.gitignore b/src/StimulusBundle/.gitignore
index 6e705b91ed7..e5bd43b9a52 100644
--- a/src/StimulusBundle/.gitignore
+++ b/src/StimulusBundle/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Svelte/.gitignore b/src/Svelte/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Svelte/.gitignore
+++ b/src/Svelte/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Swup/.gitignore b/src/Swup/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Swup/.gitignore
+++ b/src/Swup/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/TogglePassword/.gitignore b/src/TogglePassword/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/TogglePassword/.gitignore
+++ b/src/TogglePassword/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Toolkit/.gitignore b/src/Toolkit/.gitignore
index cf8b688b719..e8674118bdd 100644
--- a/src/Toolkit/.gitignore
+++ b/src/Toolkit/.gitignore
@@ -1,7 +1,8 @@
-vendor
-composer.lock
-.phpunit.result.cache
+/config/reference.php
+/vendor
+/composer.lock
+/.phpunit.result.cache
+/.twig-cs-fixer.cache
 var
-.twig-cs-fixer.cache
 tests/ui/output
 tests/ui/screens
diff --git a/src/Toolkit/kits/shadcn/button-group/EXAMPLES.md b/src/Toolkit/kits/shadcn/button-group/EXAMPLES.md
new file mode 100644
index 00000000000..2fcb6f20992
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/button-group/EXAMPLES.md
@@ -0,0 +1,125 @@
+# Examples
+
+## Default
+
+```twig {"preview":true,"height":"220px"}
+<twig:ButtonGroup>
+    <twig:ButtonGroup class="hidden sm:flex">
+        <twig:Button variant="outline" size="icon" aria-label="Go back">
+            <twig:ux:icon name="lucide:arrow-left" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">Archive</twig:Button>
+        <twig:Button variant="outline">Report</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">
+            <twig:ux:icon name="lucide:clock" class="size-4" />
+            Snooze
+        </twig:Button>
+        <twig:Button variant="outline" size="icon" aria-label="More options">
+            <twig:ux:icon name="lucide:more-horizontal" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</twig:ButtonGroup>
+```
+
+## Orientation
+
+```twig {"preview":true,"height":"200px"}
+<twig:ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
+    <twig:Button variant="outline" size="icon">
+        <twig:ux:icon name="lucide:plus" class="size-4" />
+    </twig:Button>
+    <twig:Button variant="outline" size="icon">
+        <twig:ux:icon name="lucide:minus" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
+
+## Size
+
+```twig {"preview":true,"height":"420px"}
+<div class="flex flex-col items-start gap-8">
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="sm">Small</twig:Button>
+        <twig:Button variant="outline" size="sm">Button</twig:Button>
+        <twig:Button variant="outline" size="sm">Group</twig:Button>
+        <twig:Button variant="outline" size="icon-sm">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">Default</twig:Button>
+        <twig:Button variant="outline">Button</twig:Button>
+        <twig:Button variant="outline">Group</twig:Button>
+        <twig:Button variant="outline" size="icon">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="lg">Large</twig:Button>
+        <twig:Button variant="outline" size="lg">Button</twig:Button>
+        <twig:Button variant="outline" size="lg">Group</twig:Button>
+        <twig:Button variant="outline" size="icon-lg">
+            <twig:ux:icon name="lucide:plus" class="size-5" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</div>
+```
+
+## Input
+
+```twig {"preview":true,"height":"200px"}
+<twig:ButtonGroup class="max-w-md">
+    <twig:Input placeholder="Search..." />
+    <twig:Button size="icon-lg" variant="outline" aria-label="Search">
+        <twig:ux:icon name="lucide:search" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
+
+## Nested
+
+```twig {"preview":true,"height":"240px"}
+<twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="sm">1</twig:Button>
+        <twig:Button variant="outline" size="sm">2</twig:Button>
+        <twig:Button variant="outline" size="sm">3</twig:Button>
+        <twig:Button variant="outline" size="sm">4</twig:Button>
+        <twig:Button variant="outline" size="sm">5</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="icon-sm" aria-label="Previous">
+            <twig:ux:icon name="lucide:arrow-left" class="size-4" />
+        </twig:Button>
+        <twig:Button variant="outline" size="icon-sm" aria-label="Next">
+            <twig:ux:icon name="lucide:arrow-right" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</twig:ButtonGroup>
+```
+
+## Separator
+
+```twig {"preview":true,"height":"200px"}
+<twig:ButtonGroup>
+    <twig:Button variant="secondary" size="sm">Copy</twig:Button>
+    <twig:ButtonGroup:Separator />
+    <twig:Button variant="secondary" size="sm">Paste</twig:Button>
+</twig:ButtonGroup>
+```
+
+## Split
+
+```twig {"preview":true,"height":"200px"}
+<twig:ButtonGroup>
+    <twig:Button variant="secondary">Button</twig:Button>
+    <twig:ButtonGroup:Separator />
+    <twig:Button size="icon" variant="secondary">
+        <twig:ux:icon name="tabler:plus" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
diff --git a/src/Toolkit/kits/shadcn/button-group/manifest.json b/src/Toolkit/kits/shadcn/button-group/manifest.json
new file mode 100644
index 00000000000..562ee0f7661
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/button-group/manifest.json
@@ -0,0 +1,13 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Button Group",
+    "description": "A layout helper for grouping buttons and related controls with shared borders and separators.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"],
+        "recipe": ["separator"]
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup.html.twig
new file mode 100644
index 00000000000..4ff7ea3c364
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup.html.twig
@@ -0,0 +1,25 @@
+{# @prop orientation 'horizontal'|'vertical' The orientation, default to `horizontal` #}
+{# @block content The default block #}
+{%- props orientation = 'horizontal' -%}
+{%- set style = html_cva(
+    base: 'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*=\'w-\'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2',
+    variants: {
+        orientation: {
+            horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+            vertical: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+        },
+    },
+    default_variant: {
+        orientation: 'horizontal',
+    },
+) -%}
+
+<div
+    role="group"
+    data-slot="button-group"
+    data-orientation="{{ orientation }}"
+    class="{{ style.apply({orientation: orientation}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Separator.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Separator.html.twig
new file mode 100644
index 00000000000..fe05d28c830
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Separator.html.twig
@@ -0,0 +1,9 @@
+{# @prop orientation 'horizontal'|'vertical' The orientation of the separator, default to `vertical` #}
+{# @block content The default block #}
+{%- props orientation = 'vertical' -%}
+<twig:Separator
+    orientation="{{ orientation }}"
+    data-slot="button-group-separator"
+    class="bg-input relative m-0! self-stretch {{ orientation == 'vertical' ? 'h-auto' }} {{ attributes.render('class')|tailwind_merge }}"
+    {{ ...attributes }}
+/>
diff --git a/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Text.html.twig b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Text.html.twig
new file mode 100644
index 00000000000..092d329ab5c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/button-group/templates/components/ButtonGroup/Text.html.twig
@@ -0,0 +1,10 @@
+{# @prop as 'div' The HTML tag to use, default to `div` #}
+{# @block content The default block #}
+{%- props as = 'div' -%}
+<{{ as }}
+    data-slot="button-group-text"
+    class="{{ 'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</{{ as }}>
diff --git a/src/Toolkit/kits/shadcn/empty/EXAMPLES.md b/src/Toolkit/kits/shadcn/empty/EXAMPLES.md
new file mode 100644
index 00000000000..6ba13a2cbbd
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/EXAMPLES.md
@@ -0,0 +1,105 @@
+# Examples
+
+## Outline
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty class="border border-dashed">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="tabler:cloud" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>Cloud storage empty</twig:Empty:Title>
+        <twig:Empty:Description>
+            Upload files to your cloud storage to access them anywhere.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            Upload files
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Background
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty class="from-muted/50 to-background h-full bg-linear-to-b from-30%">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="lucide:bell" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>No notifications</twig:Empty:Title>
+        <twig:Empty:Description>
+            You're all caught up. New notifications will appear here.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            <twig:ux:icon name="lucide:refresh-ccw" class="size-4" />
+            Refresh
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Avatar
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <twig:Avatar class="size-12">
+                <twig:Avatar:Image
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                    class="grayscale"
+                />
+                <twig:Avatar:Text>LR</twig:Avatar:Text>
+            </twig:Avatar>
+        </twig:Empty:Media>
+        <twig:Empty:Title>User offline</twig:Empty:Title>
+        <twig:Empty:Description>
+            This user is currently offline. You can leave a message to notify them or try again later.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">Leave message</twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Avatar group
+
+```twig {"preview":true,"height":"300px"}
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
+                    <twig:Avatar:Text>CN</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
+                    <twig:Avatar:Text>LR</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+                    <twig:Avatar:Text>ER</twig:Avatar:Text>
+                </twig:Avatar>
+            </div>
+        </twig:Empty:Media>
+        <twig:Empty:Title>No team members</twig:Empty:Title>
+        <twig:Empty:Description>
+            Invite your team to collaborate on this project.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+            Invite members
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
diff --git a/src/Toolkit/kits/shadcn/empty/manifest.json b/src/Toolkit/kits/shadcn/empty/manifest.json
new file mode 100644
index 00000000000..a15f3bb887c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Empty",
+    "description": "Use the Empty component to display an empty state.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty.html.twig
new file mode 100644
index 00000000000..25d97240a25
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty"
+    class="{{ 'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Content.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Content.html.twig
new file mode 100644
index 00000000000..007991dc5a4
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Content.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-content"
+    class="{{ 'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Description.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Description.html.twig
new file mode 100644
index 00000000000..5ec3a703deb
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Description.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-description"
+    class="{{ 'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Header.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Header.html.twig
new file mode 100644
index 00000000000..6a6f08adde2
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Header.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-header"
+    class="{{ 'flex max-w-sm flex-col items-center gap-2 text-center ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig
new file mode 100644
index 00000000000..80b639001d9
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig
@@ -0,0 +1,24 @@
+{# @prop variant 'default'|'icon' The variant, default to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
+{%- set style = html_cva(
+    base: 'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    default_variant: {
+        variant: 'default',
+    },
+) -%}
+
+<div
+    data-slot="empty-icon"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Title.html.twig b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Title.html.twig
new file mode 100644
index 00000000000..eb4657fc387
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/empty/templates/components/Empty/Title.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-title"
+    class="{{ 'text-lg font-medium tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/field/EXAMPLES.md b/src/Toolkit/kits/shadcn/field/EXAMPLES.md
new file mode 100644
index 00000000000..e01f9554087
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/EXAMPLES.md
@@ -0,0 +1,228 @@
+# Examples
+
+## Input
+
+```twig {"preview":true,"height":"500px"}
+<div class="w-full max-w-md">
+    <twig:Field:Set>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="username">Username</twig:Field:Label>
+                <twig:Input id="username" type="text" placeholder="Max Leiter" />
+                <twig:Field:Description>
+                    Choose a unique username for your account.
+                </twig:Field:Description>
+            </twig:Field>
+            <twig:Field>
+                <twig:Field:Label for="password">Password</twig:Field:Label>
+                <twig:Field:Description>
+                    Must be at least 8 characters long.
+                </twig:Field:Description>
+                <twig:Input id="password" type="password" placeholder="********" />
+            </twig:Field>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+
+## Textarea
+
+```twig {"preview":true,"height":"400px"}
+<div class="w-full max-w-md">
+    <twig:Field:Set>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="feedback">Feedback</twig:Field:Label>
+                <twig:Textarea
+                    id="feedback"
+                    placeholder="Your feedback helps us improve..."
+                    rows="4"
+                />
+                <twig:Field:Description>
+                    Share your thoughts about our service.
+                </twig:Field:Description>
+            </twig:Field>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+
+## Select
+
+```twig {"preview":true,"height":"360px"}
+<div class="w-full max-w-md">
+    <twig:Field>
+        <twig:Field:Label for="department">Department</twig:Field:Label>
+        <twig:Select id="department">
+            <option value="engineering">Engineering</option>
+            <option value="design">Design</option>
+            <option value="marketing">Marketing</option>
+            <option value="sales">Sales</option>
+            <option value="support">Customer Support</option>
+            <option value="hr">Human Resources</option>
+            <option value="finance">Finance</option>
+            <option value="operations">Operations</option>
+        </twig:Select>
+        <twig:Field:Description>
+            Select your department or area of work.
+        </twig:Field:Description>
+    </twig:Field>
+</div>
+```
+
+## Field set
+
+```twig {"preview":true,"height":"400px"}
+<div class="w-full max-w-md space-y-6">
+    <twig:Field:Set>
+        <twig:Field:Legend>Address information</twig:Field:Legend>
+        <twig:Field:Description>
+            We need your address to deliver your order.
+        </twig:Field:Description>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="street">Street address</twig:Field:Label>
+                <twig:Input id="street" type="text" placeholder="123 Main St" />
+            </twig:Field>
+            <div class="grid grid-cols-2 gap-4">
+                <twig:Field>
+                    <twig:Field:Label for="city">City</twig:Field:Label>
+                    <twig:Input id="city" type="text" placeholder="New York" />
+                </twig:Field>
+                <twig:Field>
+                    <twig:Field:Label for="zip">Postal code</twig:Field:Label>
+                    <twig:Input id="zip" type="text" placeholder="90502" />
+                </twig:Field>
+            </div>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+
+## Checkbox
+
+```twig {"preview":true,"height":"520px"}
+<div class="w-full max-w-md">
+    <twig:Field:Group>
+        <twig:Field:Set>
+            <twig:Field:Legend variant="label">
+                Show these items on the desktop
+            </twig:Field:Legend>
+            <twig:Field:Description>
+                Select the items you want to show on the desktop.
+            </twig:Field:Description>
+            <twig:Field:Group class="gap-3">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-hard-disks-ljj" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-hard-disks-ljj"
+                        class="font-normal"
+                        checked
+                    >
+                        Hard disks
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-external-disks-1yg" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-external-disks-1yg"
+                        class="font-normal"
+                    >
+                        External disks
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-cds-dvds-fzt"
+                        class="font-normal"
+                    >
+                        CDs, DVDs, and iPods
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-connected-servers-6l2" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-connected-servers-6l2"
+                        class="font-normal"
+                    >
+                        Connected servers
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+        <twig:Field:Separator />
+        <twig:Field orientation="horizontal">
+            <twig:Checkbox id="finder-pref-9k2-sync-folders-nep" checked />
+            <twig:Field:Content>
+                <twig:Field:Label for="finder-pref-9k2-sync-folders-nep">
+                    Sync Desktop & Documents folders
+                </twig:Field:Label>
+                <twig:Field:Description>
+                    Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
+                </twig:Field:Description>
+            </twig:Field:Content>
+        </twig:Field>
+    </twig:Field:Group>
+</div>
+```
+
+## Switch
+
+```twig {"preview":true,"height":"240px"}
+<div class="w-full max-w-md">
+    <twig:Field orientation="horizontal">
+        <twig:Field:Content>
+            <twig:Field:Label for="2fa">Multi-factor authentication</twig:Field:Label>
+            <twig:Field:Description>
+                Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
+            </twig:Field:Description>
+        </twig:Field:Content>
+        <twig:Switch id="2fa" />
+    </twig:Field>
+</div>
+```
+
+## Field group
+
+```twig {"preview":true,"height":"520px"}
+<div class="w-full max-w-md">
+    <twig:Field:Group>
+        <twig:Field:Set>
+            <twig:Field:Label>Responses</twig:Field:Label>
+            <twig:Field:Description>
+                Get notified when ChatGPT responds to requests that take time, like research or image generation.
+            </twig:Field:Description>
+            <twig:Field:Group data-slot="checkbox-group">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="push" checked disabled />
+                    <twig:Field:Label for="push" class="font-normal">
+                        Push notifications
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+        <twig:Field:Separator />
+        <twig:Field:Set>
+            <twig:Field:Label>Tasks</twig:Field:Label>
+            <twig:Field:Description>
+                Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
+            </twig:Field:Description>
+            <twig:Field:Group data-slot="checkbox-group">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="push-tasks" />
+                    <twig:Field:Label for="push-tasks" class="font-normal">
+                        Push notifications
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="email-tasks" />
+                    <twig:Field:Label for="email-tasks" class="font-normal">
+                        Email notifications
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+    </twig:Field:Group>
+</div>
+```
diff --git a/src/Toolkit/kits/shadcn/field/manifest.json b/src/Toolkit/kits/shadcn/field/manifest.json
new file mode 100644
index 00000000000..5128b7f008e
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/manifest.json
@@ -0,0 +1,13 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Field",
+    "description": "Layout helpers for form fields with labels, descriptions, errors, grouping, and separators.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"],
+        "recipe": ["label", "separator"]
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig
new file mode 100644
index 00000000000..3ddcb5eaf73
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig
@@ -0,0 +1,23 @@
+{# @prop orientation 'vertical'|'horizontal'|'responsive' The orientation of the field, default to `vertical` #}
+{# @block content The default block #}
+{%- props orientation = 'vertical' -%}
+{%- set style = html_cva(
+    base: 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+    variants: {
+        orientation: {
+            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+            horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        },
+    },
+) -%}
+
+<div
+    role="group"
+    data-slot="field"
+    data-orientation="{{ orientation }}"
+    class="{{ style.apply({orientation: orientation}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig
new file mode 100644
index 00000000000..1880bd40583
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="field-content"
+    class="{{ 'group/field-content flex flex-1 flex-col gap-1.5 leading-snug ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig
new file mode 100644
index 00000000000..c989966c05a
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<p
+    data-slot="field-description"
+    class="{{ 'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</p>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig
new file mode 100644
index 00000000000..c7f21088688
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig
@@ -0,0 +1,36 @@
+{# @prop errors array A list of errors (string or objects with a `message` field), defaults to `[]` #}
+{# @block content The default block #}
+{%- props errors = [] -%}
+{%- set slot_content -%}{%- block content %}{% endblock -%}{%- endset -%}
+{%- set slot_content = slot_content|trim -%}
+
+{%- if slot_content == '' -%}
+    {%- set messages = [] -%}
+    {%- for error in errors|default([]) -%}
+        {%- set message = error.message ?? error -%}
+        {%- if message is not same as(false) and message is not null and message != '' and not (message in messages) -%}
+            {%- set messages = messages|merge([message]) -%}
+        {%- endif -%}
+    {%- endfor -%}
+{%- endif -%}
+
+{%- if slot_content != '' or (messages ?? [])|length > 0 -%}
+    <div
+        role="alert"
+        data-slot="field-error"
+        class="{{ 'text-destructive text-sm font-normal ' ~ attributes.render('class')|tailwind_merge }}"
+        {{ attributes }}
+    >
+        {%- if slot_content != '' -%}
+            {{ slot_content }}
+        {%- elseif (messages ?? [])|length == 1 -%}
+            {{ messages[0] }}
+        {%- else -%}
+            <ul class="ml-4 flex list-disc flex-col gap-1">
+                {%- for message in messages|default([]) -%}
+                    <li>{{ message }}</li>
+                {%- endfor -%}
+            </ul>
+        {%- endif -%}
+    </div>
+{%- endif -%}
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig
new file mode 100644
index 00000000000..8f8f9e1b4b0
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="field-group"
+    class="{{ 'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig
new file mode 100644
index 00000000000..e1daef48823
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<twig:Label
+    data-slot="field-label"
+    class="{{ 'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ ...attributes }}
+>
+    {{- block(outerBlocks.content) -}}
+</twig:Label>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig
new file mode 100644
index 00000000000..bd5dd7d596d
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig
@@ -0,0 +1,20 @@
+{# @prop variant 'legend'|'label' The variant, default to `legend` #}
+{# @block content The default block #}
+{%- props variant = 'legend' -%}
+{%- set style = html_cva(
+    base: 'mb-3 font-medium',
+    variants: {
+        variant: {
+            legend: 'text-base',
+            label: 'text-sm',
+        },
+    },
+) %}
+<legend
+    data-slot="field-legend"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</legend>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig
new file mode 100644
index 00000000000..ffc037a49e1
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig
@@ -0,0 +1,19 @@
+{# @block content The default block #}
+{%- set content -%}{%- block content %}{% endblock -%}{%- endset -%}
+{%- set has_content = content|trim != '' -%}
+<div
+    data-slot="field-separator"
+    data-content="{{ has_content ? 'true' : 'false' }}"
+    class="{{ 'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    <twig:Separator class="absolute inset-0 top-1/2" />
+    {%- if has_content -%}
+        <span
+            class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+            data-slot="field-separator-content"
+        >
+            {{ content }}
+        </span>
+    {%- endif -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig
new file mode 100644
index 00000000000..d56c8d06c71
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<fieldset
+    data-slot="field-set"
+    class="{{ 'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</fieldset>
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig
new file mode 100644
index 00000000000..20635e5283e
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="field-label"
+    class="{{ 'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/input-group/EXAMPLES.md b/src/Toolkit/kits/shadcn/input-group/EXAMPLES.md
new file mode 100644
index 00000000000..b5f002de3dd
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/EXAMPLES.md
@@ -0,0 +1,257 @@
+# Examples
+
+## Icon
+
+Use `InputGroup:Icon` to add a leading or trailing icon to an input. Padding is applied automatically.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:search') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="search"
+      name="query"
+      type="search"
+      placeholder="Search..."
+    />
+  </twig:InputGroup>
+</div>
+```
+
+## Trailing icon
+
+Position the icon at the end using `position="end"`.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Input
+      id="email"
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+    />
+    <twig:InputGroup:Icon position="end">
+      {{ ux_icon('lucide:mail') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+
+## Both icons
+
+Combine leading and trailing icons.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:user') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="username"
+      name="username"
+      placeholder="Username"
+    />
+    <twig:InputGroup:Icon position="end">
+      {{ ux_icon('lucide:check') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+
+## Two trailing icons
+
+Group multiple icons together in a single `InputGroup:Icon`. Add extra padding to accommodate the additional icons.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Input
+      id="password"
+      name="password"
+      type="password"
+      placeholder="Enter password"
+      class="pr-16"
+    />
+    <twig:InputGroup:Icon position="end" class="gap-1">
+      {{ ux_icon('lucide:eye', { class: 'cursor-pointer pointer-events-auto hover:text-foreground' }) }}
+      {{ ux_icon('lucide:copy', { class: 'cursor-pointer pointer-events-auto hover:text-foreground' }) }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+
+## Search with icon and shortcut
+
+Combine icons with other elements like keyboard hints.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:search') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="search"
+      name="query"
+      type="search"
+      placeholder="Search documentation..."
+      class="pr-14"
+    />
+    <twig:Kbd class="hidden lg:inline-flex pointer-events-none absolute right-[9px] top-1/2 h-5 -translate-y-1/2">
+      ⌘K
+    </twig:Kbd>
+  </twig:InputGroup>
+</div>
+```
+
+## Textarea
+
+Use `InputGroup:Textarea` for multi-line input. Use `align="start"` on icons to position them at the top.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon align="start">
+      {{ ux_icon('lucide:message-square') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Textarea
+      id="message"
+      name="message"
+      placeholder="Type your message..."
+      rows="4"
+    />
+  </twig:InputGroup>
+</div>
+```
+
+## Textarea with trailing icon
+
+Position an icon at the end of a textarea.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Textarea
+      id="notes"
+      name="notes"
+      placeholder="Add notes..."
+      rows="3"
+    />
+    <twig:InputGroup:Icon position="end" align="start">
+      {{ ux_icon('lucide:pencil') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+
+## Textarea with character count
+
+Use `InputGroup:Addon` with `align="block-end"` to add content below the textarea. Add `class="border-t"` for a separator line.
+
+```twig {"preview":true, "height":"300px"}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Textarea
+      id="message"
+      name="message"
+      placeholder="Enter your message"
+      rows="4"
+    />
+    <twig:InputGroup:Addon align="block-end" class="border-t">
+      <twig:InputGroup:Text class="text-xs">
+        120 characters left
+      </twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+
+## Addon with icon
+
+Use `InputGroup:Addon` for flexible positioning of icons and other elements.
+
+```twig {"preview":true}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Addon>
+      {{ ux_icon('lucide:dollar-sign') }}
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Input
+      id="price"
+      name="price"
+      type="number"
+      placeholder="0.00"
+    />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text>USD</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+
+## Block start addon
+
+Position content above the input using `align="block-start"`. Use `border-b` for a separator below and `border-t` for a separator above.
+
+```twig {"preview":true, "height":"300px"}
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Addon align="block-start" class="border-b">
+      <twig:InputGroup:Text class="text-xs font-semibold">Bio</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Textarea
+      id="bio"
+      name="bio"
+      placeholder="Tell us about yourself..."
+      rows="3"
+    />
+    <twig:InputGroup:Addon align="block-end" class="justify-end border-t">
+      <twig:InputGroup:Text class="text-xs">Max 500 characters</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+
+## Spinner
+
+Show loading indicators while processing input.
+
+```twig {"preview":true, "height":"300px"}
+<div class="max-w-md flex flex-col gap-4">
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Searching..." disabled />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Processing..." disabled />
+    <twig:InputGroup:Addon>
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Saving changes..." disabled />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text>Saving...</twig:InputGroup:Text>
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Refreshing data..." disabled />
+    <twig:InputGroup:Addon>
+      {{ ux_icon('lucide:loader', { class: 'animate-spin' }) }}
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text class="text-muted-foreground">Please wait...</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
diff --git a/src/Toolkit/kits/shadcn/input-group/manifest.json b/src/Toolkit/kits/shadcn/input-group/manifest.json
new file mode 100644
index 00000000000..8617ce20b3f
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Input Group",
+    "description": "Wraps inputs with optional leading or trailing elements like icons or keyboard hints.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "recipe": ["spinner"]
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup.html.twig
new file mode 100644
index 00000000000..6acb97cb61d
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup.html.twig
@@ -0,0 +1,18 @@
+{# @block content The default block #}
+{# Icon padding - simpler selectors #}
+{%- set iconStartPadding = 'has-[[data-position=start]]:[&_[data-slot=input-group-control]]:pl-9' -%}
+{%- set iconEndPadding = 'has-[[data-position=end]]:[&_[data-slot=input-group-control]]:pr-9' -%}
+{# Inline addon padding #}
+{%- set addonStartPadding = 'has-[[data-align=inline-start]]:[&_[data-slot=input-group-control]]:pl-2' -%}
+{%- set addonEndPadding = 'has-[[data-align=inline-end]]:[&_[data-slot=input-group-control]]:pr-2' -%}
+{# Block addon layout - auto height and flex-col #}
+{%- set blockLayout = 'has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col' -%}
+{# Focus state on parent when child control is focused #}
+{%- set focusState = 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]' -%}
+<div
+    data-slot="input-group"
+    class="{{ ('group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[>textarea]:h-auto ' ~ iconStartPadding ~ ' ' ~ iconEndPadding ~ ' ' ~ addonStartPadding ~ ' ' ~ addonEndPadding ~ ' ' ~ blockLayout ~ ' ' ~ focusState ~ ' ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Addon.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Addon.html.twig
new file mode 100644
index 00000000000..01d7b024afd
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Addon.html.twig
@@ -0,0 +1,23 @@
+{# @prop align 'inline-start'|'inline-end'|'block-start'|'block-end' The addon alignment, default to `inline-start` #}
+{# @block content The default block #}
+{%- props align = 'inline-start' -%}
+{%- set style = html_cva(
+    base: "text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50",
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-3',
+            'inline-end': 'order-last pr-3',
+            'block-start': 'order-first w-full justify-start px-3 pt-3 [&.border-b]:pb-3',
+            'block-end': 'order-last w-full justify-start px-3 pb-3 [&.border-t]:pt-3',
+        },
+    },
+) -%}
+<div
+    data-slot="input-group-addon"
+    data-align="{{ align }}"
+    role="group"
+    class="{{ style.apply({align: align}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Icon.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Icon.html.twig
new file mode 100644
index 00000000000..aa49dcdee69
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Icon.html.twig
@@ -0,0 +1,25 @@
+{# @prop position 'start'|'end' The icon position, default to `start` #}
+{# @prop align 'center'|'start' The vertical alignment, default to `center` #}
+{# @block content The default block #}
+{%- props position = 'start', align = 'center' -%}
+{%- set style = html_cva(
+    base: "pointer-events-none absolute flex text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+        position: {
+            start: 'left-0 pl-3',
+            end: 'right-0 pr-3',
+        },
+        align: {
+            center: 'inset-y-0 items-center',
+            start: 'top-0 pt-3',
+        },
+    },
+) -%}
+<span
+    data-slot="input-group-icon"
+    data-position="{{ position }}"
+    class="{{ style.apply({position: position, align: align}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</span>
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Input.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Input.html.twig
new file mode 100644
index 00000000000..7a6f3823bde
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Input.html.twig
@@ -0,0 +1,5 @@
+<input
+    data-slot="input-group-control"
+    class="{{ ('flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Text.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Text.html.twig
new file mode 100644
index 00000000000..cb8e09390a4
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Text.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<span
+    data-slot="input-group-text"
+    class="{{ ('text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</span>
diff --git a/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Textarea.html.twig b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Textarea.html.twig
new file mode 100644
index 00000000000..98d4485ffa6
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/input-group/templates/components/InputGroup/Textarea.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<textarea
+    data-slot="input-group-control"
+    class="{{ ('flex-1 min-h-[80px] w-full resize-none rounded-none border-0 bg-transparent px-3 py-3 text-base shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</textarea>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 1__1.html
new file mode 100644
index 00000000000..e91a4f59de5
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 1__1.html	
@@ -0,0 +1,44 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:ButtonGroup class="hidden sm:flex">
+        <twig:Button variant="outline" size="icon" aria-label="Go back">
+            <twig:ux:icon name="lucide:arrow-left" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">Archive</twig:Button>
+        <twig:Button variant="outline">Report</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">
+            <twig:ux:icon name="lucide:clock" class="size-4" />
+            Snooze
+        </twig:Button>
+        <twig:Button variant="outline" size="icon" aria-label="More options">
+            <twig:ux:icon name="lucide:more-horizontal" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none hidden sm:flex">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9" aria-label="Go back"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5"></path></svg>
+        </button>
+    </div>
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3">Archive</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3">Report</button>
+    </div>
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></g></svg>
+            Snooze
+        </button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9" aria-label="More options"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 2__1.html
new file mode 100644
index 00000000000..83a9c7b3377
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 2__1.html	
@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
+    <twig:Button variant="outline" size="icon">
+        <twig:ux:icon name="lucide:plus" class="size-4" />
+    </twig:Button>
+    <twig:Button variant="outline" size="icon">
+        <twig:ux:icon name="lucide:minus" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="vertical" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 flex-col [&amp;&gt;*:not(:first-child)]:rounded-t-none [&amp;&gt;*:not(:first-child)]:border-t-0 [&amp;&gt;*:not(:last-child)]:rounded-b-none h-fit" aria-label="Media controls">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path></svg>
+    </button>
+    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"></path></svg>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 3__1.html
new file mode 100644
index 00000000000..b60069863e8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 3__1.html	
@@ -0,0 +1,56 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<div class="flex flex-col items-start gap-8">
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="sm">Small</twig:Button>
+        <twig:Button variant="outline" size="sm">Button</twig:Button>
+        <twig:Button variant="outline" size="sm">Group</twig:Button>
+        <twig:Button variant="outline" size="icon-sm">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline">Default</twig:Button>
+        <twig:Button variant="outline">Button</twig:Button>
+        <twig:Button variant="outline">Group</twig:Button>
+        <twig:Button variant="outline" size="icon">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="lg">Large</twig:Button>
+        <twig:Button variant="outline" size="lg">Button</twig:Button>
+        <twig:Button variant="outline" size="lg">Group</twig:Button>
+        <twig:Button variant="outline" size="icon-lg">
+            <twig:ux:icon name="lucide:plus" class="size-5" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-start gap-8">
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Small</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Button</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Group</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-8"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path></svg>
+        </button>
+    </div>
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3">Default</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3">Button</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3">Group</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path></svg>
+        </button>
+    </div>
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 px-6 has-[&gt;svg]:px-4">Large</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 px-6 has-[&gt;svg]:px-4">Button</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-10 px-6 has-[&gt;svg]:px-4">Group</button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-10"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path></svg>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 4__1.html
new file mode 100644
index 00000000000..7fa79a52f52
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 4__1.html	
@@ -0,0 +1,19 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup class="max-w-md">
+    <twig:Input placeholder="Search..." />
+    <twig:Button size="icon-lg" variant="outline" aria-label="Search">
+        <twig:ux:icon name="lucide:search" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none max-w-md">
+<input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " placeholder="Search...">
+
+    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-10" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></g></svg>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 5__1.html
new file mode 100644
index 00000000000..afa74c9da32
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 5__1.html	
@@ -0,0 +1,39 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="sm">1</twig:Button>
+        <twig:Button variant="outline" size="sm">2</twig:Button>
+        <twig:Button variant="outline" size="sm">3</twig:Button>
+        <twig:Button variant="outline" size="sm">4</twig:Button>
+        <twig:Button variant="outline" size="sm">5</twig:Button>
+    </twig:ButtonGroup>
+    <twig:ButtonGroup>
+        <twig:Button variant="outline" size="icon-sm" aria-label="Previous">
+            <twig:ux:icon name="lucide:arrow-left" class="size-4" />
+        </twig:Button>
+        <twig:Button variant="outline" size="icon-sm" aria-label="Next">
+            <twig:ux:icon name="lucide:arrow-right" class="size-4" />
+        </twig:Button>
+    </twig:ButtonGroup>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">1</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">2</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">3</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">4</button>
+        <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">5</button>
+    </div>
+    <div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-8" aria-label="Previous"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5"></path></svg>
+        </button>
+        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-8" aria-label="Next"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 6__1.html
new file mode 100644
index 00000000000..b66cdd65495
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 6__1.html	
@@ -0,0 +1,19 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:Button variant="secondary" size="sm">Copy</twig:Button>
+    <twig:ButtonGroup:Separator />
+    <twig:Button variant="secondary" size="sm">Paste</twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Copy</button>
+    <div class="shrink-0 w-[1px] bg-input relative m-0! self-stretch h-auto" role="none" data-slot="button-group-separator"></div>
+
+
+    <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Paste</button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 7__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 7__1.html
new file mode 100644
index 00000000000..85047c9e8c6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button-group, code 7__1.html	
@@ -0,0 +1,22 @@
+<!--
+- Kit: Shadcn UI
+- Component: Button Group
+- Code:
+```twig
+<twig:ButtonGroup>
+    <twig:Button variant="secondary">Button</twig:Button>
+    <twig:ButtonGroup:Separator />
+    <twig:Button size="icon" variant="secondary">
+        <twig:ux:icon name="tabler:plus" class="size-4" />
+    </twig:Button>
+</twig:ButtonGroup>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="group" data-slot="button-group" data-orientation="horizontal" class="flex w-fit items-stretch [&amp;&gt;*]:focus-visible:z-10 [&amp;&gt;*]:focus-visible:relative [&amp;&gt;[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;&gt;input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&amp;&gt;[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[&gt;[data-slot=button-group]]:gap-2 [&amp;&gt;*:not(:first-child)]:rounded-l-none [&amp;&gt;*:not(:first-child)]:border-l-0 [&amp;&gt;*:not(:last-child)]:rounded-r-none">
+<button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 py-2 has-[&gt;svg]:px-3">Button</button>
+    <div class="shrink-0 w-[1px] bg-input relative m-0! self-stretch h-auto" role="none" data-slot="button-group-separator"></div>
+
+
+    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 size-9"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m-7-7h14"></path></svg>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 1__1.html
new file mode 100644
index 00000000000..123cdcca5cc
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 1__1.html	
@@ -0,0 +1,37 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty class="border border-dashed">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="tabler:cloud" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>Cloud storage empty</twig:Empty:Title>
+        <twig:Empty:Description>
+            Upload files to your cloud storage to access them anywhere.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            Upload files
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 border border-dashed">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="icon" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-muted text-foreground size-10 rounded-lg [&amp;_svg:not([class*='size-'])]:size-6">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.657 18C4.085 18 2 15.993 2 13.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H6.657"></path></svg>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">Cloud storage empty</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Upload files to your cloud storage to access them anywhere.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Upload files
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 2__1.html
new file mode 100644
index 00000000000..3e4042bd01c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 2__1.html	
@@ -0,0 +1,39 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty class="from-muted/50 to-background h-full bg-linear-to-b from-30%">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="lucide:bell" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>No notifications</twig:Empty:Title>
+        <twig:Empty:Description>
+            You're all caught up. New notifications will appear here.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            <twig:ux:icon name="lucide:refresh-ccw" class="size-4" />
+            Refresh
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 from-muted/50 to-background h-full bg-linear-to-b from-30%">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="icon" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-muted text-foreground size-10 rounded-lg [&amp;_svg:not([class*='size-'])]:size-6">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">No notifications</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">You're all caught up. New notifications will appear here.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9a9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5m-5 4a9 9 0 0 0 9 9a9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></g></svg>
+            Refresh
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 3__1.html
new file mode 100644
index 00000000000..59cff8f4e1a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 3__1.html	
@@ -0,0 +1,44 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <twig:Avatar class="size-12">
+                <twig:Avatar:Image
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                    class="grayscale"
+                />
+                <twig:Avatar:Text>LR</twig:Avatar:Text>
+            </twig:Avatar>
+        </twig:Empty:Media>
+        <twig:Empty:Title>User offline</twig:Empty:Title>
+        <twig:Empty:Description>
+            This user is currently offline. You can leave a message to notify them or try again later.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">Leave message</twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 ">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="default" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-transparent">
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full size-12" data-slot="avatar"><img class="aspect-square h-full w-full grayscale" alt="@shadcn" src="https://github.com/shadcn.png">
+
+                <span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">LR</span>
+            </span>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">User offline</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">This user is currently offline. You can leave a message to notify them or try again later.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5">Leave message</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 4__1.html
new file mode 100644
index 00000000000..04f1ff437a1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component empty, code 4__1.html	
@@ -0,0 +1,65 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
+                    <twig:Avatar:Text>CN</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
+                    <twig:Avatar:Text>LR</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+                    <twig:Avatar:Text>ER</twig:Avatar:Text>
+                </twig:Avatar>
+            </div>
+        </twig:Empty:Media>
+        <twig:Empty:Title>No team members</twig:Empty:Title>
+        <twig:Empty:Description>
+            Invite your team to collaborate on this project.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+            Invite members
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 ">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="default" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-transparent">
+<div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+                <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@shadcn" src="https://github.com/shadcn.png">
+
+                    <span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">CN</span>
+                </span>
+                <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@maxleiter" src="https://github.com/maxleiter.png">
+
+                    <span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">LR</span>
+                </span>
+                <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@evilrabbit" src="https://github.com/evilrabbit.png">
+
+                    <span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">ER</span>
+                </span>
+            </div>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">No team members</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Invite your team to collaborate on this project.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path></svg>
+            Invite members
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html
new file mode 100644
index 00000000000..db5bcab870a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html	
@@ -0,0 +1,47 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field:Set>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="username">Username</twig:Field:Label>
+                <twig:Input id="username" type="text" placeholder="Max Leiter" />
+                <twig:Field:Description>
+                    Choose a unique username for your account.
+                </twig:Field:Description>
+            </twig:Field>
+            <twig:Field>
+                <twig:Field:Label for="password">Password</twig:Field:Label>
+                <twig:Field:Description>
+                    Must be at least 8 characters long.
+                </twig:Field:Description>
+                <twig:Input id="password" type="password" placeholder="********" />
+            </twig:Field>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="username">Username</label>
+                <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="username" type="text" placeholder="Max Leiter">
+
+                <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Choose a unique username for your account.
+                </p>
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="password">Password</label>
+                <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Must be at least 8 characters long.
+                </p>
+                <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="password" type="password" placeholder="********">
+
+            </div>
+        </div>
+    </fieldset>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html
new file mode 100644
index 00000000000..b778a54300e
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html	
@@ -0,0 +1,37 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field:Set>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="feedback">Feedback</twig:Field:Label>
+                <twig:Textarea
+                    id="feedback"
+                    placeholder="Your feedback helps us improve..."
+                    rows="4"
+                />
+                <twig:Field:Description>
+                    Share your thoughts about our service.
+                </twig:Field:Description>
+            </twig:Field>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="feedback">Feedback</label>
+                <textarea class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm " id="feedback" placeholder="Your feedback helps us improve..." rows="4"></textarea>
+
+                <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Share your thoughts about our service.
+                </p>
+            </div>
+        </div>
+    </fieldset>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html
new file mode 100644
index 00000000000..ba4a2d6c35d
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html	
@@ -0,0 +1,41 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field>
+        <twig:Field:Label for="department">Department</twig:Field:Label>
+        <twig:Select id="department">
+            <option value="engineering">Engineering</option>
+            <option value="design">Design</option>
+            <option value="marketing">Marketing</option>
+            <option value="sales">Sales</option>
+            <option value="support">Customer Support</option>
+            <option value="hr">Human Resources</option>
+            <option value="finance">Finance</option>
+            <option value="operations">Operations</option>
+        </twig:Select>
+        <twig:Field:Description>
+            Select your department or area of work.
+        </twig:Field:Description>
+    </twig:Field>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="department">Department</label>
+        <select class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 " id="department"><option value="engineering">Engineering</option>
+            <option value="design">Design</option>
+            <option value="marketing">Marketing</option>
+            <option value="sales">Sales</option>
+            <option value="support">Customer Support</option>
+            <option value="hr">Human Resources</option>
+            <option value="finance">Finance</option>
+            <option value="operations">Operations</option>
+        </select>
+        <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Select your department or area of work.
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html
new file mode 100644
index 00000000000..bcaaed93e74
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html	
@@ -0,0 +1,57 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md space-y-6">
+    <twig:Field:Set>
+        <twig:Field:Legend>Address information</twig:Field:Legend>
+        <twig:Field:Description>
+            We need your address to deliver your order.
+        </twig:Field:Description>
+        <twig:Field:Group>
+            <twig:Field>
+                <twig:Field:Label for="street">Street address</twig:Field:Label>
+                <twig:Input id="street" type="text" placeholder="123 Main St" />
+            </twig:Field>
+            <div class="grid grid-cols-2 gap-4">
+                <twig:Field>
+                    <twig:Field:Label for="city">City</twig:Field:Label>
+                    <twig:Input id="city" type="text" placeholder="New York" />
+                </twig:Field>
+                <twig:Field>
+                    <twig:Field:Label for="zip">Postal code</twig:Field:Label>
+                    <twig:Input id="zip" type="text" placeholder="90502" />
+                </twig:Field>
+            </div>
+        </twig:Field:Group>
+    </twig:Field:Set>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md space-y-6">
+    <fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<legend data-slot="field-legend" data-variant="legend" class="mb-3 font-medium text-base">Address information</legend>
+        <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">We need your address to deliver your order.
+        </p>
+        <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="street">Street address</label>
+                <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="street" type="text" placeholder="123 Main St">
+
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="city">City</label>
+                    <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="city" type="text" placeholder="New York">
+
+                </div>
+                <div role="group" data-slot="field" data-orientation="vertical" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-col [&amp;&gt;*]:w-full [&amp;&gt;.sr-only]:w-auto">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="zip">Postal code</label>
+                    <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " id="zip" type="text" placeholder="90502">
+
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html
new file mode 100644
index 00000000000..04e458a262b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html	
@@ -0,0 +1,120 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field:Group>
+        <twig:Field:Set>
+            <twig:Field:Legend variant="label">
+                Show these items on the desktop
+            </twig:Field:Legend>
+            <twig:Field:Description>
+                Select the items you want to show on the desktop.
+            </twig:Field:Description>
+            <twig:Field:Group class="gap-3">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-hard-disks-ljj" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-hard-disks-ljj"
+                        class="font-normal"
+                        checked
+                    >
+                        Hard disks
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-external-disks-1yg" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-external-disks-1yg"
+                        class="font-normal"
+                    >
+                        External disks
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-cds-dvds-fzt"
+                        class="font-normal"
+                    >
+                        CDs, DVDs, and iPods
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="finder-pref-9k2-connected-servers-6l2" />
+                    <twig:Field:Label
+                        for="finder-pref-9k2-connected-servers-6l2"
+                        class="font-normal"
+                    >
+                        Connected servers
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+        <twig:Field:Separator />
+        <twig:Field orientation="horizontal">
+            <twig:Checkbox id="finder-pref-9k2-sync-folders-nep" checked />
+            <twig:Field:Content>
+                <twig:Field:Label for="finder-pref-9k2-sync-folders-nep">
+                    Sync Desktop & Documents folders
+                </twig:Field:Label>
+                <twig:Field:Description>
+                    Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
+                </twig:Field:Description>
+            </twig:Field:Content>
+        </twig:Field>
+    </twig:Field:Group>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<legend data-slot="field-legend" data-variant="label" class="mb-3 font-medium text-sm">Show these items on the desktop
+            </legend>
+            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Select the items you want to show on the desktop.
+            </p>
+            <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 gap-3">
+<div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="finder-pref-9k2-hard-disks-ljj">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="finder-pref-9k2-hard-disks-ljj" checked>Hard disks
+                    </label>
+                </div>
+                <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="finder-pref-9k2-external-disks-1yg">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="finder-pref-9k2-external-disks-1yg">External disks
+                    </label>
+                </div>
+                <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="finder-pref-9k2-cds-dvds-fzt">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="finder-pref-9k2-cds-dvds-fzt">CDs, DVDs, and iPods
+                    </label>
+                </div>
+                <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="finder-pref-9k2-connected-servers-6l2">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="finder-pref-9k2-connected-servers-6l2">Connected servers
+                    </label>
+                </div>
+            </div>
+        </fieldset>
+        <div data-slot="field-separator" data-content="false" class="relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 ">
+    <div class="shrink-0 bg-border h-[1px] w-full absolute inset-0 top-1/2" role="none"></div>
+</div>
+
+        <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="finder-pref-9k2-sync-folders-nep" checked>
+
+            <div data-slot="field-content" class="group/field-content flex flex-1 flex-col gap-1.5 leading-snug ">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="finder-pref-9k2-sync-folders-nep">Sync Desktop &amp; Documents folders
+                </label>
+                <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Your Desktop &amp; Documents folders are being synced with iCloud Drive. You can access them from other devices.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html
new file mode 100644
index 00000000000..8635531d898
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html	
@@ -0,0 +1,32 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field orientation="horizontal">
+        <twig:Field:Content>
+            <twig:Field:Label for="2fa">Multi-factor authentication</twig:Field:Label>
+            <twig:Field:Description>
+                Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
+            </twig:Field:Description>
+        </twig:Field:Content>
+        <twig:Switch id="2fa" />
+    </twig:Field>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<div data-slot="field-content" class="group/field-content flex flex-1 flex-col gap-1.5 leading-snug ">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="2fa">Multi-factor authentication</label>
+            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
+            </p>
+        </div>
+        <label class="relative inline-flex items-center cursor-pointer ">
+    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="2fa">
+    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+</label>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html
new file mode 100644
index 00000000000..d3a6d25bcd1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html	
@@ -0,0 +1,86 @@
+<!--
+- Kit: Shadcn UI
+- Component: Field
+- Code:
+```twig
+<div class="w-full max-w-md">
+    <twig:Field:Group>
+        <twig:Field:Set>
+            <twig:Field:Label>Responses</twig:Field:Label>
+            <twig:Field:Description>
+                Get notified when ChatGPT responds to requests that take time, like research or image generation.
+            </twig:Field:Description>
+            <twig:Field:Group data-slot="checkbox-group">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="push" checked disabled />
+                    <twig:Field:Label for="push" class="font-normal">
+                        Push notifications
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+        <twig:Field:Separator />
+        <twig:Field:Set>
+            <twig:Field:Label>Tasks</twig:Field:Label>
+            <twig:Field:Description>
+                Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
+            </twig:Field:Description>
+            <twig:Field:Group data-slot="checkbox-group">
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="push-tasks" />
+                    <twig:Field:Label for="push-tasks" class="font-normal">
+                        Push notifications
+                    </twig:Field:Label>
+                </twig:Field>
+                <twig:Field orientation="horizontal">
+                    <twig:Checkbox id="email-tasks" />
+                    <twig:Field:Label for="email-tasks" class="font-normal">
+                        Email notifications
+                    </twig:Field:Label>
+                </twig:Field>
+            </twig:Field:Group>
+        </twig:Field:Set>
+    </twig:Field:Group>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="w-full max-w-md">
+    <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label">Responses</label>
+            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Get notified when ChatGPT responds to requests that take time, like research or image generation.
+            </p>
+            <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="push" checked disabled>
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="push">Push notifications
+                    </label>
+                </div>
+            </div>
+        </fieldset>
+        <div data-slot="field-separator" data-content="false" class="relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 ">
+    <div class="shrink-0 bg-border h-[1px] w-full absolute inset-0 top-1/2" role="none"></div>
+</div>
+
+        <fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
+<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label">Tasks</label>
+            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
+            </p>
+            <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
+<div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="push-tasks">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="push-tasks">Push notifications
+                    </label>
+                </div>
+                <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
+<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="email-tasks">
+
+                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="email-tasks">Email notifications
+                    </label>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 10__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 10__1.html
new file mode 100644
index 00000000000..6c3a25ecf37
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 10__1.html	
@@ -0,0 +1,35 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Addon align="block-start" class="border-b">
+      <twig:InputGroup:Text class="text-xs font-semibold">Bio</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Textarea
+      id="bio"
+      name="bio"
+      placeholder="Tell us about yourself..."
+      rows="3"
+    />
+    <twig:InputGroup:Addon align="block-end" class="justify-end border-t">
+      <twig:InputGroup:Text class="text-xs">Max 500 characters</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<div data-slot="input-group-addon" data-align="block-start" role="group" class="text-muted-foreground flex h-auto items-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-first w-full justify-start px-3 pt-3 [&amp;.border-b]:pb-3 border-b">
+<span data-slot="input-group-text" class="text-muted-foreground flex items-center gap-2 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4 text-xs font-semibold">Bio</span>
+    </div>
+    <textarea data-slot="input-group-control" class="flex-1 min-h-[80px] w-full resize-none rounded-none border-0 bg-transparent px-3 py-3 text-base shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" id="bio" name="bio" placeholder="Tell us about yourself..." rows="3"></textarea>
+
+    <div data-slot="input-group-addon" data-align="block-end" role="group" class="text-muted-foreground flex h-auto items-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last w-full px-3 pb-3 [&amp;.border-t]:pt-3 justify-end border-t">
+<span data-slot="input-group-text" class="text-muted-foreground flex items-center gap-2 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4 text-xs">Max 500 characters</span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 11__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 11__1.html
new file mode 100644
index 00000000000..d55233a78ed
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 11__1.html	
@@ -0,0 +1,80 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md flex flex-col gap-4">
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Searching..." disabled />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Processing..." disabled />
+    <twig:InputGroup:Addon>
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Saving changes..." disabled />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text>Saving...</twig:InputGroup:Text>
+      <twig:Spinner />
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+
+  <twig:InputGroup data-disabled="true">
+    <twig:InputGroup:Input placeholder="Refreshing data..." disabled />
+    <twig:InputGroup:Addon>
+      {{ ux_icon('lucide:loader', { class: 'animate-spin' }) }}
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text class="text-muted-foreground">Please wait...</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md flex flex-col gap-4">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]" data-disabled="true">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Searching..." disabled>
+
+    <div data-slot="input-group-addon" data-align="inline-end" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin "><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    </div>
+  </div>
+
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]" data-disabled="true">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Processing..." disabled>
+
+    <div data-slot="input-group-addon" data-align="inline-start" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-first pl-3">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin "><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    </div>
+  </div>
+
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]" data-disabled="true">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Saving changes..." disabled>
+
+    <div data-slot="input-group-addon" data-align="inline-end" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3">
+<span data-slot="input-group-text" class="text-muted-foreground flex items-center gap-2 text-sm [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4">Saving...</span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin "><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    </div>
+  </div>
+
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]" data-disabled="true">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Refreshing data..." disabled>
+
+    <div data-slot="input-group-addon" data-align="inline-start" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-first pl-3">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="animate-spin" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v4m4.2 1.8l2.9-2.9M18 12h4m-5.8 4.2l2.9 2.9M12 18v4m-7.1-2.9l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path></svg>
+    </div>
+    <div data-slot="input-group-addon" data-align="inline-end" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3">
+<span data-slot="input-group-text" class="flex items-center gap-2 text-sm [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4 text-muted-foreground">Please wait...</span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 1__1.html
new file mode 100644
index 00000000000..1f70c1efff6
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 1__1.html	
@@ -0,0 +1,28 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:search') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="search"
+      name="query"
+      type="search"
+      placeholder="Search..."
+    />
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<span data-slot="input-group-icon" data-position="start" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 left-0 pl-3 inset-y-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></g></svg>
+    </span>
+    <input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" id="search" name="query" type="search" placeholder="Search...">
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 2__1.html
new file mode 100644
index 00000000000..564b4e15d9a
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 2__1.html	
@@ -0,0 +1,28 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Input
+      id="email"
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+    />
+    <twig:InputGroup:Icon position="end">
+      {{ ux_icon('lucide:mail') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" id="email" name="email" type="email" placeholder="Enter your email">
+
+    <span data-slot="input-group-icon" data-position="end" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 right-0 pr-3 inset-y-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 3__1.html
new file mode 100644
index 00000000000..3090f4f61e9
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 3__1.html	
@@ -0,0 +1,32 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:user') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="username"
+      name="username"
+      placeholder="Username"
+    />
+    <twig:InputGroup:Icon position="end">
+      {{ ux_icon('lucide:check') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<span data-slot="input-group-icon" data-position="start" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 left-0 pl-3 inset-y-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
+    </span>
+    <input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" id="username" name="username" placeholder="Username">
+
+    <span data-slot="input-group-icon" data-position="end" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 right-0 pr-3 inset-y-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 4__1.html
new file mode 100644
index 00000000000..ceaa5206036
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 4__1.html	
@@ -0,0 +1,31 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Input
+      id="password"
+      name="password"
+      type="password"
+      placeholder="Enter password"
+      class="pr-16"
+    />
+    <twig:InputGroup:Icon position="end" class="gap-1">
+      {{ ux_icon('lucide:eye', { class: 'cursor-pointer pointer-events-auto hover:text-foreground' }) }}
+      {{ ux_icon('lucide:copy', { class: 'cursor-pointer pointer-events-auto hover:text-foreground' }) }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 pr-16" id="password" name="password" type="password" placeholder="Enter password">
+
+    <span data-slot="input-group-icon" data-position="end" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 right-0 pr-3 inset-y-0 items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="cursor-pointer pointer-events-auto hover:text-foreground" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="cursor-pointer pointer-events-auto hover:text-foreground" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></g></svg>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 5__1.html
new file mode 100644
index 00000000000..a223ac7024f
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 5__1.html	
@@ -0,0 +1,34 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon>
+      {{ ux_icon('lucide:search') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Input
+      id="search"
+      name="query"
+      type="search"
+      placeholder="Search documentation..."
+      class="pr-14"
+    />
+    <twig:Kbd class="hidden lg:inline-flex pointer-events-none absolute right-[9px] top-1/2 h-5 -translate-y-1/2">
+      ⌘K
+    </twig:Kbd>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<span data-slot="input-group-icon" data-position="start" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 left-0 pl-3 inset-y-0 items-center"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></g></svg>
+    </span>
+    <input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 pr-14" id="search" name="query" type="search" placeholder="Search documentation...">
+
+    <kbd class="bg-muted text-muted-foreground inline-flex w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10hidden lg:inline-flex pointer-events-none absolute right-[9px] top-1/2 h-5 -translate-y-1/2">&acirc;&#140;&#152;K
+    </kbd>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 6__1.html
new file mode 100644
index 00000000000..e70b60c443c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 6__1.html	
@@ -0,0 +1,28 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Icon align="start">
+      {{ ux_icon('lucide:message-square') }}
+    </twig:InputGroup:Icon>
+    <twig:InputGroup:Textarea
+      id="message"
+      name="message"
+      placeholder="Type your message..."
+      rows="4"
+    />
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<span data-slot="input-group-icon" data-position="start" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 left-0 pl-3 top-0 pt-3"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
+    </span>
+    <textarea data-slot="input-group-control" class="flex-1 min-h-[80px] w-full resize-none rounded-none border-0 bg-transparent px-3 py-3 text-base shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" id="message" name="message" placeholder="Type your message..." rows="4"></textarea>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 7__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 7__1.html
new file mode 100644
index 00000000000..db348f705a2
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 7__1.html	
@@ -0,0 +1,28 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Textarea
+      id="notes"
+      name="notes"
+      placeholder="Add notes..."
+      rows="3"
+    />
+    <twig:InputGroup:Icon position="end" align="start">
+      {{ ux_icon('lucide:pencil') }}
+    </twig:InputGroup:Icon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<textarea data-slot="input-group-control" class="flex-1 min-h-[80px] w-full resize-none rounded-none border-0 bg-transparent px-3 py-3 text-base shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" id="notes" name="notes" placeholder="Add notes..." rows="3"></textarea>
+
+    <span data-slot="input-group-icon" data-position="end" class="pointer-events-none absolute flex text-muted-foreground [&amp;_svg:not([class*='size-'])]:size-4 right-0 pr-3 top-0 pt-3"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4"></path></svg>
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 8__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 8__1.html
new file mode 100644
index 00000000000..603ed4368f7
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 8__1.html	
@@ -0,0 +1,32 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Textarea
+      id="message"
+      name="message"
+      placeholder="Enter your message"
+      rows="4"
+    />
+    <twig:InputGroup:Addon align="block-end" class="border-t">
+      <twig:InputGroup:Text class="text-xs">
+        120 characters left
+      </twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<textarea data-slot="input-group-control" class="flex-1 min-h-[80px] w-full resize-none rounded-none border-0 bg-transparent px-3 py-3 text-base shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" id="message" name="message" placeholder="Enter your message" rows="4"></textarea>
+
+    <div data-slot="input-group-addon" data-align="block-end" role="group" class="text-muted-foreground flex h-auto items-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last w-full justify-start px-3 pb-3 [&amp;.border-t]:pt-3 border-t">
+<span data-slot="input-group-text" class="text-muted-foreground flex items-center gap-2 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4 text-xs">120 characters left
+      </span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 9__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 9__1.html
new file mode 100644
index 00000000000..40c7a6f4d68
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-group, code 9__1.html	
@@ -0,0 +1,35 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input Group
+- Code:
+```twig
+<div class="max-w-md">
+  <twig:InputGroup>
+    <twig:InputGroup:Addon>
+      {{ ux_icon('lucide:dollar-sign') }}
+    </twig:InputGroup:Addon>
+    <twig:InputGroup:Input
+      id="price"
+      name="price"
+      type="number"
+      placeholder="0.00"
+    />
+    <twig:InputGroup:Addon align="inline-end">
+      <twig:InputGroup:Text>USD</twig:InputGroup:Text>
+    </twig:InputGroup:Addon>
+  </twig:InputGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="max-w-md">
+  <div data-slot="input-group" class="group/input-group relative flex h-10 w-full items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] has-[&gt;textarea]:h-auto has-[[data-position=start]]:[&amp;_[data-slot=input-group-control]]:pl-9 has-[[data-position=end]]:[&amp;_[data-slot=input-group-control]]:pr-9 has-[[data-align=inline-start]]:[&amp;_[data-slot=input-group-control]]:pl-2 has-[[data-align=inline-end]]:[&amp;_[data-slot=input-group-control]]:pr-2 has-[[data-align=block-start]]:h-auto has-[[data-align=block-start]]:flex-col has-[[data-align=block-end]]:h-auto has-[[data-align=block-end]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]">
+<div data-slot="input-group-addon" data-align="inline-start" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-first pl-3">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v20m5-17H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+    </div>
+    <input data-slot="input-group-control" class="flex-1 h-full w-full rounded-none border-0 bg-transparent px-3 py-2 text-sm shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50" id="price" name="price" type="number" placeholder="0.00">
+
+    <div data-slot="input-group-addon" data-align="inline-end" role="group" class="text-muted-foreground flex h-auto items-center justify-center gap-2 text-sm font-medium select-none [&amp;_svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-last pr-3">
+<span data-slot="input-group-text" class="text-muted-foreground flex items-center gap-2 text-sm [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*=size-])]:size-4">USD</span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/Translator/.gitignore b/src/Translator/.gitignore
index 1784dd6561c..91aef664849 100644
--- a/src/Translator/.gitignore
+++ b/src/Translator/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Translator/CHANGELOG.md b/src/Translator/CHANGELOG.md
index e1aba542b27..fc11ccfe36f 100644
--- a/src/Translator/CHANGELOG.md
+++ b/src/Translator/CHANGELOG.md
@@ -1,5 +1,58 @@
 # CHANGELOG
 
+## 2.32
+
+-   **[BC BREAK]** Refactor API to use string-based translation keys instead of generated constants.
+
+    Translation keys are now simple strings instead of TypeScript constants.
+    The main advantages are:
+    - You can now use **exactly the same translation keys** as in your Symfony PHP code
+    - Simpler and more readable code
+    - No need to memorize generated constant names
+    - No need to import translation constants: smaller files
+    - And you can still get autocompletion and type-safety :rocket:
+
+    **Before:**
+    ```typescript
+    import { trans } from '@symfony/ux-translator';
+    import { SYMFONY_GREAT } from '@app/translations';
+
+    trans(SYMFONY_GREAT);
+    ```
+
+    **After:**
+    ```typescript
+    import { createTranslator } from '@symfony/ux-translator';
+    import { messages } from '../var/translations/index.js';
+
+    const { trans } = createTranslator({ messages });
+    trans('symfony.great');
+    ```
+
+    The global functions (`setLocale`, `getLocale`, `setLocaleFallbacks`, `getLocaleFallbacks`, `throwWhenNotFound`)
+    have been replaced by a new `createTranslator()` factory function that returns an object with these methods.
+
+    **Tree-shaking:** While tree-shaking of individual translation keys is no longer possible, modern build tools,
+    caching strategies, and compression techniques (Brotli, gzip) make this negligible in 2025.
+    A future feature will allow filtering dumped translations by pattern for those who need it,
+    further reducing bundle size.
+
+    **For AssetMapper users:** You can remove the following entries from your `importmap.php`:
+    ```php
+    '@app/translations' => [
+        'path' => './var/translations/index.js',
+    ],
+    '@app/translations/configuration' => [
+        'path' => './var/translations/configuration.js',
+    ],
+    ```
+
+    **Note:** This is a breaking change, but the UX Translator component is still experimental.
+
+-   Add configuration `ux_translator.dump_typescript`  to enable/disable TypeScript types dumping,
+    default to `true`. Generating TypeScript types is useful when developing,
+    but not in production when using the AssetMapper (which does not use these types).
+
 ## 2.30
 
 -  Ensure compatibility with PHP 8.5
diff --git a/src/Translator/assets/dist/translator_controller.d.ts b/src/Translator/assets/dist/translator_controller.d.ts
index e8d196c6838..c98285d5e6c 100644
--- a/src/Translator/assets/dist/translator_controller.d.ts
+++ b/src/Translator/assets/dist/translator_controller.d.ts
@@ -1,29 +1,41 @@
+type MessageId = string;
 type DomainType = string;
 type LocaleType = string;
-type TranslationsType = Record<DomainType, {
-    parameters: ParametersType;
-}>;
+
+type TranslationsType = Record<DomainType, { parameters: ParametersType }>;
 type NoParametersType = Record<string, never>;
 type ParametersType = Record<string, string | number | Date> | NoParametersType;
+
 type RemoveIntlIcuSuffix<T> = T extends `${infer U}+intl-icu` ? U : T;
 type DomainsOf<M> = M extends Message<infer Translations, LocaleType> ? keyof Translations : never;
 type LocaleOf<M> = M extends Message<TranslationsType, infer Locale> ? Locale : never;
-type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType> ? Translations[D] extends {
-    parameters: infer Parameters;
-} ? Parameters : never : never;
+type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType>
+    ? Translations[D] extends { parameters: infer Parameters }
+        ? Parameters
+        : never
+    : never;
+
 interface Message<Translations extends TranslationsType, Locale extends LocaleType> {
-    id: string;
     translations: {
         [domain in DomainType]: {
             [locale in Locale]: string;
         };
     };
 }
-declare function setLocale(locale: LocaleType | null): void;
-declare function getLocale(): LocaleType;
-declare function throwWhenNotFound(enabled: boolean): void;
-declare function setLocaleFallbacks(localeFallbacks: Record<LocaleType, LocaleType>): void;
-declare function getLocaleFallbacks(): Record<LocaleType, LocaleType>;
-declare function trans<M extends Message<TranslationsType, LocaleType>, D extends DomainsOf<M>, P extends ParametersOf<M, D>>(...args: P extends NoParametersType ? [message: M, parameters?: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>] : [message: M, parameters: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>]): string;
 
-export { type DomainType, type DomainsOf, type LocaleOf, type LocaleType, type Message, type NoParametersType, type ParametersOf, type ParametersType, type RemoveIntlIcuSuffix, type TranslationsType, getLocale, getLocaleFallbacks, setLocale, setLocaleFallbacks, throwWhenNotFound, trans };
+type Messages = Record<MessageId, Message<TranslationsType, LocaleType>>;
+
+declare function getDefaultLocale(): LocaleType;
+declare function createTranslator<TMessages extends Messages>({ messages, locale, localeFallbacks, throwWhenNotFound, }: {
+    messages: TMessages;
+    locale?: LocaleType;
+    localeFallbacks?: Record<LocaleType, LocaleType>;
+    throwWhenNotFound?: boolean;
+}): {
+    setLocale(locale: LocaleType): void;
+    getLocale(): LocaleType;
+    setThrowWhenNotFound(throwWhenNotFound: boolean): void;
+    trans<TMessageId extends keyof TMessages & MessageId, TMessage extends TMessages[TMessageId], TDomain extends DomainsOf<TMessage>, TParameters extends ParametersOf<TMessage, TDomain>>(id: TMessageId, parameters?: TParameters, domain?: RemoveIntlIcuSuffix<TDomain> | undefined, locale?: LocaleOf<TMessage>): string;
+};
+
+export { type DomainType, type DomainsOf, type LocaleOf, type LocaleType, type Message, type MessageId, type Messages, type NoParametersType, type ParametersOf, type ParametersType, type RemoveIntlIcuSuffix, type TranslationsType, createTranslator, getDefaultLocale };
diff --git a/src/Translator/assets/dist/translator_controller.js b/src/Translator/assets/dist/translator_controller.js
index e5019f8c85c..2a12d0d9298 100644
--- a/src/Translator/assets/dist/translator_controller.js
+++ b/src/Translator/assets/dist/translator_controller.js
@@ -62,12 +62,12 @@ function format(id, parameters, locale) {
 }
 function getPluralizationRule(number, locale) {
   number = Math.abs(number);
-  let _locale2 = locale;
+  let _locale = locale;
   if (locale === "pt_BR" || locale === "en_US_POSIX") {
     return 0;
   }
-  _locale2 = _locale2.length > 3 ? _locale2.substring(0, _locale2.indexOf("_")) : _locale2;
-  switch (_locale2) {
+  _locale = _locale.length > 3 ? _locale.substring(0, _locale.indexOf("_")) : _locale;
+  switch (_locale) {
     case "af":
     case "bn":
     case "bg":
@@ -189,71 +189,78 @@ function formatIntl(id, parameters, locale) {
 }
 
 // src/translator_controller.ts
-var _locale = null;
-var _localeFallbacks = {};
-var _throwWhenNotFound = false;
-function setLocale(locale) {
-  _locale = locale;
-}
-function getLocale() {
-  return _locale || document.documentElement.getAttribute("data-symfony-ux-translator-locale") || // <html data-symfony-ux-translator-locale="en_US">
+function getDefaultLocale() {
+  return document.documentElement.getAttribute("data-symfony-ux-translator-locale") || // <html data-symfony-ux-translator-locale="en_US">
   (document.documentElement.lang ? document.documentElement.lang.replace("-", "_") : null) || // <html lang="en-US">
   "en";
 }
-function throwWhenNotFound(enabled) {
-  _throwWhenNotFound = enabled;
-}
-function setLocaleFallbacks(localeFallbacks) {
-  _localeFallbacks = localeFallbacks;
-}
-function getLocaleFallbacks() {
-  return _localeFallbacks;
-}
-function trans(message, parameters = {}, domain = "messages", locale = null) {
-  if (typeof domain === "undefined") {
-    domain = "messages";
+function createTranslator({
+  messages,
+  locale = getDefaultLocale(),
+  localeFallbacks = {},
+  throwWhenNotFound = false
+}) {
+  const _messages = messages;
+  const _localeFallbacks = localeFallbacks;
+  let _locale = locale;
+  let _throwWhenNotFound = throwWhenNotFound;
+  function setLocale(locale2) {
+    _locale = locale2;
   }
-  if (typeof locale === "undefined" || null === locale) {
-    locale = getLocale();
+  function getLocale() {
+    return _locale;
   }
-  if (typeof message.translations === "undefined") {
-    return message.id;
+  function setThrowWhenNotFound(throwWhenNotFound2) {
+    _throwWhenNotFound = throwWhenNotFound2;
   }
-  const localesFallbacks = getLocaleFallbacks();
-  const translationsIntl = message.translations[`${domain}+intl-icu`];
-  if (typeof translationsIntl !== "undefined") {
-    while (typeof translationsIntl[locale] === "undefined") {
-      locale = localesFallbacks[locale];
-      if (!locale) {
-        break;
-      }
+  function trans(id, parameters = {}, domain = "messages", locale2 = null) {
+    if (typeof domain === "undefined") {
+      domain = "messages";
     }
-    if (locale) {
-      return formatIntl(translationsIntl[locale], parameters, locale);
+    if (typeof locale2 === "undefined" || null === locale2) {
+      locale2 = _locale;
     }
-  }
-  const translations = message.translations[domain];
-  if (typeof translations !== "undefined") {
-    while (typeof translations[locale] === "undefined") {
-      locale = localesFallbacks[locale];
-      if (!locale) {
-        break;
+    const message = _messages[id] ?? null;
+    if (message === null) {
+      return id;
+    }
+    const translationsIntl = message.translations[`${domain}+intl-icu`] ?? void 0;
+    if (typeof translationsIntl !== "undefined") {
+      while (typeof translationsIntl[locale2] === "undefined") {
+        locale2 = _localeFallbacks[locale2];
+        if (!locale2) {
+          break;
+        }
+      }
+      if (locale2) {
+        return formatIntl(translationsIntl[locale2], parameters, locale2);
       }
     }
-    if (locale) {
-      return format(translations[locale], parameters, locale);
+    const translations = message.translations[domain] ?? void 0;
+    if (typeof translations !== "undefined") {
+      while (typeof translations[locale2] === "undefined") {
+        locale2 = _localeFallbacks[locale2];
+        if (!locale2) {
+          break;
+        }
+      }
+      if (locale2) {
+        return format(translations[locale2], parameters, locale2);
+      }
     }
+    if (_throwWhenNotFound) {
+      throw new Error(`No translation message found with id "${id}".`);
+    }
+    return id;
   }
-  if (_throwWhenNotFound) {
-    throw new Error(`No translation message found with id "${message.id}".`);
-  }
-  return message.id;
+  return {
+    setLocale,
+    getLocale,
+    setThrowWhenNotFound,
+    trans
+  };
 }
 export {
-  getLocale,
-  getLocaleFallbacks,
-  setLocale,
-  setLocaleFallbacks,
-  throwWhenNotFound,
-  trans
+  createTranslator,
+  getDefaultLocale
 };
diff --git a/src/Translator/assets/package.json b/src/Translator/assets/package.json
index e4a12fcdf91..9e34c675834 100644
--- a/src/Translator/assets/package.json
+++ b/src/Translator/assets/package.json
@@ -27,9 +27,7 @@
     "symfony": {
         "importmap": {
             "intl-messageformat": "^10.5.11",
-            "@symfony/ux-translator": "path:%PACKAGE%/dist/translator_controller.js",
-            "@app/translations": "path:var/translations/index.js",
-            "@app/translations/configuration": "path:var/translations/configuration.js"
+            "@symfony/ux-translator": "path:%PACKAGE%/dist/translator_controller.js"
         }
     },
     "peerDependencies": {
diff --git a/src/Translator/assets/src/translator_controller.ts b/src/Translator/assets/src/translator_controller.ts
index 5bddc02d4ff..28f2dca0e0b 100644
--- a/src/Translator/assets/src/translator_controller.ts
+++ b/src/Translator/assets/src/translator_controller.ts
@@ -7,168 +7,176 @@
  * file that was distributed with this source code.
  */
 
-export type DomainType = string;
-export type LocaleType = string;
-
-export type TranslationsType = Record<DomainType, { parameters: ParametersType }>;
-export type NoParametersType = Record<string, never>;
-export type ParametersType = Record<string, string | number | Date> | NoParametersType;
-
-export type RemoveIntlIcuSuffix<T> = T extends `${infer U}+intl-icu` ? U : T;
-export type DomainsOf<M> = M extends Message<infer Translations, LocaleType> ? keyof Translations : never;
-export type LocaleOf<M> = M extends Message<TranslationsType, infer Locale> ? Locale : never;
-export type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType>
-    ? Translations[D] extends { parameters: infer Parameters }
-        ? Parameters
-        : never
-    : never;
-
-export interface Message<Translations extends TranslationsType, Locale extends LocaleType> {
-    id: string;
-    translations: {
-        [domain in DomainType]: {
-            [locale in Locale]: string;
-        };
-    };
-}
-
 import { format } from './formatters/formatter';
 import { formatIntl } from './formatters/intl-formatter';
+import type { DomainsOf, LocaleOf, LocaleType, MessageId, Messages, ParametersOf, RemoveIntlIcuSuffix } from './types';
 
-let _locale: LocaleType | null = null;
-let _localeFallbacks: Record<LocaleType, LocaleType> = {};
-let _throwWhenNotFound = false;
-
-export function setLocale(locale: LocaleType | null) {
-    _locale = locale;
-}
+export * from './types.d';
 
-export function getLocale(): LocaleType {
+export function getDefaultLocale(): LocaleType {
     return (
-        _locale ||
         document.documentElement.getAttribute('data-symfony-ux-translator-locale') || // <html data-symfony-ux-translator-locale="en_US">
         (document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null) || // <html lang="en-US">
         'en'
     );
 }
 
-export function throwWhenNotFound(enabled: boolean): void {
-    _throwWhenNotFound = enabled;
-}
-
-export function setLocaleFallbacks(localeFallbacks: Record<LocaleType, LocaleType>): void {
-    _localeFallbacks = localeFallbacks;
-}
-
-export function getLocaleFallbacks(): Record<LocaleType, LocaleType> {
-    return _localeFallbacks;
-}
-
-/**
- * Translates the given message, in ICU format (see https://formatjs.io/docs/intl-messageformat) or Symfony format (see below).
- *
- * When a number is provided as a parameter named "%count%", the message is parsed for plural
- * forms and a translation is chosen according to this number using the following rules:
- *
- * Given a message with different plural translations separated by a
- * pipe (|), this method returns the correct portion of the message based
- * on the given number, locale and the pluralization rules in the message
- * itself.
- *
- * The message supports two different types of pluralization rules:
- *
- * interval: {0} There are no apples|{1} There is one apple|]1,Inf] There are %count% apples
- * indexed:  There is one apple|There are %count% apples
- *
- * The indexed solution can also contain labels (e.g. one: There is one apple).
- * This is purely for making the translations more clear - it does not
- * affect the functionality.
- *
- * The two methods can also be mixed:
- *     {0} There are no apples|one: There is one apple|more: There are %count% apples
- *
- * An interval can represent a finite set of numbers:
- *  {1,2,3,4}
- *
- * An interval can represent numbers between two numbers:
- *  [1, +Inf]
- *  ]-1,2[
- *
- * The left delimiter can be [ (inclusive) or ] (exclusive).
- * The right delimiter can be [ (exclusive) or ] (inclusive).
- * Beside numbers, you can use -Inf and +Inf for the infinite.
- *
- * @see https://en.wikipedia.org/wiki/ISO_31-11
- *
- * @param message    The message
- * @param parameters An array of parameters for the message
- * @param domain     The domain for the message or null to use the default
- * @param locale     The locale or null to use the default
- */
-export function trans<
-    M extends Message<TranslationsType, LocaleType>,
-    D extends DomainsOf<M>,
-    P extends ParametersOf<M, D>,
->(
-    ...args: P extends NoParametersType
-        ? [message: M, parameters?: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>]
-        : [message: M, parameters: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>]
-): string;
-export function trans<
-    M extends Message<TranslationsType, LocaleType>,
-    D extends DomainsOf<M>,
-    P extends ParametersOf<M, D>,
->(
-    message: M,
-    parameters: P = {} as P,
-    domain: RemoveIntlIcuSuffix<DomainsOf<M>> | undefined = 'messages' as RemoveIntlIcuSuffix<DomainsOf<M>>,
-    locale: LocaleOf<M> | null = null
-): string {
-    if (typeof domain === 'undefined') {
-        domain = 'messages' as RemoveIntlIcuSuffix<DomainsOf<M>>;
+export function createTranslator<TMessages extends Messages>({
+    messages,
+    locale = getDefaultLocale(),
+    localeFallbacks = {},
+    throwWhenNotFound = false,
+}: {
+    messages: TMessages;
+    locale?: LocaleType;
+    localeFallbacks?: Record<LocaleType, LocaleType>;
+    throwWhenNotFound?: boolean;
+}): {
+    setLocale(locale: LocaleType): void;
+    getLocale(): LocaleType;
+    setThrowWhenNotFound(throwWhenNotFound: boolean): void;
+    trans<
+        TMessageId extends keyof TMessages & MessageId,
+        TMessage extends TMessages[TMessageId],
+        TDomain extends DomainsOf<TMessage>,
+        TParameters extends ParametersOf<TMessage, TDomain>,
+    >(
+        id: TMessageId,
+        parameters?: TParameters,
+        domain?: RemoveIntlIcuSuffix<TDomain> | undefined,
+        locale?: LocaleOf<TMessage>
+    ): string;
+} {
+    const _messages = messages;
+    const _localeFallbacks = localeFallbacks;
+    let _locale = locale;
+    let _throwWhenNotFound = throwWhenNotFound;
+
+    /**
+     * Sets the locale.
+     */
+    function setLocale(locale: LocaleType) {
+        _locale = locale;
     }
 
-    if (typeof locale === 'undefined' || null === locale) {
-        locale = getLocale() as LocaleOf<M>;
+    /**
+     * Returns the current locale.
+     */
+    function getLocale(): LocaleType {
+        return _locale;
     }
 
-    if (typeof message.translations === 'undefined') {
-        return message.id;
+    /**
+     * Sets whether an error should be thrown when a translation is not found.
+     */
+    function setThrowWhenNotFound(throwWhenNotFound: boolean) {
+        _throwWhenNotFound = throwWhenNotFound;
     }
 
-    const localesFallbacks = getLocaleFallbacks();
+    /**
+     * Translates the given message, in ICU format (see https://formatjs.io/docs/intl-messageformat) or Symfony format (see below).
+     *
+     * When a number is provided as a parameter named "%count%", the message is parsed for plural
+     * forms and a translation is chosen according to this number using the following rules:
+     *
+     * Given a message with different plural translations separated by a
+     * pipe (|), this method returns the correct portion of the message based
+     * on the given number, locale and the pluralization rules in the message
+     * itself.
+     *
+     * The message supports two different types of pluralization rules:
+     *
+     * interval: {0} There are no apples|{1} There is one apple|]1,Inf] There are %count% apples
+     * indexed:  There is one apple|There are %count% apples
+     *
+     * The indexed solution can also contain labels (e.g. one: There is one apple).
+     * This is purely for making the translations more clear - it does not
+     * affect the functionality.
+     *
+     * The two methods can also be mixed:
+     *     {0} There are no apples|one: There is one apple|more: There are %count% apples
+     *
+     * An interval can represent a finite set of numbers:
+     *  {1,2,3,4}
+     *
+     * An interval can represent numbers between two numbers:
+     *  [1, +Inf]
+     *  ]-1,2[
+     *
+     * The left delimiter can be [ (inclusive) or ] (exclusive).
+     * The right delimiter can be [ (exclusive) or ] (inclusive).
+     * Beside numbers, you can use -Inf and +Inf for the infinite.
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_31-11
+     *
+     * @param id         The message ID
+     * @param parameters An array of parameters for the message
+     * @param domain     The domain for the message or null to use the default
+     * @param locale     The locale or null to use the default
+     */
+    function trans<
+        TMessageId extends keyof TMessages & MessageId,
+        TMessage extends TMessages[TMessageId],
+        TDomain extends DomainsOf<TMessage>,
+        TParameters extends ParametersOf<TMessage, TDomain>,
+    >(
+        id: TMessageId,
+        parameters: TParameters = {} as TParameters,
+        domain: RemoveIntlIcuSuffix<TDomain> | undefined = 'messages' as RemoveIntlIcuSuffix<TDomain>,
+        locale: LocaleOf<TMessage> | null = null
+    ): string {
+        if (typeof domain === 'undefined') {
+            domain = 'messages' as RemoveIntlIcuSuffix<TDomain>;
+        }
 
-    const translationsIntl = message.translations[`${domain}+intl-icu`];
-    if (typeof translationsIntl !== 'undefined') {
-        while (typeof translationsIntl[locale] === 'undefined') {
-            locale = localesFallbacks[locale] as LocaleOf<M>;
-            if (!locale) {
-                break;
-            }
+        if (typeof locale === 'undefined' || null === locale) {
+            locale = _locale as LocaleOf<TMessage>;
         }
 
-        if (locale) {
-            return formatIntl(translationsIntl[locale], parameters, locale);
+        const message = _messages[id] ?? (null as TMessage | null);
+        if (message === null) {
+            return id;
         }
-    }
 
-    const translations = message.translations[domain];
-    if (typeof translations !== 'undefined') {
-        while (typeof translations[locale] === 'undefined') {
-            locale = localesFallbacks[locale] as LocaleOf<M>;
-            if (!locale) {
-                break;
+        const translationsIntl = message.translations[`${domain}+intl-icu`] ?? undefined;
+        if (typeof translationsIntl !== 'undefined') {
+            while (typeof translationsIntl[locale] === 'undefined') {
+                locale = _localeFallbacks[locale] as LocaleOf<TMessage>;
+                if (!locale) {
+                    break;
+                }
+            }
+
+            if (locale) {
+                return formatIntl(translationsIntl[locale], parameters, locale);
+            }
+        }
+
+        const translations = message.translations[domain] ?? undefined;
+        if (typeof translations !== 'undefined') {
+            while (typeof translations[locale] === 'undefined') {
+                locale = _localeFallbacks[locale] as LocaleOf<TMessage>;
+                if (!locale) {
+                    break;
+                }
+            }
+
+            if (locale) {
+                return format(translations[locale], parameters, locale);
             }
         }
 
-        if (locale) {
-            return format(translations[locale], parameters, locale);
+        if (_throwWhenNotFound) {
+            throw new Error(`No translation message found with id "${id}".`);
         }
-    }
 
-    if (_throwWhenNotFound) {
-        throw new Error(`No translation message found with id "${message.id}".`);
+        return id;
     }
 
-    return message.id;
+    return {
+        setLocale,
+        getLocale,
+        setThrowWhenNotFound,
+        trans,
+    };
 }
diff --git a/src/Translator/assets/src/types.d.ts b/src/Translator/assets/src/types.d.ts
new file mode 100644
index 00000000000..51d65778026
--- /dev/null
+++ b/src/Translator/assets/src/types.d.ts
@@ -0,0 +1,26 @@
+export type MessageId = string;
+export type DomainType = string;
+export type LocaleType = string;
+
+export type TranslationsType = Record<DomainType, { parameters: ParametersType }>;
+export type NoParametersType = Record<string, never>;
+export type ParametersType = Record<string, string | number | Date> | NoParametersType;
+
+export type RemoveIntlIcuSuffix<T> = T extends `${infer U}+intl-icu` ? U : T;
+export type DomainsOf<M> = M extends Message<infer Translations, LocaleType> ? keyof Translations : never;
+export type LocaleOf<M> = M extends Message<TranslationsType, infer Locale> ? Locale : never;
+export type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType>
+    ? Translations[D] extends { parameters: infer Parameters }
+        ? Parameters
+        : never
+    : never;
+
+export interface Message<Translations extends TranslationsType, Locale extends LocaleType> {
+    translations: {
+        [domain in DomainType]: {
+            [locale in Locale]: string;
+        };
+    };
+}
+
+export type Messages = Record<MessageId, Message<TranslationsType, LocaleType>>;
diff --git a/src/Translator/assets/test/unit/translator_controller.test.ts b/src/Translator/assets/test/unit/translator_controller.test.ts
index 44d92046ed3..20b8dc72d48 100644
--- a/src/Translator/assets/test/unit/translator_controller.test.ts
+++ b/src/Translator/assets/test/unit/translator_controller.test.ts
@@ -1,110 +1,108 @@
 import { beforeEach, describe, expect, test } from 'vitest';
-import {
-    getLocale,
-    type Message,
-    type NoParametersType,
-    setLocale,
-    setLocaleFallbacks,
-    throwWhenNotFound,
-    trans,
-} from '../../src/translator_controller';
+import { createTranslator } from '../../src/translator_controller';
+import type { Message, NoParametersType } from '../../src/types';
 
 describe('Translator', () => {
     beforeEach(() => {
-        setLocale(null);
-        setLocaleFallbacks({});
-        throwWhenNotFound(false);
         document.documentElement.lang = '';
         document.documentElement.removeAttribute('data-symfony-ux-translator-locale');
     });
 
-    describe('getLocale', () => {
+    describe('create translator with locale', () => {
         test('default locale', () => {
+            let translator = createTranslator({ messages: {} });
+
             // 'en' is the default locale
-            expect(getLocale()).toEqual('en');
+            expect(translator.getLocale()).toEqual('en');
 
             // or the locale from <html lang="...">, if exists
             document.documentElement.lang = 'fr';
-            expect(getLocale()).toEqual('fr');
+            translator = createTranslator({ messages: {} });
+            expect(translator.getLocale()).toEqual('fr');
 
             // or the locale from <html data-symfony-ux-translator-locale="...">, if exists
             document.documentElement.setAttribute('data-symfony-ux-translator-locale', 'it');
-            expect(getLocale()).toEqual('it');
+            translator = createTranslator({ messages: {} });
+            expect(translator.getLocale()).toEqual('it');
+        });
 
-            setLocale('de');
-            expect(getLocale()).toEqual('de');
+        test('custom locale', () => {
+            document.documentElement.lang = 'fr';
+            document.documentElement.setAttribute('data-symfony-ux-translator-locale', 'it');
+
+            const translator = createTranslator({ messages: {}, locale: 'de' });
+            expect(translator.getLocale()).toEqual('de');
         });
-    });
 
-    describe('getLocale', () => {
         test('with subcode', () => {
             // allow format according to W3C
             document.documentElement.lang = 'de-AT';
-            expect(getLocale()).toEqual('de_AT');
+            const translator = createTranslator({ messages: {} });
+            expect(translator.getLocale()).toEqual('de_AT');
 
             // or "incorrect" Symfony locale format
             document.documentElement.lang = 'de_AT';
-            expect(getLocale()).toEqual('de_AT');
-        });
-    });
-
-    describe('setLocale', () => {
-        test('custom locale', () => {
-            setLocale('fr');
-
-            expect(getLocale()).toEqual('fr');
+            expect(translator.getLocale()).toEqual('de_AT');
         });
     });
 
     describe('trans', () => {
         test('basic message', () => {
-            const MESSAGE_BASIC: Message<{ messages: { parameters: NoParametersType } }, 'en'> = {
-                id: 'message.basic',
-                translations: {
-                    messages: {
-                        en: 'A basic message',
+            const messages: {
+                'message.basic': Message<{ messages: { parameters: NoParametersType } }, 'en'>;
+            } = {
+                'message.basic': {
+                    translations: {
+                        messages: {
+                            en: 'A basic message',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE_BASIC)).toEqual('A basic message');
-            expect(trans(MESSAGE_BASIC, {})).toEqual('A basic message');
-            expect(trans(MESSAGE_BASIC, {}, 'messages')).toEqual('A basic message');
-            expect(trans(MESSAGE_BASIC, {}, 'messages', 'en')).toEqual('A basic message');
+            expect(translator.trans('message.basic')).toEqual('A basic message');
+            expect(translator.trans('message.basic', {})).toEqual('A basic message');
+            expect(translator.trans('message.basic', {}, 'messages')).toEqual('A basic message');
+            expect(translator.trans('message.basic', {}, 'messages', 'en')).toEqual('A basic message');
 
             // @ts-expect-error "%count%" is not a valid parameter
-            expect(trans(MESSAGE_BASIC, { '%count%': 1 })).toEqual('A basic message');
+            expect(translator.trans('message.basic', { '%count%': 1 })).toEqual('A basic message');
 
             // @ts-expect-error "foo" is not a valid domain
-            expect(trans(MESSAGE_BASIC, {}, 'foo')).toEqual('message.basic');
+            expect(translator.trans('message.basic', {}, 'foo')).toEqual('message.basic');
 
             // @ts-expect-error "fr" is not a valid locale
-            expect(trans(MESSAGE_BASIC, {}, 'messages', 'fr')).toEqual('message.basic');
+            expect(translator.trans('message.basic', {}, 'messages', 'fr')).toEqual('message.basic');
         });
 
         test('basic message with parameters', () => {
-            const MESSAGE_BASIC_WITH_PARAMETERS: Message<
-                { messages: { parameters: { '%parameter1%': string; '%parameter2%': string } } },
-                'en'
-            > = {
-                id: 'message.basic.with.parameters',
-                translations: {
-                    messages: {
-                        en: 'A basic message %parameter1% %parameter2%',
+            const messages: {
+                'message.basic.with.parameters': Message<
+                    { messages: { parameters: { '%parameter1%': string; '%parameter2%': string } } },
+                    'en'
+                >;
+            } = {
+                'message.basic.with.parameters': {
+                    translations: {
+                        messages: {
+                            en: 'A basic message %parameter1% %parameter2%',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
             expect(
-                trans(MESSAGE_BASIC_WITH_PARAMETERS, {
+                translator.trans('message.basic.with.parameters', {
                     '%parameter1%': 'foo',
                     '%parameter2%': 'bar',
                 })
             ).toEqual('A basic message foo bar');
 
             expect(
-                trans(
-                    MESSAGE_BASIC_WITH_PARAMETERS,
+                translator.trans(
+                    'message.basic.with.parameters',
                     {
                         '%parameter1%': 'foo',
                         '%parameter2%': 'bar',
@@ -114,8 +112,8 @@ describe('Translator', () => {
             ).toEqual('A basic message foo bar');
 
             expect(
-                trans(
-                    MESSAGE_BASIC_WITH_PARAMETERS,
+                translator.trans(
+                    'message.basic.with.parameters',
                     {
                         '%parameter1%': 'foo',
                         '%parameter2%': 'bar',
@@ -126,82 +124,90 @@ describe('Translator', () => {
             ).toEqual('A basic message foo bar');
 
             // @ts-expect-error Parameters "%parameter1%" and "%parameter2%" are missing
-            expect(trans(MESSAGE_BASIC_WITH_PARAMETERS, {})).toEqual('A basic message %parameter1% %parameter2%');
+            expect(translator.trans('message.basic.with.parameters', {})).toEqual(
+                'A basic message %parameter1% %parameter2%'
+            );
 
             // @ts-expect-error Parameter "%parameter2%" is missing
-            expect(trans(MESSAGE_BASIC_WITH_PARAMETERS, { '%parameter1%': 'foo' })).toEqual(
+            expect(translator.trans('message.basic.with.parameters', { '%parameter1%': 'foo' })).toEqual(
                 'A basic message foo %parameter2%'
             );
 
             expect(
-                trans(
-                    MESSAGE_BASIC_WITH_PARAMETERS,
+                translator.trans(
+                    'message.basic.with.parameters',
                     {
                         '%parameter1%': 'foo',
                         '%parameter2%': 'bar',
-                        // @ts-expect-error "foobar" is not a valid domain
                     },
+                    // @ts-expect-error "foobar" is not a valid domain
                     'foobar'
                 )
             ).toEqual('message.basic.with.parameters');
 
             expect(
-                trans(
-                    MESSAGE_BASIC_WITH_PARAMETERS,
+                translator.trans(
+                    'message.basic.with.parameters',
                     {
                         '%parameter1%': 'foo',
                         '%parameter2%': 'bar',
-                        // @ts-expect-error "fr" is not a valid locale
                     },
                     'messages',
+                    // @ts-expect-error "fr" is not a valid locale
                     'fr'
                 )
             ).toEqual('message.basic.with.parameters');
         });
 
         test('intl message', () => {
-            const MESSAGE_INTL: Message<{ 'messages+intl-icu': { parameters: NoParametersType } }, 'en'> = {
-                id: 'message.intl',
-                translations: {
-                    'messages+intl-icu': {
-                        en: 'An intl message',
+            const messages: {
+                'message.intl': Message<{ 'messages+intl-icu': { parameters: NoParametersType } }, 'en'>;
+            } = {
+                'message.intl': {
+                    translations: {
+                        'messages+intl-icu': {
+                            en: 'An intl message',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE_INTL)).toEqual('An intl message');
-            expect(trans(MESSAGE_INTL, {})).toEqual('An intl message');
-            expect(trans(MESSAGE_INTL, {}, 'messages')).toEqual('An intl message');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'en')).toEqual('An intl message');
+            expect(translator.trans('message.intl')).toEqual('An intl message');
+            expect(translator.trans('message.intl', {})).toEqual('An intl message');
+            expect(translator.trans('message.intl', {}, 'messages')).toEqual('An intl message');
+            expect(translator.trans('message.intl', {}, 'messages', 'en')).toEqual('An intl message');
 
             // @ts-expect-error "%count%" is not a valid parameter
-            expect(trans(MESSAGE_INTL, { '%count%': 1 })).toEqual('An intl message');
+            expect(translator.trans('message.intl', { '%count%': 1 })).toEqual('An intl message');
 
             // @ts-expect-error "foo" is not a valid domain
-            expect(trans(MESSAGE_INTL, {}, 'foo')).toEqual('message.intl');
+            expect(translator.trans('message.intl', {}, 'foo')).toEqual('message.intl');
 
             // @ts-expect-error "fr" is not a valid locale
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'fr')).toEqual('message.intl');
+            expect(translator.trans('message.intl', {}, 'messages', 'fr')).toEqual('message.intl');
         });
 
         test('intl message with parameters', () => {
-            const INTL_MESSAGE_WITH_PARAMETERS: Message<
-                {
-                    'messages+intl-icu': {
-                        parameters: {
-                            gender_of_host: 'male' | 'female' | string;
-                            num_guests: number;
-                            host: string;
-                            guest: string;
+            const messages: {
+                'message.intl.with.parameters': Message<
+                    {
+                        'messages+intl-icu': {
+                            parameters: {
+                                gender_of_host: 'male' | 'female' | string;
+                                num_guests: number;
+                                host: string;
+                                guest: string;
+                            };
                         };
-                    };
-                },
-                'en'
-            > = {
-                id: 'message.intl.with.parameters',
-                translations: {
-                    'messages+intl-icu': {
-                        en: `
+                    },
+                    'en'
+                >;
+            } = {
+                'message.intl.with.parameters': {
+                    translations: {
+                        'messages+intl-icu': {
+                            en: `
 {gender_of_host, select,
     female {{num_guests, plural, offset:1
         =0 {{host} does not give a party.}
@@ -218,12 +224,14 @@ describe('Translator', () => {
         =1 {{host} invites {guest} to their party.}
         =2 {{host} invites {guest} and one other person to their party.}
         other {{host} invites {guest} as one of the # people invited to their party.}}}}`.trim(),
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
             expect(
-                trans(INTL_MESSAGE_WITH_PARAMETERS, {
+                translator.trans('message.intl.with.parameters', {
                     gender_of_host: 'male',
                     num_guests: 123,
                     host: 'John',
@@ -232,8 +240,8 @@ describe('Translator', () => {
             ).toEqual('John invites Mary as one of the 122 people invited to his party.');
 
             expect(
-                trans(
-                    INTL_MESSAGE_WITH_PARAMETERS,
+                translator.trans(
+                    'message.intl.with.parameters',
                     {
                         gender_of_host: 'female',
                         num_guests: 44,
@@ -245,8 +253,8 @@ describe('Translator', () => {
             ).toEqual('Mary invites John as one of the 43 people invited to her party.');
 
             expect(
-                trans(
-                    INTL_MESSAGE_WITH_PARAMETERS,
+                translator.trans(
+                    'message.intl.with.parameters',
                     {
                         gender_of_host: 'female',
                         num_guests: 1,
@@ -260,19 +268,19 @@ describe('Translator', () => {
 
             expect(() => {
                 // @ts-expect-error Parameters "gender_of_host", "num_guests", "host", and "guest" are missing
-                trans(INTL_MESSAGE_WITH_PARAMETERS, {});
+                translator.trans('message.intl.with.parameters', {});
             }).toThrow(/^The intl string context variable "gender_of_host" was not provided/);
 
             expect(() => {
                 // @ts-expect-error Parameters "num_guests", "host", and "guest" are missing
-                trans(INTL_MESSAGE_WITH_PARAMETERS, {
+                translator.trans('message.intl.with.parameters', {
                     gender_of_host: 'male',
                 });
             }).toThrow(/^The intl string context variable "num_guests" was not provided/);
 
             expect(() => {
                 // @ts-expect-error Parameters "host", and "guest" are missing
-                trans(INTL_MESSAGE_WITH_PARAMETERS, {
+                translator.trans('message.intl.with.parameters', {
                     gender_of_host: 'male',
                     num_guests: 123,
                 });
@@ -280,7 +288,7 @@ describe('Translator', () => {
 
             expect(() => {
                 // @ts-expect-error Parameter "guest" is missing
-                trans(INTL_MESSAGE_WITH_PARAMETERS, {
+                translator.trans('message.intl.with.parameters', {
                     gender_of_host: 'male',
                     num_guests: 123,
                     host: 'John',
@@ -288,8 +296,8 @@ describe('Translator', () => {
             }).toThrow(/^The intl string context variable "guest" was not provided/);
 
             expect(
-                trans(
-                    INTL_MESSAGE_WITH_PARAMETERS,
+                translator.trans(
+                    'message.intl.with.parameters',
                     {
                         gender_of_host: 'male',
                         num_guests: 123,
@@ -302,8 +310,8 @@ describe('Translator', () => {
             ).toEqual('message.intl.with.parameters');
 
             expect(
-                trans(
-                    INTL_MESSAGE_WITH_PARAMETERS,
+                translator.trans(
+                    'message.intl.with.parameters',
                     {
                         gender_of_host: 'male',
                         num_guests: 123,
@@ -318,197 +326,296 @@ describe('Translator', () => {
         });
 
         test('same message id for multiple domains', () => {
-            const MESSAGE_MULTI_DOMAINS: Message<
-                { foobar: { parameters: NoParametersType }; messages: { parameters: NoParametersType } },
-                'en'
-            > = {
-                id: 'message.multi_domains',
-                translations: {
-                    foobar: {
-                        en: 'A message from foobar catalogue',
-                    },
-                    messages: {
-                        en: 'A message from messages catalogue',
+            const messages: {
+                'message.multi_domains': Message<
+                    { foobar: { parameters: NoParametersType }; messages: { parameters: NoParametersType } },
+                    'en'
+                >;
+            } = {
+                'message.multi_domains': {
+                    translations: {
+                        foobar: {
+                            en: 'A message from foobar catalogue',
+                        },
+                        messages: {
+                            en: 'A message from messages catalogue',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE_MULTI_DOMAINS)).toEqual('A message from messages catalogue');
-            expect(trans(MESSAGE_MULTI_DOMAINS, {})).toEqual('A message from messages catalogue');
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'messages')).toEqual('A message from messages catalogue');
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'foobar')).toEqual('A message from foobar catalogue');
+            expect(translator.trans('message.multi_domains')).toEqual('A message from messages catalogue');
+            expect(translator.trans('message.multi_domains', {})).toEqual('A message from messages catalogue');
+            expect(translator.trans('message.multi_domains', {}, 'messages')).toEqual(
+                'A message from messages catalogue'
+            );
+            expect(translator.trans('message.multi_domains', {}, 'foobar')).toEqual('A message from foobar catalogue');
 
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'messages', 'en')).toEqual('A message from messages catalogue');
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'foobar', 'en')).toEqual('A message from foobar catalogue');
+            expect(translator.trans('message.multi_domains', {}, 'messages', 'en')).toEqual(
+                'A message from messages catalogue'
+            );
+            expect(translator.trans('message.multi_domains', {}, 'foobar', 'en')).toEqual(
+                'A message from foobar catalogue'
+            );
 
             // @ts-expect-error Domain "acme" is invalid
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'acme', 'fr')).toEqual('message.multi_domains');
+            expect(translator.trans('message.multi_domains', {}, 'acme', 'fr')).toEqual('message.multi_domains');
 
             // @ts-expect-error Locale "fr" is invalid
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'messages', 'fr')).toEqual('message.multi_domains');
+            expect(translator.trans('message.multi_domains', {}, 'messages', 'fr')).toEqual('message.multi_domains');
 
             // @ts-expect-error Locale "fr" is invalid
-            expect(trans(MESSAGE_MULTI_DOMAINS, {}, 'foobar', 'fr')).toEqual('message.multi_domains');
+            expect(translator.trans('message.multi_domains', {}, 'foobar', 'fr')).toEqual('message.multi_domains');
         });
 
         test('same message id for multiple domains, and different parameters', () => {
-            const MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS: Message<
-                {
-                    foobar: { parameters: { '%parameter2%': string } };
-                    messages: { parameters: { '%parameter1%': string } };
-                },
-                'en'
-            > = {
-                id: 'message.multi_domains.different_parameters',
-                translations: {
-                    foobar: {
-                        en: 'A message from foobar catalogue with a parameter %parameter2%',
+            const messages: {
+                'message.multi_domains.different_parameters': Message<
+                    {
+                        foobar: { parameters: { '%parameter2%': string } };
+                        messages: { parameters: { '%parameter1%': string } };
                     },
-                    messages: {
-                        en: 'A message from messages catalogue with a parameter %parameter1%',
+                    'en'
+                >;
+            } = {
+                'message.multi_domains.different_parameters': {
+                    translations: {
+                        foobar: {
+                            en: 'A message from foobar catalogue with a parameter %parameter2%',
+                        },
+                        messages: {
+                            en: 'A message from messages catalogue with a parameter %parameter1%',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter1%': 'foo' })).toEqual(
-                'A message from messages catalogue with a parameter foo'
-            );
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter1%': 'foo' }, 'messages')).toEqual(
-                'A message from messages catalogue with a parameter foo'
-            );
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter1%': 'foo' }, 'messages', 'en')).toEqual(
+            expect(translator.trans('message.multi_domains.different_parameters', { '%parameter1%': 'foo' })).toEqual(
                 'A message from messages catalogue with a parameter foo'
             );
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter2%': 'foo' }, 'foobar')).toEqual(
-                'A message from foobar catalogue with a parameter foo'
-            );
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter2%': 'foo' }, 'foobar', 'en')).toEqual(
-                'A message from foobar catalogue with a parameter foo'
-            );
+            expect(
+                translator.trans('message.multi_domains.different_parameters', { '%parameter1%': 'foo' }, 'messages')
+            ).toEqual('A message from messages catalogue with a parameter foo');
+            expect(
+                translator.trans(
+                    'message.multi_domains.different_parameters',
+                    { '%parameter1%': 'foo' },
+                    'messages',
+                    'en'
+                )
+            ).toEqual('A message from messages catalogue with a parameter foo');
+            expect(
+                translator.trans('message.multi_domains.different_parameters', { '%parameter2%': 'foo' }, 'foobar')
+            ).toEqual('A message from foobar catalogue with a parameter foo');
+            expect(
+                translator.trans(
+                    'message.multi_domains.different_parameters',
+                    { '%parameter2%': 'foo' },
+                    'foobar',
+                    'en'
+                )
+            ).toEqual('A message from foobar catalogue with a parameter foo');
 
             // @ts-expect-error Parameter "%parameter1%" is missing
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, {})).toEqual(
+            expect(translator.trans('message.multi_domains.different_parameters', {})).toEqual(
                 'A message from messages catalogue with a parameter %parameter1%'
             );
 
-            // @ts-expect-error Domain "baz" is invalid
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter1%': 'foo' }, 'baz')).toEqual(
-                'message.multi_domains.different_parameters'
-            );
+            expect(
+                // @ts-expect-error Domain "baz" is invalid
+                translator.trans('message.multi_domains.different_parameters', { '%parameter1%': 'foo' }, 'baz')
+            ).toEqual('message.multi_domains.different_parameters');
 
-            // @ts-expect-error Locale "fr" is invalid
-            expect(trans(MESSAGE_MULTI_DOMAINS_WITH_PARAMETERS, { '%parameter1%': 'foo' }, 'messages', 'fr')).toEqual(
-                'message.multi_domains.different_parameters'
-            );
+            expect(
+                translator.trans(
+                    'message.multi_domains.different_parameters',
+                    { '%parameter1%': 'foo' },
+                    'messages',
+                    // @ts-expect-error Locale "fr" is invalid
+                    'fr'
+                )
+            ).toEqual('message.multi_domains.different_parameters');
         });
 
         test('missing message should return the message id when `throwWhenNotFound` is false', () => {
-            throwWhenNotFound(false);
-            setLocale('fr');
-
-            const MESSAGE_IN_ANOTHER_DOMAIN: Message<{ security: { parameters: NoParametersType } }, 'en'> = {
-                id: 'Invalid credentials.',
-                translations: {
-                    messages: {
-                        en: 'Invalid credentials.',
+            const messages: {
+                'message.id': Message<{ security: { parameters: NoParametersType } }, 'en'>;
+            } = {
+                'message.id': {
+                    translations: {
+                        messages: {
+                            en: 'Invalid credentials.',
+                        },
                     },
                 },
             };
 
-            expect(trans(MESSAGE_IN_ANOTHER_DOMAIN)).toEqual('Invalid credentials.');
+            const translator = createTranslator({
+                messages,
+                locale: 'fr',
+                throwWhenNotFound: false,
+            });
+
+            expect(translator.trans('message.id')).toEqual('message.id');
         });
 
         test('missing message should throw an error if `throwWhenNotFound` is true', () => {
-            throwWhenNotFound(true);
-            setLocale('fr');
-
-            const MESSAGE_IN_ANOTHER_DOMAIN: Message<{ security: { parameters: NoParametersType } }, 'en'> = {
-                id: 'Invalid credentials.',
-                translations: {
-                    messages: {
-                        en: 'Invalid credentials.',
+            const messages: {
+                'message.id': Message<{ security: { parameters: NoParametersType } }, 'en'>;
+            } = {
+                'message.id': {
+                    translations: {
+                        messages: {
+                            en: 'Invalid credentials.',
+                        },
                     },
                 },
             };
 
+            const translator = createTranslator({
+                messages,
+                locale: 'fr',
+                throwWhenNotFound: true,
+            });
+
             expect(() => {
-                trans(MESSAGE_IN_ANOTHER_DOMAIN);
-            }).toThrow(`No translation message found with id "Invalid credentials.".`);
+                translator.trans('message.id');
+            }).toThrow(`No translation message found with id "message.id".`);
         });
 
         test('message from intl domain should be prioritized over its non-intl equivalent', () => {
-            const MESSAGE: Message<
-                { 'messages+intl-icu': { parameters: NoParametersType }; messages: { parameters: NoParametersType } },
-                'en'
-            > = {
-                id: 'message',
-                translations: {
-                    'messages+intl-icu': {
-                        en: 'A intl message',
+            const messages: {
+                message: Message<
+                    {
+                        'messages+intl-icu': { parameters: NoParametersType };
+                        messages: { parameters: NoParametersType };
                     },
-                    messages: {
-                        en: 'A basic message',
+                    'en'
+                >;
+            } = {
+                message: {
+                    translations: {
+                        'messages+intl-icu': {
+                            en: 'A intl message',
+                        },
+                        messages: {
+                            en: 'A basic message',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE)).toEqual('A intl message');
-            expect(trans(MESSAGE, {})).toEqual('A intl message');
-            expect(trans(MESSAGE, {}, 'messages')).toEqual('A intl message');
-            expect(trans(MESSAGE, {}, 'messages', 'en')).toEqual('A intl message');
+            expect(translator.trans('message')).toEqual('A intl message');
+            expect(translator.trans('message', {})).toEqual('A intl message');
+            expect(translator.trans('message', {}, 'messages')).toEqual('A intl message');
+            expect(translator.trans('message', {}, 'messages', 'en')).toEqual('A intl message');
         });
 
         test('fallback behavior', () => {
-            setLocaleFallbacks({ fr_FR: 'fr', fr: 'en', en_US: 'en', en_GB: 'en', de_DE: 'de', de: 'en' });
-
-            const MESSAGE: Message<{ messages: { parameters: NoParametersType } }, 'en' | 'en_US' | 'fr'> = {
-                id: 'message',
-                translations: {
-                    messages: {
-                        en: 'A message in english',
-                        en_US: 'A message in english (US)',
-                        fr: 'Un message en français',
+            const messages: {
+                message: Message<{ messages: { parameters: NoParametersType } }, 'en' | 'en_US' | 'fr'>;
+                message_intl: Message<{ messages: { parameters: NoParametersType } }, 'en' | 'en_US' | 'fr'>;
+                message_french_only: Message<{ messages: { parameters: NoParametersType } }, 'fr'>;
+            } = {
+                message: {
+                    translations: {
+                        messages: {
+                            en: 'A message in english',
+                            en_US: 'A message in english (US)',
+                            fr: 'Un message en français',
+                        },
                     },
                 },
-            };
-
-            const MESSAGE_INTL: Message<{ messages: { parameters: NoParametersType } }, 'en' | 'en_US' | 'fr'> = {
-                id: 'message_intl',
-                translations: {
-                    messages: {
-                        en: 'A intl message in english',
-                        en_US: 'A intl message in english (US)',
-                        fr: 'Un message intl en français',
+                message_intl: {
+                    translations: {
+                        messages: {
+                            en: 'A intl message in english',
+                            en_US: 'A intl message in english (US)',
+                            fr: 'Un message intl en français',
+                        },
+                    },
+                },
+                message_french_only: {
+                    translations: {
+                        messages: {
+                            fr: 'Un message en français uniquement',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({
+                messages,
+                localeFallbacks: {
+                    fr_FR: 'fr',
+                    fr: 'en',
+                    en_US: 'en',
+                    en_GB: 'en',
+                    de_DE: 'de',
+                    de: 'en',
+                },
+            });
+
+            expect(translator.trans('message', {}, 'messages', 'en')).toEqual('A message in english');
+            expect(translator.trans('message_intl', {}, 'messages', 'en')).toEqual('A intl message in english');
+            expect(translator.trans('message', {}, 'messages', 'en_US')).toEqual('A message in english (US)');
+            expect(translator.trans('message_intl', {}, 'messages', 'en_US')).toEqual('A intl message in english (US)');
+            expect(translator.trans('message', {}, 'messages', 'en_GB' as 'en')).toEqual('A message in english');
+            expect(translator.trans('message_intl', {}, 'messages', 'en_GB' as 'en')).toEqual(
+                'A intl message in english'
+            );
+
+            expect(translator.trans('message', {}, 'messages', 'fr')).toEqual('Un message en français');
+            expect(translator.trans('message_intl', {}, 'messages', 'fr')).toEqual('Un message intl en français');
+            expect(translator.trans('message', {}, 'messages', 'fr_FR' as 'fr')).toEqual('Un message en français');
+            expect(translator.trans('message_intl', {}, 'messages', 'fr_FR' as 'fr')).toEqual(
+                'Un message intl en français'
+            );
+
+            expect(translator.trans('message', {}, 'messages', 'de_DE' as 'en')).toEqual('A message in english');
+            expect(translator.trans('message_intl', {}, 'messages', 'de_DE' as 'en')).toEqual(
+                'A intl message in english'
+            );
+
+            expect(translator.trans('message_french_only', {}, 'messages', 'fr')).toEqual(
+                'Un message en français uniquement'
+            );
+            expect(translator.trans('message_french_only', {}, 'messages', 'en' as 'fr')).toEqual(
+                'message_french_only'
+            );
+        });
+    });
 
-            const MESSAGE_FRENCH_ONLY: Message<{ messages: { parameters: NoParametersType } }, 'fr'> = {
-                id: 'message_french_only',
-                translations: {
-                    messages: {
-                        fr: 'Un message en français uniquement',
+    describe('destructuring', () => {
+        test('createTranslator returns expected methods', () => {
+            const messages: {
+                'message.basic': Message<{ messages: { parameters: NoParametersType } }, 'en' | 'fr'>;
+            } = {
+                'message.basic': {
+                    translations: {
+                        messages: {
+                            en: 'A basic message',
+                            fr: 'Un message basique',
+                        },
                     },
                 },
             };
+            const translator = createTranslator({ messages });
 
-            expect(trans(MESSAGE, {}, 'messages', 'en')).toEqual('A message in english');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'en')).toEqual('A intl message in english');
-            expect(trans(MESSAGE, {}, 'messages', 'en_US')).toEqual('A message in english (US)');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'en_US')).toEqual('A intl message in english (US)');
-            expect(trans(MESSAGE, {}, 'messages', 'en_GB' as 'en')).toEqual('A message in english');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'en_GB' as 'en')).toEqual('A intl message in english');
-
-            expect(trans(MESSAGE, {}, 'messages', 'fr')).toEqual('Un message en français');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'fr')).toEqual('Un message intl en français');
-            expect(trans(MESSAGE, {}, 'messages', 'fr_FR' as 'fr')).toEqual('Un message en français');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'fr_FR' as 'fr')).toEqual('Un message intl en français');
+            const { setLocale, getLocale, setThrowWhenNotFound, trans } = translator;
 
-            expect(trans(MESSAGE, {}, 'messages', 'de_DE' as 'en')).toEqual('A message in english');
-            expect(trans(MESSAGE_INTL, {}, 'messages', 'de_DE' as 'en')).toEqual('A intl message in english');
+            expect(typeof setLocale).toBe('function');
+            expect(typeof getLocale).toBe('function');
+            expect(typeof setThrowWhenNotFound).toBe('function');
+            expect(typeof trans).toBe('function');
 
-            expect(trans(MESSAGE_FRENCH_ONLY, {}, 'messages', 'fr')).toEqual('Un message en français uniquement');
-            expect(trans(MESSAGE_FRENCH_ONLY, {}, 'messages', 'en' as 'fr')).toEqual('message_french_only');
+            expect(getLocale()).toEqual('en');
+            expect(trans('message.basic')).toEqual('A basic message');
+            setLocale('fr');
+            expect(getLocale()).toEqual('fr');
+            expect(trans('message.basic')).toEqual('Un message basique');
         });
     });
 });
diff --git a/src/Translator/config/services.php b/src/Translator/config/services.php
index e5eb6bab50b..691b586a679 100644
--- a/src/Translator/config/services.php
+++ b/src/Translator/config/services.php
@@ -31,7 +31,8 @@
 
         ->set('ux.translator.translations_dumper', TranslationsDumper::class)
             ->args([
-                null, // Dump directory
+                abstract_arg('dump_directory'),
+                abstract_arg('dump_typescript'),
                 service('ux.translator.message_parameters.extractor.message_parameters_extractor'),
                 service('ux.translator.message_parameters.extractor.intl_message_parameters_extractor'),
                 service('ux.translator.message_parameters.printer.typescript_message_parameters_printer'),
diff --git a/src/Translator/doc/index.rst b/src/Translator/doc/index.rst
index 0c0da4facc1..35b46433898 100644
--- a/src/Translator/doc/index.rst
+++ b/src/Translator/doc/index.rst
@@ -15,7 +15,7 @@ Installation
 .. note::
 
     This package works best with WebpackEncore. To use it with AssetMapper, see
-    :ref:`Using with AssetMapper <using-with-asset-mapper>`.
+    :ref:`Using with AssetMapper`_.
 
 .. caution::
 
@@ -27,18 +27,6 @@ Install the bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-translator
 
-If you're using WebpackEncore, install your assets and restart Encore (not
-needed if you're using AssetMapper):
-
-.. code-block:: terminal
-
-    $ npm install --force
-    $ npm run watch
-
-.. note::
-
-    For more complex installation scenarios, you can install the JavaScript assets through the `@symfony/ux-translator npm package`_
-
 After installing the bundle, the following file should be created, thanks to the Symfony Flex recipe:
 
 .. code-block:: javascript
@@ -54,13 +42,43 @@ After installing the bundle, the following file should be created, thanks to the
      * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
      */
 
-    import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
-    import { localeFallbacks } from '../var/translations/configuration';
+    import { createTranslator } from '@symfony/ux-translator';
+    import { messages, localeFallbacks } from '../var/translations/index.js';
+
+    const translator = createTranslator({
+        messages,
+        localeFallbacks,
+    });
+
+    // Allow you to use `import { trans } from './translator';` in your assets
+    export const { trans } = translator;
+
+Using with WebpackEncore
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+If you're using WebpackEncore, install your assets and restart Encore (not
+needed if you're using AssetMapper):
 
-    setLocaleFallbacks(localeFallbacks);
+.. code-block:: terminal
 
-    export { trans }
-    export * from '../var/translations';
+    $ npm install --force
+    $ npm run watch
+
+.. note::
+
+    For more complex installation scenarios, you can install the JavaScript assets through the `@symfony/ux-translator npm package`_
+
+Using with AssetMapper
+~~~~~~~~~~~~~~~~~~~~~~
+
+Using this library with AssetMapper is possible.
+
+When installing with AssetMapper, Flex will add a new item to your ``importmap.php``
+file::
+
+    '@symfony/ux-translator' => [
+        'path' => './vendor/symfony/ux-translator/assets/dist/translator_controller.js',
+    ],
 
 Usage
 -----
@@ -68,8 +86,8 @@ Usage
 When warming up the Symfony cache, your translations will be dumped as JavaScript into the ``var/translations/`` directory.
 For a better developer experience, TypeScript types definitions are also generated aside those JavaScript files.
 
-Then, you will be able to import those JavaScript translations in your assets.
-Don't worry about your final bundle size, only the translations you use will be included in your final bundle, thanks to the `tree shaking <https://webpack.js.org/guides/tree-shaking/>`_.
+Then, you will be able to import the ``trans()`` function in your assets and use translation keys as simple strings,
+exactly as you would in your Symfony PHP code.
 
 Configuring the dumped translations
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -88,13 +106,30 @@ including or excluding translation domains in your ``config/packages/ux_translat
             domains: [foo, bar]   # Include only domains 'foo' and 'bar'
             domains: ['!foo', '!bar'] # Include all domains, except 'foo' and 'bar'
 
+Disabling TypeScript types dump
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+By default, TypeScript types definitions are generated alongside the dumped JavaScript translations.
+This provides autocompletion and type-safety when using the ``trans()`` function in your assets.
+
+Even if they are useful when developing, dumping these TypeScript types is useless in production if you use the
+AssetMapper, because these files will never be used.
+
+You can disable the TypeScript types dump by adding the following configuration:
+
+.. code-block:: yaml
+
+    when@prod:
+        ux_translator:
+            dump_typescript: false
 
 Configuring the default locale
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 By default, the default locale is ``en`` (English) that you can configure through many ways (in order of priority):
 
-#. With ``setLocale('de')`` or ``setLocale('de_AT')`` from ``@symfony/ux-translator`` package
+#. By passing the locale directly to the ``createTranslator()`` function
+#. With ``setLocale('de')`` or ``setLocale('de_AT')`` from your ``assets/translator.js`` file
 #. Or with ``<html data-symfony-ux-translator-locale="{{ app.request.locale }}">`` attribute (e.g., ``de_AT`` or ``de`` using Symfony locale format)
 #. Or with ``<html lang="{{ app.request.locale|replace({ '_': '-' }) }}">`` attribute (e.g., ``de-AT`` or ``de`` following the `W3C specification on language codes`_)
 
@@ -103,86 +138,71 @@ Detecting missing translations
 
 By default, the translator will return the translation key if the translation is missing.
 
-You can change this behavior by calling ``throwWhenNotFound(true)``:
+You can change this behavior by calling ``setThrowWhenNotFound(true)``:
 
 .. code-block:: diff
 
       // assets/translator.js
 
-    - import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
-    + import { trans, getLocale, setLocale, setLocaleFallbacks, throwWhenNotFound } from '@symfony/ux-translator';
-      import { localeFallbacks } from '../var/translations/configuration';
+      import { createTranslator } from '@symfony/ux-translator';
+      import { messages, localeFallbacks } from '../var/translations/index.js';
 
-      setLocaleFallbacks(localeFallbacks);
-    + throwWhenNotFound(true)
+      const translator = createTranslator({
+          messages,
+          localeFallbacks,
+    +     throwWhenNotFound: true, // either when creating the translator
+      });
 
-      export { trans }
-      export * from '../var/translations';
+    + // Or later in your code
+      export const { trans, setThrowWhenNotFound } = translator;
 
 Importing and using translations
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-If you use the Symfony Flex recipe, you can import the ``trans()`` function and your translations in your assets from the file ``assets/translator.js``.
+If you use the Symfony Flex recipe, you can import the ``trans()`` function from the file ``assets/translator.js``.
 
-Translations are available as named exports, by using the translation's id transformed in uppercase snake-case (e.g.: ``my.translation`` becomes ``MY_TRANSLATION``),
-so you can import them like this:
+You can then use translation keys as simple strings, exactly as you would in your Symfony PHP code:
 
 .. code-block:: javascript
 
     // assets/my_file.js
 
-    import {
-        trans,
-        TRANSLATION_SIMPLE,
-        TRANSLATION_WITH_PARAMETERS,
-        TRANSLATION_MULTI_DOMAINS,
-        TRANSLATION_MULTI_LOCALES,
-    } from './translator';
+    import { trans } from './translator';
 
     // No parameters, uses the default domain ("messages") and the default locale
-    trans(TRANSLATION_SIMPLE);
+    trans('translation.simple');
 
     // Two parameters "count" and "foo", uses the default domain ("messages") and the default locale
-    trans(TRANSLATION_WITH_PARAMETERS, { count: 123, foo: 'bar' });
+    trans('translation.with.parameters', { count: 123, foo: 'bar' });
 
     // No parameters, uses the default domain ("messages") and the default locale
-    trans(TRANSLATION_MULTI_DOMAINS);
+    trans('translation.multi.domains');
     // Same as above, but uses the "domain2" domain
-    trans(TRANSLATION_MULTI_DOMAINS, {}, 'domain2');
+    trans('translation.multi.domains', {}, 'domain2');
     // Same as above, but uses the "domain3" domain
-    trans(TRANSLATION_MULTI_DOMAINS, {}, 'domain3');
+    trans('translation.multi.domains', {}, 'domain3');
 
     // No parameters, uses the default domain ("messages") and the default locale
-    trans(TRANSLATION_MULTI_LOCALES);
+    trans('translation.multi.locales');
     // Same as above, but uses the "fr" locale
-    trans(TRANSLATION_MULTI_LOCALES, {}, 'messages', 'fr');
+    trans('translation.multi.locales', {}, 'messages', 'fr');
     // Same as above, but uses the "it" locale
-    trans(TRANSLATION_MULTI_LOCALES, {}, 'messages', 'it');
-
-.. _using-with-asset-mapper:
+    trans('translation.multi.locales', {}, 'messages', 'it');
 
-Using with AssetMapper
-----------------------
+You will get autocompletion and type-safety for translation keys, parameters, domains, and locales.
 
-Using this library with AssetMapper is possible, but is currently experimental
-and may not be ready yet for production.
+Q&A
+---
 
-When installing with AssetMapper, Flex will add a few new items to your ``importmap.php``
-file. 2 of the new items are::
+What about bundle size?
+~~~~~~~~~~~~~~~~~~~~~~~
 
-    '@app/translations' => [
-        'path' => 'var/translations/index.js',
-    ],
-    '@app/translations/configuration' => [
-        'path' => 'var/translations/configuration.js',
-    ],
+All your translations (extracted from the configured domains) are included in the generated ``var/translations/index.js`` file,
+which means they will be included in your final JavaScript bundle).
 
-These are then imported in your ``assets/translator.js`` file. This setup is
-very similar to working with WebpackEncore. However, the ``var/translations/index.js``
-file contains *every* translation in your app, which is not ideal for production
-and may even leak translations only meant for admin areas. Encore solves this via
-tree-shaking, but the AssetMapper component does not. There is not, yet, a way to
-solve this properly with the AssetMapper component.
+However, modern build tools, caching strategies, and compression techniques (Brotli, gzip)
+make this negligible in 2025. Additionally, a future feature will allow filtering dumped
+translations by pattern for those who need to further reduce bundle size.
 
 Backward Compatibility promise
 ------------------------------
diff --git a/src/Translator/src/DependencyInjection/Configuration.php b/src/Translator/src/DependencyInjection/Configuration.php
index 5f2e31a3a82..78337407f14 100644
--- a/src/Translator/src/DependencyInjection/Configuration.php
+++ b/src/Translator/src/DependencyInjection/Configuration.php
@@ -28,7 +28,14 @@ public function getConfigTreeBuilder(): TreeBuilder
         $rootNode = $treeBuilder->getRootNode();
         $rootNode
             ->children()
-                ->scalarNode('dump_directory')->defaultValue('%kernel.project_dir%/var/translations')->end()
+                ->scalarNode('dump_directory')
+                    ->info('The directory where translations and TypeScript types are dumped.')
+                    ->defaultValue('%kernel.project_dir%/var/translations')
+                ->end()
+                ->booleanNode('dump_typescript')
+                    ->info('Control whether TypeScript types are dumped alongside translations. Disable this if you do not use TypeScript (e.g. in production when using AssetMapper).')
+                    ->defaultTrue()
+                ->end()
                 ->arrayNode('domains')
                     ->info('List of domains to include/exclude from the generated translations. Prefix with a `!` to exclude a domain.')
                     ->children()
diff --git a/src/Translator/src/DependencyInjection/UxTranslatorExtension.php b/src/Translator/src/DependencyInjection/UxTranslatorExtension.php
index 3ebfbe518e9..fea927ed6fb 100644
--- a/src/Translator/src/DependencyInjection/UxTranslatorExtension.php
+++ b/src/Translator/src/DependencyInjection/UxTranslatorExtension.php
@@ -37,6 +37,7 @@ public function load(array $configs, ContainerBuilder $container): void
 
         $dumperDefinition = $container->getDefinition('ux.translator.translations_dumper');
         $dumperDefinition->setArgument(0, $config['dump_directory']);
+        $dumperDefinition->setArgument(1, $config['dump_typescript']);
 
         if (isset($config['domains'])) {
             $method = 'inclusive' === $config['domains']['type'] ? 'addIncludedDomain' : 'addExcludedDomain';
diff --git a/src/Translator/src/MessageParameters/Extractor/IntlMessageParametersExtractor.php b/src/Translator/src/MessageParameters/Extractor/IntlMessageParametersExtractor.php
index 091e27892d9..6357cd30f44 100644
--- a/src/Translator/src/MessageParameters/Extractor/IntlMessageParametersExtractor.php
+++ b/src/Translator/src/MessageParameters/Extractor/IntlMessageParametersExtractor.php
@@ -23,6 +23,11 @@ final class IntlMessageParametersExtractor implements ExtractorInterface
 {
     public function extract(string $message): array
     {
+        // Early return if there is no parameter-like pattern in the message
+        if (!str_contains($message, '{')) {
+            return [];
+        }
+
         $parameters = [];
 
         $intlMessageParser = new IntlMessageParser($message);
diff --git a/src/Translator/src/TranslationsDumper.php b/src/Translator/src/TranslationsDumper.php
index 811a0c00fdf..2b09cbfffe9 100644
--- a/src/Translator/src/TranslationsDumper.php
+++ b/src/Translator/src/TranslationsDumper.php
@@ -17,8 +17,6 @@
 use Symfony\UX\Translator\MessageParameters\Extractor\MessageParametersExtractor;
 use Symfony\UX\Translator\MessageParameters\Printer\TypeScriptMessageParametersPrinter;
 
-use function Symfony\Component\String\s;
-
 /**
  * @author Hugo Alliaume <hugo@alliau.me>
  *
@@ -34,10 +32,10 @@ class TranslationsDumper
 {
     private array $excludedDomains = [];
     private array $includedDomains = [];
-    private array $alreadyGeneratedConstants = [];
 
     public function __construct(
         private string $dumpDir,
+        private bool $dumpTypeScript,
         private MessageParametersExtractor $messageParametersExtractor,
         private IntlMessageParametersExtractor $intlMessageParametersExtractor,
         private TypeScriptMessageParametersPrinter $typeScriptMessageParametersPrinter,
@@ -48,44 +46,59 @@ public function __construct(
     public function dump(MessageCatalogueInterface ...$catalogues): void
     {
         $this->filesystem->mkdir($this->dumpDir);
-        $this->filesystem->remove($this->dumpDir.'/index.js');
-        $this->filesystem->remove($this->dumpDir.'/index.d.ts');
-        $this->filesystem->remove($this->dumpDir.'/configuration.js');
-        $this->filesystem->remove($this->dumpDir.'/configuration.d.ts');
+        $this->filesystem->remove($fileIndexJs = $this->dumpDir.'/index.js');
+        $this->filesystem->remove($fileIndexDts = $this->dumpDir.'/index.d.ts');
 
-        $translationsJs = '';
-        $translationsTs = "import { Message, NoParametersType } from '@symfony/ux-translator';\n\n";
+        $this->filesystem->appendToFile(
+            $fileIndexJs,
+            \sprintf(<<<'JS'
+                // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
 
-        foreach ($this->getTranslations(...$catalogues) as $translationId => $translationsByDomainAndLocale) {
-            $constantName = $this->generateConstantName($translationId);
-
-            $translationsJs .= \sprintf(
-                "export const %s = %s;\n",
-                $constantName,
-                json_encode([
-                    'id' => $translationId,
-                    'translations' => $translationsByDomainAndLocale,
-                ], \JSON_THROW_ON_ERROR),
-            );
-            $translationsTs .= \sprintf(
-                "export declare const %s: %s;\n",
-                $constantName,
-                $this->getTranslationsTypeScriptTypeDefinition($translationsByDomainAndLocale)
+                export const localeFallbacks = %s;
+                export const messages = {
+
+                JS,
+                json_encode($this->getLocaleFallbacks(...$catalogues), \JSON_THROW_ON_ERROR)
+            ));
+
+        if ($this->dumpTypeScript) {
+            $this->filesystem->appendToFile(
+                $fileIndexDts,
+                <<<'TS'
+                    // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
+                    import { Message, NoParametersType, LocaleType } from '@symfony/ux-translator';
+
+                    export declare const localeFallbacks: Record<LocaleType, LocaleType>;
+                    export declare const messages: {
+
+                    TS
             );
         }
 
-        $this->filesystem->dumpFile($this->dumpDir.'/index.js', $translationsJs);
-        $this->filesystem->dumpFile($this->dumpDir.'/index.d.ts', $translationsTs);
-        $this->filesystem->dumpFile($this->dumpDir.'/configuration.js', \sprintf(
-            "export const localeFallbacks = %s;\n",
-            json_encode($this->getLocaleFallbacks(...$catalogues), \JSON_THROW_ON_ERROR)
-        ));
-        $this->filesystem->dumpFile($this->dumpDir.'/configuration.d.ts', <<<'TS'
-            import { LocaleType } from '@symfony/ux-translator';
-
-            export declare const localeFallbacks: Record<LocaleType, LocaleType>;
-            TS
-        );
+        foreach ($this->getTranslations(...$catalogues) as $translationId => $translationsByDomainAndLocale) {
+            $translationId = str_replace('"', '\\"', $translationId);
+            $this->filesystem->appendToFile($fileIndexJs, \sprintf(
+                '    "%s": %s,%s',
+                $translationId,
+                json_encode(['translations' => $translationsByDomainAndLocale], \JSON_THROW_ON_ERROR),
+                "\n"
+            ));
+
+            if ($this->dumpTypeScript) {
+                $this->filesystem->appendToFile($fileIndexDts, \sprintf(
+                    '    "%s": %s;%s',
+                    $translationId,
+                    $this->getTranslationsTypeScriptTypeDefinition($translationsByDomainAndLocale),
+                    "\n"
+                ));
+            }
+        }
+
+        $this->filesystem->appendToFile($fileIndexJs, '};'."\n");
+
+        if ($this->dumpTypeScript) {
+            $this->filesystem->appendToFile($fileIndexDts, '};'."\n");
+        }
     }
 
     public function addExcludedDomain(string $domain): void
@@ -182,18 +195,4 @@ private function getLocaleFallbacks(MessageCatalogueInterface ...$catalogues): a
 
         return $localesFallbacks;
     }
-
-    private function generateConstantName(string $translationId): string
-    {
-        $translationId = s($translationId)->ascii()->snake()->upper()->replaceMatches('/^(\d)/', '_$1')->toString();
-        $prefix = 0;
-        do {
-            $constantName = $translationId.($prefix > 0 ? '_'.$prefix : '');
-            ++$prefix;
-        } while ($this->alreadyGeneratedConstants[$constantName] ?? false);
-
-        $this->alreadyGeneratedConstants[$constantName] = true;
-
-        return $constantName;
-    }
 }
diff --git a/src/Translator/tests/Functional/DumpEnabledLocalesTest.php b/src/Translator/tests/Functional/DumpEnabledLocalesTest.php
index 0083468af25..2d241eaace7 100644
--- a/src/Translator/tests/Functional/DumpEnabledLocalesTest.php
+++ b/src/Translator/tests/Functional/DumpEnabledLocalesTest.php
@@ -35,34 +35,28 @@ public function testShouldDumpOnlyEnabledLocales()
 
         self::assertStringEqualsFile(
             $translationsDumpDir.'/index.js',
-            <<<JAVASCRIPT
-                export const SYMFONY_UX_GREAT = {"id":"symfony_ux.great","translations":{"messages":{"en":"Symfony UX is awesome","fr":"Symfony UX est g\u00e9nial"}}};
+            <<<JS
+                // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
 
-                JAVASCRIPT
-        );
-        self::assertStringEqualsFile(
-            $translationsDumpDir.'/index.d.ts',
-            <<<TYPESCRIPT
-                import { Message, NoParametersType } from '@symfony/ux-translator';
-
-                export declare const SYMFONY_UX_GREAT: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-
-                TYPESCRIPT
-        );
-        self::assertStringEqualsFile(
-            $translationsDumpDir.'/configuration.js',
-            <<<JAVASCRIPT
                 export const localeFallbacks = {"en":null,"fr":"en"};
+                export const messages = {
+                    "symfony_ux.great": {"translations":{"messages":{"en":"Symfony UX is awesome","fr":"Symfony UX est g\u00e9nial"}}},
+                };
 
-                JAVASCRIPT
+                JS
         );
         self::assertStringEqualsFile(
-            $translationsDumpDir.'/configuration.d.ts',
-            <<<TYPESCRIPT
-                import { LocaleType } from '@symfony/ux-translator';
+            $translationsDumpDir.'/index.d.ts',
+            <<<TS
+                // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
+                import { Message, NoParametersType, LocaleType } from '@symfony/ux-translator';
 
                 export declare const localeFallbacks: Record<LocaleType, LocaleType>;
-                TYPESCRIPT
+                export declare const messages: {
+                    "symfony_ux.great": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+                };
+
+                TS
         );
     }
 }
diff --git a/src/Translator/tests/TranslationsDumperTest.php b/src/Translator/tests/TranslationsDumperTest.php
index 679635a8b63..9091e672abc 100644
--- a/src/Translator/tests/TranslationsDumperTest.php
+++ b/src/Translator/tests/TranslationsDumperTest.php
@@ -22,7 +22,6 @@
 class TranslationsDumperTest extends TestCase
 {
     protected static $translationsDumpDir;
-    private TranslationsDumper $translationsDumper;
 
     public static function setUpBeforeClass(): void
     {
@@ -34,81 +33,112 @@ public static function tearDownAfterClass(): void
         @rmdir(self::$translationsDumpDir);
     }
 
-    protected function setUp(): void
+    public function testDump()
     {
-        $this->translationsDumper = new TranslationsDumper(
+        $translationsDumper = new TranslationsDumper(
             self::$translationsDumpDir,
+            true,
             new MessageParametersExtractor(),
             new IntlMessageParametersExtractor(),
             new TypeScriptMessageParametersPrinter(),
             new Filesystem(),
         );
+        $translationsDumper->dump(...self::getMessageCatalogues());
+
+        $this->assertFileExists(self::$translationsDumpDir.'/index.js');
+        $this->assertFileExists(self::$translationsDumpDir.'/index.d.ts');
+
+        $this->assertStringEqualsFile(self::$translationsDumpDir.'/index.js', <<<'JS'
+            // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
+
+            export const localeFallbacks = {"en":null,"fr":null};
+            export const messages = {
+                "notification.comment_created": {"translations":{"messages+intl-icu":{"en":"Your post received a comment!","fr":"Votre article a re\u00e7u un commentaire !"}}},
+                "notification.comment_created.description": {"translations":{"messages+intl-icu":{"en":"Your post \"{title}\" has received a new comment. You can read the comment by following <a href=\"{link}\">this link<\/a>","fr":"Votre article \"{title}\" a re\u00e7u un nouveau commentaire. Vous pouvez lire le commentaire en suivant <a href=\"{link}\">ce lien<\/a>"}}},
+                "post.num_comments": {"translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}}","fr":"{count, plural, one {# commentaire} other {# commentaires}}"},"foobar":{"en":"There is 1 comment|There are %count% comments","fr":"Il y a 1 comment|Il y a %count% comments"}}},
+                "post.num_comments.": {"translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}} (should not conflict with the previous one.)","fr":"{count, plural, one {# commentaire} other {# commentaires}} (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}},
+                "post.num_comments..": {"translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}} (should not conflict with the previous one.)","fr":"{count, plural, one {# commentaire} other {# commentaires}} (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}},
+                "symfony.great": {"translations":{"messages":{"en":"Symfony is awesome!","fr":"Symfony est g\u00e9nial !"}}},
+                "symfony.what": {"translations":{"messages":{"en":"Symfony is %what%!","fr":"Symfony est %what%!"}}},
+                "symfony.what!": {"translations":{"messages":{"en":"Symfony is %what%! (should not conflict with the previous one.)","fr":"Symfony est %what%! (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}},
+                "symfony.what.": {"translations":{"messages":{"en":"Symfony is %what%. (should also not conflict with the previous one.)","fr":"Symfony est %what%. (ne doit pas non plus rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}},
+                "apples.count.0": {"translations":{"messages":{"en":"There is 1 apple|There are %count% apples","fr":"Il y a 1 pomme|Il y a %count% pommes"}}},
+                "apples.count.1": {"translations":{"messages":{"en":"{1} There is one apple|]1,Inf] There are %count% apples","fr":"{1} Il y a une pomme|]1,Inf] Il y a %count% pommes"}}},
+                "apples.count.2": {"translations":{"messages":{"en":"{0} There are no apples|{1} There is one apple|]1,Inf] There are %count% apples","fr":"{0} Il n'y a pas de pommes|{1} Il y a une pomme|]1,Inf] Il y a %count% pommes"}}},
+                "apples.count.3": {"translations":{"messages":{"en":"one: There is one apple|more: There are %count% apples","fr":"one: Il y a une pomme|more: Il y a %count% pommes"}}},
+                "apples.count.4": {"translations":{"messages":{"en":"one: There is one apple|more: There are more than one apple","fr":"one: Il y a une pomme|more: Il y a plus d'une pomme"}}},
+                "what.count.1": {"translations":{"messages":{"en":"{1} There is one %what%|]1,Inf] There are %count% %what%","fr":"{1} Il y a une %what%|]1,Inf] Il y a %count% %what%"}}},
+                "what.count.2": {"translations":{"messages":{"en":"{0} There are no %what%|{1} There is one %what%|]1,Inf] There are %count% %what%","fr":"{0} Il n'y a pas de %what%|{1} Il y a une %what%|]1,Inf] Il y a %count% %what%"}}},
+                "what.count.3": {"translations":{"messages":{"en":"one: There is one %what%|more: There are %count% %what%","fr":"one: Il y a une %what%|more: Il y a %count% %what%"}}},
+                "what.count.4": {"translations":{"messages":{"en":"one: There is one %what%|more: There are more than one %what%","fr":"one: Il y a une %what%|more: Il y a more than one %what%"}}},
+                "animal.dog-cat": {"translations":{"messages":{"en":"Dog and cat","fr":"Chien et chat"}}},
+                "animal.dog_cat": {"translations":{"messages":{"en":"Dog and cat (should not conflict with the previous one)","fr":"Chien et chat (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}},
+                "0starts.with.numeric": {"translations":{"messages":{"en":"Key starts with numeric char","fr":"La touche commence par un caract\u00e8re num\u00e9rique"}}},
+            };
+
+            JS);
+
+        $this->assertStringEqualsFile(self::$translationsDumpDir.'/index.d.ts', <<<'TS'
+            // This file is auto-generated by the Symfony UX Translator. Do not edit it manually.
+            import { Message, NoParametersType, LocaleType } from '@symfony/ux-translator';
+
+            export declare const localeFallbacks: Record<LocaleType, LocaleType>;
+            export declare const messages: {
+                "notification.comment_created": Message<{ 'messages+intl-icu': { parameters: NoParametersType } }, 'en'|'fr'>;
+                "notification.comment_created.description": Message<{ 'messages+intl-icu': { parameters: { 'title': string, 'link': string } } }, 'en'|'fr'>;
+                "post.num_comments": Message<{ 'messages+intl-icu': { parameters: { 'count': number } }, 'foobar': { parameters: { '%count%': number } } }, 'en'|'fr'>;
+                "post.num_comments.": Message<{ 'messages+intl-icu': { parameters: { 'count': number } } }, 'en'|'fr'>;
+                "post.num_comments..": Message<{ 'messages+intl-icu': { parameters: { 'count': number } } }, 'en'|'fr'>;
+                "symfony.great": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+                "symfony.what": Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
+                "symfony.what!": Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
+                "symfony.what.": Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
+                "apples.count.0": Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
+                "apples.count.1": Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
+                "apples.count.2": Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
+                "apples.count.3": Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
+                "apples.count.4": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+                "what.count.1": Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
+                "what.count.2": Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
+                "what.count.3": Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
+                "what.count.4": Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
+                "animal.dog-cat": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+                "animal.dog_cat": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+                "0starts.with.numeric": Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
+            };
+
+            TS);
     }
 
-    public function testDump()
+    public function testShouldNotDumpTypeScriptTypes()
     {
-        $this->translationsDumper->dump(...self::getMessageCatalogues());
+        $translationsDumper = new TranslationsDumper(
+            self::$translationsDumpDir,
+            false,
+            new MessageParametersExtractor(),
+            new IntlMessageParametersExtractor(),
+            new TypeScriptMessageParametersPrinter(),
+            new Filesystem(),
+        );
+        $translationsDumper->dump(...self::getMessageCatalogues());
 
         $this->assertFileExists(self::$translationsDumpDir.'/index.js');
-        $this->assertFileExists(self::$translationsDumpDir.'/index.d.ts');
-
-        $this->assertStringEqualsFile(self::$translationsDumpDir.'/index.js', <<<'JAVASCRIPT'
-            export const NOTIFICATION_COMMENT_CREATED = {"id":"notification.comment_created","translations":{"messages+intl-icu":{"en":"Your post received a comment!","fr":"Votre article a re\u00e7u un commentaire !"}}};
-            export const NOTIFICATION_COMMENT_CREATED_DESCRIPTION = {"id":"notification.comment_created.description","translations":{"messages+intl-icu":{"en":"Your post \"{title}\" has received a new comment. You can read the comment by following <a href=\"{link}\">this link<\/a>","fr":"Votre article \"{title}\" a re\u00e7u un nouveau commentaire. Vous pouvez lire le commentaire en suivant <a href=\"{link}\">ce lien<\/a>"}}};
-            export const POST_NUM_COMMENTS = {"id":"post.num_comments","translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}}","fr":"{count, plural, one {# commentaire} other {# commentaires}}"},"foobar":{"en":"There is 1 comment|There are %count% comments","fr":"Il y a 1 comment|Il y a %count% comments"}}};
-            export const POST_NUM_COMMENTS_1 = {"id":"post.num_comments.","translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}} (should not conflict with the previous one.)","fr":"{count, plural, one {# commentaire} other {# commentaires}} (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}};
-            export const POST_NUM_COMMENTS_2 = {"id":"post.num_comments..","translations":{"messages+intl-icu":{"en":"{count, plural, one {# comment} other {# comments}} (should not conflict with the previous one.)","fr":"{count, plural, one {# commentaire} other {# commentaires}} (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}};
-            export const SYMFONY_GREAT = {"id":"symfony.great","translations":{"messages":{"en":"Symfony is awesome!","fr":"Symfony est g\u00e9nial !"}}};
-            export const SYMFONY_WHAT = {"id":"symfony.what","translations":{"messages":{"en":"Symfony is %what%!","fr":"Symfony est %what%!"}}};
-            export const SYMFONY_WHAT_1 = {"id":"symfony.what!","translations":{"messages":{"en":"Symfony is %what%! (should not conflict with the previous one.)","fr":"Symfony est %what%! (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}};
-            export const SYMFONY_WHAT_2 = {"id":"symfony.what.","translations":{"messages":{"en":"Symfony is %what%. (should also not conflict with the previous one.)","fr":"Symfony est %what%. (ne doit pas non plus rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}};
-            export const APPLES_COUNT0 = {"id":"apples.count.0","translations":{"messages":{"en":"There is 1 apple|There are %count% apples","fr":"Il y a 1 pomme|Il y a %count% pommes"}}};
-            export const APPLES_COUNT1 = {"id":"apples.count.1","translations":{"messages":{"en":"{1} There is one apple|]1,Inf] There are %count% apples","fr":"{1} Il y a une pomme|]1,Inf] Il y a %count% pommes"}}};
-            export const APPLES_COUNT2 = {"id":"apples.count.2","translations":{"messages":{"en":"{0} There are no apples|{1} There is one apple|]1,Inf] There are %count% apples","fr":"{0} Il n'y a pas de pommes|{1} Il y a une pomme|]1,Inf] Il y a %count% pommes"}}};
-            export const APPLES_COUNT3 = {"id":"apples.count.3","translations":{"messages":{"en":"one: There is one apple|more: There are %count% apples","fr":"one: Il y a une pomme|more: Il y a %count% pommes"}}};
-            export const APPLES_COUNT4 = {"id":"apples.count.4","translations":{"messages":{"en":"one: There is one apple|more: There are more than one apple","fr":"one: Il y a une pomme|more: Il y a plus d'une pomme"}}};
-            export const WHAT_COUNT1 = {"id":"what.count.1","translations":{"messages":{"en":"{1} There is one %what%|]1,Inf] There are %count% %what%","fr":"{1} Il y a une %what%|]1,Inf] Il y a %count% %what%"}}};
-            export const WHAT_COUNT2 = {"id":"what.count.2","translations":{"messages":{"en":"{0} There are no %what%|{1} There is one %what%|]1,Inf] There are %count% %what%","fr":"{0} Il n'y a pas de %what%|{1} Il y a une %what%|]1,Inf] Il y a %count% %what%"}}};
-            export const WHAT_COUNT3 = {"id":"what.count.3","translations":{"messages":{"en":"one: There is one %what%|more: There are %count% %what%","fr":"one: Il y a une %what%|more: Il y a %count% %what%"}}};
-            export const WHAT_COUNT4 = {"id":"what.count.4","translations":{"messages":{"en":"one: There is one %what%|more: There are more than one %what%","fr":"one: Il y a une %what%|more: Il y a more than one %what%"}}};
-            export const ANIMAL_DOG_CAT = {"id":"animal.dog-cat","translations":{"messages":{"en":"Dog and cat","fr":"Chien et chat"}}};
-            export const ANIMAL_DOG_CAT_1 = {"id":"animal.dog_cat","translations":{"messages":{"en":"Dog and cat (should not conflict with the previous one)","fr":"Chien et chat (ne doit pas rentrer en conflit avec la traduction pr\u00e9c\u00e9dente)"}}};
-            export const _0STARTS_WITH_NUMERIC = {"id":"0starts.with.numeric","translations":{"messages":{"en":"Key starts with numeric char","fr":"La touche commence par un caract\u00e8re num\u00e9rique"}}};
-
-            JAVASCRIPT);
-
-        $this->assertStringEqualsFile(self::$translationsDumpDir.'/index.d.ts', <<<'TYPESCRIPT'
-            import { Message, NoParametersType } from '@symfony/ux-translator';
-
-            export declare const NOTIFICATION_COMMENT_CREATED: Message<{ 'messages+intl-icu': { parameters: NoParametersType } }, 'en'|'fr'>;
-            export declare const NOTIFICATION_COMMENT_CREATED_DESCRIPTION: Message<{ 'messages+intl-icu': { parameters: { 'title': string, 'link': string } } }, 'en'|'fr'>;
-            export declare const POST_NUM_COMMENTS: Message<{ 'messages+intl-icu': { parameters: { 'count': number } }, 'foobar': { parameters: { '%count%': number } } }, 'en'|'fr'>;
-            export declare const POST_NUM_COMMENTS_1: Message<{ 'messages+intl-icu': { parameters: { 'count': number } } }, 'en'|'fr'>;
-            export declare const POST_NUM_COMMENTS_2: Message<{ 'messages+intl-icu': { parameters: { 'count': number } } }, 'en'|'fr'>;
-            export declare const SYMFONY_GREAT: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-            export declare const SYMFONY_WHAT: Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
-            export declare const SYMFONY_WHAT_1: Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
-            export declare const SYMFONY_WHAT_2: Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
-            export declare const APPLES_COUNT0: Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
-            export declare const APPLES_COUNT1: Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
-            export declare const APPLES_COUNT2: Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
-            export declare const APPLES_COUNT3: Message<{ 'messages': { parameters: { '%count%': number } } }, 'en'|'fr'>;
-            export declare const APPLES_COUNT4: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-            export declare const WHAT_COUNT1: Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
-            export declare const WHAT_COUNT2: Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
-            export declare const WHAT_COUNT3: Message<{ 'messages': { parameters: { '%what%': string, '%count%': number } } }, 'en'|'fr'>;
-            export declare const WHAT_COUNT4: Message<{ 'messages': { parameters: { '%what%': string } } }, 'en'|'fr'>;
-            export declare const ANIMAL_DOG_CAT: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-            export declare const ANIMAL_DOG_CAT_1: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-            export declare const _0STARTS_WITH_NUMERIC: Message<{ 'messages': { parameters: NoParametersType } }, 'en'|'fr'>;
-
-            TYPESCRIPT);
+        $this->assertFileDoesNotExist(self::$translationsDumpDir.'/index.d.ts');
     }
 
     public function testDumpWithExcludedDomains()
     {
-        $this->translationsDumper->addExcludedDomain('foobar');
-        $this->translationsDumper->dump(...$this->getMessageCatalogues());
+        $translationsDumper = new TranslationsDumper(
+            self::$translationsDumpDir,
+            true,
+            new MessageParametersExtractor(),
+            new IntlMessageParametersExtractor(),
+            new TypeScriptMessageParametersPrinter(),
+            new Filesystem(),
+        );
+        $translationsDumper->addExcludedDomain('foobar');
+
+        $translationsDumper->dump(...self::getMessageCatalogues());
 
         $this->assertFileExists(self::$translationsDumpDir.'/index.js');
         $this->assertStringNotContainsString('foobar', file_get_contents(self::$translationsDumpDir.'/index.js'));
@@ -116,8 +146,17 @@ public function testDumpWithExcludedDomains()
 
     public function testDumpIncludedDomains()
     {
-        $this->translationsDumper->addIncludedDomain('messages');
-        $this->translationsDumper->dump(...$this->getMessageCatalogues());
+        $translationsDumper = new TranslationsDumper(
+            self::$translationsDumpDir,
+            true,
+            new MessageParametersExtractor(),
+            new IntlMessageParametersExtractor(),
+            new TypeScriptMessageParametersPrinter(),
+            new Filesystem(),
+        );
+        $translationsDumper->addIncludedDomain('messages');
+
+        $translationsDumper->dump(...self::getMessageCatalogues());
 
         $this->assertFileExists(self::$translationsDumpDir.'/index.js');
         $this->assertStringNotContainsString('foobar', file_get_contents(self::$translationsDumpDir.'/index.js'));
@@ -127,16 +166,35 @@ public function testSetBothIncludedAndExcludedDomains()
     {
         $this->expectException(\LogicException::class);
         $this->expectExceptionMessage('You cannot set both "excluded_domains" and "included_domains" at the same time.');
-        $this->translationsDumper->addIncludedDomain('foobar');
-        $this->translationsDumper->addExcludedDomain('messages');
+
+        $translationsDumper = new TranslationsDumper(
+            self::$translationsDumpDir,
+            true,
+            new MessageParametersExtractor(),
+            new IntlMessageParametersExtractor(),
+            new TypeScriptMessageParametersPrinter(),
+            new Filesystem(),
+        );
+
+        $translationsDumper->addIncludedDomain('foobar');
+        $translationsDumper->addExcludedDomain('messages');
     }
 
     public function testSetBothExcludedAndIncludedDomains()
     {
         $this->expectException(\LogicException::class);
         $this->expectExceptionMessage('You cannot set both "excluded_domains" and "included_domains" at the same time.');
-        $this->translationsDumper->addExcludedDomain('foobar');
-        $this->translationsDumper->addIncludedDomain('messages');
+
+        $translationsDumper = new TranslationsDumper(
+            self::$translationsDumpDir,
+            true,
+            new MessageParametersExtractor(),
+            new IntlMessageParametersExtractor(),
+            new TypeScriptMessageParametersPrinter(),
+            new Filesystem(),
+        );
+        $translationsDumper->addExcludedDomain('foobar');
+        $translationsDumper->addIncludedDomain('messages');
     }
 
     /**
diff --git a/src/Translator/tests/bootstrap.php b/src/Translator/tests/bootstrap.php
index 1172565510f..7c374094180 100644
--- a/src/Translator/tests/bootstrap.php
+++ b/src/Translator/tests/bootstrap.php
@@ -20,6 +20,7 @@
 
 $kernel = new FrameworkAppKernel('test', true);
 $application = new Application($kernel);
+$application->setAutoExit(false);
 
 // Trigger Symfony Translator and UX Translator cache warmers
-$application->run(new StringInput('cache:clear'));
+$application->run(new StringInput('cache:clear -vv'));
diff --git a/src/Turbo/.gitignore b/src/Turbo/.gitignore
index d365c4b922b..a1243dc7e5f 100644
--- a/src/Turbo/.gitignore
+++ b/src/Turbo/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /drivers/
@@ -8,5 +9,3 @@
 /tests/app/public/assets/
 /tests/app/public/build/
 /tests/app/var/
-/vendor/
-node_modules/
diff --git a/src/Turbo/assets/test/browser/placeholder.test.ts b/src/Turbo/assets/test/browser/placeholder.test.ts
deleted file mode 100644
index f5f1d10f22e..00000000000
--- a/src/Turbo/assets/test/browser/placeholder.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('Can see homepage', async ({ page }) => {
-    await page.goto('/');
-
-    await expect(page.getByText("Symfony UX's E2E App")).toBeVisible();
-});
diff --git a/src/Turbo/assets/test/browser/turbo.test.ts b/src/Turbo/assets/test/browser/turbo.test.ts
new file mode 100644
index 00000000000..40b633b307a
--- /dev/null
+++ b/src/Turbo/assets/test/browser/turbo.test.ts
@@ -0,0 +1,89 @@
+import { expect, type Page, test } from '@playwright/test';
+
+/**
+ * Inject a marker in the window object to detect full page reloads.
+ * If the page is fully reloaded, this marker will disappear.
+ */
+async function markPageAsLoaded(page: Page): Promise<void> {
+    await page.evaluate(() => {
+        (window as any).__turboTestMarker = 'initial-load';
+    });
+}
+
+/**
+ * Verify that the page was not fully reloaded by checking if the marker is still present.
+ * This proves that Turbo handled the navigation without a full page reload.
+ */
+async function expectNoFullPageReload(page: Page): Promise<void> {
+    const markerStillPresent = await page.evaluate(() => {
+        return (window as any).__turboTestMarker === 'initial-load';
+    });
+    expect(markerStillPresent).toBe(true);
+}
+
+test('Can navigate with Turbo Drive without full page reload', async ({ page }) => {
+    await page.goto('/ux-turbo/drive');
+    await markPageAsLoaded(page);
+
+    // Check initial page content
+    await expect(page.locator('h2')).toContainText('Turbo Drive Navigation - Page 1');
+    const initialTime = await page.locator('#page-load-time').textContent();
+
+    // Navigate to page 2
+    await page.click('#navigate-to-page-2');
+
+    // Wait for navigation to complete
+    await expect(page.locator('h2')).toContainText('Turbo Drive Navigation - Page 2');
+
+    // The time on page 2 should be different (it's a new request)
+    const page2Time = await page.locator('#page-load-time').textContent();
+    expect(page2Time).not.toBe(initialTime);
+
+    // Navigate back to page 1
+    await page.click('#navigate-back');
+    await expect(page.locator('h2')).toContainText('Turbo Drive Navigation - Page 1');
+
+    await expectNoFullPageReload(page);
+});
+
+test('Can navigate inside a Turbo Frame without affecting the rest of the page', async ({ page }) => {
+    await page.goto('/ux-turbo/frame');
+    await markPageAsLoaded(page);
+
+    // Check initial state
+    await expect(page.locator('#frame-initial-content')).toContainText('This is the initial frame content');
+    await expect(page.locator('#content-outside-frame')).toContainText('This content is outside the frame');
+
+    // Click link inside the frame
+    await page.click('#load-frame-content');
+
+    // Wait for frame content to update
+    await expect(page.locator('#frame-updated-content')).toContainText('The frame content has been updated');
+
+    // Verify content outside frame hasn't changed
+    await expect(page.locator('#content-outside-frame')).toContainText('This content is outside the frame');
+
+    // Verify the frame initial content is no longer visible
+    await expect(page.locator('#frame-initial-content')).not.toBeVisible();
+
+    await expectNoFullPageReload(page);
+});
+
+test('Can update page content with Turbo Streams after form submission', async ({ page }) => {
+    await page.goto('/ux-turbo/stream');
+    await markPageAsLoaded(page);
+    // Submit the form
+    await page.click('#submit-turbo-stream');
+
+    // Wait for Turbo Stream to update the content
+    await expect(page.locator('#updated-by-stream')).toContainText('This content was updated by a Turbo Stream');
+
+    // Verify the form was removed by the Turbo Stream
+    await expect(page.locator('#form-container')).not.toBeVisible();
+
+    // Verify the target element still exists but with new content
+    await expect(page.locator('#stream-target')).toBeVisible();
+    await expect(page.locator('#stream-target')).toHaveClass(/alert-success/);
+
+    await expectNoFullPageReload(page);
+});
diff --git a/src/TwigComponent/.gitignore b/src/TwigComponent/.gitignore
index 1784dd6561c..91aef664849 100644
--- a/src/TwigComponent/.gitignore
+++ b/src/TwigComponent/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Typed/.gitignore b/src/Typed/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Typed/.gitignore
+++ b/src/Typed/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/src/Vue/.gitignore b/src/Vue/.gitignore
index 2cc9f0231c3..2d7c1c06d51 100644
--- a/src/Vue/.gitignore
+++ b/src/Vue/.gitignore
@@ -1,4 +1,5 @@
 /assets/node_modules/
+/config/reference.php
 /vendor/
 /composer.lock
 /phpunit.xml
diff --git a/ux.symfony.com/assets/controllers/translator-demo-block-controller.js b/ux.symfony.com/assets/controllers/translator-demo-block-controller.js
index 04ea34279c7..1629b8b2fc8 100644
--- a/ux.symfony.com/assets/controllers/translator-demo-block-controller.js
+++ b/ux.symfony.com/assets/controllers/translator-demo-block-controller.js
@@ -1,6 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-
-import * as translator from '../translator.js';
+import { trans } from '../translator.js';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -39,7 +38,7 @@ export default class extends Controller {
         });
 
         this.outputsTargets.forEach((target) => {
-            target.textContent = translator.trans(translator[this.messageValue], Object.fromEntries(parameters), 'messages', target.dataset.locale);
+            target.textContent = trans(this.messageValue, Object.fromEntries(parameters), 'messages', target.dataset.locale);
         });
     }
 }
diff --git a/ux.symfony.com/assets/translator.js b/ux.symfony.com/assets/translator.js
index bfd66cc60bc..a0181a0854c 100644
--- a/ux.symfony.com/assets/translator.js
+++ b/ux.symfony.com/assets/translator.js
@@ -1,5 +1,6 @@
-import { localeFallbacks } from '@app/translations/configuration';
-import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+import { createTranslator } from '@symfony/ux-translator';
+import { messages, localeFallbacks } from '../var/translations/index.js';
+
 /*
  * This file is part of the Symfony UX Translator package.
  *
@@ -9,8 +10,9 @@ import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-tra
  * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
  */
 
-setLocaleFallbacks(localeFallbacks);
-
-export { trans, setLocale };
+const translator = createTranslator({
+    messages,
+    localeFallbacks,
+});
 
-export * from '@app/translations';
+export const { trans } = translator;
diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json
index 2d727c46f6d..a8a37868e19 100644
--- a/ux.symfony.com/composer.json
+++ b/ux.symfony.com/composer.json
@@ -140,14 +140,5 @@
             "importmap:install": "symfony-cmd",
             "tailwind:build": "symfony-cmd"
         }
-    },
-    "repositories": {
-        "symfony-ux-toolkit": {
-            "type": "path",
-            "url": "../src/Toolkit",
-            "options": {
-                "symlink": true
-            }
-        }
     }
 }
diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock
index bdc172a453a..56db86ada20 100644
--- a/ux.symfony.com/composer.lock
+++ b/ux.symfony.com/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "823754b33f16ed72a8cf393aab684f2d",
+    "content-hash": "16707264f42806e611f35675bca83380",
     "packages": [
         {
             "name": "composer/semver",
@@ -6598,28 +6598,28 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/stimulus-bundle.git",
-                "reference": "e13034d428354023c82a1db108d40fdf6cec2d36"
+                "reference": "dfbf6b443bb381cb611e06f64dc23603b614b575"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/stimulus-bundle/zipball/e13034d428354023c82a1db108d40fdf6cec2d36",
-                "reference": "e13034d428354023c82a1db108d40fdf6cec2d36",
+                "url": "https://api.github.com/repos/symfony/stimulus-bundle/zipball/dfbf6b443bb381cb611e06f64dc23603b614b575",
+                "reference": "dfbf6b443bb381cb611e06f64dc23603b614b575",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
-                "symfony/config": "^5.4|^6.0|^7.0",
-                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/config": "^5.4|^6.0|^7.0|^8.0",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/deprecation-contracts": "^2.0|^3.0",
-                "symfony/finder": "^5.4|^6.0|^7.0",
-                "symfony/http-kernel": "^5.4|^6.0|^7.0",
+                "symfony/finder": "^5.4|^6.0|^7.0|^8.0",
+                "symfony/http-kernel": "^5.4|^6.0|^7.0|^8.0",
                 "twig/twig": "^2.15.3|^3.8"
             },
             "require-dev": {
-                "symfony/asset-mapper": "^6.3|^7.0",
-                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
-                "symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
-                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/asset-mapper": "^6.3|^7.0|^8.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0|^8.0",
+                "symfony/phpunit-bridge": "^5.4|^6.0|^7.0|^8.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0|^8.0",
                 "zenstruck/browser": "^1.4"
             },
             "default-branch": true,
@@ -6644,7 +6644,7 @@
                 "symfony-ux"
             ],
             "support": {
-                "source": "https://github.com/symfony/stimulus-bundle/tree/v2.22.1"
+                "source": "https://github.com/symfony/stimulus-bundle/tree/2.x"
             },
             "funding": [
                 {
@@ -6655,12 +6655,16 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-12-06T14:30:33+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/stopwatch",
@@ -7345,12 +7349,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-autocomplete.git",
-                "reference": "331d6f9e0f011550b4fd00e3cfa596b19d16678a"
+                "reference": "82006e2bc14fd30d4efc064b8f068414f3dd6278"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-autocomplete/zipball/331d6f9e0f011550b4fd00e3cfa596b19d16678a",
-                "reference": "331d6f9e0f011550b4fd00e3cfa596b19d16678a",
+                "url": "https://api.github.com/repos/symfony/ux-autocomplete/zipball/82006e2bc14fd30d4efc064b8f068414f3dd6278",
+                "reference": "82006e2bc14fd30d4efc064b8f068414f3dd6278",
                 "shasum": ""
             },
             "require": {
@@ -7366,7 +7370,7 @@
             },
             "require-dev": {
                 "doctrine/collections": "^1.6.8|^2.0",
-                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/doctrine-bundle": "^2.4.3|^3.0|^4.0",
                 "doctrine/orm": "^2.9.4|^3.0",
                 "fakerphp/faker": "^1.22",
                 "mtdowling/jmespath.php": "^2.6",
@@ -7432,7 +7436,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-09T22:41:55+00:00"
         },
         {
             "name": "symfony/ux-chartjs",
@@ -7440,12 +7444,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-chartjs.git",
-                "reference": "6df518ef73f2252a1c20afdd992fb8922720c66a"
+                "reference": "9a571ce600111d39338540e91000eac9075e6ac0"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-chartjs/zipball/6df518ef73f2252a1c20afdd992fb8922720c66a",
-                "reference": "6df518ef73f2252a1c20afdd992fb8922720c66a",
+                "url": "https://api.github.com/repos/symfony/ux-chartjs/zipball/9a571ce600111d39338540e91000eac9075e6ac0",
+                "reference": "9a571ce600111d39338540e91000eac9075e6ac0",
                 "shasum": ""
             },
             "require": {
@@ -7517,7 +7521,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-cropperjs",
@@ -7525,12 +7529,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-cropperjs.git",
-                "reference": "7832d97e9c04a48db24792561f839cd8d226c1cf"
+                "reference": "97cc840520d34aa070ad577aa1aa58f956624441"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-cropperjs/zipball/7832d97e9c04a48db24792561f839cd8d226c1cf",
-                "reference": "7832d97e9c04a48db24792561f839cd8d226c1cf",
+                "url": "https://api.github.com/repos/symfony/ux-cropperjs/zipball/97cc840520d34aa070ad577aa1aa58f956624441",
+                "reference": "97cc840520d34aa070ad577aa1aa58f956624441",
                 "shasum": ""
             },
             "require": {
@@ -7607,7 +7611,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-dropzone",
@@ -7615,12 +7619,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-dropzone.git",
-                "reference": "dc5284c0cc376240b0d1a262e49ec182a86c8344"
+                "reference": "48968cdfa39303682b7fc4066a483ac036051bf6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-dropzone/zipball/dc5284c0cc376240b0d1a262e49ec182a86c8344",
-                "reference": "dc5284c0cc376240b0d1a262e49ec182a86c8344",
+                "url": "https://api.github.com/repos/symfony/ux-dropzone/zipball/48968cdfa39303682b7fc4066a483ac036051bf6",
+                "reference": "48968cdfa39303682b7fc4066a483ac036051bf6",
                 "shasum": ""
             },
             "require": {
@@ -7691,7 +7695,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-icons",
@@ -7699,12 +7703,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-icons.git",
-                "reference": "58c5a041795b151016e67fbac762a1d6a5fd9da4"
+                "reference": "9a2880978572f6bd9b2573b426eb0b15483d4533"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/58c5a041795b151016e67fbac762a1d6a5fd9da4",
-                "reference": "58c5a041795b151016e67fbac762a1d6a5fd9da4",
+                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/9a2880978572f6bd9b2573b426eb0b15483d4533",
+                "reference": "9a2880978572f6bd9b2573b426eb0b15483d4533",
                 "shasum": ""
             },
             "require": {
@@ -7720,7 +7724,7 @@
                 "psr/log": "^2|^3",
                 "symfony/asset-mapper": "^6.4|^7.0|^8.0",
                 "symfony/console": "^6.4|^7.0|^8.0",
-                "symfony/http-client": "6.4|^7.0|^8.0",
+                "symfony/http-client": "^6.4|^7.0|^8.0",
                 "symfony/phpunit-bridge": "^6.3|^7.0|^8.0",
                 "symfony/ux-twig-component": "^2.14",
                 "zenstruck/console-test": "^1.5"
@@ -7785,7 +7789,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-20T02:26:39+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-lazy-image",
@@ -7793,12 +7797,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-lazy-image.git",
-                "reference": "6772f89623f6ef69159136360040a09ec4f5278a"
+                "reference": "423386ec36a004e3725411b2c8b5f03e933b6f7a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-lazy-image/zipball/6772f89623f6ef69159136360040a09ec4f5278a",
-                "reference": "6772f89623f6ef69159136360040a09ec4f5278a",
+                "url": "https://api.github.com/repos/symfony/ux-lazy-image/zipball/423386ec36a004e3725411b2c8b5f03e933b6f7a",
+                "reference": "423386ec36a004e3725411b2c8b5f03e933b6f7a",
                 "shasum": ""
             },
             "require": {
@@ -7870,7 +7874,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-leaflet-map",
@@ -7878,12 +7882,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-leaflet-map.git",
-                "reference": "a0b46c914c918f02901d72b757b90eb8be3d83c4"
+                "reference": "cfcf0b95c0a4a4240986da4dad82941e5eb62c68"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-leaflet-map/zipball/a0b46c914c918f02901d72b757b90eb8be3d83c4",
-                "reference": "a0b46c914c918f02901d72b757b90eb8be3d83c4",
+                "url": "https://api.github.com/repos/symfony/ux-leaflet-map/zipball/cfcf0b95c0a4a4240986da4dad82941e5eb62c68",
+                "reference": "cfcf0b95c0a4a4240986da4dad82941e5eb62c68",
                 "shasum": ""
             },
             "require": {
@@ -7893,7 +7897,7 @@
             },
             "require-dev": {
                 "phpunit/phpunit": "^9.6.22",
-                "spatie/phpunit-snapshot-assertions": "^4.2.17",
+                "spatie/phpunit-snapshot-assertions": "^4.2.17|^5.2.3",
                 "symfony/phpunit-bridge": "^7.2|^8.0",
                 "symfony/ux-icons": "^2.18"
             },
@@ -7947,7 +7951,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-20T11:50:04+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-live-component",
@@ -7955,12 +7959,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-live-component.git",
-                "reference": "b3607791b7599f641d7e045e01a9a2371372a151"
+                "reference": "6f72eac9ef0f8ae85807a82565528d5f0ae7e514"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-live-component/zipball/b3607791b7599f641d7e045e01a9a2371372a151",
-                "reference": "b3607791b7599f641d7e045e01a9a2371372a151",
+                "url": "https://api.github.com/repos/symfony/ux-live-component/zipball/6f72eac9ef0f8ae85807a82565528d5f0ae7e514",
+                "reference": "6f72eac9ef0f8ae85807a82565528d5f0ae7e514",
                 "shasum": ""
             },
             "require": {
@@ -7980,9 +7984,9 @@
             "require-dev": {
                 "doctrine/annotations": "^1.0|^2.0",
                 "doctrine/collections": "^1.6.8|^2.0",
-                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/doctrine-bundle": "^2.4.3|^3.0|^4.0",
                 "doctrine/orm": "^2.9.4|^3.0",
-                "doctrine/persistence": "^2.5.2|^3.0",
+                "doctrine/persistence": "^2.5.2|^3.0|^4.0",
                 "phpdocumentor/reflection-docblock": "5.x-dev",
                 "symfony/dependency-injection": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/expression-language": "^5.4|^6.0|^7.0|^8.0",
@@ -8049,7 +8053,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-map",
@@ -8057,12 +8061,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-map.git",
-                "reference": "7d1349bac070af85da65058bf17dafef8fb69184"
+                "reference": "bb30afa5f3497d8d6523bdb1b84a565c2a35998c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-map/zipball/7d1349bac070af85da65058bf17dafef8fb69184",
-                "reference": "7d1349bac070af85da65058bf17dafef8fb69184",
+                "url": "https://api.github.com/repos/symfony/ux-map/zipball/bb30afa5f3497d8d6523bdb1b84a565c2a35998c",
+                "reference": "bb30afa5f3497d8d6523bdb1b84a565c2a35998c",
                 "shasum": ""
             },
             "require": {
@@ -8074,7 +8078,7 @@
             },
             "require-dev": {
                 "phpunit/phpunit": "^9.6.22",
-                "spatie/phpunit-snapshot-assertions": "^4.2.17",
+                "spatie/phpunit-snapshot-assertions": "^4.2.17|^5.2.3",
                 "symfony/asset-mapper": "^6.4|^7.0|^8.0",
                 "symfony/framework-bundle": "^6.4|^7.0|^8.0",
                 "symfony/phpunit-bridge": "^7.2|^8.0",
@@ -8139,7 +8143,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-20T11:50:04+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-notify",
@@ -8147,12 +8151,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-notify.git",
-                "reference": "25ab67fa25ca8087326407dbc599e863fa78e9b9"
+                "reference": "80c5982459bf531920a167ee887552a7e4917610"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-notify/zipball/25ab67fa25ca8087326407dbc599e863fa78e9b9",
-                "reference": "25ab67fa25ca8087326407dbc599e863fa78e9b9",
+                "url": "https://api.github.com/repos/symfony/ux-notify/zipball/80c5982459bf531920a167ee887552a7e4917610",
+                "reference": "80c5982459bf531920a167ee887552a7e4917610",
                 "shasum": ""
             },
             "require": {
@@ -8160,7 +8164,7 @@
                 "symfony/config": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/dependency-injection": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/http-kernel": "^5.4|^6.0|^7.0|^8.0",
-                "symfony/mercure-bundle": "^0.3.4",
+                "symfony/mercure-bundle": "^0.3.4|^0.4.1",
                 "symfony/mercure-notifier": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/stimulus-bundle": "^2.9.1",
                 "symfony/twig-bundle": "^5.4|^6.0|^7.0|^8.0"
@@ -8226,7 +8230,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-11-26T23:53:46+00:00"
         },
         {
             "name": "symfony/ux-react",
@@ -8234,12 +8238,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-react.git",
-                "reference": "ba78579a9b7e7d2ebf77fa9c3983613c8f5c5443"
+                "reference": "e9b28032f593d3b2ff37044e194fb15ef9a2abfa"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-react/zipball/ba78579a9b7e7d2ebf77fa9c3983613c8f5c5443",
-                "reference": "ba78579a9b7e7d2ebf77fa9c3983613c8f5c5443",
+                "url": "https://api.github.com/repos/symfony/ux-react/zipball/e9b28032f593d3b2ff37044e194fb15ef9a2abfa",
+                "reference": "e9b28032f593d3b2ff37044e194fb15ef9a2abfa",
                 "shasum": ""
             },
             "require": {
@@ -8307,7 +8311,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-svelte",
@@ -8315,12 +8319,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-svelte.git",
-                "reference": "ab5861e6d79dabb5bc0c2d30976a2b386837e283"
+                "reference": "c51e70756efa670e9d8da59179cc5376d7c61b8f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-svelte/zipball/ab5861e6d79dabb5bc0c2d30976a2b386837e283",
-                "reference": "ab5861e6d79dabb5bc0c2d30976a2b386837e283",
+                "url": "https://api.github.com/repos/symfony/ux-svelte/zipball/c51e70756efa670e9d8da59179cc5376d7c61b8f",
+                "reference": "c51e70756efa670e9d8da59179cc5376d7c61b8f",
                 "shasum": ""
             },
             "require": {
@@ -8392,7 +8396,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-swup",
@@ -8400,12 +8404,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-swup.git",
-                "reference": "d9cb2af6f3bbe88a8d009ab996d9b525bf91a7be"
+                "reference": "c663827c1f39856fdf698407a2d863ad69947e85"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-swup/zipball/d9cb2af6f3bbe88a8d009ab996d9b525bf91a7be",
-                "reference": "d9cb2af6f3bbe88a8d009ab996d9b525bf91a7be",
+                "url": "https://api.github.com/repos/symfony/ux-swup/zipball/c663827c1f39856fdf698407a2d863ad69947e85",
+                "reference": "c663827c1f39856fdf698407a2d863ad69947e85",
                 "shasum": ""
             },
             "require": {
@@ -8467,7 +8471,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-toggle-password",
@@ -8475,12 +8479,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-toggle-password.git",
-                "reference": "514c5ca36309714760fdae32e5c6e181c6394b40"
+                "reference": "cde9354d2ab3aa718fe96cbd1986a04375d17357"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-toggle-password/zipball/514c5ca36309714760fdae32e5c6e181c6394b40",
-                "reference": "514c5ca36309714760fdae32e5c6e181c6394b40",
+                "url": "https://api.github.com/repos/symfony/ux-toggle-password/zipball/cde9354d2ab3aa718fe96cbd1986a04375d17357",
+                "reference": "cde9354d2ab3aa718fe96cbd1986a04375d17357",
                 "shasum": ""
             },
             "require": {
@@ -8552,15 +8556,21 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-toolkit",
             "version": "2.x-dev",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-toolkit.git",
+                "reference": "765361ce33f278ac033d140ebddfa50e5574043b"
+            },
             "dist": {
-                "type": "path",
-                "url": "../src/Toolkit",
-                "reference": "0000a9c28390c67e14cb180f447ee70b5bee6fdc"
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-toolkit/zipball/765361ce33f278ac033d140ebddfa50e5574043b",
+                "reference": "765361ce33f278ac033d140ebddfa50e5574043b",
+                "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
@@ -8574,13 +8584,13 @@
             },
             "require-dev": {
                 "phpunit/phpunit": "^9.6.22",
-                "spatie/phpunit-snapshot-assertions": "^4.2.17",
-                "symfony/finder": "6.4|^7.0|^8.0",
-                "symfony/http-client": "6.4|^7.0|^8.0",
+                "spatie/phpunit-snapshot-assertions": "^4.2.17|^5.2.3",
+                "symfony/finder": "^6.4|^7.0|^8.0",
+                "symfony/http-client": "^6.4|^7.0|^8.0",
                 "symfony/phpunit-bridge": "^7.2|^8.0",
                 "symfony/stopwatch": "^6.4|^7.0|^8.0",
                 "symfony/ux-icons": "^2.18",
-                "tales-from-a-dev/twig-tailwind-extra": "^0.4.0",
+                "tales-from-a-dev/twig-tailwind-extra": "^1.0.0",
                 "twig/extra-bundle": "^3.19|^4.0",
                 "twig/html-extra": "^3.19",
                 "vincentlanglet/twig-cs-fixer": "^3.9",
@@ -8593,8 +8603,8 @@
             "type": "symfony-bundle",
             "extra": {
                 "thanks": {
-                    "name": "symfony/ux",
-                    "url": "https://github.com/symfony/ux"
+                    "url": "https://github.com/symfony/ux",
+                    "name": "symfony/ux"
                 }
             },
             "autoload": {
@@ -8603,11 +8613,7 @@
                 },
                 "exclude-from-classmap": []
             },
-            "autoload-dev": {
-                "psr-4": {
-                    "Symfony\\UX\\Toolkit\\Tests\\": "tests/"
-                }
-            },
+            "notification-url": "https://packagist.org/downloads/",
             "license": [
                 "MIT"
             ],
@@ -8638,10 +8644,28 @@
                 "twig",
                 "ui"
             ],
-            "transport-options": {
-                "symlink": true,
-                "relative": true
-            }
+            "support": {
+                "source": "https://github.com/symfony/ux-toolkit/tree/2.x"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-12-05T21:00:36+00:00"
         },
         {
             "name": "symfony/ux-translator",
@@ -8649,12 +8673,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-translator.git",
-                "reference": "15b1f8fac8863b4a1f49f0a7dd0072dab2fbbfd0"
+                "reference": "738bc91d5aca108569f7a0ad79ccbcc9189a23dd"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-translator/zipball/15b1f8fac8863b4a1f49f0a7dd0072dab2fbbfd0",
-                "reference": "15b1f8fac8863b4a1f49f0a7dd0072dab2fbbfd0",
+                "url": "https://api.github.com/repos/symfony/ux-translator/zipball/738bc91d5aca108569f7a0ad79ccbcc9189a23dd",
+                "reference": "738bc91d5aca108569f7a0ad79ccbcc9189a23dd",
                 "shasum": ""
             },
             "require": {
@@ -8723,7 +8747,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-06T12:21:02+00:00"
         },
         {
             "name": "symfony/ux-turbo",
@@ -8731,12 +8755,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-turbo.git",
-                "reference": "f25eff0690a86a512119f79bda787004e027c7ce"
+                "reference": "4c1b74d2ea2e3b40e43b2da0caa27ba3c36999d2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-turbo/zipball/f25eff0690a86a512119f79bda787004e027c7ce",
-                "reference": "f25eff0690a86a512119f79bda787004e027c7ce",
+                "url": "https://api.github.com/repos/symfony/ux-turbo/zipball/4c1b74d2ea2e3b40e43b2da0caa27ba3c36999d2",
+                "reference": "4c1b74d2ea2e3b40e43b2da0caa27ba3c36999d2",
                 "shasum": ""
             },
             "require": {
@@ -8748,7 +8772,7 @@
             },
             "require-dev": {
                 "dbrekelmans/bdi": "dev-main",
-                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/doctrine-bundle": "^2.4.3|^3.0|^4.0",
                 "doctrine/orm": "^2.8|^3.0",
                 "php-webdriver/webdriver": "^1.15",
                 "phpstan/phpstan": "^2.1.17",
@@ -8757,7 +8781,7 @@
                 "symfony/expression-language": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/form": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/framework-bundle": "^6.4|^7.0|^8.0",
-                "symfony/mercure-bundle": "^0.3.7",
+                "symfony/mercure-bundle": "^0.3.7|^0.4.1",
                 "symfony/messenger": "^5.4|^6.0|^7.0|^8.0",
                 "symfony/panther": "^2.2",
                 "symfony/phpunit-bridge": "^5.4|^6.0|^7.0|^8.0",
@@ -8827,7 +8851,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-twig-component",
@@ -8835,12 +8859,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-twig-component.git",
-                "reference": "2f445efda4d4400d4d1911ddf9710c366f339614"
+                "reference": "aa9b7b5839545bcb01a7ae58fa58c0f88d26f6e1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/2f445efda4d4400d4d1911ddf9710c366f339614",
-                "reference": "2f445efda4d4400d4d1911ddf9710c366f339614",
+                "url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/aa9b7b5839545bcb01a7ae58fa58c0f88d26f6e1",
+                "reference": "aa9b7b5839545bcb01a7ae58fa58c0f88d26f6e1",
                 "shasum": ""
             },
             "require": {
@@ -8895,7 +8919,7 @@
                 "twig"
             ],
             "support": {
-                "source": "https://github.com/symfony/ux-twig-component/tree/v2.30.0"
+                "source": "https://github.com/symfony/ux-twig-component/tree/2.x"
             },
             "funding": [
                 {
@@ -8915,7 +8939,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-08-27T15:25:48+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-typed",
@@ -8923,12 +8947,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-typed.git",
-                "reference": "080de3468f2d76100a7f06e1a4dae068e95a3549"
+                "reference": "eed82a662f83ff2733ede2d203ed220d0c4dff54"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-typed/zipball/080de3468f2d76100a7f06e1a4dae068e95a3549",
-                "reference": "080de3468f2d76100a7f06e1a4dae068e95a3549",
+                "url": "https://api.github.com/repos/symfony/ux-typed/zipball/eed82a662f83ff2733ede2d203ed220d0c4dff54",
+                "reference": "eed82a662f83ff2733ede2d203ed220d0c4dff54",
                 "shasum": ""
             },
             "require": {
@@ -8991,7 +9015,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/ux-vue",
@@ -8999,12 +9023,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/ux-vue.git",
-                "reference": "18cabae0d45e6ab655156ab09ae8fb99851ce5c3"
+                "reference": "3d10660f49bfb2063aca881dfd11c5f50e17b7fc"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-vue/zipball/18cabae0d45e6ab655156ab09ae8fb99851ce5c3",
-                "reference": "18cabae0d45e6ab655156ab09ae8fb99851ce5c3",
+                "url": "https://api.github.com/repos/symfony/ux-vue/zipball/3d10660f49bfb2063aca881dfd11c5f50e17b7fc",
+                "reference": "3d10660f49bfb2063aca881dfd11c5f50e17b7fc",
                 "shasum": ""
             },
             "require": {
@@ -9076,7 +9100,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-09-21T19:04:19+00:00"
+            "time": "2025-12-02T07:12:06+00:00"
         },
         {
             "name": "symfony/validator",
@@ -13110,5 +13134,5 @@
         "ext-iconv": "*"
     },
     "platform-dev": {},
-    "plugin-api-version": "2.6.0"
+    "plugin-api-version": "2.9.0"
 }
diff --git a/ux.symfony.com/config/packages/asset_mapper.yaml b/ux.symfony.com/config/packages/asset_mapper.yaml
index 38497f7eadc..da7a43c5403 100644
--- a/ux.symfony.com/config/packages/asset_mapper.yaml
+++ b/ux.symfony.com/config/packages/asset_mapper.yaml
@@ -16,6 +16,12 @@ framework:
             - '*/kits/**/*.md'             # UX Toolkit kit documentation
             - '*/kits/**/manifest.json'    # UX Toolkit kit manifest files
         importmap_polyfill: false
+        missing_import_mode: strict
+
+when@prod:
+    framework:
+        asset_mapper:
+            missing_import_mode: warn
 
 react:
     controllers_path: '%kernel.project_dir%/assets/react/dist/controllers'
diff --git a/ux.symfony.com/importmap.php b/ux.symfony.com/importmap.php
index 749af53cda4..e58accde2b3 100644
--- a/ux.symfony.com/importmap.php
+++ b/ux.symfony.com/importmap.php
@@ -51,12 +51,6 @@
     '@symfony/ux-translator' => [
         'path' => '@symfony/ux-translator/translator_controller.js',
     ],
-    '@app/translations' => [
-        'path' => 'var/translations/index.js',
-    ],
-    '@app/translations/configuration' => [
-        'path' => 'var/translations/configuration.js',
-    ],
     '@symfony/ux-live-component' => [
         'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js',
     ],
diff --git a/ux.symfony.com/templates/_footer.html.twig b/ux.symfony.com/templates/_footer.html.twig
index 1f114585703..94501fd4077 100644
--- a/ux.symfony.com/templates/_footer.html.twig
+++ b/ux.symfony.com/templates/_footer.html.twig
@@ -38,10 +38,10 @@
                     <span class="d-block d-md-inline">
                         hosted with
                         <span style="font-weight: 700;">
-                            <a href="https://platform.sh"
-                               rel="external noopener noreferrer"
+                            <a href="https://upsun.com"
+                               rel="external"
                                style="font-weight: 700;"
-                            >Platform.sh</a>
+                            >Upsun</a>
                         </span>
                     </span>
                 </p>
diff --git a/ux.symfony.com/templates/_header.html.twig b/ux.symfony.com/templates/_header.html.twig
index dc16629ea38..05470a03335 100644
--- a/ux.symfony.com/templates/_header.html.twig
+++ b/ux.symfony.com/templates/_header.html.twig
@@ -46,10 +46,11 @@
             </div>
 
             <div class="AppNav_menu">
-                <a href="{{ path('app_toolkit') }}" class="AppNav_item AppNav_item--cs">
+                {# TODO: To uncomment when UX Toolkit is released #}
+                {# <a href="{{ path('app_toolkit') }}" class="AppNav_item AppNav_item--cs">
                     <span class="AppNav_badge" data-content="New"></span>
                     Toolkit
-                </a>
+                </a> #}
                 <a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
                 <a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
                 <a href="{{ path('app_icons') }}" class="AppNav_item">Icons</a>
diff --git a/ux.symfony.com/templates/main/packages.html.twig b/ux.symfony.com/templates/main/packages.html.twig
index fe1a54c81b8..6f287881893 100644
--- a/ux.symfony.com/templates/main/packages.html.twig
+++ b/ux.symfony.com/templates/main/packages.html.twig
@@ -17,7 +17,7 @@
 <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
     {% block list %}
         <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
-            {% for package in packages %}
+            {% for package in packages|filter(p => p.name != 'toolkit') %}
                 <twig:Package:PackageBox package="{{ package }}" titleTag="h2" />
             {% endfor %}
         </div>
diff --git a/ux.symfony.com/templates/ux_packages/translator.html.twig b/ux.symfony.com/templates/ux_packages/translator.html.twig
index 453870b0727..ffa9bd9a9ae 100644
--- a/ux.symfony.com/templates/ux_packages/translator.html.twig
+++ b/ux.symfony.com/templates/ux_packages/translator.html.twig
@@ -28,20 +28,20 @@
 {% block demo_content %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'HELLO',
+            message: 'hello',
         } %}
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'SAY_HELLO',
+            message: 'say_hello',
             parameters: {
                 name: 'Fabien'
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="SAY_HELLO-name" class="small opacity-50">Name</label>
-                    <input id="SAY_HELLO-name" class="form-control"
+                    <label for="say_hello-name" class="small opacity-50">Name</label>
+                    <input id="say_hello-name" class="form-control"
                            type="text" name="name" value="Fabien"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
@@ -51,7 +51,7 @@
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'INVITATION_TITLE',
+            message: 'invitation_title',
             parameters: {
                 organizer_gender: 'Fabien',
                 organizer_name: 'Clara',
@@ -59,8 +59,8 @@
         } %}
             {% block parameters %}
                 <div>
-                    <label for="INVITATION_TITLE-organizer_gender" class="small opacity-50">Gender</label>
-                    <select id="INVITATION_TITLE-organizer_gender" class="form-select"
+                    <label for="invitation_title-organizer_gender" class="small opacity-50">Gender</label>
+                    <select id="invitation_title-organizer_gender" class="form-select"
                         name="organizer_gender"
                         data-translator-demo-block-target="parameters"
                         data-action="translator-demo-block#render"
@@ -72,8 +72,8 @@
                     </select>
                 </div>
                 <div>
-                    <label for="INVITATION_TITLE-organizer_name" class="small opacity-50">Name</label>
-                    <input id="INVITATION_TITLE-organizer_name" class="form-control"
+                    <label for="invitation_title-organizer_name" class="small opacity-50">Name</label>
+                    <input id="invitation_title-organizer_name" class="form-control"
                            name="organizer_name"
                            value="Clara"
                            data-translator-demo-block-target="parameters"
@@ -84,15 +84,15 @@
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'NUM_OF_APPLES',
+            message: 'num_of_apples',
             parameters: {
                 apples: 2
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="NUM_OF_APPLES-apples" class="small opacity-50">Count</label>
-                    <input id="NUM_OF_APPLES-apples" class="form-control"
+                    <label for="num_of_apples-apples" class="small opacity-50">Count</label>
+                    <input id="num_of_apples-apples" class="form-control"
                            name="apples" type="number" min="0" max="5" value="2"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
@@ -102,15 +102,15 @@
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'FINISH_PLACE',
+            message: 'finish_place',
             parameters: {
                 place: 2
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="FINISH_PLACE-apples" class="small opacity-50">Place</label>
-                    <input id="FINISH_PLACE-apples" class="form-control"
+                    <label for="finish_place-place" class="small opacity-50">Place</label>
+                    <input id="finish_place-place" class="form-control"
                            name="place" type="number" min="0" max="5" value="1"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
@@ -120,15 +120,15 @@
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'PUBLISHED_AT',
+            message: 'published_at',
             parameters: {
                 publication_date: '2023-04-27 08:12'
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="PUBLISHED_AT-publication_date" class="small opacity-50">Date</label>
-                    <input id="PUBLISHED_AT-publication_date" class="form-control"
+                    <label for="published_at-publication_date" class="small opacity-50">Date</label>
+                    <input id="published_at-publication_date" class="form-control"
                            name="publication_date" type="datetime-local" value="2023-04-27 08:12"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
@@ -138,15 +138,15 @@
         {% endembed %}
 
          {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'PROGRESS',
+            message: 'progress',
             parameters: {
                 progress: 42
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="PROGRESS-progress" class="small opacity-50">Place</label>
-                    <input id="PROGRESS-progress" class="form-range"
+                    <label for="progress-progress" class="small opacity-50">Place</label>
+                    <input id="progress-progress" class="form-range"
                            name="progress" type="range" min="0" max="100" value="42"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
@@ -156,15 +156,15 @@
         {% endembed %}
 
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
-            message: 'VALUE_OF_OBJECT',
+            message: 'value_of_object',
             parameters: {
                 price: 30
             },
         } %}
             {% block parameters %}
                 <div>
-                    <label for="VALUE_OF_OBJECT-price" class="small opacity-50">Price</label>
-                    <input id="VALUE_OF_OBJECT-price" class="form-control"
+                    <label for="value_of_object-price" class="small opacity-50">Price</label>
+                    <input id="value_of_object-price" class="form-control"
                            name="price" type="number" min="1"  value="30" step="0.1"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
diff --git a/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig b/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig
index 601a4c54e80..4c6309136e1 100644
--- a/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig
+++ b/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig
@@ -8,9 +8,9 @@
         <div class="Terminal Terminal_body">
             <div class="Terminal_content">
                 <pre data-translator-demo-block-target="code">
-<small><span class="hl-keyword">import</span> { trans, <span class="hl-variable constant_">{{ message }}</span> } <span class="hl-keyword">from</span> '<span class="hl-value">../translator</span>';</small>
+<small><span class="hl-keyword">import</span> { trans } <span class="hl-keyword">from</span> '<span class="hl-value">../translator</span>';</small>
 
-<span class="hl-property function_">trans</span>(<span class="hl-variable constant_">{{ message }}</span>{% if parameters %}, {
+<span class="hl-property function_">trans</span>(<span class="hl-value">'{{ message }}'</span>{% if parameters %}, {
 {% for name, value in parameters %} {% set is_string = not (value matches '/^[\\d\\.]+$/') %}
     <span class="hl-property">{{ name }}</span>:&nbsp;
 {{- name ends with 'date' ? '<span class="hl-keyword">new</span> <span class="hl-property class_">Date</span>(' }}{{- is_string ? "'" }}<span class="hl-value" data-code-parameter="{{ name }}">{{ value }}</span>{{ is_string ? "'" }}{{ name ends with 'date' ? ')' }},