Position "close as" dialog

app/assets/images/caret-down.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8l8 8 8-8" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

app/assets/stylesheets/buttons.css

@@ -192,21 +192,14 @@
       animation: zoom-fade 300ms ease-out;
     }
   }
-}
 
+  .btn--dialog {
+    .icon--caret-down {
+      font-size: 1ch;
+    }
 
-
-
-
-
-.btn-dialog {
-  .popup {
-    background-color: var(--bubble-color, var(--color-bg));
-    margin-top: var(--btn-size);
-  }
-
-  .popup__item {
-    --btn-background: var(--bubble-color);
-    --btn-color: var(--color-bg);
+    + .popup {
+      margin-top: var(--btn-size);
+    }
   }
 }

app/assets/stylesheets/icons.css

@@ -35,6 +35,7 @@
   .icon--calendar-add { --svg: url("calendar-add.svg "); }
   .icon--calendar { --svg: url("calendar.svg "); }
   .icon--camera { --svg: url("camera.svg "); }
+  .icon--caret-down { --svg: url("caret-down.svg "); }
   .icon--chart { --svg: url("chart.svg "); }
   .icon--check { --svg: url("check.svg "); }
   .icon--close { --svg: url("close.svg "); }

app/views/bubbles/_pop_toggle.html.erb

@@ -8,8 +8,9 @@
     <div class="flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
 
       <div class="btn-dialog">
-        <button class="btn borderless" data-action="click->dialog#open:stop">
-          <span>Close as…</span>
+        <button class="btn btn--dialog borderless" data-action="click->dialog#open:stop">
+          <span>Close as</span>
+          <%= icon_tag "caret-down" %>
         </button>
 
         <dialog class="popup panel flex-column align-start gap-half shadow" style="--row-gap: 0.2em;"