From 5f3cf19be0de185a98c0113d1f93196e9e482fc2 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 18:04:50 -0400
Subject: [PATCH] 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',
       );