Fix card-selection border weight, transition sync, and Adorn tag grey peek

packages/host/app/components/adorn/adorn-label.gts

@@ -69,7 +69,6 @@ const AdornLabel: TemplateOnlyComponent<AdornLabelSignature> = <template>
       border-radius: 0.3125rem 0 0 0.3125rem;
       clip-path: polygon(0 0, calc(100% - 0.8125rem) 0, 100% 100%, 0 100%);
       z-index: 1;
-      filter: drop-shadow(0 0.3125rem 0.5rem rgba(0, 0, 0, 0.2));
     }
     /* Mirrored polygon when the label flips below the card so the
        slope still points toward the card edge. */

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

@@ -136,7 +136,7 @@ export default class ItemButton extends Component<Signature> {
   @tracked private prerenderedTypeName: string | undefined;
   @tracked private prerenderedTypeIconHtml: string | undefined;
 
-  // The catalog-item button element, captured so the shared
+  // The item-button element, captured so the shared
   // positionAdornLabel modifier can anchor the type-label tab to the
   // card's footprint (the same way the stack-item overlay anchors to
   // the rendered card). Tracked so the label positioner re-runs once
@@ -286,7 +286,7 @@ export default class ItemButton extends Component<Signature> {
     <Button
       @rectangular={{true}}
       class={{cn
-        'catalog-item'
+        'item-button'
         (if @adorn @adornStrokeClass)
         selected=@isSelected
         create-new-button=this.isNewCard
@@ -369,31 +369,31 @@ export default class ItemButton extends Component<Signature> {
       {{/if}}
     </Button>
     <style scoped>
-      .catalog-item {
+      .item-button {
         height: 100%;
         width: 100%;
         max-width: 100%;
         position: relative;
       }
-      .catalog-item:not(.create-new-button) {
+      .item-button:not(.create-new-button) {
         --boxel-button-padding: 0;
 
         box-sizing: content-box;
         text-align: start;
       }
-      .catalog-item :deep(*) {
+      .item-button :deep(*) {
         box-sizing: border-box;
       }
-      .catalog-item:focus {
+      .item-button:focus {
         --host-outline-offset: -1px;
       }
-      .catalog-item.selected {
+      .item-button.selected {
         border-color: var(--boxel-highlight);
       }
-      .catalog-item:hover {
+      .item-button:hover {
         box-shadow: var(--boxel-box-shadow);
       }
-      .catalog-item.selected:hover {
+      .item-button.selected:hover {
         border-color: var(--boxel-highlight);
         box-shadow:
           0 0 0 1px var(--boxel-highlight),
@@ -439,10 +439,28 @@ export default class ItemButton extends Component<Signature> {
          catalog-rendered wrappers around those primitives and drop the
          Button's default border so AdornContext's teal outline shows
          through when adorn is active. */
-      .catalog-item.adorn:hover,
-      .catalog-item.adorn.selected {
+      .item-button.adorn:hover,
+      .item-button.adorn.selected {
         border-color: transparent;
       }
+      /* Selection ring for adorn catalog items. Defined here on the item
+         itself (rather than relying on AdornContext's :deep stroke rule,
+         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. `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. */
+      .item-button.adorn.selected,
+      .item-button.adorn.selected:hover {
+        box-shadow: 0 0 0 0.25rem var(--boxel-highlight);
+        transition: none;
+      }
+      .item-button.adorn.selected:hover {
+        box-shadow: 0 0 0 0.25rem var(--boxel-highlight-hover);
+      }
       /* The type-label tab is placed by the shared positionAdornLabel
          modifier (inline position/top/left), so this class only carries
          the consumer's concerns: keep it out of pointer events and fade
@@ -453,7 +471,7 @@ export default class ItemButton extends Component<Signature> {
         transition: opacity 0.1s;
         z-index: 1;
       }
-      .catalog-item.adorn:hover .search-type-label {
+      .item-button.adorn:hover .search-type-label {
         opacity: 1;
       }
       /* Selection chip in the bottom-right corner — purely

packages/host/app/modifiers/position-adorn-label.ts

@@ -116,12 +116,13 @@ export function makePositionAdornLabel(
         anchorLeftX = cardRect.left - 4;
         label.style.maxWidth = 'max-content';
       }
-      // When flipped below, overlap the card by 2px so the flag's wide
-      // top edge tucks under the bottom outline stroke and reads as
-      // attached. (Anchoring it 2px below the card instead left a
-      // visible gap under the stroke.)
+      // When flipped below, overlap the card by 1px so the flag's wide
+      // top edge tucks just under the bottom outline stroke and reads as
+      // attached without sitting too high over the card edge. (A 2px
+      // overlap rode one pixel too high; anchoring it below the card
+      // instead left a visible gap under the stroke.)
       let anchorTopY =
-        side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom - 2;
+        side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom - 1;
 
       // The label's anchor positions (anchorLeftX, anchorTopY) are in
       // viewport coordinates. With `position: absolute`, the inline

packages/host/tests/integration/components/card-search-adorn-test.gts

@@ -54,8 +54,8 @@ module('Integration | card-search/item-button (adorn)', function (hooks) {
       </template>,
     );
     assert
-      .dom('.catalog-item.adorn')
-      .exists('the catalog-item button carries the adorn class');
+      .dom('.item-button.adorn')
+      .exists('the item-button carries the adorn class');
   });
 
   test('does not add the adorn class when @adorn is omitted', async function (assert) {
@@ -68,9 +68,9 @@ module('Integration | card-search/item-button (adorn)', function (hooks) {
         />
       </template>,
     );
-    assert.dom('.catalog-item').exists();
+    assert.dom('.item-button').exists();
     assert
-      .dom('.catalog-item.adorn')
+      .dom('.item-button.adorn')
       .doesNotExist('the legacy treatment is unchanged without @adorn');
   });
 
@@ -90,7 +90,7 @@ module('Integration | card-search/item-button (adorn)', function (hooks) {
       </template>,
     );
     assert
-      .dom('.catalog-item.adorn-stroke')
+      .dom('.item-button.adorn-stroke')
       .doesNotExist(
         'a non-adorn item does not receive the Adorn outline class',
       );