fix(ui): smooth border-radius transition on collapsible close (#16431)

## Summary

When collapsing an array/blocks row, the bottom border-radius on the
header would snap to rounded immediately while the content was still
animating closed—creating a jarring visual disconnect between the header
and the disappearing content below it.

This adds a CSS keyframe animation that waits for the content to finish
collapsing (300ms), then smoothly eases the corners to rounded over
150ms. The `animation-fill-mode: both` ensures the corners stay flat
during the delay period. Opening remains instant so the header connects
seamlessly with the expanding content.

### Before

https://github.com/user-attachments/assets/b0ac0132-3883-4818-9179-d2d9a748216c

### After

https://github.com/user-attachments/assets/37b3ff54-cc31-455a-8fa5-114dd1d08bb0

Author: JarrodMFlesch

packages/ui/src/elements/Collapsible/index.css

@@ -109,6 +109,22 @@
     border-radius: var(--radius-medium) var(--radius-medium) 0 0;
   }
 
+  /* When collapsed, animate border-radius after content finishes closing */
+  .collapsible--collapsed > .collapsible__toggle-wrap {
+    animation: collapsible-round-corners 150ms ease 300ms both;
+  }
+
+  @keyframes collapsible-round-corners {
+    from {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    to {
+      border-bottom-left-radius: var(--radius-medium);
+      border-bottom-right-radius: var(--radius-medium);
+    }
+  }
+
   .collapsible__actions-wrap {
     display: flex;
     align-items: center;