diff --git a/packages/host/app/components/card-search/item-button.gts b/packages/host/app/components/card-search/item-button.gts index ab7c22305ba..f231ea6c3ce 100644 --- a/packages/host/app/components/card-search/item-button.gts +++ b/packages/host/app/components/card-search/item-button.gts @@ -448,9 +448,15 @@ export default class ItemButton extends Component { 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);