From b7153ffa3cd63334f4f94cc9cda0525cdc45cf58 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 16:43:32 -0400
Subject: [PATCH 1/4] Fix card-selection border weight, transition sync, and
 Adorn tag grey peek
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three Adorn selection-overlay polish items from design review:

CS-11329: in the card chooser, a selected item showed only the thin 1px
button border — the intended teal ring never applied because it relied on
AdornContext's :deep stroke rule, which the catalog item didn't pick up.
Define the ring directly on `.catalog-item.adorn.selected` (4px highlight,
darker on hover) so it stays full-weight whether or not the item is hovered.

CS-11330: that ring faded in ~0.2s after the selection tag/chip (which
render instantly), so the border lagged the tag. Set `transition: none` on
the selected ring so the two appear together.

CS-11331: the Adorn label tab cast a grey `drop-shadow` filter that peeked
out past its clipped/rounded corners. Remove it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../host/app/components/adorn/adorn-label.gts     |  1 -
 .../app/components/card-search/item-button.gts    | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/components/adorn/adorn-label.gts b/packages/host/app/components/adorn/adorn-label.gts
index 225ce96a853..7bfb3065ef3 100644
--- a/packages/host/app/components/adorn/adorn-label.gts
+++ b/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. */
diff --git a/packages/host/app/components/card-search/item-button.gts b/packages/host/app/components/card-search/item-button.gts
index 51ecff9835f..1acd2aafe23 100644
--- a/packages/host/app/components/card-search/item-button.gts
+++ b/packages/host/app/components/card-search/item-button.gts
@@ -443,6 +443,21 @@ export default class ItemButton extends Component<Signature> {
       .catalog-item.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. */
+      .catalog-item.adorn.selected {
+        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);
+      }
       /* 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

From d878968b671c1b1237556fc5c52e16968d14f104 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 17:41:34 -0400
Subject: [PATCH 2/4] Nudge the below-card Adorn label down 1px so it doesn't
 ride high
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the type-label tab flips below a card (no room above), it overlapped
the card's bottom edge by 2px, leaving it sitting one pixel too high over
the edge. Reduce the overlap to 1px so the flag's top edge still tucks under
the bottom outline stroke and reads as attached. Addresses the
vertical-alignment point of CS-11331; verified live (overlap 2px → 1px).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/host/app/modifiers/position-adorn-label.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/host/app/modifiers/position-adorn-label.ts b/packages/host/app/modifiers/position-adorn-label.ts
index 2b56b91694a..bac70a695f5 100644
--- a/packages/host/app/modifiers/position-adorn-label.ts
+++ b/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

From 739803b522493dd7febffe94ed80db26c40053ee Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 17:57:47 -0400
Subject: [PATCH 3/4] Make the selected ring instant on hover too, so it
 doesn't lag the chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix put `transition: none` only on `.catalog-item.adorn.selected`,
not on its `:hover` variant. But a card is normally hovered at the moment it's
clicked to select, so the `:hover` rule governs the ring's first paint — and it
fell back to the base `box-shadow 0.2s`, so the ring animated in ~0.2s after the
(instant) selection chip. Apply `transition: none` to the hover variant as well.
Verified live with a real pointer: select-while-hovered now paints the ring in
one frame.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/host/app/components/card-search/item-button.gts | 7 +++++--
 1 file changed, 5 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 1acd2aafe23..f231ea6c3ce 100644
--- a/packages/host/app/components/card-search/item-button.gts
+++ b/packages/host/app/components/card-search/item-button.gts
@@ -450,8 +450,11 @@ export default class ItemButton extends Component<Signature> {
          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. */
-      .catalog-item.adorn.selected {
+         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;
       }

From 4e28786dfd6559621594783441b670bb6121fb08 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 18:04:50 -0400
Subject: [PATCH 4/4] Rename the legacy `catalog-item` CSS class to
 `item-button`

The styling class on this component predated its rename to `ItemButton`;
`catalog-item` also mis-implied it's catalog-only when it also renders search
results. Rename the scoped class (and the `.catalog-item` test assertions) to
match the component. The separate `data-test-card-catalog-item` attributes are
left as-is.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/card-search/item-button.gts    | 30 +++++++++----------
 .../components/card-search-adorn-test.gts     | 10 +++----
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/host/app/components/card-search/item-button.gts b/packages/host/app/components/card-search/item-button.gts
index f231ea6c3ce..d47946d8b46 100644
--- a/packages/host/app/components/card-search/item-button.gts
+++ b/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,8 +439,8 @@ 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
@@ -453,12 +453,12 @@ export default class ItemButton extends Component<Signature> {
          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 {
+      .item-button.adorn.selected,
+      .item-button.adorn.selected:hover {
         box-shadow: 0 0 0 0.25rem var(--boxel-highlight);
         transition: none;
       }
-      .catalog-item.adorn.selected:hover {
+      .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
@@ -471,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
diff --git a/packages/host/tests/integration/components/card-search-adorn-test.gts b/packages/host/tests/integration/components/card-search-adorn-test.gts
index da01b17734d..a3921809843 100644
--- a/packages/host/tests/integration/components/card-search-adorn-test.gts
+++ b/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',
       );