Refresh UI components and showcase; release updated framework packages

packages/ui/components/ContextMenu.wrn

@@ -37,6 +37,12 @@ component ContextMenu {
       return open || visible
     }
 
+    client function handleContext(sourceEvent) {
+      if (trigger === "contextmenu" || trigger === "both") { sourceEvent.preventDefault(); showMenu(sourceEvent) }
+    }
+    client function handleClick(sourceEvent) {
+      if (trigger === "click" || trigger === "both") { toggleMenu(sourceEvent) }
+    }
     client function showMenu(sourceEvent) {
       if (disabled) {
         return
@@ -146,8 +152,8 @@ component ContextMenu {
         tabindex='{disabled ? "-1" : "0"}'
         aria-haspopup="menu"
         aria-expanded='{open || visible ? "true" : "false"}'
-        @contextmenu='if (trigger === "contextmenu" || trigger === "both") { showMenu(event) }'
-        @click='if (trigger === "click" || trigger === "both") { toggleMenu(event) }'
+        @contextmenu='handleContext(event)'
+        @click='handleClick(event)'
         @keydown='if (event.key === "Enter" || event.key === " ") { event.preventDefault(); toggleMenu(event) }'
       >
         <slot name="trigger"></slot>
@@ -296,7 +302,7 @@ component ContextMenu {
     }
 
     .wrn-context-menu__trigger:focus-visible {
-      border-radius: 0.6rem;
+      border-radius: var(--wrn-radius-sm, 6px);
       outline: 2px solid var(--wrn-color-focus);
       outline-offset: 3px;
     }
@@ -325,7 +331,7 @@ component ContextMenu {
         linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 5%, transparent), transparent 58%),
         color-mix(in srgb, var(--wrn-color-surface-raised) 96%, transparent);
       border: 1px solid color-mix(in srgb, var(--context-accent) 18%, var(--wrn-color-border));
-      border-radius: 1rem;
+      border-radius: var(--wrn-radius-md);
       box-shadow:
         0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
         0 24px 64px color-mix(in srgb, black 24%, transparent);