From 9f78219f58b9ac4d00d000745baebb42d33913a0 Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Tue, 14 Apr 2026 20:04:09 +0200
Subject: [PATCH 1/6] [Toolkit][Shadcn] Add dropdown-menu recipe

---
 src/Toolkit/CHANGELOG.md                      |  4 +--
 .../dropdown-menu/examples/Demo.html.twig     | 15 +++++++++++
 .../dropdown-menu/examples/Usage.html.twig    | 10 +++++++
 .../kits/shadcn/dropdown-menu/manifest.json   | 12 +++++++++
 .../components/DropdownMenu.html.twig         |  9 +++++++
 .../components/DropdownMenu/Content.html.twig | 10 +++++++
 .../components/DropdownMenu/Item.html.twig    | 11 ++++++++
 .../components/DropdownMenu/Label.html.twig   |  9 +++++++
 .../DropdownMenu/Separator.html.twig          |  7 +++++
 .../components/DropdownMenu/Trigger.html.twig |  9 +++++++
 ...dropdown-menu, code file Demo.html__1.html | 27 +++++++++++++++++++
 ...ropdown-menu, code file Usage.html__1.html | 20 ++++++++++++++
 12 files changed, 141 insertions(+), 2 deletions(-)
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html

diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index f5529d1b814..2ef709b9a80 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -8,11 +8,11 @@
 ## 3.0.0
 
 - Minimum required Symfony version is now 7.4
-- Minimum required PHP version is now 8.4
-- [Shadcn] Add `radio-group` recipe
+- Minimum required PHP version is now 8.4- [Shadcn] Add `radio-group` recipe
 - [Shadcn] Add `collapsible` recipe
 - [Shadcn] Add `typography` recipe
 - [Shadcn] Add `toggle-group` recipe
