Fix dropdown in button-group rounding, closes #348

src/components/dropdown/dropdown.css

@@ -2,6 +2,7 @@
   --box-shadow: var(--wa-shadow-m);
 
   display: inline-block;
+  border-radius: var(--wa-form-control-border-radius);
 }
 
 .dropdown::part(popup) {
@@ -24,8 +25,14 @@
   transform-origin: left;
 }
 
-.trigger {
-  display: block;
+#trigger {
+  display: block; /* for boundingClientRect */
+
+  &,
+  &::slotted(*) {
+    /* Otherwise button groups don't work well with dropdown, see #348 */
+    border-radius: inherit !important;
+  }
 }
 
 .panel {

src/components/dropdown/dropdown.ts

@@ -46,7 +46,7 @@ export default class WaDropdown extends WebAwesomeElement {
   static shadowStyle = styles;
 
   @query('.dropdown') popup: WaPopup;
-  @query('.trigger') trigger: HTMLSlotElement;
+  @query('#trigger') trigger: HTMLSlotElement;
   @query('.panel') panel: HTMLSlotElement;
 
   private closeWatcher: CloseWatcher | null;
@@ -409,10 +409,20 @@ export default class WaDropdown extends WebAwesomeElement {
 
   render() {
     return html`
+      <slot
+        name="trigger"
+        id="trigger"
+        part="trigger"
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+        @keyup=${this.handleTriggerKeyUp}
+        @slotchange=${this.handleTriggerSlotChange}
+      ></slot>
       <wa-popup
         part="base"
         exportparts="popup:base__popup"
         id="dropdown"
+        anchor="trigger"
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
@@ -427,17 +437,6 @@ export default class WaDropdown extends WebAwesomeElement {
           'dropdown--open': this.open,
         })}
       >
-        <slot
-          name="trigger"
-          slot="anchor"
-          part="trigger"
-          class="trigger"
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-          @keyup=${this.handleTriggerKeyUp}
-          @slotchange=${this.handleTriggerSlotChange}
-        ></slot>
-
         <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
           <slot part="panel" class="panel"></slot>
         </div>