rotate arrow based on placement so borders show correctly when applied

2026-01-12 12:09:26 +00:00 · 2025-06-02 14:13:43 -04:00
parent b5e7931dbc
commit 3f62e09d51
1 changed files with 13 additions and 1 deletions
--- a/packages/webawesome/src/components/popup/popup.css
+++ b/packages/webawesome/src/components/popup/popup.css
@@ -48,7 +48,19 @@
  height: calc(var(--arrow-size-diagonal) * 2);
  rotate: 45deg;
  background: var(--arrow-color);
-  z-index: -1;
+  z-index: 3;
+}
+
+:host([placement~='left']) .arrow {
+  rotate: -45deg;
+}
+
+:host([placement~='right']) .arrow {
+  rotate: 135deg;
+}
+
+:host([placement~='bottom']) .arrow {
+  rotate: 225deg;
 }

 /* Hover bridge */