Standardize dropdown trigger arrow, sizing, and primary focus ring

[lukemelia]

Three boxel-ui trigger-polish items from Burcu's review of #5083, scoped to the card-chooser/toolbar triggers (not the unrelated host chrome).

CS-11326 — one standard arrow + flip on open

• The sort menu used the filled DropdownArrowDown and never flipped on open (the regression). boxel-ui's form controls (select, multi-select, picker, dropdown) already use the thin CaretDown chevron and flip.
• Switched the sort-dropdown and selection-menu triggers to CaretDown, and the sort button now flips its caret on open via its aria-expanded state.
• Scope decision: toolbar triggers only — the ~8 host-chrome DropdownArrowDown usages (file tree, submode switcher, realm dropdown, etc.) are intentionally left alone.

CS-11327 — trigger doesn't shift when count changes

• The selection-menu count now reserves a stable 2-ch, tabular-figure width, so the trigger no longer jumps when the count crosses 1↔2 digits (e.g. a Select All going 9→10).
• Height already matches the adjacent sort button via the shared --boxel-button-sm min-height; the old "squished padding" was the pre-rebuild trigger.

CS-11328 — primary button focus ring

• Base BoxelButton:focus-visible now sets the full outline shorthand (--boxel-outline-width/-style, i.e. 2px solid) instead of only outline-color — previously it relied on the UA default outline-style. Ring sits 2px outside.
• The primary ring darkens to match the fill on hover/active.
• The selection-menu's local focus-ring override is now redundant and removed.
• Note: this :focus-visible change is on the shared BoxelButton, so every button's keyboard focus ring is now explicitly 2px solid rather than the browser default — intended (it's the design-system --boxel-outline).

Base branch

Targets cs-11325-… (PR #5100, the shared SelectionMenu), same as #5102 — keeps this diff scoped. Will rebase onto main and retarget once #5100 lands.

Testing

• eslint + glint clean.
• No existing test asserts on the sort arrow or the button outline; the one selection-menu test targets the checkmark's circle (the caret has none, so it stays unambiguous).
• Behavioral checks (sort caret flip, focus-ring darkening, count not shifting) pending in-browser verification after a host rebuild.

🤖 Generated with Claude Code

[github-actions]

Preview deployments

• Host staging preview

• Host production preview

• Boxel UI staging preview

Host Test Results

    1 files      1 suites   1h 51m 2s ⏱️
2 931 tests 2 916 ✅ 15 💤 0 ❌
2 950 runs  2 935 ✅ 15 💤 0 ❌

Results for commit aef43d5.

Realm Server Test Results

    1 files      1 suites   10m 11s ⏱️
1 549 tests 1 548 ✅ 1 💤 0 ❌
1 640 runs  1 639 ✅ 1 💤 0 ❌

Results for commit aef43d5.

[Copilot]

Pull request overview

Standardizes dropdown trigger polish in boxel-ui for the card-chooser/toolbar surfaces by unifying caret iconography, ensuring the sort trigger caret flips when open, stabilizing the selection count width to prevent layout shift, and making the design-system focus ring explicit and consistent across browsers.

Changes:

• Swaps sort/selection triggers from DropdownArrowDown to the thinner CaretDown and flips the sort caret via aria-expanded.
• Stabilizes the SelectionMenu count width (tabular digits + 2ch minimum) to avoid trigger shifting as the count changes.
• Updates BoxelButton:focus-visible to set the full outline shorthand (and darken the primary ring on hover/active) instead of relying on UA default outline-style.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/boxel-ui/addon/src/components/sort-dropdown/index.gts	Uses CaretDown and adds open-state caret flip styling keyed off aria-expanded.
packages/boxel-ui/addon/src/components/selection-menu/index.gts	Uses CaretDown, removes redundant local focus ring, and stabilizes count width to prevent layout shift.
packages/boxel-ui/addon/src/components/button/index.gts	Makes focus ring explicit via outline shorthand and aligns primary ring color with hover/active fill.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lukemelia]

[Claude Code 🤖] Split into three stacked, single-issue PRs (byte-identical to this combined diff):

• CS-11326: standardize sort + selection-menu triggers on CaretDown (flip on open) #5114 — CS-11326 (CaretDown + flip) → base cs-11325
• CS-11327: reserve a stable width for the selection-menu count #5115 — CS-11327 (count width) → on CS-11326: standardize sort + selection-menu triggers on CaretDown (flip on open) #5114
• CS-11328: robust primary BoxelButton focus ring; darken with the fill #5116 — CS-11328 (button focus ring) → on CS-11327: reserve a stable width for the selection-menu count #5115

Closing this in favor of those.