From 157f83759e56d947ecc2c835a9ae5b1f2d04d0e5 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 18:24:22 -0400
Subject: [PATCH] Standardize sort + selection-menu triggers on the CaretDown
 chevron (flip on open)

CS-11326. The sort menu used a different arrow (filled DropdownArrowDown) than
boxel-ui's form controls (select/multi-select/picker/dropdown all use the thin
CaretDown chevron) and never flipped on open. Switch the sort and selection-menu
triggers to CaretDown and flip the sort caret on open via the trigger's
aria-expanded state (the selection-menu caret already flipped). Scoped to the
toolbar triggers; the ~8 host-chrome DropdownArrowDown usages are left as-is.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../addon/src/components/selection-menu/index.gts   |  4 ++--
 .../addon/src/components/sort-dropdown/index.gts    | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/selection-menu/index.gts b/packages/boxel-ui/addon/src/components/selection-menu/index.gts
index 71e5e7d426b..e48c06fa39c 100644
--- a/packages/boxel-ui/addon/src/components/selection-menu/index.gts
+++ b/packages/boxel-ui/addon/src/components/selection-menu/index.gts
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 import type { MenuDivider } from '../../helpers/menu-divider.ts';
 import type { MenuItem } from '../../helpers/menu-item.ts';
-import { DropdownArrowDown } from '../../icons.gts';
+import CaretDown from '../../icons/caret-down.gts';
 import BoxelButton from '../button/index.gts';
 import BoxelDropdown from '../dropdown/index.gts';
 import Menu from '../menu/index.gts';
@@ -66,7 +66,7 @@ export default class SelectionMenu extends Component<Signature> {
           >
             <SelectionCheckmark class='selection-menu-icon' />
             <span class='selection-menu-count'>{{@selectedCount}}</span>
-            <DropdownArrowDown
+            <CaretDown
               class='selection-menu-caret'
               width='13px'
               height='13px'
diff --git a/packages/boxel-ui/addon/src/components/sort-dropdown/index.gts b/packages/boxel-ui/addon/src/components/sort-dropdown/index.gts
index 3f8c6508ef7..2a55fc04ee9 100644
--- a/packages/boxel-ui/addon/src/components/sort-dropdown/index.gts
+++ b/packages/boxel-ui/addon/src/components/sort-dropdown/index.gts
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 import { MenuDivider } from '../../helpers/menu-divider.ts';
 import { MenuItem } from '../../helpers/menu-item.ts';
-import DropdownIcon from '../../icons/dropdown-arrow-down.gts';
+import CaretDown from '../../icons/caret-down.gts';
 import BoxelButton from '../button/index.gts';
 import BoxelDropdown from '../dropdown/index.gts';
 import BoxelMenu from '../menu/index.gts';
@@ -34,7 +34,7 @@ export default class SortDropdown extends Component<Signature> {
               {{bindings}}
             >
               {{if @selectedOption @selectedOption.displayName 'Please Select'}}
-              <DropdownIcon width='12px' height='12px' />
+              <CaretDown class='sort-button-caret' width='12px' height='12px' />
             </BoxelButton>
           </:trigger>
           <:content as |dd|>
@@ -65,8 +65,15 @@ export default class SortDropdown extends Component<Signature> {
           padding-left: var(--boxel-sp-sm);
           padding-right: var(--boxel-sp-sm);
         }
-        .sort-button > svg {
+        .sort-button-caret {
           margin-left: auto;
+          transition: transform var(--boxel-transition);
+        }
+        /* Flip the caret while the menu is open, matching boxel-ui's
+           select/dropdown triggers. BoxelDropdown sets aria-expanded on the
+           trigger button via the yielded bindings. */
+        .sort-button[aria-expanded='true'] .sort-button-caret {
+          transform: rotate(180deg);
         }
       }
     </style>