+- [Shadcn] Add `dropdown-menu` recipe
 
 ## 2.35
 
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
new file mode 100644
index 00000000000..d1aa7171975
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
@@ -0,0 +1,15 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Account
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-56">
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API (soon)</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
new file mode 100644
index 00000000000..27ed77fafd8
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
@@ -0,0 +1,10 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Open menu
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
new file mode 100644
index 00000000000..13298b3b2ed
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Dropdown Menu",
+    "description": "A click-triggered menu that lists a set of actions.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
new file mode 100644
index 00000000000..2ec33b082d4
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
@@ -0,0 +1,9 @@
+{# @block content A `DropdownMenu:Trigger` and a `DropdownMenu:Content` #}
+<details
+    class="{{ ('group/dropdown-menu relative inline-block ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
new file mode 100644
index 00000000000..55877fd3fd7
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
@@ -0,0 +1,10 @@
+{# @block content The menu items #}
+<div
+    role="menu"
+    class="{{ ('absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-content',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
new file mode 100644
index 00000000000..7e2d7a15515
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
@@ -0,0 +1,11 @@
+{# @block content The item label #}
+<button
+    type="button"
+    role="menuitem"
+    class="{{ ('relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-item',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
new file mode 100644
index 00000000000..5b07482c309
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
@@ -0,0 +1,9 @@
+{# @block content The label text #}
+<div
+    class="{{ ('px-2 py-1.5 text-sm font-semibold ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-label',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
new file mode 100644
index 00000000000..1bcd6b8610c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
@@ -0,0 +1,7 @@
+<div
+    role="separator"
+    class="{{ ('-mx-1 my-1 h-px bg-muted ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-separator',
+    }) }}
+></div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
new file mode 100644
index 00000000000..61a8871082a
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
@@ -0,0 +1,9 @@
+{# @block content The clickable trigger #}
+<summary
+    class="{{ ('list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-md inline-flex items-center justify-center ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-trigger',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</summary>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html
new file mode 100644
index 00000000000..78e855fb960
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html	
@@ -0,0 +1,27 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Account
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-56">
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API (soon)</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent" data-slot="dropdown-menu-trigger">Account
+    </summary>    <div role="menu" class="absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-56" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item" disabled>API (soon)</button>        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Sign out</button>    </div></details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html
new file mode 100644
index 00000000000..b8289e44df8
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html	
@@ -0,0 +1,20 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Open menu
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent" data-slot="dropdown-menu-trigger">Open menu
+    </summary>    <div role="menu" class="absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Settings</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Sign out</button>    </div></details>
\ No newline at end of file

From 02549277eff82d23690811f6b00cc55e12d4ca06 Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Tue, 14 Apr 2026 20:07:46 +0200
Subject: [PATCH 2/6] [Toolkit][Shadcn] Add sidebar recipe

---
 src/Toolkit/CHANGELOG.md                      |  1 +
 .../shadcn/sidebar/examples/Demo.html.twig    | 23 +++++++++++
 .../shadcn/sidebar/examples/Usage.html.twig   | 12 ++++++
 src/Toolkit/kits/shadcn/sidebar/manifest.json | 12 ++++++
 .../templates/components/Sidebar.html.twig    | 12 ++++++
 .../components/Sidebar/Content.html.twig      |  9 +++++
 .../components/Sidebar/Footer.html.twig       |  9 +++++
 .../components/Sidebar/Group.html.twig        |  9 +++++
 .../components/Sidebar/GroupLabel.html.twig   |  9 +++++
 .../components/Sidebar/Header.html.twig       |  9 +++++
 .../components/Sidebar/MenuButton.html.twig   | 13 +++++++
 ...onent sidebar, code file Demo.html__1.html | 38 +++++++++++++++++++
 ...nent sidebar, code file Usage.html__1.html | 24 ++++++++++++
 13 files changed, 180 insertions(+)
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/examples/Demo.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/examples/Usage.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/manifest.json
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Content.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Footer.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Group.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/GroupLabel.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Header.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/MenuButton.html.twig
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html

diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index 2ef709b9a80..99816040811 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -13,6 +13,7 @@
 - [Shadcn] Add `typography` recipe
 - [Shadcn] Add `toggle-group` recipe
 - [Shadcn] Add `dropdown-menu` recipe
+- [Shadcn] Add `sidebar` recipe
 
 ## 2.35
 
diff --git a/src/Toolkit/kits/shadcn/sidebar/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/sidebar/examples/Demo.html.twig
new file mode 100644
index 00000000000..b2c43ad9d58
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/examples/Demo.html.twig
@@ -0,0 +1,23 @@
+<twig:Sidebar class="h-[480px]">
+    <twig:Sidebar:Header>
+        <div class="font-semibold">Acme Inc.</div>
+        <div class="text-xs text-sidebar-foreground/70">team@acme.dev</div>
+    </twig:Sidebar:Header>
+    <twig:Sidebar:Content>
+        <twig:Sidebar:Group>
+            <twig:Sidebar:GroupLabel>Application</twig:Sidebar:GroupLabel>
+            <twig:Sidebar:MenuButton active>Dashboard</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Projects</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Team</twig:Sidebar:MenuButton>
+        </twig:Sidebar:Group>
+        <twig:Sidebar:Group>
+            <twig:Sidebar:GroupLabel>Settings</twig:Sidebar:GroupLabel>
+            <twig:Sidebar:MenuButton>General</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Billing</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton disabled>API (soon)</twig:Sidebar:MenuButton>
+        </twig:Sidebar:Group>
+    </twig:Sidebar:Content>
+    <twig:Sidebar:Footer>
+        <twig:Sidebar:MenuButton>Sign out</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Footer>
+</twig:Sidebar>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/sidebar/examples/Usage.html.twig
new file mode 100644
index 00000000000..61dbe9e0301
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/examples/Usage.html.twig
@@ -0,0 +1,12 @@
+<twig:Sidebar>
+    <twig:Sidebar:Header>
+        <div class="font-semibold">Acme Inc.</div>
+    </twig:Sidebar:Header>
+    <twig:Sidebar:Content>
+        <twig:Sidebar:MenuButton active>Dashboard</twig:Sidebar:MenuButton>
+        <twig:Sidebar:MenuButton>Settings</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Content>
+    <twig:Sidebar:Footer>
+        <twig:Sidebar:MenuButton>Sign out</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Footer>
+</twig:Sidebar>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/manifest.json b/src/Toolkit/kits/shadcn/sidebar/manifest.json
new file mode 100644
index 00000000000..f26f311083a
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/manifest.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Sidebar",
+    "description": "A fixed-width sidebar layout with a header, body and footer.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar.html.twig
new file mode 100644
index 00000000000..59edf8c080f
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar.html.twig
@@ -0,0 +1,12 @@
+{# @prop side 'left'|'right' On which side the sidebar sits. Defaults to `left` #}
+{# @block content The sidebar sections, typically a Header, a Content and a Footer #}
+{%- props side = 'left' -%}
+<aside
+    class="{{ ('flex h-full w-64 flex-col bg-sidebar text-sidebar-foreground border-sidebar-border ' ~ (side == 'right' ? 'border-l' : 'border-r') ~ ' ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar',
+        'data-side': side,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</aside>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Content.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Content.html.twig
new file mode 100644
index 00000000000..5383fac21b3
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Content.html.twig
@@ -0,0 +1,9 @@
+{# @block content The scrollable sidebar body #}
+<div
+    class="{{ ('flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-content',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Footer.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Footer.html.twig
new file mode 100644
index 00000000000..792f1ef939e
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Footer.html.twig
@@ -0,0 +1,9 @@
+{# @block content The sidebar footer content #}
+<div
+    class="{{ ('flex flex-col gap-2 p-2 border-t border-sidebar-border ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-footer',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Group.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Group.html.twig
new file mode 100644
index 00000000000..64efee9b36d
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Group.html.twig
@@ -0,0 +1,9 @@
+{# @block content The group content #}
+<div
+    class="{{ ('relative flex w-full min-w-0 flex-col p-2 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-group',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/GroupLabel.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/GroupLabel.html.twig
new file mode 100644
index 00000000000..f40188d75dc
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/GroupLabel.html.twig
@@ -0,0 +1,9 @@
+{# @block content The group label text #}
+<div
+    class="{{ ('flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-group-label',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Header.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Header.html.twig
new file mode 100644
index 00000000000..0f7792cda27
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/Header.html.twig
@@ -0,0 +1,9 @@
+{# @block content The sidebar header content #}
+<div
+    class="{{ ('flex flex-col gap-2 p-2 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-header',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/MenuButton.html.twig b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/MenuButton.html.twig
new file mode 100644
index 00000000000..56663cbb00c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/sidebar/templates/components/Sidebar/MenuButton.html.twig
@@ -0,0 +1,13 @@
+{# @prop active boolean Whether this menu button represents the active route. Defaults to `false` #}
+{# @block content The menu button label and/or icon #}
+{%- props active = false -%}
+<button
+    type="button"
+    class="{{ ('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 ' ~ (active ? 'bg-sidebar-accent font-medium text-sidebar-accent-foreground ' : '') ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'sidebar-menu-button',
+        'aria-current': active ? 'page' : false,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</button>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html
new file mode 100644
index 00000000000..ba3b4eb5d68
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html	
@@ -0,0 +1,38 @@
+<!--
+- Kit: Shadcn UI
+- Component: Sidebar
+- Code:
+```twig
+<twig:Sidebar class="h-[480px]">
+    <twig:Sidebar:Header>
+        <div class="font-semibold">Acme Inc.</div>
+        <div class="text-xs text-sidebar-foreground/70">team@acme.dev</div>
+    </twig:Sidebar:Header>
+    <twig:Sidebar:Content>
+        <twig:Sidebar:Group>
+            <twig:Sidebar:GroupLabel>Application</twig:Sidebar:GroupLabel>
+            <twig:Sidebar:MenuButton active>Dashboard</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Projects</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Team</twig:Sidebar:MenuButton>
+        </twig:Sidebar:Group>
+        <twig:Sidebar:Group>
+            <twig:Sidebar:GroupLabel>Settings</twig:Sidebar:GroupLabel>
+            <twig:Sidebar:MenuButton>General</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton>Billing</twig:Sidebar:MenuButton>
+            <twig:Sidebar:MenuButton disabled>API (soon)</twig:Sidebar:MenuButton>
+        </twig:Sidebar:Group>
+    </twig:Sidebar:Content>
+    <twig:Sidebar:Footer>
+        <twig:Sidebar:MenuButton>Sign out</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Footer>
+</twig:Sidebar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<aside class="flex w-64 flex-col bg-sidebar text-sidebar-foreground border-sidebar-border border-r h-[480px]" data-slot="sidebar" data-side="left"><div class="flex flex-col gap-2 p-2" data-slot="sidebar-header">
+<div class="font-semibold">Acme Inc.</div>
+        <div class="text-xs text-sidebar-foreground/70">team@acme.dev</div>
+    </div>    <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2" data-slot="sidebar-content">
+<div class="relative flex w-full min-w-0 flex-col p-2" data-slot="sidebar-group">
+<div class="flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none" data-slot="sidebar-group-label">Application</div>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 bg-sidebar-accent font-medium text-sidebar-accent-foreground" data-slot="sidebar-menu-button" aria-current="page">Dashboard</button>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Projects</button>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Team</button>        </div>        <div class="relative flex w-full min-w-0 flex-col p-2" data-slot="sidebar-group">
+<div class="flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none" data-slot="sidebar-group-label">Settings</div>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">General</button>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Billing</button>            <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button" disabled>API (soon)</button>        </div>    </div>    <div class="flex flex-col gap-2 p-2 border-t border-sidebar-border" data-slot="sidebar-footer">
+<button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Sign out</button>    </div></aside>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html
new file mode 100644
index 00000000000..968d8cf672b
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html	
@@ -0,0 +1,24 @@
+<!--
+- Kit: Shadcn UI
+- Component: Sidebar
+- Code:
+```twig
+<twig:Sidebar>
+    <twig:Sidebar:Header>
+        <div class="font-semibold">Acme Inc.</div>
+    </twig:Sidebar:Header>
+    <twig:Sidebar:Content>
+        <twig:Sidebar:MenuButton active>Dashboard</twig:Sidebar:MenuButton>
+        <twig:Sidebar:MenuButton>Settings</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Content>
+    <twig:Sidebar:Footer>
+        <twig:Sidebar:MenuButton>Sign out</twig:Sidebar:MenuButton>
+    </twig:Sidebar:Footer>
+</twig:Sidebar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<aside class="flex h-full w-64 flex-col bg-sidebar text-sidebar-foreground border-sidebar-border border-r" data-slot="sidebar" data-side="left"><div class="flex flex-col gap-2 p-2" data-slot="sidebar-header">
+<div class="font-semibold">Acme Inc.</div>
+    </div>    <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2" data-slot="sidebar-content">
+<button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 bg-sidebar-accent font-medium text-sidebar-accent-foreground" data-slot="sidebar-menu-button" aria-current="page">Dashboard</button>        <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Settings</button>    </div>    <div class="flex flex-col gap-2 p-2 border-t border-sidebar-border" data-slot="sidebar-footer">
+<button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Sign out</button>    </div></aside>
\ No newline at end of file

From 85838de4e4ec4e5425bc906d8328b21330d43e8b Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Mon, 20 Apr 2026 14:13:40 +0200
Subject: [PATCH 3/6] [Toolkit][Shadcn] Align dropdown-menu examples and
 sub-components with shadcn reference

---
 src/Toolkit/CHANGELOG.md                      |   3 +-
 .../dropdown-menu/examples/Avatar.html.twig   |  27 ++
 .../dropdown-menu/examples/Basic.html.twig    |  15 +
 .../examples/Checkboxes Icons.html.twig       |  23 +
 .../examples/Checkboxes.html.twig             |  11 +
 .../dropdown-menu/examples/Complex.html.twig  | 176 ++++++++
 .../dropdown-menu/examples/Demo.html.twig     |  30 +-
 .../examples/Destructive.html.twig            |  20 +
 .../dropdown-menu/examples/Icons.html.twig    |  24 ++
 .../dropdown-menu/examples/RTL.html.twig      | 171 ++++++++
 .../examples/Radio Icons.html.twig            |  23 +
 .../dropdown-menu/examples/Radio.html.twig    |  22 +
 .../examples/Shortcuts.html.twig              |  13 +
 .../dropdown-menu/examples/Submenu.html.twig  |  27 ++
 .../dropdown-menu/examples/Usage.html.twig    |   2 +-
 .../kits/shadcn/dropdown-menu/manifest.json   |   2 +-
 .../components/DropdownMenu.html.twig         |   2 +-
 .../DropdownMenu/CheckboxItem.html.twig       |  16 +
 .../components/DropdownMenu/Content.html.twig |   4 +-
 .../components/DropdownMenu/Group.html.twig   |  10 +
 .../components/DropdownMenu/Item.html.twig    |   2 +-
 .../components/DropdownMenu/Label.html.twig   |   2 +-
 .../DropdownMenu/RadioGroup.html.twig         |  13 +
 .../DropdownMenu/RadioItem.html.twig          |  17 +
 .../DropdownMenu/Separator.html.twig          |   2 +-
 .../DropdownMenu/Shortcut.html.twig           |   9 +
 .../components/DropdownMenu/Sub.html.twig     |   9 +
 .../DropdownMenu/SubContent.html.twig         |  10 +
 .../DropdownMenu/SubTrigger.html.twig         |  12 +
 .../components/DropdownMenu/Trigger.html.twig |   2 +-
 src/Toolkit/kits/shadcn/sidebar/manifest.json |   2 +-
 ...n-menu, code file Avatar.html.twig__1.html |  56 +++
 ...wn-menu, code file Basic.html.twig__1.html |  36 ++
 ...de file Checkboxes Icons.html.twig__1.html |  60 +++
 ...nu, code file Checkboxes.html.twig__1.html |  39 ++
 ...-menu, code file Complex.html.twig__1.html | 356 ++++++++++++++++
 ...own-menu, code file Demo.html.twig__1.html |  73 ++++
 ...u, code file Destructive.html.twig__1.html |  43 ++
 ...wn-menu, code file Icons.html.twig__1.html |  50 +++
 ...down-menu, code file RTL.html.twig__1.html | 399 ++++++++++++++++++
 ...u, code file Radio Icons.html.twig__1.html |  60 +++
 ...wn-menu, code file Radio.html.twig__1.html |  56 +++
 ...enu, code file Shortcuts.html.twig__1.html |  36 ++
 ...-menu, code file Submenu.html.twig__1.html |  64 +++
 ...sidebar, code file Demo.html.twig__1.html} |   0
 ...nent sidebar, code file Usage.html__1.html |  24 --
 46 files changed, 2010 insertions(+), 43 deletions(-)
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/CheckboxItem.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Group.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Shortcut.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html
 rename src/Toolkit/tests/Functional/__snapshots__/{ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html => ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html.twig__1.html} (100%)
 delete mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html

diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index 99816040811..31812d12dcc 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -8,7 +8,8 @@
 ## 3.0.0
 
 - Minimum required Symfony version is now 7.4
-- Minimum required PHP version is now 8.4- [Shadcn] Add `radio-group` recipe
+- Minimum required PHP version is now 8.4
+- [Shadcn] Add `radio-group` recipe
 - [Shadcn] Add `collapsible` recipe
 - [Shadcn] Add `typography` recipe
 - [Shadcn] Add `toggle-group` recipe
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
new file mode 100644
index 00000000000..7df58635282
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
@@ -0,0 +1,27 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent">
+        <twig:Avatar>
+            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
+            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
+        </twig:Avatar>
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="end-0 start-auto w-48">
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:badge-check" class="me-2 size-4" />
+            Account
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+            Notifications
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Sign Out
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
new file mode 100644
index 00000000000..893ef569f1f
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
@@ -0,0 +1,15 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>GitHub</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Support</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig
new file mode 100644
index 00000000000..b2356b2486e
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig	
@@ -0,0 +1,23 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Notifications
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-56">
+        <twig:DropdownMenu:Label>Notification Preferences</twig:DropdownMenu:Label>
+        {% set items = [
+            {name: 'email', icon: 'lucide:mail', label: 'Email notifications', checked: true},
+            {name: 'sms', icon: 'lucide:message-square', label: 'SMS notifications', checked: false},
+            {name: 'push', icon: 'lucide:bell', label: 'Push notifications', checked: true},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                <twig:ux:icon name="{{ it.icon }}" class="me-2 size-4" />
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
new file mode 100644
index 00000000000..4140e723ce8
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
@@ -0,0 +1,11 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-40">
+        <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:CheckboxItem name="statusbar" checked>Status Bar</twig:DropdownMenu:CheckboxItem>
+        <twig:DropdownMenu:CheckboxItem name="activitybar" disabled>Activity Bar</twig:DropdownMenu:CheckboxItem>
+        <twig:DropdownMenu:CheckboxItem name="panel">Panel</twig:DropdownMenu:CheckboxItem>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
new file mode 100644
index 00000000000..6a71f7a45ba
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
@@ -0,0 +1,176 @@
+<twig:DropdownMenu class="self-start mt-4">
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Complex Menu
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-48">
+        <twig:DropdownMenu:Label>File</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:file" class="me-2 size-4" />
+            New File<twig:DropdownMenu:Shortcut>⌘N</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:folder" class="me-2 size-4" />
+            New Folder<twig:DropdownMenu:Shortcut>⇧⌘N</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
+                Open Recent
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Recent Projects</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                    Project Alpha
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                    Project Beta
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
+                        More Projects
+                    </twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                            Project Gamma
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                            Project Delta
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:folder-search" class="me-2 size-4" />
+                    Browse...
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:save" class="me-2 size-4" />
+            Save<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:download" class="me-2 size-4" />
+            Export<twig:DropdownMenu:Shortcut>⇧⌘E</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Label>View</twig:DropdownMenu:Label>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="sidebar" checked>
+            <twig:ux:icon name="lucide:eye" class="me-2 size-4" />
+            Show Sidebar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+            </span>
+        </label>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="statusbar">
+            <twig:ux:icon name="lucide:layout" class="me-2 size-4" />
+            Show Status Bar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+            </span>
+        </label>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
+                Theme
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
+                {% set themes = [
+                    {value: 'light', icon: 'lucide:sun', label: 'Light', checked: true},
+                    {value: 'dark', icon: 'lucide:moon', label: 'Dark', checked: false},
+                    {value: 'system', icon: 'lucide:monitor', label: 'System', checked: false},
+                ] %}
+                {% for t in themes %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="theme" value="{{ t.value }}" {% if t.checked %}checked{% endif %}>
+                        <twig:ux:icon name="{{ t.icon }}" class="me-2 size-4" />
+                        {{ t.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Label>Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+            Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                Settings
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Preferences</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:keyboard" class="me-2 size-4" />
+                    Keyboard Shortcuts
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:languages" class="me-2 size-4" />
+                    Language
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                        Notifications
+                    </twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Label>Notification Types</twig:DropdownMenu:Label>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="push" checked>
+                            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                            Push Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                            </span>
+                        </label>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="emailnotif" checked>
+                            <twig:ux:icon name="lucide:mail" class="me-2 size-4" />
+                            Email Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                            </span>
+                        </label>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:shield" class="me-2 size-4" />
+                    Privacy &amp; Security
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:help-circle" class="me-2 size-4" />
+            Help &amp; Support
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:file-text" class="me-2 size-4" />
+            Documentation
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Sign Out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
index d1aa7171975..251b9d8e055 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
@@ -1,15 +1,29 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
-        Account
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
     </twig:DropdownMenu:Trigger>
-    <twig:DropdownMenu:Content class="w-56">
+    <twig:DropdownMenu:Content class="w-40">
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing<twig:DropdownMenu:Shortcut>⌘B</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
         <twig:DropdownMenu:Separator />
-        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item disabled>API (soon)</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>More...</twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Item>New Team<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
         <twig:DropdownMenu:Separator />
-        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>GitHub</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Support</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Log out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
     </twig:DropdownMenu:Content>
-</twig:DropdownMenu>
\ No newline at end of file
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
new file mode 100644
index 00000000000..0e667568aab
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
@@ -0,0 +1,20 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Actions
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:pencil" class="me-2 size-4" />
+            Edit
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:share" class="me-2 size-4" />
+            Share
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+            <twig:ux:icon name="lucide:trash" class="me-2 size-4" />
+            Delete
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
new file mode 100644
index 00000000000..0fb34ebc21c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
@@ -0,0 +1,24 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+            Profile
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+            Settings
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive">
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Log out
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
new file mode 100644
index 00000000000..dfecb101afe
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
@@ -0,0 +1,171 @@
+<div class="flex flex-col items-center gap-6 self-start mt-4">
+    {# Arabic #}
+    <div dir="rtl">
+        <twig:DropdownMenu>
+            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+                افتح القائمة
+            </twig:DropdownMenu:Trigger>
+            <twig:DropdownMenu:Content class="w-40">
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>الحساب</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+                            الملف الشخصي
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+                            الفوترة
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                            الإعدادات
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>الفريق</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>الفريق</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>دعوة المستخدمين</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>البريد الإلكتروني</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>رسالة</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Sub>
+                            <twig:DropdownMenu:SubTrigger>المزيد</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubContent>
+                                <twig:DropdownMenu:Item>تقويم</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Item>دردشة</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Separator />
+                                <twig:DropdownMenu:Item>خطاف ويب</twig:DropdownMenu:Item>
+                            </twig:DropdownMenu:SubContent>
+                        </twig:DropdownMenu:Sub>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>متقدم...</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Item>فريق جديد<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>عرض</twig:DropdownMenu:Label>
+                {% for it in [
+                    {name: 'ar-statusbar', label: 'شريط الحالة', checked: true},
+                    {name: 'ar-activitybar', label: 'شريط النشاط', checked: false},
+                    {name: 'ar-panel', label: 'اللوحة', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>الموضع</twig:DropdownMenu:Label>
+                {% for it in [
+                    {value: 'top', label: 'أعلى', checked: false},
+                    {value: 'bottom', label: 'أسفل', checked: true},
+                    {value: 'right', label: 'يمين', checked: false},
+                    {value: 'left', label: 'يسار', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+                    تسجيل الخروج
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:Content>
+        </twig:DropdownMenu>
+    </div>
+
+    {# Hebrew #}
+    <div dir="rtl">
+        <twig:DropdownMenu>
+            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+                פתח תפריט
+            </twig:DropdownMenu:Trigger>
+            <twig:DropdownMenu:Content class="w-40">
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>חשבון</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+                            פרופיל
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+                            חיוב
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                            הגדרות
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>הצוות</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>הצוות</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>הזמן משתמשים</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>אימייל</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>הודעה</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Sub>
+                            <twig:DropdownMenu:SubTrigger>עוד</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubContent>
+                                <twig:DropdownMenu:Item>יומן</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Item>צ'אט</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Separator />
+                                <twig:DropdownMenu:Item>Webhook</twig:DropdownMenu:Item>
+                            </twig:DropdownMenu:SubContent>
+                        </twig:DropdownMenu:Sub>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>מתקדם...</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Item>צוות חדש<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>תצוגה</twig:DropdownMenu:Label>
+                {% for it in [
+                    {name: 'he-statusbar', label: 'שורת סטטוס', checked: true},
+                    {name: 'he-activitybar', label: 'שורת פעילות', checked: false},
+                    {name: 'he-panel', label: 'לוח', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>מיקום</twig:DropdownMenu:Label>
+                {% for it in [
+                    {value: 'top', label: 'למעלה', checked: false},
+                    {value: 'bottom', label: 'למטה', checked: true},
+                    {value: 'right', label: 'ימין', checked: false},
+                    {value: 'left', label: 'שמאל', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+                    התנתק
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:Content>
+        </twig:DropdownMenu>
+    </div>
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig
new file mode 100644
index 00000000000..247a3de2db5
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig	
@@ -0,0 +1,23 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Payment Method
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="min-w-56">
+        <twig:DropdownMenu:Label>Select Payment Method</twig:DropdownMenu:Label>
+        {% set items = [
+            {value: 'card', icon: 'lucide:credit-card', label: 'Credit Card', checked: true},
+            {value: 'paypal', icon: 'lucide:wallet', label: 'PayPal', checked: false},
+            {value: 'bank', icon: 'lucide:building-2', label: 'Bank Transfer', checked: false},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="payment" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                <twig:ux:icon name="{{ it.icon }}" class="me-2 size-4" />
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
new file mode 100644
index 00000000000..f3a4a861ad9
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
@@ -0,0 +1,22 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-32">
+        <twig:DropdownMenu:Label>Panel Position</twig:DropdownMenu:Label>
+        {% set items = [
+            {value: 'top', label: 'Top', checked: false},
+            {value: 'bottom', label: 'Bottom', checked: true},
+            {value: 'right', label: 'Right', checked: false},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
new file mode 100644
index 00000000000..021467e68cf
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
@@ -0,0 +1,13 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing<twig:DropdownMenu:Shortcut>⌘B</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Log out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
new file mode 100644
index 00000000000..b68e7039cba
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
@@ -0,0 +1,27 @@
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>More options</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>Calendly</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>Slack</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>Webhook</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>Advanced...</twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Item>New Team<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
index 27ed77fafd8..d0a68b408be 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
@@ -7,4 +7,4 @@
         <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
     </twig:DropdownMenu:Content>
-</twig:DropdownMenu>
\ No newline at end of file
+</twig:DropdownMenu>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
index 13298b3b2ed..a5e35dea96c 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
@@ -9,4 +9,4 @@
     "dependencies": {
         "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
     }
-}
\ No newline at end of file
+}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
index 2ec33b082d4..02c3b30dab0 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
@@ -6,4 +6,4 @@
     }) }}
 >
     {%- block content %}{% endblock -%}
-</details>
\ No newline at end of file
+</details>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/CheckboxItem.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/CheckboxItem.html.twig
new file mode 100644
index 00000000000..2adc16d4983
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/CheckboxItem.html.twig
@@ -0,0 +1,16 @@
+{# @prop name string The checkbox form field name #}
+{# @prop checked bool Whether the checkbox is initially checked #}
+{# @block content The label text #}
+{%- props name = null, checked = false -%}
+<label
+    class="{{ ('relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-checkbox-item',
+    }) }}
+>
+    <input type="checkbox" class="peer sr-only" {% if name %}name="{{ name }}"{% endif %} {% if checked %}checked{% endif %}>
+    <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+        <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+    </span>
+    {%- block content %}{% endblock -%}
+</label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
index 55877fd3fd7..32d361e62c4 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
@@ -1,10 +1,10 @@
 {# @block content The menu items #}
 <div
     role="menu"
-    class="{{ ('absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
+    class="{{ ('absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-content',
     }) }}
 >
     {%- block content %}{% endblock -%}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Group.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Group.html.twig
new file mode 100644
index 00000000000..8574a9dc204
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Group.html.twig
@@ -0,0 +1,10 @@
+{# @block content The items grouped together #}
+<div
+    role="group"
+    class="{{ attributes.render('class')|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-group',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
index 7e2d7a15515..0aace069dd0 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Item.html.twig
@@ -8,4 +8,4 @@
     }) }}
 >
     {%- block content %}{% endblock -%}
-</button>
\ No newline at end of file
+</button>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
index 5b07482c309..75d573f3703 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Label.html.twig
@@ -6,4 +6,4 @@
     }) }}
 >
     {%- block content %}{% endblock -%}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
new file mode 100644
index 00000000000..026f5705420
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
@@ -0,0 +1,13 @@
+{# @prop name string The radio group form field name #}
+{# @block content One or more `DropdownMenu:RadioItem` components #}
+{%- props name = null -%}
+<div
+    role="group"
+    class="{{ attributes.render('class')|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-radio-group',
+        'data-radio-group-name': name,
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
new file mode 100644
index 00000000000..24e5361ad55
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
@@ -0,0 +1,17 @@
+{# @prop name string The radio form field name #}
+{# @prop value string The radio value #}
+{# @prop checked bool Whether this radio is initially checked #}
+{# @block content The label text #}
+{%- props name = null, value = '', checked = false -%}
+<label
+    class="{{ ('relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-radio-item',
+    }) }}
+>
+    <input type="radio" class="peer sr-only" {% if name %}name="{{ name }}"{% endif %} value="{{ value }}" {% if checked %}checked{% endif %}>
+    <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+        <twig:ux:icon name="lucide:circle" class="size-2 fill-current" aria-hidden="true" />
+    </span>
+    {%- block content %}{% endblock -%}
+</label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
index 1bcd6b8610c..c578b03d5d5 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Separator.html.twig
@@ -4,4 +4,4 @@
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-separator',
     }) }}
-></div>
\ No newline at end of file
+></div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Shortcut.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Shortcut.html.twig
new file mode 100644
index 00000000000..5451b17263c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Shortcut.html.twig
@@ -0,0 +1,9 @@
+{# @block content The shortcut label, e.g. "⌘T" #}
+<span
+    class="{{ ('ms-auto text-xs tracking-widest text-muted-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-shortcut',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</span>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
new file mode 100644
index 00000000000..2aeb9523f1e
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
@@ -0,0 +1,9 @@
+{# @block content A `DropdownMenu:SubTrigger` and a `DropdownMenu:SubContent` #}
+<div
+    class="{{ ('relative ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-sub',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
new file mode 100644
index 00000000000..b62743658a1
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
@@ -0,0 +1,10 @@
+{# @block content The sub-menu items revealed on hover or focus #}
+<div
+    role="menu"
+    class="{{ ('invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-sub-content',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
new file mode 100644
index 00000000000..d090bc0a077
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
@@ -0,0 +1,12 @@
+{# @block content The sub-menu trigger label #}
+<button
+    type="button"
+    role="menuitem"
+    class="{{ ('peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'dropdown-menu-sub-trigger',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+</button>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
index 61a8871082a..303e604e448 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
@@ -6,4 +6,4 @@
     }) }}
 >
     {%- block content %}{% endblock -%}
-</summary>
\ No newline at end of file
+</summary>
diff --git a/src/Toolkit/kits/shadcn/sidebar/manifest.json b/src/Toolkit/kits/shadcn/sidebar/manifest.json
index f26f311083a..4a89572d42b 100644
--- a/src/Toolkit/kits/shadcn/sidebar/manifest.json
+++ b/src/Toolkit/kits/shadcn/sidebar/manifest.json
@@ -9,4 +9,4 @@
     "dependencies": {
         "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
     }
-}
\ No newline at end of file
+}
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html
new file mode 100644
index 00000000000..5533a0ab054
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html	
@@ -0,0 +1,56 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent">
+        <twig:Avatar>
+            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
+            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
+        </twig:Avatar>
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="end-0 start-auto w-48">
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:badge-check" class="me-2 size-4" />
+            Account
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+            Notifications
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Sign Out
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent" data-slot="dropdown-menu-trigger"><span data-slot="avatar" data-size="default" class="size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten"><img data-slot="avatar-image" class="hidden rounded-full aspect-square size-full object-cover" onload="this.classList.remove('hidden'); this.closest('[data-slot=avatar]')?.querySelector('[data-slot=avatar-fallback]')?.classList.add('hidden');" alt="shadcn" src="https://github.com/shadcn.png">
+
+            <span data-slot="avatar-fallback" class="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs">LR</span>
+        </span>
+    </summary>
+    <div role="menu" class="absolute top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md end-0 start-auto w-48" data-slot="dropdown-menu-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76"></path><path d="m9 12l2 2l4-4"></path></g></svg>
+            Account
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+            Billing
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+            Notifications
+        </button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 17l5-5l-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path></svg>
+            Sign Out
+        </button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html
new file mode 100644
index 00000000000..883881895c1
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html	
@@ -0,0 +1,36 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>GitHub</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Support</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API</twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Settings</button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">GitHub</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Support</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item" disabled>API</button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html
new file mode 100644
index 00000000000..76949f5e017
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html	
@@ -0,0 +1,60 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Notifications
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-56">
+        <twig:DropdownMenu:Label>Notification Preferences</twig:DropdownMenu:Label>
+        {% set items = [
+            {name: 'email', icon: 'lucide:mail', label: 'Email notifications', checked: true},
+            {name: 'sms', icon: 'lucide:message-square', label: 'SMS notifications', checked: false},
+            {name: 'push', icon: 'lucide:bell', label: 'Push notifications', checked: true},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                <twig:ux:icon name="{{ it.icon }}" class="me-2 size-4" />
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Notifications
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-56" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Notification Preferences</div>
+                            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="checkbox" class="peer sr-only" name="email" checked>
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
+                Email notifications
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="checkbox" class="peer sr-only" name="sms">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
+                SMS notifications
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="checkbox" class="peer sr-only" name="push" checked>
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+                Push notifications
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+            </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html
new file mode 100644
index 00000000000..3e402a8fea4
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html	
@@ -0,0 +1,39 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-40">
+        <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:CheckboxItem name="statusbar" checked>Status Bar</twig:DropdownMenu:CheckboxItem>
+        <twig:DropdownMenu:CheckboxItem name="activitybar" disabled>Activity Bar</twig:DropdownMenu:CheckboxItem>
+        <twig:DropdownMenu:CheckboxItem name="panel">Panel</twig:DropdownMenu:CheckboxItem>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Appearance</div>
+        <label class="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground" data-slot="dropdown-menu-checkbox-item">
+    <input type="checkbox" class="peer sr-only" name="statusbar" checked>
+    <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+    </span>Status Bar</label>
+        <label class="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground" data-slot="dropdown-menu-checkbox-item" disabled>
+    <input type="checkbox" class="peer sr-only" name="activitybar">
+    <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+    </span>Activity Bar</label>
+        <label class="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground" data-slot="dropdown-menu-checkbox-item">
+    <input type="checkbox" class="peer sr-only" name="panel">
+    <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+    </span>Panel</label>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html
new file mode 100644
index 00000000000..6272dcdf6d7
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html	
@@ -0,0 +1,356 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu class="self-start mt-4">
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Complex Menu
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-48">
+        <twig:DropdownMenu:Label>File</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:file" class="me-2 size-4" />
+            New File<twig:DropdownMenu:Shortcut>⌘N</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:folder" class="me-2 size-4" />
+            New Folder<twig:DropdownMenu:Shortcut>⇧⌘N</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
+                Open Recent
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Recent Projects</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                    Project Alpha
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                    Project Beta
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
+                        More Projects
+                    </twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                            Project Gamma
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:file-code" class="me-2 size-4" />
+                            Project Delta
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:folder-search" class="me-2 size-4" />
+                    Browse...
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:save" class="me-2 size-4" />
+            Save<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:download" class="me-2 size-4" />
+            Export<twig:DropdownMenu:Shortcut>⇧⌘E</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Label>View</twig:DropdownMenu:Label>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="sidebar" checked>
+            <twig:ux:icon name="lucide:eye" class="me-2 size-4" />
+            Show Sidebar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+            </span>
+        </label>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="statusbar">
+            <twig:ux:icon name="lucide:layout" class="me-2 size-4" />
+            Show Status Bar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+            </span>
+        </label>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
+                Theme
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
+                {% set themes = [
+                    {value: 'light', icon: 'lucide:sun', label: 'Light', checked: true},
+                    {value: 'dark', icon: 'lucide:moon', label: 'Dark', checked: false},
+                    {value: 'system', icon: 'lucide:monitor', label: 'System', checked: false},
+                ] %}
+                {% for t in themes %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="theme" value="{{ t.value }}" {% if t.checked %}checked{% endif %}>
+                        <twig:ux:icon name="{{ t.icon }}" class="me-2 size-4" />
+                        {{ t.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Label>Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+            Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                Settings
+            </twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Label>Preferences</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:keyboard" class="me-2 size-4" />
+                    Keyboard Shortcuts
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:languages" class="me-2 size-4" />
+                    Language
+                </twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                        Notifications
+                    </twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Label>Notification Types</twig:DropdownMenu:Label>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="push" checked>
+                            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                            Push Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                            </span>
+                        </label>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="emailnotif" checked>
+                            <twig:ux:icon name="lucide:mail" class="me-2 size-4" />
+                            Email Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                            </span>
+                        </label>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>
+                    <twig:ux:icon name="lucide:shield" class="me-2 size-4" />
+                    Privacy &amp; Security
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:help-circle" class="me-2 size-4" />
+            Help &amp; Support
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:file-text" class="me-2 size-4" />
+            Documentation
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Sign Out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut>
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block self-start mt-4" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Complex Menu
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-48" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">File</div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path></g></svg>
+            New File<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;N</span>
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
+            New Folder<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;N</span>
+        </button>
+        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg>
+                Open Recent
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Recent Projects</div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
+                    Project Alpha
+                </button>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
+                    Project Beta
+                </button>
+                <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+                        More Projects
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
+                            Project Gamma
+                        </button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
+                            Project Delta
+                        </button>
+                    </div>
+                </div>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1M21 21l-1.9-1.9"></path><circle cx="17" cy="17" r="3"></circle></g></svg>
+                    Browse...
+                </button>
+            </div>
+        </div>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7M7 3v4a1 1 0 0 0 1 1h7"></path></g></svg>
+            Save<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;S</span>
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10l5 5l5-5"></path></g></svg>
+            Export<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;E</span>
+        </button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">View</div>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="sidebar" checked>
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+            Show Sidebar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+            </span>
+        </label>
+        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+            <input type="checkbox" class="peer sr-only" name="statusbar">
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18M9 21V9"></path></g></svg>
+            Show Status Bar
+            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+            </span>
+        </label>
+        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
+                Theme
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Appearance</div>
+                                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="theme" value="light" checked>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></g></svg>
+                        Light
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="theme" value="dark">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>
+                        Dark
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="theme" value="system">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="3" rx="2"></rect><path d="M8 21h8m-4-4v4"></path></g></svg>
+                        System
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                            </div>
+        </div>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Account</div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
+            Profile<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;P</span>
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+            Billing
+        </button>
+        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+                Settings
+            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Preferences</div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10m-9-4h.01"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
+                    Keyboard Shortcuts
+                </button>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6"></path></svg>
+                    Language
+                </button>
+                <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+                        Notifications
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Notification Types</div>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="push" checked>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+                            Push Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                            </span>
+                        </label>
+                        <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                            <input type="checkbox" class="peer sr-only" name="emailnotif" checked>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
+                            Email Notifications
+                            <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
+                    Privacy &amp; Security
+                </button>
+            </div>
+        </div>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01"></path></g></svg>
+            Help &amp; Support
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8"></path></g></svg>
+            Documentation
+        </button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 17l5-5l-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path></svg>
+            Sign Out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
+        </button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html
new file mode 100644
index 00000000000..f5144d778b0
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html	
@@ -0,0 +1,73 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-40">
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing<twig:DropdownMenu:Shortcut>⌘B</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>More...</twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Item>New Team<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>GitHub</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Support</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item disabled>API</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Log out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;P</span>
+</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;B</span>
+</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Settings<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;S</span>
+</button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>
+        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">Invite users<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Email</button>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Message</button>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">More...</button>
+            </div>
+        </div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">New Team<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;+T</span>
+</button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">GitHub</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Support</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item" disabled>API</button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Log out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
+</button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html
new file mode 100644
index 00000000000..f12e8ca36ce
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html	
@@ -0,0 +1,43 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Actions
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:pencil" class="me-2 size-4" />
+            Edit
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:share" class="me-2 size-4" />
+            Share
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+            <twig:ux:icon name="lucide:trash" class="me-2 size-4" />
+            Delete
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Actions
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4"></path></svg>
+            Edit
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v13m4-9l-4-4l-4 4m-4 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path></svg>
+            Share
+        </button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+            Delete
+        </button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html
new file mode 100644
index 00000000000..1723b38c8ec
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html	
@@ -0,0 +1,50 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+            Profile
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+            Billing
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>
+            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+            Settings
+        </twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item class="text-destructive">
+            <twig:ux:icon name="lucide:log-out" class="me-2 size-4" />
+            Log out
+        </twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
+            Profile
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+            Billing
+        </button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+            Settings
+        </button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 text-destructive" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 17l5-5l-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path></svg>
+            Log out
+        </button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html
new file mode 100644
index 00000000000..5b1b7b10714
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html	
@@ -0,0 +1,399 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<div class="flex flex-col items-center gap-6 self-start mt-4">
+    {# Arabic #}
+    <div dir="rtl">
+        <twig:DropdownMenu>
+            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+                افتح القائمة
+            </twig:DropdownMenu:Trigger>
+            <twig:DropdownMenu:Content class="w-40">
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>الحساب</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+                            الملف الشخصي
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+                            الفوترة
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                            الإعدادات
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>الفريق</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>الفريق</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>دعوة المستخدمين</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>البريد الإلكتروني</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>رسالة</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Sub>
+                            <twig:DropdownMenu:SubTrigger>المزيد</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubContent>
+                                <twig:DropdownMenu:Item>تقويم</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Item>دردشة</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Separator />
+                                <twig:DropdownMenu:Item>خطاف ويب</twig:DropdownMenu:Item>
+                            </twig:DropdownMenu:SubContent>
+                        </twig:DropdownMenu:Sub>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>متقدم...</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Item>فريق جديد<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>عرض</twig:DropdownMenu:Label>
+                {% for it in [
+                    {name: 'ar-statusbar', label: 'شريط الحالة', checked: true},
+                    {name: 'ar-activitybar', label: 'شريط النشاط', checked: false},
+                    {name: 'ar-panel', label: 'اللوحة', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>الموضع</twig:DropdownMenu:Label>
+                {% for it in [
+                    {value: 'top', label: 'أعلى', checked: false},
+                    {value: 'bottom', label: 'أسفل', checked: true},
+                    {value: 'right', label: 'يمين', checked: false},
+                    {value: 'left', label: 'يسار', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+                    تسجيل الخروج
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:Content>
+        </twig:DropdownMenu>
+    </div>
+
+    {# Hebrew #}
+    <div dir="rtl">
+        <twig:DropdownMenu>
+            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+                פתח תפריט
+            </twig:DropdownMenu:Trigger>
+            <twig:DropdownMenu:Content class="w-40">
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>חשבון</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:user" class="me-2 size-4" />
+                            פרופיל
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:credit-card" class="me-2 size-4" />
+                            חיוב
+                        </twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>
+                            <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                            הגדרות
+                        </twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>הצוות</twig:DropdownMenu:Label>
+                <twig:DropdownMenu:Item>הצוות</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>הזמן משתמשים</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>אימייל</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>הודעה</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Sub>
+                            <twig:DropdownMenu:SubTrigger>עוד</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubContent>
+                                <twig:DropdownMenu:Item>יומן</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Item>צ'אט</twig:DropdownMenu:Item>
+                                <twig:DropdownMenu:Separator />
+                                <twig:DropdownMenu:Item>Webhook</twig:DropdownMenu:Item>
+                            </twig:DropdownMenu:SubContent>
+                        </twig:DropdownMenu:Sub>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>מתקדם...</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Item>צוות חדש<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>תצוגה</twig:DropdownMenu:Label>
+                {% for it in [
+                    {name: 'he-statusbar', label: 'שורת סטטוס', checked: true},
+                    {name: 'he-activitybar', label: 'שורת פעילות', checked: false},
+                    {name: 'he-panel', label: 'לוח', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="{{ it.name }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Label>מיקום</twig:DropdownMenu:Label>
+                {% for it in [
+                    {value: 'top', label: 'למעלה', checked: false},
+                    {value: 'bottom', label: 'למטה', checked: true},
+                    {value: 'right', label: 'ימין', checked: false},
+                    {value: 'left', label: 'שמאל', checked: false},
+                ] %}
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                        {{ it.label }}
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                        </span>
+                    </label>
+                {% endfor %}
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item class="text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10">
+                    התנתק
+                </twig:DropdownMenu:Item>
+            </twig:DropdownMenu:Content>
+        </twig:DropdownMenu>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-center gap-6 self-start mt-4">
+        <div dir="rtl">
+        <details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">&Oslash;&sect;&Ugrave;&#129;&Oslash;&ordf;&Oslash;&shy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#130;&Oslash;&sect;&Oslash;&brvbar;&Ugrave;&#133;&Oslash;&copy;
+            </summary>
+            <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&sect;&Ugrave;&#132;&Oslash;&shy;&Oslash;&sup3;&Oslash;&sect;&Oslash;&uml;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
+                            &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Ugrave;&#132;&Ugrave;&#129; &Oslash;&sect;&Ugrave;&#132;&Oslash;&acute;&Oslash;&reg;&Oslash;&micro;&Ugrave;&#138;
+                        </button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+                            &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#129;&Ugrave;&#136;&Oslash;&ordf;&Oslash;&plusmn;&Oslash;&copy;
+                        </button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+                            &Oslash;&sect;&Ugrave;&#132;&Oslash;&yen;&Oslash;&sup1;&Oslash;&macr;&Oslash;&sect;&Oslash;&macr;&Oslash;&sect;&Oslash;&ordf;
+                        </button>
+                    </div>
+                </div>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#129;&Oslash;&plusmn;&Ugrave;&#138;&Ugrave;&#130;</div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#129;&Oslash;&plusmn;&Ugrave;&#138;&Ugrave;&#130;</button>
+                <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&macr;&Oslash;&sup1;&Ugrave;&#136;&Oslash;&copy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup3;&Oslash;&ordf;&Oslash;&reg;&Oslash;&macr;&Ugrave;&#133;&Ugrave;&#138;&Ugrave;&#134;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&sect;&Ugrave;&#132;&Oslash;&uml;&Oslash;&plusmn;&Ugrave;&#138;&Oslash;&macr; &Oslash;&sect;&Ugrave;&#132;&Oslash;&yen;&Ugrave;&#132;&Ugrave;&#131;&Oslash;&ordf;&Oslash;&plusmn;&Ugrave;&#136;&Ugrave;&#134;&Ugrave;&#138;</button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&plusmn;&Oslash;&sup3;&Oslash;&sect;&Ugrave;&#132;&Oslash;&copy;</button>
+                        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup2;&Ugrave;&#138;&Oslash;&macr;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&ordf;&Ugrave;&#130;&Ugrave;&#136;&Ugrave;&#138;&Ugrave;&#133;</button>
+                                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&macr;&Oslash;&plusmn;&Oslash;&macr;&Oslash;&acute;&Oslash;&copy;</button>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&reg;&Oslash;&middot;&Oslash;&sect;&Ugrave;&#129; &Ugrave;&#136;&Ugrave;&#138;&Oslash;&uml;</button>
+                            </div>
+                        </div>
+                        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Ugrave;&#133;&Oslash;&ordf;&Ugrave;&#130;&Oslash;&macr;&Ugrave;&#133;...</button>
+                    </div>
+                </div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Ugrave;&#129;&Oslash;&plusmn;&Ugrave;&#138;&Ugrave;&#130; &Oslash;&not;&Oslash;&macr;&Ugrave;&#138;&Oslash;&macr;<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;+T</span>
+</button>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&Oslash;&sup1;&Oslash;&plusmn;&Oslash;&para;</div>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="ar-statusbar" checked>
+                        &Oslash;&acute;&Oslash;&plusmn;&Ugrave;&#138;&Oslash;&middot; &Oslash;&sect;&Ugrave;&#132;&Oslash;&shy;&Oslash;&sect;&Ugrave;&#132;&Oslash;&copy;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="ar-activitybar">
+                        &Oslash;&acute;&Oslash;&plusmn;&Ugrave;&#138;&Oslash;&middot; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#134;&Oslash;&acute;&Oslash;&sect;&Oslash;&middot;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="ar-panel">
+                        &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#132;&Ugrave;&#136;&Oslash;&shy;&Oslash;&copy;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Ugrave;&#136;&Oslash;&para;&Oslash;&sup1;</div>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="top">
+                        &Oslash;&pound;&Oslash;&sup1;&Ugrave;&#132;&Ugrave;&#137;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="bottom" checked>
+                        &Oslash;&pound;&Oslash;&sup3;&Ugrave;&#129;&Ugrave;&#132;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="right">
+                        &Ugrave;&#138;&Ugrave;&#133;&Ugrave;&#138;&Ugrave;&#134;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="ar-position" value="left">
+                        &Ugrave;&#138;&Oslash;&sup3;&Oslash;&sect;&Oslash;&plusmn;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item">&Oslash;&ordf;&Oslash;&sup3;&Oslash;&not;&Ugrave;&#138;&Ugrave;&#132; &Oslash;&sect;&Ugrave;&#132;&Oslash;&reg;&Oslash;&plusmn;&Ugrave;&#136;&Oslash;&not;
+                </button>
+            </div>
+        </details>
+    </div>
+
+        <div dir="rtl">
+        <details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">&times;&curren;&times;&ordf;&times;&#151; &times;&ordf;&times;&curren;&times;&uml;&times;&#153;&times;&#152;
+            </summary>
+            <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&#151;&times;&copy;&times;&#145;&times;&#149;&times;&#159;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
+                            &times;&curren;&times;&uml;&times;&#149;&times;&curren;&times;&#153;&times;&#156;
+                        </button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+                            &times;&#151;&times;&#153;&times;&#149;&times;&#145;
+                        </button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+                            &times;&#148;&times;&#146;&times;&#147;&times;&uml;&times;&#149;&times;&ordf;
+                        </button>
+                    </div>
+                </div>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&times;&#148;&times;&brvbar;&times;&#149;&times;&#149;&times;&ordf;</div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#148;&times;&brvbar;&times;&#149;&times;&#149;&times;&ordf;</button>
+                <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&#148;&times;&#150;&times;&#158;&times;&#159; &times;&#158;&times;&copy;&times;&ordf;&times;&#158;&times;&copy;&times;&#153;&times;&#157;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#144;&times;&#153;&times;&#158;&times;&#153;&times;&#153;&times;&#156;</button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#148;&times;&#149;&times;&#147;&times;&cent;&times;&#148;</button>
+                        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&cent;&times;&#149;&times;&#147;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#153;&times;&#149;&times;&#158;&times;&#159;</button>
+                                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&brvbar;'&times;&#144;&times;&#152;</button>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Webhook</button>
+                            </div>
+                        </div>
+                        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#158;&times;&ordf;&times;&sect;&times;&#147;&times;&#157;...</button>
+                    </div>
+                </div>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&brvbar;&times;&#149;&times;&#149;&times;&ordf; &times;&#151;&times;&#147;&times;&copy;<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;+T</span>
+</button>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&times;&ordf;&times;&brvbar;&times;&#149;&times;&#146;&times;&#148;</div>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="he-statusbar" checked>
+                        &times;&copy;&times;&#149;&times;&uml;&times;&ordf; &times;&iexcl;&times;&#152;&times;&#152;&times;&#149;&times;&iexcl;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="he-activitybar">
+                        &times;&copy;&times;&#149;&times;&uml;&times;&ordf; &times;&curren;&times;&cent;&times;&#153;&times;&#156;&times;&#149;&times;&ordf;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="checkbox" class="peer sr-only" name="he-panel">
+                        &times;&#156;&times;&#149;&times;&#151;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&times;&#158;&times;&#153;&times;&sect;&times;&#149;&times;&#157;</div>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="top">
+                        &times;&#156;&times;&#158;&times;&cent;&times;&#156;&times;&#148;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="bottom" checked>
+                        &times;&#156;&times;&#158;&times;&#152;&times;&#148;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="right">
+                        &times;&#153;&times;&#158;&times;&#153;&times;&#159;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                        <input type="radio" class="peer sr-only" name="he-position" value="left">
+                        &times;&copy;&times;&#158;&times;&#144;&times;&#156;
+                        <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                        </span>
+                    </label>
+                                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item">&times;&#148;&times;&ordf;&times;&nbsp;&times;&ordf;&times;&sect;
+                </button>
+            </div>
+        </details>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html
new file mode 100644
index 00000000000..78ff8b30560
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html	
@@ -0,0 +1,60 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Payment Method
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="min-w-56">
+        <twig:DropdownMenu:Label>Select Payment Method</twig:DropdownMenu:Label>
+        {% set items = [
+            {value: 'card', icon: 'lucide:credit-card', label: 'Credit Card', checked: true},
+            {value: 'paypal', icon: 'lucide:wallet', label: 'PayPal', checked: false},
+            {value: 'bank', icon: 'lucide:building-2', label: 'Bank Transfer', checked: false},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="payment" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                <twig:ux:icon name="{{ it.icon }}" class="me-2 size-4" />
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Payment Method
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 rounded-md border bg-popover p-1 text-popover-foreground shadow-md min-w-56" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Select Payment Method</div>
+                            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="payment" value="card" checked>
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
+                Credit Card
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="payment" value="paypal">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"></path><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"></path></g></svg>
+                PayPal
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="payment" value="bank">
+                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 12h4m-4-4h4m0 13v-3a2 2 0 0 0-4 0v3"></path><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path></g></svg>
+                Bank Transfer
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+            </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html
new file mode 100644
index 00000000000..bc548a24b9c
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html	
@@ -0,0 +1,56 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content class="w-32">
+        <twig:DropdownMenu:Label>Panel Position</twig:DropdownMenu:Label>
+        {% set items = [
+            {value: 'top', label: 'Top', checked: false},
+            {value: 'bottom', label: 'Bottom', checked: true},
+            {value: 'right', label: 'Right', checked: false},
+        ] %}
+        {% for it in items %}
+            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="position" value="{{ it.value }}" {% if it.checked %}checked{% endif %}>
+                {{ it.label }}
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <twig:ux:icon name="lucide:check" class="size-4" aria-hidden="true" />
+                </span>
+            </label>
+        {% endfor %}
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-32" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Panel Position</div>
+                            <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="position" value="top">
+                Top
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="position" value="bottom" checked>
+                Bottom
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+                    <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
+                <input type="radio" class="peer sr-only" name="position" value="right">
+                Right
+                <span class="ms-auto flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+                </span>
+            </label>
+            </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html
new file mode 100644
index 00000000000..766b341ffa7
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html	
@@ -0,0 +1,36 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
+        <twig:DropdownMenu:Item>Profile<twig:DropdownMenu:Shortcut>⇧⌘P</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Billing<twig:DropdownMenu:Shortcut>⌘B</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Item>Settings<twig:DropdownMenu:Shortcut>⌘S</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Separator />
+        <twig:DropdownMenu:Item>Log out<twig:DropdownMenu:Shortcut>⇧⌘Q</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;P</span>
+</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;B</span>
+</button>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Settings<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;S</span>
+</button>
+        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Log out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
+</button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html
new file mode 100644
index 00000000000..693cf2be4df
--- /dev/null
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html	
@@ -0,0 +1,64 @@
+<!--
+- Kit: Shadcn UI
+- Component: Dropdown Menu
+- Code:
+```twig
+<twig:DropdownMenu>
+    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
+        Open
+    </twig:DropdownMenu:Trigger>
+    <twig:DropdownMenu:Content>
+        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
+        <twig:DropdownMenu:Sub>
+            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubContent>
+                <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
+                <twig:DropdownMenu:Sub>
+                    <twig:DropdownMenu:SubTrigger>More options</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubContent>
+                        <twig:DropdownMenu:Item>Calendly</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Item>Slack</twig:DropdownMenu:Item>
+                        <twig:DropdownMenu:Separator />
+                        <twig:DropdownMenu:Item>Webhook</twig:DropdownMenu:Item>
+                    </twig:DropdownMenu:SubContent>
+                </twig:DropdownMenu:Sub>
+                <twig:DropdownMenu:Separator />
+                <twig:DropdownMenu:Item>Advanced...</twig:DropdownMenu:Item>
+            </twig:DropdownMenu:SubContent>
+        </twig:DropdownMenu:Sub>
+        <twig:DropdownMenu:Item>New Team<twig:DropdownMenu:Shortcut>⌘+T</twig:DropdownMenu:Shortcut></twig:DropdownMenu:Item>
+    </twig:DropdownMenu:Content>
+</twig:DropdownMenu>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
+    </summary>
+    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>
+        <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">Invite users<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Email</button>
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Message</button>
+                <div class="relative" data-slot="dropdown-menu-sub">
+<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">More options<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+</button>
+                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Calendly</button>
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Slack</button>
+                        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Webhook</button>
+                    </div>
+                </div>
+                <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
+
+                <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Advanced...</button>
+            </div>
+        </div>
+        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">New Team<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;+T</span>
+</button>
+    </div>
+</details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html.twig__1.html
similarity index 100%
rename from src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html__1.html
rename to src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Demo.html.twig__1.html
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html
deleted file mode 100644
index 968d8cf672b..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component sidebar, code file Usage.html__1.html	
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Sidebar
-- Code:
-```twig
-<twig:Sidebar>
-    <twig:Sidebar:Header>
-        <div class="font-semibold">Acme Inc.</div>
-    </twig:Sidebar:Header>
-    <twig:Sidebar:Content>
-        <twig:Sidebar:MenuButton active>Dashboard</twig:Sidebar:MenuButton>
-        <twig:Sidebar:MenuButton>Settings</twig:Sidebar:MenuButton>
-    </twig:Sidebar:Content>
-    <twig:Sidebar:Footer>
-        <twig:Sidebar:MenuButton>Sign out</twig:Sidebar:MenuButton>
-    </twig:Sidebar:Footer>
-</twig:Sidebar>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<aside class="flex h-full w-64 flex-col bg-sidebar text-sidebar-foreground border-sidebar-border border-r" data-slot="sidebar" data-side="left"><div class="flex flex-col gap-2 p-2" data-slot="sidebar-header">
-<div class="font-semibold">Acme Inc.</div>
-    </div>    <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2" data-slot="sidebar-content">
-<button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 bg-sidebar-accent font-medium text-sidebar-accent-foreground" data-slot="sidebar-menu-button" aria-current="page">Dashboard</button>        <button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Settings</button>    </div>    <div class="flex flex-col gap-2 p-2 border-t border-sidebar-border" data-slot="sidebar-footer">
-<button type="button" class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50" data-slot="sidebar-menu-button">Sign out</button>    </div></aside>
\ No newline at end of file

From 3aed6083469bf358a13c1370e10b8969f85e8c04 Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Thu, 23 Apr 2026 07:50:25 +0200
Subject: [PATCH 4/6] [Toolkit][Shadcn] Move CHANGELOG entries to 3.1

---
 src/Toolkit/CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md
index 31812d12dcc..c3b500b7898 100644
--- a/src/Toolkit/CHANGELOG.md
+++ b/src/Toolkit/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 - [Toolkit] Add `avatar` recipe
 - [Toolkit] Add `dropdown` recipe
+- [Shadcn] Add `dropdown-menu` recipe
+- [Shadcn] Add `sidebar` recipe
 
 ## 3.0.0
 
@@ -13,8 +15,6 @@
 - [Shadcn] Add `collapsible` recipe
 - [Shadcn] Add `typography` recipe
 - [Shadcn] Add `toggle-group` recipe
-- [Shadcn] Add `dropdown-menu` recipe
-- [Shadcn] Add `sidebar` recipe
 
 ## 2.35
 

From 6b29da0511ecffb1dd67f9cee92e2b6043e8f474 Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Thu, 23 Apr 2026 15:29:07 +0200
Subject: [PATCH 5/6] [Toolkit][Shadcn] Apply `_trigger_attrs` convention to
 dropdown-menu

Follow up on the review feedback on #3487: the Trigger template
should not enforce a specific HTML element but expose a Twig
variable with the needed attributes so the consumer can pick
their own element (button, link, span...).

Since `DropdownMenu` relied on native `<details>`/`<summary>`
to handle open/close, replace it with a `<div>` backed by a
new `dropdown_menu_controller.js` Stimulus controller handling
toggle, outside click and escape.

Convert `SubTrigger` to the same convention (drop the hardcoded
`<button>`/chevron; consumer now picks the wrapping element
and adds the chevron). Migrate `Sub`/`SubContent` from the
`peer/peer-hover` pattern to `group/group-hover` so the sub-menu
still opens on hover once the peer anchor moves out of the
template.

Also drop two orphan snapshots (`Demo.html__1.html`,
`Usage.html__1.html`) shipped by mistake and no longer
generated by the test suite.
---
 .../controllers/dropdown_menu_controller.js   |  63 +++++++++
 .../dropdown-menu/examples/Avatar.html.twig   |  12 +-
 .../dropdown-menu/examples/Basic.html.twig    |   4 +-
 .../examples/Checkboxes Icons.html.twig       |   4 +-
 .../examples/Checkboxes.html.twig             |   4 +-
 .../dropdown-menu/examples/Complex.html.twig  |  39 ++++--
 .../dropdown-menu/examples/Demo.html.twig     |  11 +-
 .../examples/Destructive.html.twig            |   4 +-
 .../dropdown-menu/examples/Icons.html.twig    |   4 +-
 .../dropdown-menu/examples/RTL.html.twig      |  50 ++++++--
 .../examples/Radio Icons.html.twig            |   4 +-
 .../dropdown-menu/examples/Radio.html.twig    |   4 +-
 .../examples/Shortcuts.html.twig              |   4 +-
 .../dropdown-menu/examples/Submenu.html.twig  |  18 ++-
 .../dropdown-menu/examples/Usage.html.twig    |   4 +-
 .../kits/shadcn/dropdown-menu/manifest.json   |   1 +
 .../components/DropdownMenu.html.twig         |  14 +-
 .../components/DropdownMenu/Content.html.twig |   4 +
 .../components/DropdownMenu/Sub.html.twig     |   2 +-
 .../DropdownMenu/SubContent.html.twig         |   2 +-
 .../DropdownMenu/SubTrigger.html.twig         |  19 +--
 .../components/DropdownMenu/Trigger.html.twig |  19 +--
 ...n-menu, code file Avatar.html.twig__1.html |  25 ++--
 ...wn-menu, code file Basic.html.twig__1.html |  12 +-
 ...de file Checkboxes Icons.html.twig__1.html |  12 +-
 ...nu, code file Checkboxes.html.twig__1.html |  12 +-
 ...-menu, code file Complex.html.twig__1.html | 107 +++++++++-------
 ...own-menu, code file Demo.html.twig__1.html |  28 ++--
 ...dropdown-menu, code file Demo.html__1.html |  27 ----
 ...u, code file Destructive.html.twig__1.html |  12 +-
 ...wn-menu, code file Icons.html.twig__1.html |  12 +-
 ...down-menu, code file RTL.html.twig__1.html | 120 ++++++++++++------
 ...u, code file Radio Icons.html.twig__1.html |  12 +-
 ...wn-menu, code file Radio.html.twig__1.html |  12 +-
 ...enu, code file Shortcuts.html.twig__1.html |  12 +-
 ...-menu, code file Submenu.html.twig__1.html |  44 ++++---
 ...ropdown-menu, code file Usage.html__1.html |  20 ---
 37 files changed, 459 insertions(+), 298 deletions(-)
 create mode 100644 src/Toolkit/kits/shadcn/dropdown-menu/assets/controllers/dropdown_menu_controller.js
 delete mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html
 delete mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html

diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/assets/controllers/dropdown_menu_controller.js b/src/Toolkit/kits/shadcn/dropdown-menu/assets/controllers/dropdown_menu_controller.js
new file mode 100644
index 00000000000..07fd7d1273a
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/assets/controllers/dropdown_menu_controller.js
@@ -0,0 +1,63 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['trigger', 'content'];
+
+    static values = {
+        open: { type: Boolean, default: false },
+    };
+
+    connect() {
+        this.updateState();
+    }
+
+    toggle(event) {
+        event?.preventDefault();
+        this.openValue = !this.openValue;
+    }
+
+    close() {
+        this.openValue = false;
+    }
+
+    openValueChanged() {
+        this.updateState();
+    }
+
+    handleOutsideClick(event) {
+        if (!this.openValue || this.element.contains(event.target)) {
+            return;
+        }
+        this.openValue = false;
+    }
+
+    handleEscape(event) {
+        if (!this.openValue || event.key !== 'Escape') {
+            return;
+        }
+        this.openValue = false;
+        this.triggerTargets[0]?.focus();
+    }
+
+    updateState() {
+        const open = this.openValue;
+        const state = open ? 'open' : 'closed';
+
+        this.element.dataset.state = state;
+
+        for (const trigger of this.triggerTargets) {
+            trigger.setAttribute('aria-expanded', String(open));
+            trigger.dataset.state = state;
+        }
+
+        for (const content of this.contentTargets) {
+            content.dataset.state = state;
+            content.setAttribute('aria-hidden', String(!open));
+            if (open) {
+                content.removeAttribute('hidden');
+            } else {
+                content.setAttribute('hidden', '');
+            }
+        }
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
index 7df58635282..78cff9e3d72 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Avatar.html.twig
@@ -1,9 +1,11 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent">
-        <twig:Avatar>
-            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
-            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
-        </twig:Avatar>
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="ghost" size="icon" class="rounded-full" {{ ...dropdown_menu_trigger_attrs }}>
+            <twig:Avatar>
+                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
+                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
+            </twig:Avatar>
+        </twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="end-0 start-auto w-48">
         <twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
index 893ef569f1f..0442e53ec4e 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Basic.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig
index b2356b2486e..aa9dd386ab9 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig	
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes Icons.html.twig	
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Notifications
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Notifications</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-56">
         <twig:DropdownMenu:Label>Notification Preferences</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
index 4140e723ce8..b091838cf24 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Checkboxes.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+     <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-40">
         <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
index 6a71f7a45ba..6cb3ecbef48 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Complex.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu class="self-start mt-4">
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Complex Menu
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Complex Menu</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-48">
         <twig:DropdownMenu:Label>File</twig:DropdownMenu:Label>
@@ -14,8 +14,11 @@
         </twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
-                Open Recent
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
+                    Open Recent
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Recent Projects</twig:DropdownMenu:Label>
@@ -29,8 +32,11 @@
                 </twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
                     <twig:DropdownMenu:SubTrigger>
-                        <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
-                        More Projects
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
+                            More Projects
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
                     </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
@@ -79,8 +85,11 @@
         </label>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
-                Theme
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
+                    Theme
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
@@ -113,8 +122,11 @@
         </twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
-                Settings
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                    Settings
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Preferences</twig:DropdownMenu:Label>
@@ -128,8 +140,11 @@
                 </twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
                     <twig:DropdownMenu:SubTrigger>
-                        <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
-                        Notifications
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                            Notifications
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
                     </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Label>Notification Types</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
index 251b9d8e055..35e8792f0e2 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Demo.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-40">
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
@@ -10,7 +10,12 @@
         <twig:DropdownMenu:Separator />
         <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
-            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    Invite users
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
+            </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
index 0e667568aab..60aa8c27cdb 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Destructive.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Actions
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Actions</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
index 0fb34ebc21c..cb32db5b565 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Icons.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
index dfecb101afe..d6e5a4f1213 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/RTL.html.twig
@@ -2,12 +2,17 @@
     {# Arabic #}
     <div dir="rtl">
         <twig:DropdownMenu>
-            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-                افتح القائمة
+            <twig:DropdownMenu:Trigger>
+                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>افتح القائمة</twig:Button>
             </twig:DropdownMenu:Trigger>
             <twig:DropdownMenu:Content class="w-40">
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>الحساب</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            الحساب
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
                             <twig:ux:icon name="lucide:user" class="me-2 size-4" />
@@ -27,12 +32,22 @@
                 <twig:DropdownMenu:Label>الفريق</twig:DropdownMenu:Label>
                 <twig:DropdownMenu:Item>الفريق</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>دعوة المستخدمين</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            دعوة المستخدمين
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>البريد الإلكتروني</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>رسالة</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Sub>
-                            <twig:DropdownMenu:SubTrigger>المزيد</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubTrigger>
+                                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                                    المزيد
+                                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                                </twig:Button>
+                            </twig:DropdownMenu:SubTrigger>
                             <twig:DropdownMenu:SubContent>
                                 <twig:DropdownMenu:Item>تقويم</twig:DropdownMenu:Item>
                                 <twig:DropdownMenu:Item>دردشة</twig:DropdownMenu:Item>
@@ -87,12 +102,17 @@
     {# Hebrew #}
     <div dir="rtl">
         <twig:DropdownMenu>
-            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-                פתח תפריט
+            <twig:DropdownMenu:Trigger>
+                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>פתח תפריט</twig:Button>
             </twig:DropdownMenu:Trigger>
             <twig:DropdownMenu:Content class="w-40">
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>חשבון</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            חשבון
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
                             <twig:ux:icon name="lucide:user" class="me-2 size-4" />
@@ -112,12 +132,22 @@
                 <twig:DropdownMenu:Label>הצוות</twig:DropdownMenu:Label>
                 <twig:DropdownMenu:Item>הצוות</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>הזמן משתמשים</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            הזמן משתמשים
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>אימייל</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>הודעה</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Sub>
-                            <twig:DropdownMenu:SubTrigger>עוד</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubTrigger>
+                                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                                    עוד
+                                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                                </twig:Button>
+                            </twig:DropdownMenu:SubTrigger>
                             <twig:DropdownMenu:SubContent>
                                 <twig:DropdownMenu:Item>יומן</twig:DropdownMenu:Item>
                                 <twig:DropdownMenu:Item>צ'אט</twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig
index 247a3de2db5..860b2058484 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig	
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio Icons.html.twig	
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Payment Method
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Payment Method</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="min-w-56">
         <twig:DropdownMenu:Label>Select Payment Method</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
index f3a4a861ad9..14af400845f 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Radio.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-32">
         <twig:DropdownMenu:Label>Panel Position</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
index 021467e68cf..ed4f2857c8b 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Shortcuts.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
index b68e7039cba..16ac3331ce6 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Submenu.html.twig
@@ -1,16 +1,26 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
-            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    Invite users
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
+            </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>More options</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            More options
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>Calendly</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>Slack</twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
index d0a68b408be..aaac7ad1f20 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/examples/Usage.html.twig
@@ -1,6 +1,6 @@
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
-        Open menu
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open menu</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
index a5e35dea96c..d2eb72cc897 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/manifest.json
@@ -4,6 +4,7 @@
     "name": "Dropdown Menu",
     "description": "A click-triggered menu that lists a set of actions.",
     "copy-files": {
+        "assets/": "assets/",
         "templates/": "templates/"
     },
     "dependencies": {
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
index 02c3b30dab0..4ab4affc9ce 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu.html.twig
@@ -1,9 +1,19 @@
+{# @prop open boolean Whether the menu is open on initial render. Defaults to `false` #}
 {# @block content A `DropdownMenu:Trigger` and a `DropdownMenu:Content` #}
-<details
+{%- props open = false -%}
+{%- set _dropdown_menu_open = open -%}
+<div
     class="{{ ('group/dropdown-menu relative inline-block ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu',
+        'data-controller': 'dropdown-menu',
+        'data-dropdown-menu-open-value': open ? 'true' : 'false',
+        'data-action': [
+            'click@window->dropdown-menu#handleOutsideClick',
+            'keydown.esc@window->dropdown-menu#handleEscape',
+        ]|join(' ')|html_attr_type('sst'),
+        'data-state': open ? 'open' : 'closed',
     }) }}
 >
     {%- block content %}{% endblock -%}
-</details>
+</div>
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
index 32d361e62c4..dc098959c58 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Content.html.twig
@@ -4,6 +4,10 @@
     class="{{ ('absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-content',
+        'data-dropdown-menu-target': 'content',
+        'aria-hidden': not _dropdown_menu_open ? 'true' : 'false',
+        'data-state': _dropdown_menu_open ? 'open' : 'closed',
+        ...(not _dropdown_menu_open ? {hidden: ''} : {}),
     }) }}
 >
     {%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
index 2aeb9523f1e..3fdab0120b9 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Sub.html.twig
@@ -1,6 +1,6 @@
 {# @block content A `DropdownMenu:SubTrigger` and a `DropdownMenu:SubContent` #}
 <div
-    class="{{ ('relative ' ~ attributes.render('class'))|tailwind_merge }}"
+    class="{{ ('group/dropdown-menu-sub relative ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-sub',
     }) }}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
index b62743658a1..e234db2d1f7 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubContent.html.twig
@@ -1,7 +1,7 @@
 {# @block content The sub-menu items revealed on hover or focus #}
 <div
     role="menu"
-    class="{{ ('invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
+    class="{{ ('invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-sub-content',
     }) }}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
index d090bc0a077..7337404359d 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/SubTrigger.html.twig
@@ -1,12 +1,7 @@
-{# @block content The sub-menu trigger label #}
-<button
-    type="button"
-    role="menuitem"
-    class="{{ ('peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
-    {{ attributes.defaults({
-        'data-slot': 'dropdown-menu-sub-trigger',
-    }) }}
->
-    {%- block content %}{% endblock -%}
-    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
-</button>
+{# @block content The sub-menu trigger label (e.g., a `button`) that opens the sub-menu on hover or focus #}
+{%- set dropdown_menu_sub_trigger_attrs = {
+    'data-slot': 'dropdown-menu-sub-trigger',
+    role: 'menuitem',
+    tabindex: 0,
+} -%}
+{%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
index 303e604e448..988fb32e74c 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/Trigger.html.twig
@@ -1,9 +1,10 @@
-{# @block content The clickable trigger #}
-<summary
-    class="{{ ('list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-md inline-flex items-center justify-center ' ~ attributes.render('class'))|tailwind_merge }}"
-    {{ attributes.defaults({
-        'data-slot': 'dropdown-menu-trigger',
-    }) }}
->
-    {%- block content %}{% endblock -%}
-</summary>
+{# @block content The clickable trigger (e.g., a `Button`) that opens the menu #}
+{%- set dropdown_menu_trigger_attrs = {
+    'data-slot': 'dropdown-menu-trigger',
+    'data-dropdown-menu-target': 'trigger',
+    'data-action': 'click->dropdown-menu#toggle'|html_attr_type('sst'),
+    'aria-haspopup': 'menu',
+    'aria-expanded': _dropdown_menu_open ? 'true' : 'false',
+    'data-state': _dropdown_menu_open ? 'open' : 'closed',
+} -%}
+{%- block content %}{% endblock -%}
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html
index 5533a0ab054..c70ef4c518f 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Avatar.html.twig__1.html	
@@ -4,11 +4,13 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent">
-        <twig:Avatar>
-            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
-            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
-        </twig:Avatar>
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="ghost" size="icon" class="rounded-full" {{ ...dropdown_menu_trigger_attrs }}>
+            <twig:Avatar>
+                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="shadcn" />
+                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
+            </twig:Avatar>
+        </twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="end-0 start-auto w-48">
         <twig:DropdownMenu:Item>
@@ -32,12 +34,13 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-accent" data-slot="dropdown-menu-trigger"><span data-slot="avatar" data-size="default" class="size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten"><img data-slot="avatar-image" class="hidden rounded-full aspect-square size-full object-cover" onload="this.classList.remove('hidden'); this.closest('[data-slot=avatar]')?.querySelector('[data-slot=avatar-fallback]')?.classList.add('hidden');" alt="shadcn" src="https://github.com/shadcn.png">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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 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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-8 rounded-full" data-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed"><span data-slot="avatar" data-size="default" class="size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten"><img data-slot="avatar-image" class="hidden rounded-full aspect-square size-full object-cover" onload="this.classList.remove('hidden'); this.closest('[data-slot=avatar]')?.querySelector('[data-slot=avatar-fallback]')?.classList.add('hidden');" alt="shadcn" src="https://github.com/shadcn.png">
 
-            <span data-slot="avatar-fallback" class="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs">LR</span>
-        </span>
-    </summary>
-    <div role="menu" class="absolute top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md end-0 start-auto w-48" data-slot="dropdown-menu-content">
+                <span data-slot="avatar-fallback" class="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs">LR</span>
+            </span>
+        </button>
+        <div role="menu" class="absolute top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md end-0 start-auto w-48" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77a4 4 0 0 1 6.74 0a4 4 0 0 1 4.78 4.78a4 4 0 0 1 0 6.74a4 4 0 0 1-4.77 4.78a4 4 0 0 1-6.75 0a4 4 0 0 1-4.78-4.77a4 4 0 0 1 0-6.76"></path><path d="m9 12l2 2l4-4"></path></g></svg>
             Account
         </button>
@@ -53,4 +56,4 @@
             Sign Out
         </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html
index 883881895c1..b06575c2976 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Basic.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
@@ -20,9 +20,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing</button>
@@ -33,4 +33,4 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Support</button>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item" disabled>API</button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html
index 76949f5e017..2e8188d8950 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes Icons.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Notifications
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Notifications</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-56">
         <twig:DropdownMenu:Label>Notification Preferences</twig:DropdownMenu:Label>
@@ -28,9 +28,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Notifications
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-56" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Notifications</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-56" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Notification Preferences</div>
                             <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
                 <input type="checkbox" class="peer sr-only" name="email" checked>
@@ -57,4 +57,4 @@
                 </span>
             </label>
             </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html
index 3e402a8fea4..00d0328b5cb 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Checkboxes.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+     <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-40">
         <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
@@ -16,9 +16,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Appearance</div>
         <label class="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground" data-slot="dropdown-menu-checkbox-item">
     <input type="checkbox" class="peer sr-only" name="statusbar" checked>
@@ -36,4 +36,4 @@
         <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
     </span>Panel</label>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html
index 6272dcdf6d7..fbd0b7fc720 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Complex.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu class="self-start mt-4">
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Complex Menu
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Complex Menu</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-48">
         <twig:DropdownMenu:Label>File</twig:DropdownMenu:Label>
@@ -19,8 +19,11 @@
         </twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
-                Open Recent
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:folder-open" class="me-2 size-4" />
+                    Open Recent
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Recent Projects</twig:DropdownMenu:Label>
@@ -34,8 +37,11 @@
                 </twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
                     <twig:DropdownMenu:SubTrigger>
-                        <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
-                        More Projects
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            <twig:ux:icon name="lucide:more-horizontal" class="me-2 size-4" />
+                            More Projects
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
                     </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
@@ -84,8 +90,11 @@
         </label>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
-                Theme
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:palette" class="me-2 size-4" />
+                    Theme
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Appearance</twig:DropdownMenu:Label>
@@ -118,8 +127,11 @@
         </twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
             <twig:DropdownMenu:SubTrigger>
-                <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
-                Settings
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    <twig:ux:icon name="lucide:settings" class="me-2 size-4" />
+                    Settings
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
             </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Label>Preferences</twig:DropdownMenu:Label>
@@ -133,8 +145,11 @@
                 </twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
                     <twig:DropdownMenu:SubTrigger>
-                        <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
-                        Notifications
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            <twig:ux:icon name="lucide:bell" class="me-2 size-4" />
+                            Notifications
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
                     </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Label>Notification Types</twig:DropdownMenu:Label>
@@ -181,9 +196,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block self-start mt-4" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Complex Menu
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-48" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block self-start mt-4" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Complex Menu</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-48" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">File</div>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path></g></svg>
             New File<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;N</span>
@@ -191,12 +206,12 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
             New Folder<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;N</span>
         </button>
-        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg>
-                Open Recent
-            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg>
+                    Open Recent
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                </button>
+                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Recent Projects</div>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
                     Project Alpha
@@ -204,12 +219,12 @@
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
                     Project Beta
                 </button>
-                <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
-                        More Projects
-                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg>
+                            More Projects
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5m-10 4.5L8 15l2 2.5m4-5l2 2.5l-2 2.5"></path></g></svg>
                             Project Gamma
                         </button>
@@ -252,12 +267,12 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
             </span>
         </label>
-        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
-                Theme
-            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></g></svg>
+                    Theme
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                </button>
+                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Appearance</div>
                                                     <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
                         <input type="radio" class="peer sr-only" name="theme" value="light" checked>
@@ -294,12 +309,12 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></g></svg>
             Billing
         </button>
-        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
-                Settings
-            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></g></svg>
+                    Settings
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                </button>
+                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Preferences</div>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10m-9-4h.01"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
                     Keyboard Shortcuts
@@ -307,12 +322,12 @@
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6"></path></svg>
                     Language
                 </button>
-                <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
-                        Notifications
-                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+                            Notifications
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Notification Types</div>
                         <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
                             <input type="checkbox" class="peer sr-only" name="push" checked>
@@ -353,4 +368,4 @@
             Sign Out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
         </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html
index f5144d778b0..0129e805a24 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-40">
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
@@ -15,7 +15,12 @@
         <twig:DropdownMenu:Separator />
         <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
-            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    Invite users
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
+            </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
@@ -34,9 +39,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;P</span>
 </button>
@@ -47,10 +52,11 @@
         <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
 
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>
-        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">Invite users<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">Invite users
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                </button>
+                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Email</button>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Message</button>
                 <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
@@ -70,4 +76,4 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Log out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
 </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html
deleted file mode 100644
index 78e855fb960..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Demo.html__1.html	
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Dropdown Menu
-- Code:
-```twig
-<twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
-        Account
-    </twig:DropdownMenu:Trigger>
-    <twig:DropdownMenu:Content class="w-56">
-        <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
-        <twig:DropdownMenu:Separator />
-        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item>Billing</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item disabled>API (soon)</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Separator />
-        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
-    </twig:DropdownMenu:Content>
-</twig:DropdownMenu>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent" data-slot="dropdown-menu-trigger">Account
-    </summary>    <div role="menu" class="absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-56" data-slot="dropdown-menu-content">
-<div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
-        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Billing</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item" disabled>API (soon)</button>        <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
-        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Sign out</button>    </div></details>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html
index f12e8ca36ce..0fc8b0e7442 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Destructive.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Actions
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Actions</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>
@@ -25,9 +25,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Actions
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Actions</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4"></path></svg>
             Edit
         </button>
@@ -40,4 +40,4 @@
             Delete
         </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html
index 1723b38c8ec..672e339fc57 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Icons.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>
@@ -29,9 +29,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
             Profile
         </button>
@@ -47,4 +47,4 @@
             Log out
         </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html
index 5b1b7b10714..04ac401e771 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file RTL.html.twig__1.html	
@@ -7,12 +7,17 @@
     {# Arabic #}
     <div dir="rtl">
         <twig:DropdownMenu>
-            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-                افتح القائمة
+            <twig:DropdownMenu:Trigger>
+                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>افتح القائمة</twig:Button>
             </twig:DropdownMenu:Trigger>
             <twig:DropdownMenu:Content class="w-40">
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>الحساب</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            الحساب
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
                             <twig:ux:icon name="lucide:user" class="me-2 size-4" />
@@ -32,12 +37,22 @@
                 <twig:DropdownMenu:Label>الفريق</twig:DropdownMenu:Label>
                 <twig:DropdownMenu:Item>الفريق</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>دعوة المستخدمين</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            دعوة المستخدمين
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>البريد الإلكتروني</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>رسالة</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Sub>
-                            <twig:DropdownMenu:SubTrigger>المزيد</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubTrigger>
+                                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                                    المزيد
+                                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                                </twig:Button>
+                            </twig:DropdownMenu:SubTrigger>
                             <twig:DropdownMenu:SubContent>
                                 <twig:DropdownMenu:Item>تقويم</twig:DropdownMenu:Item>
                                 <twig:DropdownMenu:Item>دردشة</twig:DropdownMenu:Item>
@@ -92,12 +107,17 @@
     {# Hebrew #}
     <div dir="rtl">
         <twig:DropdownMenu>
-            <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-                פתח תפריט
+            <twig:DropdownMenu:Trigger>
+                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>פתח תפריט</twig:Button>
             </twig:DropdownMenu:Trigger>
             <twig:DropdownMenu:Content class="w-40">
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>חשבון</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            חשבון
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>
                             <twig:ux:icon name="lucide:user" class="me-2 size-4" />
@@ -117,12 +137,22 @@
                 <twig:DropdownMenu:Label>הצוות</twig:DropdownMenu:Label>
                 <twig:DropdownMenu:Item>הצוות</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>הזמן משתמשים</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            הזמן משתמשים
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>אימייל</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>הודעה</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Sub>
-                            <twig:DropdownMenu:SubTrigger>עוד</twig:DropdownMenu:SubTrigger>
+                            <twig:DropdownMenu:SubTrigger>
+                                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                                    עוד
+                                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                                </twig:Button>
+                            </twig:DropdownMenu:SubTrigger>
                             <twig:DropdownMenu:SubContent>
                                 <twig:DropdownMenu:Item>יומן</twig:DropdownMenu:Item>
                                 <twig:DropdownMenu:Item>צ'אט</twig:DropdownMenu:Item>
@@ -178,13 +208,14 @@
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="flex flex-col items-center gap-6 self-start mt-4">
         <div dir="rtl">
-        <details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">&Oslash;&sect;&Ugrave;&#129;&Oslash;&ordf;&Oslash;&shy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#130;&Oslash;&sect;&Oslash;&brvbar;&Ugrave;&#133;&Oslash;&copy;
-            </summary>
-            <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
-<div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&sect;&Ugrave;&#132;&Oslash;&shy;&Oslash;&sup3;&Oslash;&sect;&Oslash;&uml;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">&Oslash;&sect;&Ugrave;&#129;&Oslash;&ordf;&Oslash;&shy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#130;&Oslash;&sect;&Oslash;&brvbar;&Ugrave;&#133;&Oslash;&copy;</button>
+                        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
+<div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&Oslash;&sect;&Ugrave;&#132;&Oslash;&shy;&Oslash;&sup3;&Oslash;&sect;&Oslash;&uml;
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
                             &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Ugrave;&#132;&Ugrave;&#129; &Oslash;&sect;&Ugrave;&#132;&Oslash;&acute;&Oslash;&reg;&Oslash;&micro;&Ugrave;&#138;
                         </button>
@@ -200,16 +231,18 @@
 
                 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#129;&Oslash;&plusmn;&Ugrave;&#138;&Ugrave;&#130;</div>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#129;&Oslash;&plusmn;&Ugrave;&#138;&Ugrave;&#130;</button>
-                <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&macr;&Oslash;&sup1;&Ugrave;&#136;&Oslash;&copy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup3;&Oslash;&ordf;&Oslash;&reg;&Oslash;&macr;&Ugrave;&#133;&Ugrave;&#138;&Ugrave;&#134;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&Oslash;&macr;&Oslash;&sup1;&Ugrave;&#136;&Oslash;&copy; &Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup3;&Oslash;&ordf;&Oslash;&reg;&Oslash;&macr;&Ugrave;&#133;&Ugrave;&#138;&Ugrave;&#134;
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&sect;&Ugrave;&#132;&Oslash;&uml;&Oslash;&plusmn;&Ugrave;&#138;&Oslash;&macr; &Oslash;&sect;&Ugrave;&#132;&Oslash;&yen;&Ugrave;&#132;&Ugrave;&#131;&Oslash;&ordf;&Oslash;&plusmn;&Ugrave;&#136;&Ugrave;&#134;&Ugrave;&#138;</button>
                         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&plusmn;&Oslash;&sup3;&Oslash;&sect;&Ugrave;&#132;&Oslash;&copy;</button>
-                        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup2;&Ugrave;&#138;&Oslash;&macr;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&Oslash;&sect;&Ugrave;&#132;&Ugrave;&#133;&Oslash;&sup2;&Ugrave;&#138;&Oslash;&macr;
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                                </button>
+                                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&ordf;&Ugrave;&#130;&Ugrave;&#136;&Ugrave;&#138;&Ugrave;&#133;</button>
                                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&Oslash;&macr;&Oslash;&plusmn;&Oslash;&macr;&Oslash;&acute;&Oslash;&copy;</button>
                                 <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
@@ -284,17 +317,18 @@
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item">&Oslash;&ordf;&Oslash;&sup3;&Oslash;&not;&Ugrave;&#138;&Ugrave;&#132; &Oslash;&sect;&Ugrave;&#132;&Oslash;&reg;&Oslash;&plusmn;&Ugrave;&#136;&Oslash;&not;
                 </button>
             </div>
-        </details>
+        </div>
     </div>
 
         <div dir="rtl">
-        <details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">&times;&curren;&times;&ordf;&times;&#151; &times;&ordf;&times;&curren;&times;&uml;&times;&#153;&times;&#152;
-            </summary>
-            <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content">
-<div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&#151;&times;&copy;&times;&#145;&times;&#149;&times;&#159;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">&times;&curren;&times;&ordf;&times;&#151; &times;&ordf;&times;&curren;&times;&uml;&times;&#153;&times;&#152;</button>
+                        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-40" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
+<div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&times;&#151;&times;&copy;&times;&#145;&times;&#149;&times;&#159;
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="me-2 size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
                             &times;&curren;&times;&uml;&times;&#149;&times;&curren;&times;&#153;&times;&#156;
                         </button>
@@ -310,16 +344,18 @@
 
                 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">&times;&#148;&times;&brvbar;&times;&#149;&times;&#149;&times;&ordf;</div>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#148;&times;&brvbar;&times;&#149;&times;&#149;&times;&ordf;</button>
-                <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&#148;&times;&#150;&times;&#158;&times;&#159; &times;&#158;&times;&copy;&times;&ordf;&times;&#158;&times;&copy;&times;&#153;&times;&#157;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&times;&#148;&times;&#150;&times;&#158;&times;&#159; &times;&#158;&times;&copy;&times;&ordf;&times;&#158;&times;&copy;&times;&#153;&times;&#157;
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#144;&times;&#153;&times;&#158;&times;&#153;&times;&#153;&times;&#156;</button>
                         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#148;&times;&#149;&times;&#147;&times;&cent;&times;&#148;</button>
-                        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">&times;&cent;&times;&#149;&times;&#147;<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">&times;&cent;&times;&#149;&times;&#147;
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                                </button>
+                                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&#153;&times;&#149;&times;&#158;&times;&#159;</button>
                                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">&times;&brvbar;'&times;&#144;&times;&#152;</button>
                                 <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
@@ -394,6 +430,6 @@
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent disabled:pointer-events-none disabled:opacity-50 text-destructive focus:text-destructive hover:text-destructive hover:bg-destructive/10" data-slot="dropdown-menu-item">&times;&#148;&times;&ordf;&times;&nbsp;&times;&ordf;&times;&sect;
                 </button>
             </div>
-        </details>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html
index 78ff8b30560..3da49a1f205 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio Icons.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Payment Method
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Payment Method</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="min-w-56">
         <twig:DropdownMenu:Label>Select Payment Method</twig:DropdownMenu:Label>
@@ -28,9 +28,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Payment Method
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 rounded-md border bg-popover p-1 text-popover-foreground shadow-md min-w-56" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Payment Method</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 rounded-md border bg-popover p-1 text-popover-foreground shadow-md min-w-56" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Select Payment Method</div>
                             <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
                 <input type="radio" class="peer sr-only" name="payment" value="card" checked>
@@ -57,4 +57,4 @@
                 </span>
             </label>
             </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html
index bc548a24b9c..5bbc2670ffd 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Radio.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content class="w-32">
         <twig:DropdownMenu:Label>Panel Position</twig:DropdownMenu:Label>
@@ -27,9 +27,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-32" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md w-32" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">Panel Position</div>
                             <label class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
                 <input type="radio" class="peer sr-only" name="position" value="top">
@@ -53,4 +53,4 @@
                 </span>
             </label>
             </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html
index 766b341ffa7..6244a7ad1c4 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Shortcuts.html.twig__1.html	
@@ -4,8 +4,8 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Label>My Account</twig:DropdownMenu:Label>
@@ -18,9 +18,9 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <div class="px-2 py-1.5 text-sm font-semibold" data-slot="dropdown-menu-label">My Account</div>
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;P</span>
 </button>
@@ -33,4 +33,4 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Log out<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#135;&sect;&acirc;&#140;&#152;Q</span>
 </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html
index 693cf2be4df..fd7a7e7725e 100644
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html	
+++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Submenu.html.twig__1.html	
@@ -4,18 +4,28 @@
 - Code:
 ```twig
 <twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium">
-        Open
+    <twig:DropdownMenu:Trigger>
+        <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Open</twig:Button>
     </twig:DropdownMenu:Trigger>
     <twig:DropdownMenu:Content>
         <twig:DropdownMenu:Item>Team</twig:DropdownMenu:Item>
         <twig:DropdownMenu:Sub>
-            <twig:DropdownMenu:SubTrigger>Invite users</twig:DropdownMenu:SubTrigger>
+            <twig:DropdownMenu:SubTrigger>
+                <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                    Invite users
+                    <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                </twig:Button>
+            </twig:DropdownMenu:SubTrigger>
             <twig:DropdownMenu:SubContent>
                 <twig:DropdownMenu:Item>Email</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Item>Message</twig:DropdownMenu:Item>
                 <twig:DropdownMenu:Sub>
-                    <twig:DropdownMenu:SubTrigger>More options</twig:DropdownMenu:SubTrigger>
+                    <twig:DropdownMenu:SubTrigger>
+                        <twig:Button variant="ghost" size="sm" class="w-full justify-start" {{ ...dropdown_menu_sub_trigger_attrs }}>
+                            More options
+                            <twig:ux:icon name="lucide:chevron-right" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true" />
+                        </twig:Button>
+                    </twig:DropdownMenu:SubTrigger>
                     <twig:DropdownMenu:SubContent>
                         <twig:DropdownMenu:Item>Calendly</twig:DropdownMenu:Item>
                         <twig:DropdownMenu:Item>Slack</twig:DropdownMenu:Item>
@@ -32,20 +42,22 @@
 </twig:DropdownMenu>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent hover:text-accent-foreground text-sm font-medium" data-slot="dropdown-menu-trigger">Open
-    </summary>
-    <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
+<div class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu" data-controller="dropdown-menu" data-dropdown-menu-open-value="false" data-action="click@window-&gt;dropdown-menu#handleOutsideClick keydown.esc@window-&gt;dropdown-menu#handleEscape" data-state="closed">
+<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-dropdown-menu-target="trigger" data-action="click-&gt;dropdown-menu#toggle" aria-haspopup="menu" aria-expanded="false" data-state="closed">Open</button>
+        <div role="menu" class="absolute start-0 top-full z-50 mt-1 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content" data-dropdown-menu-target="content" aria-hidden="true" data-state="closed" hidden="">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Team</button>
-        <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">Invite users<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-            <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+        <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">Invite users
+                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                </button>
+                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Email</button>
                 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Message</button>
-                <div class="relative" data-slot="dropdown-menu-sub">
-<button type="button" role="menuitem" class="peer/dropdown-menu-sub flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-slot="dropdown-menu-sub-trigger">More options<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
-</button>
-                    <div role="menu" class="invisible opacity-0 peer-hover/dropdown-menu-sub:visible peer-hover/dropdown-menu-sub:opacity-100 peer-focus-visible/dropdown-menu-sub:visible peer-focus-visible/dropdown-menu-sub:opacity-100 hover:visible hover:opacity-100 focus-within:visible focus-within:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
+                <div class="group/dropdown-menu-sub relative" data-slot="dropdown-menu-sub">
+<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 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-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 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3.5 w-full justify-start" role="menuitem" tabindex="0">More options
+                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="ms-auto size-4 rtl:rotate-180" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"></path></svg>
+                        </button>
+                                        <div role="menu" class="invisible opacity-0 group-hover/dropdown-menu-sub:visible group-hover/dropdown-menu-sub:opacity-100 group-focus-within/dropdown-menu-sub:visible group-focus-within/dropdown-menu-sub:opacity-100 transition-opacity absolute start-full top-0 z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-sub-content">
 <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Calendly</button>
                         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Slack</button>
                         <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="dropdown-menu-separator"></div>
@@ -61,4 +73,4 @@
         <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">New Team<span class="ms-auto text-xs tracking-widest text-muted-foreground" data-slot="dropdown-menu-shortcut">&acirc;&#140;&#152;+T</span>
 </button>
     </div>
-</details>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html
deleted file mode 100644
index b8289e44df8..00000000000
--- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dropdown-menu, code file Usage.html__1.html	
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-- Kit: Shadcn UI
-- Component: Dropdown Menu
-- Code:
-```twig
-<twig:DropdownMenu>
-    <twig:DropdownMenu:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
-        Open menu
-    </twig:DropdownMenu:Trigger>
-    <twig:DropdownMenu:Content>
-        <twig:DropdownMenu:Item>Profile</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item>Settings</twig:DropdownMenu:Item>
-        <twig:DropdownMenu:Item>Sign out</twig:DropdownMenu:Item>
-    </twig:DropdownMenu:Content>
-</twig:DropdownMenu>
-```
-- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<details class="group/dropdown-menu relative inline-block" data-slot="dropdown-menu"><summary class="list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 inline-flex items-center justify-center h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent" data-slot="dropdown-menu-trigger">Open menu
-    </summary>    <div role="menu" class="absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="dropdown-menu-content">
-<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Profile</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Settings</button>        <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="dropdown-menu-item">Sign out</button>    </div></details>
\ No newline at end of file

From 4ff8fc768d93d4358a9f3bd94497f1cae847a192 Mon Sep 17 00:00:00 2001
From: Pascal CESCON - Amoifr <pascal.cescon@gmail.com>
Date: Thu, 30 Apr 2026 14:54:01 +0200
Subject: [PATCH 6/6] [Toolkit][Shadcn] dropdown-menu: forward RadioGroup name
 to RadioItem

Avoid duplicating the radio group `name` on each `DropdownMenu:RadioItem`.
The parent `DropdownMenu:RadioGroup` now exposes its `name` to its direct
children through a Twig variable; `RadioItem` falls back to it when its own
`name` is omitted.
---
 .../templates/components/DropdownMenu/RadioGroup.html.twig   | 3 ++-
 .../templates/components/DropdownMenu/RadioItem.html.twig    | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
index 026f5705420..f3ddc2003f2 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioGroup.html.twig
@@ -1,6 +1,7 @@
-{# @prop name string The radio group form field name #}
+{# @prop name string The radio group form field name (shared by all items) #}
 {# @block content One or more `DropdownMenu:RadioItem` components #}
 {%- props name = null -%}
+{%- set _dropdown_menu_radio_group_name = name -%}
 <div
     role="group"
     class="{{ attributes.render('class')|tailwind_merge }}"
diff --git a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
index 24e5361ad55..01d5492596b 100644
--- a/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
+++ b/src/Toolkit/kits/shadcn/dropdown-menu/templates/components/DropdownMenu/RadioItem.html.twig
@@ -1,15 +1,16 @@
-{# @prop name string The radio form field name #}
+{# @prop name string The radio form field name. Falls back to the parent `DropdownMenu:RadioGroup`'s `name` when omitted. #}
 {# @prop value string The radio value #}
 {# @prop checked bool Whether this radio is initially checked #}
 {# @block content The label text #}
 {%- props name = null, value = '', checked = false -%}
+{%- set _radio_name = name ?? (_dropdown_menu_radio_group_name ?? null) -%}
 <label
     class="{{ ('relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes.defaults({
         'data-slot': 'dropdown-menu-radio-item',
     }) }}
 >
-    <input type="radio" class="peer sr-only" {% if name %}name="{{ name }}"{% endif %} value="{{ value }}" {% if checked %}checked{% endif %}>
+    <input type="radio" class="peer sr-only" {% if _radio_name %}name="{{ _radio_name }}"{% endif %} value="{{ value }}" {% if checked %}checked{% endif %}>
     <span class="absolute start-2 flex size-4 items-center justify-center opacity-0 peer-checked:opacity-100">
         <twig:ux:icon name="lucide:circle" class="size-2 fill-current" aria-hidden="true" />
     </span>