From 73e455346553846b13db36c95c4033e1be85c3b7 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:15:51 +0100
Subject: [PATCH 1/2] fix: keyboard styling for context menu items

---
 .../components/ContextMenu/ContextMenu.svelte | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte b/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
index 0ec30cf8..4bca3d3b 100644
--- a/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
+++ b/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
@@ -22,9 +22,12 @@
   }: ContextMenuProps = $props();
 
   const itemStyles = tv({
-    base: 'hover:bg-light-200 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
+    base: 'data-highlighted:bg-light-200 flex items-center gap-1 rounded-lg p-1 text-start outline-none hover:cursor-pointer',
     variants: {
       color: styleVariants.textColor,
+      inset: {
+        true: 'mx-1',
+      },
     },
   });
 
@@ -130,14 +133,12 @@
                     textValue={item.title}
                     closeOnSelect
                     onSelect={() => item.onAction(item)}
-                    class="px-1"
+                    class={itemStyles({ color: item.color, inset: true })}
                   >
-                    <div class={itemStyles({ color: item.color })}>
-                      {#if item.icon}
-                        <Icon icon={item.icon} class="m-2 shrink-0" />
-                      {/if}
-                      <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
-                    </div>
+                    {#if item.icon}
+                      <Icon icon={item.icon} class="m-2 shrink-0" />
+                    {/if}
+                    <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
                   </DropdownMenu.Item>
                 {/if}
               {/each}
@@ -152,10 +153,9 @@
                         closeOnSelect
                         onSelect={() => item.onAction(item)}
                         title={item.title}
+                        class={itemStyles({ color: item.color })}
                       >
-                        <div class={cleanClass(itemStyles({ color: item.color }))}>
-                          <Icon icon={item.icon} class="m-2 shrink-0" />
-                        </div>
+                        <Icon icon={item.icon} class="m-2 shrink-0" />
                       </DropdownMenu.Item>
                     {/if}
                   {/each}

From 20d8a8cd48113fb03c93a4eceef0964000aafe23 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:30:45 +0100
Subject: [PATCH 2/2] remove outline from content wrapper

---
 packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte b/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
index 4bca3d3b..7caa6b56 100644
--- a/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
+++ b/packages/ui/src/lib/components/ContextMenu/ContextMenu.svelte
@@ -32,7 +32,7 @@
   });
 
   const wrapperStyles = tv({
-    base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm',
+    base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm outline-none',
     variants: {
       size: {
         tiny: 'w-32',