From aef43d5b99441692b5d39049e432880104bb7c72 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Wed, 3 Jun 2026 23:25:33 -0400
Subject: [PATCH] Standardize dropdown trigger arrow, sizing, and primary focus
 ring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses three boxel-ui trigger-polish items from design review:

CS-11326: the sort menu used a different arrow (filled DropdownArrowDown)
than boxel-ui's form controls and never flipped on open. Switch the sort
and selection-menu triggers to the shared CaretDown chevron (already used
by select/multi-select/picker/dropdown) and flip it on open via the
trigger's aria-expanded state.

CS-11327: give the selection-menu count a reserved, tabular-figure width
so the trigger doesn't shift when the count crosses 1↔2 digits (e.g. a
Select All jumping 9→10).

CS-11328: make the primary BoxelButton focus ring robust and correct —
set the full outline shorthand (not just the color, which relied on the
UA default outline-style) 2px outside the button, and darken the ring to
match when the fill darkens on hover/active. The selection-menu's local
focus-ring override is now redundant and removed.

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

diff --git a/packages/boxel-ui/addon/src/components/button/index.gts b/packages/boxel-ui/addon/src/components/button/index.gts
index aa84415a956..ccba0dadf18 100644
--- a/packages/boxel-ui/addon/src/components/button/index.gts
+++ b/packages/boxel-ui/addon/src/components/button/index.gts
@@ -165,8 +165,12 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
           transparent
         );
       }
+      /* Keyboard focus ring sits just outside the button. Set the full
+         outline shorthand (not just the color) so the ring renders
+         regardless of the UA's default outline-style. */
       .boxel-button:focus-visible {
-        outline-color: var(--ring, var(--boxel-highlight));
+        outline: var(--boxel-outline-width) var(--boxel-outline-style)
+          var(--ring, var(--boxel-highlight));
         outline-offset: 2px;
       }
 
@@ -250,6 +254,11 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       .kind-primary:not(:disabled):active {
         --boxel-button-color: var(--primary, var(--boxel-highlight-hover));
       }
+      /* When the fill darkens, the focus ring darkens to match. */
+      .kind-primary:not(:disabled):focus-visible:hover,
+      .kind-primary:not(:disabled):focus-visible:active {
+        outline-color: var(--ring, var(--boxel-highlight-hover));
+      }
 
       .kind-secondary {
         --boxel-button-color: var(--secondary, var(--boxel-light));
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..42a8019f12e 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'
@@ -102,17 +102,17 @@ export default class SelectionMenu extends Component<Signature> {
         --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
         --boxel-button-min-width: 0;
       }
-      /* Keyboard focus ring just outside the button. (Set explicitly so it
-         renders regardless of the global button outline setup.) */
-      .selection-menu-trigger:focus-visible {
-        outline: var(--boxel-outline-width) var(--boxel-outline-style)
-          var(--boxel-highlight);
-        outline-offset: 2px;
-      }
+      /* Focus ring comes from BoxelButton's standard :focus-visible (full
+         outline, 2px outside). */
       /* Deepen the fill while the menu is open, matching Button's hover. */
       .selection-menu-trigger[aria-expanded='true'] {
         --boxel-button-color: var(--boxel-highlight-hover);
       }
+      /* When open-and-keyboard-focused, darken the ring to match the fill,
+         mirroring Button's hover/active focus behavior. */
+      .selection-menu-trigger[aria-expanded='true']:focus-visible {
+        outline-color: var(--ring, var(--boxel-highlight-hover));
+      }
       .selection-menu-icon {
         width: 0.875rem;
         height: 0.875rem;
@@ -121,6 +121,12 @@ export default class SelectionMenu extends Component<Signature> {
       .selection-menu-count {
         line-height: 1;
         white-space: nowrap;
+        /* Reserve a stable width (and equal-width digits) so the trigger
+           doesn't shift when the count crosses 1↔2 digits, e.g. during a
+           Select All that jumps 9→10. */
+        min-width: 2ch;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
       }
       .selection-menu-caret {
         flex-shrink: 0;
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>