Merge pull request #5118 from cardstack/cs-11330-transition-sync

Sync the card-chooser selection ring with the tag (CS-11330)

Author: lukemelia

packages/host/app/components/card-search/item-button.gts

@@ -448,9 +448,15 @@ export default class ItemButton extends Component<Signature> {
          which the portaled catalog item didn't reliably inherit — leaving
          only the thin 1px button border) so the ring stays a full-weight
          4px whether or not the item is hovered, darkening on hover to match
-         the rest of the Adorn treatment. */
-      .catalog-item.adorn.selected {
+         the rest of the Adorn treatment. `transition: none` makes the ring
+         appear in lockstep with the selection tag/chip (which render
+         instantly) instead of fading in ~0.2s later — and it's needed on the
+         hover variant too, since a card is normally hovered at the moment
+         it's clicked to select, so that rule governs the ring's first paint. */
+      .catalog-item.adorn.selected,
+      .catalog-item.adorn.selected:hover {
         box-shadow: 0 0 0 0.25rem var(--boxel-highlight);
+        transition: none;
       }
       .catalog-item.adorn.selected:hover {
         box-shadow: 0 0 0 0.25rem var(--boxel-highlight-hover);