From abe98a1f60584fac0cbbc9e09697d1cb41368155 Mon Sep 17 00:00:00 2001 From: Luke Melia Date: Thu, 4 Jun 2026 18:31:51 -0400 Subject: [PATCH] Sync the card-chooser selection ring with the tag, instant on hover (CS-11330) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The selected ring faded in over `box-shadow 0.2s` while the selection tag/chip render instantly, so the border appeared ~0.2s after the tag. Set `transition: none` on the selected ring so the two appear together. The `:hover` variant needs it too: a card is normally hovered at the moment it's clicked to select, so that rule governs the ring's first paint — without it the ring still animated in late on select-while-hovered. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../host/app/components/card-search/item-button.gts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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);