feature #3409 [Toolkit] Embrace html_attr_type from twig/html-extra:^3.24 to correctly merge trigger's attributes (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[Toolkit] Embrace `html_attr_type` from `twig/html-extra:^3.24` to correctly merge trigger's attributes

| Q              | A
| -------------- | ---
| Bug fix?       | no
| New feature?   | yes <!-- please update src/**/CHANGELOG.md files -->
| Deprecations?  | no <!-- if yes, also update UPGRADE-*.md and src/**/CHANGELOG.md -->
| Documentation? | no <!-- required for new features, or documentation updates -->
| Issues         | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License        | MIT

Related to #3408

Commits
-------

725c1156c2 [Toolkit] Embrace `html_attr_type` from `twig/html-extra:^3.24` to correctly merge trigger's attributes

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

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",

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>

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>

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>

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>

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"
+        ]
     }
 }

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',

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>

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>

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>

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>

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>

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"
         ]
     }
 }

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 -%}

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',
 } -%}

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>

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>

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>

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>

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>

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"
+        ]
     }
 }

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 -%}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>