From 81dd54c23479e64b37671b3afb4c1d2d056f37a0 Mon Sep 17 00:00:00 2001
From: ocavue <ocavue@gmail.com>
Date: Mon, 15 Jun 2026 22:24:55 +1000
Subject: [PATCH] feat(react): theme the autocomplete menu via CSS variables

---
 .../components/autocomplete-menu.module.css   | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/autocomplete-menu.module.css b/packages/react/src/components/autocomplete-menu.module.css
index 9318808..f5d24ba 100644
--- a/packages/react/src/components/autocomplete-menu.module.css
+++ b/packages/react/src/components/autocomplete-menu.module.css
@@ -1,3 +1,13 @@
+/* Autocomplete menu (tag + wikilink). Hosts restyle it by overriding these
+ * CSS variables (each falls back to the default below):
+ *   --meowdown-menu-background      popup background
+ *   --meowdown-menu-border          popup border color
+ *   --meowdown-menu-radius          popup corner radius
+ *   --meowdown-menu-shadow          popup box-shadow
+ *   --meowdown-menu-item-radius     row corner radius
+ *   --meowdown-menu-item-highlight  highlighted-row background
+ */
+
 .Positioner {
   display: block;
   z-index: 50;
@@ -17,12 +27,14 @@
   overscroll-behavior: contain;
   white-space: nowrap;
   user-select: none;
-  border: 1px solid var(--meowdown-border);
-  border-radius: 0.75rem;
-  background: light-dark(#fff, #18181b);
-  box-shadow:
+  border: 1px solid var(--meowdown-menu-border, var(--meowdown-border));
+  border-radius: var(--meowdown-menu-radius, 0.75rem);
+  background: var(--meowdown-menu-background, light-dark(#fff, #18181b));
+  box-shadow: var(
+    --meowdown-menu-shadow,
     0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+    0 4px 6px -4px rgb(0 0 0 / 0.1)
+  );
 }
 
 .Item {
@@ -32,7 +44,7 @@
   gap: 1.5rem;
   box-sizing: border-box;
   padding: 0.375rem 0.75rem;
-  border-radius: 0.5rem;
+  border-radius: var(--meowdown-menu-item-radius, 0.5rem);
   font-size: 0.875rem;
   color: var(--meowdown-text);
   white-space: nowrap;
@@ -47,7 +59,7 @@
   }
 
   &[data-highlighted] {
-    background: light-dark(#f4f4f5, #27272a);
+    background: var(--meowdown-menu-item-highlight, light-dark(#f4f4f5, #27272a));
   }
 
   kbd {