From 725c1156c29b5340be323a172e33d2ef2c15271f Mon Sep 17 00:00:00 2001
From: Hugo Alliaume <hugo@alliau.me>
Date: Mon, 23 Mar 2026 21:28:31 +0100
Subject: [PATCH] [Toolkit] Embrace `html_attr_type` from
 `twig/html-extra:^3.24` to correctly merge trigger's attributes

Related to #3408
---
 src/Toolkit/CHANGELOG.md                      |  8 ++
 src/Toolkit/composer.json                     |  4 +-
 .../alert-dialog/examples/Demo.html.twig      |  2 +-
 .../examples/Opened by default.html.twig      |  2 +-
 .../alert-dialog/examples/Usage.html.twig     |  2 +-
 .../examples/With Tooltip.html.twig           | 27 +++++++
 .../kits/shadcn/alert-dialog/manifest.json    |  7 +-
 .../components/AlertDialog/Trigger.html.twig  |  4 +-
 .../examples/Custom close button.html.twig    |  4 +-
 .../shadcn/dialog/examples/Demo.html.twig     |  4 +-
 .../examples/Opened by default.html.twig      |  4 +-
 .../shadcn/dialog/examples/Usage.html.twig    |  2 +-
 .../dialog/examples/With Tooltip.html.twig    | 38 +++++++++
 src/Toolkit/kits/shadcn/dialog/manifest.json  |  5 +-
 .../components/Dialog/Close.html.twig         |  4 +-
 .../components/Dialog/Trigger.html.twig       |  4 +-
 .../shadcn/tooltip/examples/Demo.html.twig    |  2 +-
 .../examples/Disabled Button.html.twig        |  2 +-
 .../shadcn/tooltip/examples/Side.html.twig    |  2 +-
 .../shadcn/tooltip/examples/Usage.html.twig   |  2 +-
 .../examples/With Keyboard Shortcut.html.twig |  2 +-
 src/Toolkit/kits/shadcn/tooltip/manifest.json |  7 +-
 .../components/Tooltip/Trigger.html.twig      |  4 +-
 ... alert-dialog, code file Demo.html__1.html |  2 +-
 ..., code file Opened by default.html__1.html |  2 +-
 ...alert-dialog, code file Usage.html__1.html |  2 +-
 ...ialog, code file With Tooltip.html__1.html | 55 +++++++++++++
 ...code file Custom close button.html__1.html |  4 +-
 ...ponent dialog, code file Demo.html__1.html |  4 +-
 ..., code file Opened by default.html__1.html |  4 +-
 ...onent dialog, code file Usage.html__1.html |  2 +-
 ...ialog, code file With Tooltip.html__1.html | 81 +++++++++++++++++++
 ...onent tooltip, code file Demo.html__1.html |  2 +-
 ...ip, code file Disabled Button.html__1.html |  2 +-
 ...onent tooltip, code file Side.html__1.html |  2 +-
 ...nent tooltip, code file Usage.html__1.html |  2 +-
 ...e file With Keyboard Shortcut.html__1.html |  2 +-
 37 files changed, 264 insertions(+), 44 deletions(-)
 create mode 100644 src/Toolkit/kits/shadcn/alert-dialog/examples/With Tooltip.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dialog/examples/With Tooltip.html.twig
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html__1.html

diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index 8efadb9ae..9515c09e8 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 2.35.0
+
+- [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes
+- [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger`
+- [Shadcn] Rename `trigger_attrs` to `dialog_trigger_attrs` in `Dialog:Trigger`
+- [Shadcn] Rename `close_attrs` to `dialog_close_attrs` in `Dialog:Close`
+- [Shadcn] Rename `trigger_attrs` to `tooltip_trigger_attrs` in `Tooltip:Trigger`
+
 ## 2.33.0
 
 - [Shadcn] Add `accordion` recipe
diff --git a/src/Toolkit/composer.json b/src/Toolkit/composer.json
index 987072fff..f99443172 100644
--- a/src/Toolkit/composer.json
+++ b/src/Toolkit/composer.json
@@ -41,8 +41,8 @@
     },
     "require-dev": {
         "symfony/finder": "^6.4|^7.0|^8.0",
-        "twig/extra-bundle": "^3.19|^4.0",
-        "twig/html-extra": "^3.19",
+        "twig/extra-bundle": "^3.24|^4.0",
+        "twig/html-extra": "^3.24",
         "zenstruck/console-test": "^1.7",
         "symfony/http-client": "^6.4|^7.0|^8.0",
         "symfony/stopwatch": "^6.4|^7.0|^8.0",
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig
index 2c9478b33..62f1a1ceb 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig
+++ b/src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig
@@ -1,6 +1,6 @@
 <twig:AlertDialog id="delete_account">
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/examples/Opened by default.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/examples/Opened by default.html.twig
index 6ff2160d2..423aed290 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/examples/Opened by default.html.twig	
+++ b/src/Toolkit/kits/shadcn/alert-dialog/examples/Opened by default.html.twig	
@@ -1,6 +1,6 @@
 <twig:AlertDialog id="delete_account" open>
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/examples/Usage.html.twig
index 2c9478b33..62f1a1ceb 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/examples/Usage.html.twig
+++ b/src/Toolkit/kits/shadcn/alert-dialog/examples/Usage.html.twig
@@ -1,6 +1,6 @@
 <twig:AlertDialog id="delete_account">
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/examples/With Tooltip.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/examples/With Tooltip.html.twig
new file mode 100644
index 000000000..0ec9fffd7
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/alert-dialog/examples/With Tooltip.html.twig	
@@ -0,0 +1,27 @@
+<twig:AlertDialog id="delete_account_with_tooltip">
+    <twig:AlertDialog:Trigger>
+        <twig:Tooltip id="tooltip-alert-dialog">
+            <twig:Tooltip:Trigger>
+                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
+                    Delete Account
+                </twig:Button>
+            </twig:Tooltip:Trigger>
+            <twig:Tooltip:Content>
+                <p>This will permanently delete your account</p>
+            </twig:Tooltip:Content>
+        </twig:Tooltip>
+    </twig:AlertDialog:Trigger>
+    <twig:AlertDialog:Content>
+        <twig:AlertDialog:Header>
+            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
+            <twig:AlertDialog:Description>
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+            </twig:AlertDialog:Description>
+        </twig:AlertDialog:Header>
+        <twig:AlertDialog:Footer>
+            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
+            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
+        </twig:AlertDialog:Footer>
+    </twig:AlertDialog:Content>
+</twig:AlertDialog>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/manifest.json b/src/Toolkit/kits/shadcn/alert-dialog/manifest.json
index 0a6cc671f..f9e445186 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/manifest.json
+++ b/src/Toolkit/kits/shadcn/alert-dialog/manifest.json
@@ -9,6 +9,11 @@
     },
     "dependencies": {
         "recipe": ["button"],
-        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+        "composer": [
+            "twig/extra-bundle",
+            "twig/html-extra:^3.24.0",
+            "tales-from-a-dev/twig-tailwind-extra:^1.0.0",
+            "symfony/ux-twig-component:^2.35"
+        ]
     }
 }
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig
index 92b274a81..335bf5be5 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig
@@ -1,6 +1,6 @@
 {# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
-{%- set trigger_attrs = {
-    'data-action': 'click->alert-dialog#open',
+{%- set alert_dialog_trigger_attrs = {
+    'data-action': 'click->alert-dialog#open'|html_attr_type('sst'),
     'data-alert-dialog-target': 'trigger',
     'aria-haspopup': 'dialog',
     'aria-expanded': 'false',
diff --git a/src/Toolkit/kits/shadcn/dialog/examples/Custom close button.html.twig b/src/Toolkit/kits/shadcn/dialog/examples/Custom close button.html.twig
index 0968c7928..925a9a5dc 100644
--- a/src/Toolkit/kits/shadcn/dialog/examples/Custom close button.html.twig	
+++ b/src/Toolkit/kits/shadcn/dialog/examples/Custom close button.html.twig	
@@ -1,6 +1,6 @@
 <twig:Dialog id="share_link">
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Share</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Share</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-md">
         <twig:Dialog:Header>
@@ -17,7 +17,7 @@
         </div>
         <twig:Dialog:Footer class="sm:justify-start">
             <twig:Dialog:Close>
-                <twig:Button type="button" variant="secondary" {{ ...close_attrs }}>
+                <twig:Button type="button" variant="secondary" {{ ...dialog_close_attrs }}>
                     Close
                 </twig:Button>
             </twig:Dialog:Close>
diff --git a/src/Toolkit/kits/shadcn/dialog/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/dialog/examples/Demo.html.twig
index 2a7a7af5b..11aca2320 100644
--- a/src/Toolkit/kits/shadcn/dialog/examples/Demo.html.twig
+++ b/src/Toolkit/kits/shadcn/dialog/examples/Demo.html.twig
@@ -1,6 +1,6 @@
 <twig:Dialog id="delete_account">
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-[425px]">
         <twig:Dialog:Header>
@@ -21,7 +21,7 @@
         </div>
         <twig:Dialog:Footer>
             <twig:Dialog:Close>
-                <twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
             </twig:Dialog:Close>
             <twig:Button type="submit">Save changes</twig:Button>
         </twig:Dialog:Footer>
diff --git a/src/Toolkit/kits/shadcn/dialog/examples/Opened by default.html.twig b/src/Toolkit/kits/shadcn/dialog/examples/Opened by default.html.twig
index b4c2891a6..78cda654b 100644
--- a/src/Toolkit/kits/shadcn/dialog/examples/Opened by default.html.twig	
+++ b/src/Toolkit/kits/shadcn/dialog/examples/Opened by default.html.twig	
@@ -1,6 +1,6 @@
 <twig:Dialog id="delete_account" open>
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-[425px]">
         <twig:Dialog:Header>
@@ -21,7 +21,7 @@
         </div>
         <twig:Dialog:Footer>
             <twig:Dialog:Close>
-                <twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
             </twig:Dialog:Close>
             <twig:Button type="submit">Save changes</twig:Button>
         </twig:Dialog:Footer>
diff --git a/src/Toolkit/kits/shadcn/dialog/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/dialog/examples/Usage.html.twig
index fbf70b380..0e1d4101d 100644
--- a/src/Toolkit/kits/shadcn/dialog/examples/Usage.html.twig
+++ b/src/Toolkit/kits/shadcn/dialog/examples/Usage.html.twig
@@ -1,6 +1,6 @@
 <twig:Dialog id="delete_account">
     <twig:Dialog:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
+        <twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content>
         <twig:Dialog:Header>
diff --git a/src/Toolkit/kits/shadcn/dialog/examples/With Tooltip.html.twig b/src/Toolkit/kits/shadcn/dialog/examples/With Tooltip.html.twig
new file mode 100644
index 000000000..0ea530292
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/examples/With Tooltip.html.twig	
@@ -0,0 +1,38 @@
+<twig:Dialog id="delete_account">
+    <twig:Dialog:Trigger>
+        <twig:Tooltip id="tooltip-alert-dialog">
+            <twig:Tooltip:Trigger>
+                <twig:Button variant="outline" {{ ...dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
+                    Edit Profile
+                </twig:Button>
+            </twig:Tooltip:Trigger>
+            <twig:Tooltip:Content>
+                <p>A super useful tooltip</p>
+            </twig:Tooltip:Content>
+        </twig:Tooltip>
+    </twig:Dialog:Trigger>
+    <twig:Dialog:Content class="sm:max-w-[425px]">
+        <twig:Dialog:Header>
+            <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
+            <twig:Dialog:Description>
+                Make changes to your profile here. Click save when you&apos;re done.
+            </twig:Dialog:Description>
+        </twig:Dialog:Header>
+        <div class="grid gap-4">
+            <div class="grid gap-3">
+                <twig:Label for="name">Name</twig:Label>
+                <twig:Input id="name" name="name" value="Pedro Duarte" />
+            </div>
+            <div class="grid gap-3">
+                <twig:Label for="username">Username</twig:Label>
+                <twig:Input id="username" name="username" value="@peduarte" />
+            </div>
+        </div>
+        <twig:Dialog:Footer>
+            <twig:Dialog:Close>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
+            </twig:Dialog:Close>
+            <twig:Button type="submit">Save changes</twig:Button>
+        </twig:Dialog:Footer>
+    </twig:Dialog:Content>
+</twig:Dialog>
diff --git a/src/Toolkit/kits/shadcn/dialog/manifest.json b/src/Toolkit/kits/shadcn/dialog/manifest.json
index 914f9930f..ffc340636 100644
--- a/src/Toolkit/kits/shadcn/dialog/manifest.json
+++ b/src/Toolkit/kits/shadcn/dialog/manifest.json
@@ -11,8 +11,9 @@
         "composer": [
             "symfony/ux-icons",
             "twig/extra-bundle",
-            "twig/html-extra:^3.12.0",
-            "tales-from-a-dev/twig-tailwind-extra:^1.0.0"
+            "twig/html-extra:^3.24.0",
+            "tales-from-a-dev/twig-tailwind-extra:^1.0.0",
+            "symfony/ux-twig-component:^2.35"
         ]
     }
 }
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
index 26414a164..0436178b2 100644
--- a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
@@ -1,5 +1,5 @@
 {# @block content The close trigger element (e.g., a `Button`) that closes the dialog when clicked #}
-{%- set close_attrs = {
-    'data-action': 'click->dialog#close',
+{%- set dialog_close_attrs = {
+    'data-action': 'click->dialog#close'|html_attr_type('sst'),
 } -%}
 {%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig
index 1e56b0d96..66eac8338 100644
--- a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig
@@ -1,6 +1,6 @@
 {# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
-{%- set trigger_attrs = {
-    'data-action': 'click->dialog#open',
+{%- set dialog_trigger_attrs = {
+    'data-action': 'click->dialog#open'|html_attr_type('sst'),
     'data-dialog-target': 'trigger',
     'aria-haspopup': 'dialog',
 } -%}
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/Demo.html.twig
index ef7566570..4f3a9129d 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/Demo.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/Demo.html.twig
@@ -1,6 +1,6 @@
 <twig:Tooltip id="tooltip-demo">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline">Hover</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline">Hover</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>Add to library</p>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig
index 1b27cc80e..d65f91291 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig	
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig	
@@ -1,6 +1,6 @@
 <twig:Tooltip id="tooltip-disabled-button">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>This feature is currently unavailable</p>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/Side.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/Side.html.twig
index b391c169a..0cff17c02 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/Side.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/Side.html.twig
@@ -2,7 +2,7 @@
     {% for side in ['left', 'top', 'bottom', 'right'] %}
         <twig:Tooltip id="tooltip-side-{{ side }}">
             <twig:Tooltip:Trigger>
-                <twig:Button {{ ...trigger_attrs }} variant="outline" class="w-fit">
+                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
                     {{ side|capitalize }}
                 </twig:Button>
             </twig:Tooltip:Trigger>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/Usage.html.twig
index b76a162a5..210b3ec93 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/Usage.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/Usage.html.twig
@@ -1,6 +1,6 @@
 <twig:Tooltip id="my-tooltip">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Hover</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }}>Hover</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>Add to library</p>
diff --git a/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig b/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig
index 57a2e79d7..da3dc301f 100644
--- a/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig	
+++ b/src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig	
@@ -1,6 +1,6 @@
 <twig:Tooltip id="tooltip-with-keyboard-shortcut">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline" size="icon-sm">
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" size="icon-sm">
             <twig:ux:icon name="lucide:save" />
         </twig:Button>
     </twig:Tooltip:Trigger>
diff --git a/src/Toolkit/kits/shadcn/tooltip/manifest.json b/src/Toolkit/kits/shadcn/tooltip/manifest.json
index 286e5734a..dd8c62dd2 100644
--- a/src/Toolkit/kits/shadcn/tooltip/manifest.json
+++ b/src/Toolkit/kits/shadcn/tooltip/manifest.json
@@ -8,6 +8,11 @@
         "templates/": "templates/"
     },
     "dependencies": {
-        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+        "composer": [
+            "twig/extra-bundle",
+            "twig/html-extra:^3.24.0",
+            "tales-from-a-dev/twig-tailwind-extra:^1.0.0",
+            "symfony/ux-twig-component:^2.35"
+        ]
     }
 }
diff --git a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Trigger.html.twig b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Trigger.html.twig
index 965833cd3..0f92db7a9 100644
--- a/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Trigger.html.twig
@@ -1,9 +1,9 @@
 {# @block content The element that triggers the tooltip on hover/focus #}
-{%- set trigger_attrs = {
+{%- set tooltip_trigger_attrs = {
     id: _tooltip_trigger_id,
     'aria-describedby': _tooltip_content_id,
     'data-slot': 'tooltip-trigger',
     'data-tooltip-target': 'trigger',
-    'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide',
+    'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide'|html_attr_type('sst'),
 } -%}
 {%- block content %}{% endblock -%}
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Demo.html__1.html
index 6073f5c6f..cc9c58861 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Demo.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Demo.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:AlertDialog id="delete_account">
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Opened by default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Opened by default.html__1.html
index 4cb857b31..d0d23e58f 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Opened by default.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Opened by default.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:AlertDialog id="delete_account" open>
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Usage.html__1.html
index 6073f5c6f..cc9c58861 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Usage.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file Usage.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:AlertDialog id="delete_account">
     <twig:AlertDialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html__1.html
new file mode 100644
index 000000000..df008e906
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code file With Tooltip.html__1.html	
@@ -0,0 +1,55 @@
+<!--
+- Kit: Shadcn UI
+- Component: Alert Dialog
+- Code:
+```twig
+<twig:AlertDialog id="delete_account_with_tooltip">
+    <twig:AlertDialog:Trigger>
+        <twig:Tooltip id="tooltip-alert-dialog">
+            <twig:Tooltip:Trigger>
+                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
+                    Delete Account
+                </twig:Button>
+            </twig:Tooltip:Trigger>
+            <twig:Tooltip:Content>
+                <p>This will permanently delete your account</p>
+            </twig:Tooltip:Content>
+        </twig:Tooltip>
+    </twig:AlertDialog:Trigger>
+    <twig:AlertDialog:Content>
+        <twig:AlertDialog:Header>
+            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
+            <twig:AlertDialog:Description>
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+            </twig:AlertDialog:Description>
+        </twig:AlertDialog:Header>
+        <twig:AlertDialog:Footer>
+            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
+            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
+        </twig:AlertDialog:Footer>
+    </twig:AlertDialog:Content>
+</twig:AlertDialog>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="alert-dialog" aria-labelledby="alert-dialog-delete_account_with_tooltip-title" aria-describedby="alert-dialog-delete_account_with_tooltip-description">
+    <div class="relative inline-block" id="tooltip-alert-dialog" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-alert-dialog_wrapper" data-tooltip-content-selector-value="#tooltip-alert-dialog_content" data-tooltip-arrow-selector-value="#tooltip-alert-dialog_arrow">
+<button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" data-action="click-&gt;alert-dialog#open mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="false" id="tooltip-alert-dialog_trigger" aria-describedby="tooltip-alert-dialog_content" data-tooltip-target="trigger">Delete Account
+                </button>
+                        <div id="tooltip-alert-dialog_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
+    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+<p>This will permanently delete your account</p>
+            <div id="tooltip-alert-dialog_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
+    </div>
+</div>
+        </div>
+        <dialog id="alert-dialog-delete_account_with_tooltip" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0" data-alert-dialog-target="dialog" data-action="keydown.esc-&gt;alert-dialog#close:prevent"><header class="flex flex-col gap-2 text-center sm:text-left"><h2 id="alert-dialog-delete_account_with_tooltip-title" class="text-lg font-semibold">Are you absolutely sure?</h2>
+            <p id="alert-dialog-delete_account_with_tooltip-description" class="text-muted-foreground text-sm">This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+            </p>
+        </header>
+        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" data-action="click-&gt;alert-dialog#close">Cancel</button>
+            <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none bg-primary text-primary-foreground [a]:hover:bg-primary/80 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2">Continue</button>
+        </footer>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Custom close button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Custom close button.html__1.html
index 1aa5a8454..3e9d9026c 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Custom close button.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Custom close button.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Dialog id="share_link">
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Share</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Share</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-md">
         <twig:Dialog:Header>
@@ -22,7 +22,7 @@
         </div>
         <twig:Dialog:Footer class="sm:justify-start">
             <twig:Dialog:Close>
-                <twig:Button type="button" variant="secondary" {{ ...close_attrs }}>
+                <twig:Button type="button" variant="secondary" {{ ...dialog_close_attrs }}>
                     Close
                 </twig:Button>
             </twig:Dialog:Close>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Demo.html__1.html
index 6416877d2..b38c8bde8 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Demo.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Demo.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Dialog id="delete_account">
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-[425px]">
         <twig:Dialog:Header>
@@ -26,7 +26,7 @@
         </div>
         <twig:Dialog:Footer>
             <twig:Dialog:Close>
-                <twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
             </twig:Dialog:Close>
             <twig:Button type="submit">Save changes</twig:Button>
         </twig:Dialog:Footer>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Opened by default.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Opened by default.html__1.html
index 35b0e9e73..781ec69fe 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Opened by default.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Opened by default.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Dialog id="delete_account" open>
     <twig:Dialog:Trigger>
-        <twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
+        <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content class="sm:max-w-[425px]">
         <twig:Dialog:Header>
@@ -26,7 +26,7 @@
         </div>
         <twig:Dialog:Footer>
             <twig:Dialog:Close>
-                <twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
             </twig:Dialog:Close>
             <twig:Button type="submit">Save changes</twig:Button>
         </twig:Dialog:Footer>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Usage.html__1.html
index aac1e442d..98d3af95a 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Usage.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file Usage.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Dialog id="delete_account">
     <twig:Dialog:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
+        <twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
     </twig:Dialog:Trigger>
     <twig:Dialog:Content>
         <twig:Dialog:Header>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html__1.html
new file mode 100644
index 000000000..fcf9d1263
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code file With Tooltip.html__1.html	
@@ -0,0 +1,81 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dialog
+- Code:
+```twig
+<twig:Dialog id="delete_account">
+    <twig:Dialog:Trigger>
+        <twig:Tooltip id="tooltip-alert-dialog">
+            <twig:Tooltip:Trigger>
+                <twig:Button variant="outline" {{ ...dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
+                    Edit Profile
+                </twig:Button>
+            </twig:Tooltip:Trigger>
+            <twig:Tooltip:Content>
+                <p>A super useful tooltip</p>
+            </twig:Tooltip:Content>
+        </twig:Tooltip>
+    </twig:Dialog:Trigger>
+    <twig:Dialog:Content class="sm:max-w-[425px]">
+        <twig:Dialog:Header>
+            <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
+            <twig:Dialog:Description>
+                Make changes to your profile here. Click save when you&apos;re done.
+            </twig:Dialog:Description>
+        </twig:Dialog:Header>
+        <div class="grid gap-4">
+            <div class="grid gap-3">
+                <twig:Label for="name">Name</twig:Label>
+                <twig:Input id="name" name="name" value="Pedro Duarte" />
+            </div>
+            <div class="grid gap-3">
+                <twig:Label for="username">Username</twig:Label>
+                <twig:Input id="username" name="username" value="@peduarte" />
+            </div>
+        </div>
+        <twig:Dialog:Footer>
+            <twig:Dialog:Close>
+                <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
+            </twig:Dialog:Close>
+            <twig:Button type="submit">Save changes</twig:Button>
+        </twig:Dialog:Footer>
+    </twig:Dialog:Content>
+</twig:Dialog>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-controller="dialog" aria-labelledby="dialog-delete_account-title" aria-describedby="dialog-delete_account-description">
+    <div class="relative inline-block" id="tooltip-alert-dialog" data-slot="tooltip" data-controller="tooltip" data-tooltip-delay-duration-value="0" data-tooltip-wrapper-selector-value="#tooltip-alert-dialog_wrapper" data-tooltip-content-selector-value="#tooltip-alert-dialog_content" data-tooltip-arrow-selector-value="#tooltip-alert-dialog_arrow">
+<button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" data-action="click-&gt;dialog#open mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide" data-dialog-target="trigger" aria-haspopup="dialog" id="tooltip-alert-dialog_trigger" aria-describedby="tooltip-alert-dialog_content" data-tooltip-target="trigger">Edit Profile
+                </button>
+                        <div id="tooltip-alert-dialog_wrapper" data-slot="tooltip-wrapper" data-side="top" data-side-offset="0" data-tooltip-target="wrapper" role="presentation" class="isolate z-50" style="position: absolute; left: 0px; top: 0px; will-change: transform;">
+    <div class="invisible open:visible transition-all duration-200 open:opacity-100 open:scale-100 opacity-0 scale-95 bg-foreground text-background z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs" id="tooltip-alert-dialog_content" role="tooltip" data-slot="tooltip-content" data-side="top" data-tooltip-target="content">
+<p>A super useful tooltip</p>
+            <div id="tooltip-alert-dialog_arrow" data-side="top" data-tooltip-target="arrow" aria-hidden="true" class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" style="position: absolute;"></div>
+    </div>
+</div>
+        </div>
+        <dialog id="dialog-delete_account" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 starting:open:scale-95 starting:open:opacity-0 sm:max-w-[425px]" data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left"><h2 id="dialog-delete_account-title" class="text-lg leading-none font-semibold">Edit profile</h2>
+            <p id="dialog-delete_account-description" class="text-muted-foreground text-sm">Make changes to your profile here. Click save when you're done.
+            </p>
+        </header>
+        <div class="grid gap-4">
+            <div class="grid gap-3">
+                <label class="flex items-center gap-2 text-sm leading-none 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" for="name">Name</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="name" name="name" value="Pedro Duarte">
+
+            </div>
+            <div class="grid gap-3">
+                <label class="flex items-center gap-2 text-sm leading-none 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" 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" name="username" value="@peduarte">
+
+            </div>
+        </div>
+        <footer class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" data-action="click-&gt;dialog#close">Cancel</button>
+                        <button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&amp;_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none bg-primary text-primary-foreground [a]:hover:bg-primary/80 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="submit">Save changes</button>
+        </footer>
+            <button type="button" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4" data-action="click-&gt;dialog#close">
+            <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="M18 6L6 18M6 6l12 12"></path></svg>
+            <span class="sr-only">Close</span>
+        </button>
+    </dialog>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html
index 3251fffaf..91cee964c 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Demo.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Tooltip id="tooltip-demo">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline">Hover</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline">Hover</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>Add to library</p>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html
index d1b60bbd5..8f872f284 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Disabled Button.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Tooltip id="tooltip-disabled-button">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>This feature is currently unavailable</p>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html
index 22660ae92..7deebcfcb 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Side.html__1.html	
@@ -7,7 +7,7 @@
     {% for side in ['left', 'top', 'bottom', 'right'] %}
         <twig:Tooltip id="tooltip-side-{{ side }}">
             <twig:Tooltip:Trigger>
-                <twig:Button {{ ...trigger_attrs }} variant="outline" class="w-fit">
+                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
                     {{ side|capitalize }}
                 </twig:Button>
             </twig:Tooltip:Trigger>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html
index 0452a925a..c9564aefd 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file Usage.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Tooltip id="my-tooltip">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Hover</twig:Button>
+        <twig:Button {{ ...tooltip_trigger_attrs }}>Hover</twig:Button>
     </twig:Tooltip:Trigger>
     <twig:Tooltip:Content>
         <p>Add to library</p>
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html
index 8e48bc2d5..b631cf534 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component tooltip, code file With Keyboard Shortcut.html__1.html	
@@ -5,7 +5,7 @@
 ```twig
 <twig:Tooltip id="tooltip-with-keyboard-shortcut">
     <twig:Tooltip:Trigger>
-        <twig:Button {{ ...trigger_attrs }} variant="outline" size="icon-sm">
+        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" size="icon-sm">
             <twig:ux:icon name="lucide:save" />
         </twig:Button>
     </twig:Tooltip:Trigger>