Introduce picker component

[FadhlanR]

This new component is a modified version of the multi-select component with a few behavioral differences:

• The trigger component supports a customizable label.
• A search input is available for filtering option items.
• The Select All option and selected options always remain at the top and are not affected by search results.
• A divider is displayed between selected and unselected options.

This component will be used for the realm picker and type picker in the card chooser.

Screen.Recording.2026-01-27.at.18.01.07.mov

[github-actions]

Preview deployments

• Host staging preview
• Host production preview
• Boxel UI staging preview

[github-actions]

Host Test Results

    1 files  ±    0      1 suites  ±0   3h 25m 39s ⏱️ + 1h 44m 0s
1 925 tests +    9  1 907 ✅ +   13  17 💤 ± 0  0 ❌ ±0  1 🔥  - 4 
3 880 runs  +1 949  3 844 ✅ +1 940  34 💤 +17  1 ❌  - 4  1 🔥  - 4 

For more details on these errors, see this check.

Results for commit c1ad1b1. ± Comparison against base commit 5a329a3.

♻️ This comment has been updated with latest results.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a635ba8779

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve base multi-select dropdown class when customizing

When a custom @dropdownClass is provided, the default boxel-multi-select__dropdown class is replaced rather than combined. The base dropdown styles (box shadow, list reset/padding, option layout, z-index) are scoped to .boxel-multi-select__dropdown later in the same file, so any custom dropdown (e.g. the new Picker’s boxel-picker__dropdown) will lose those base styles. This will change dropdown rendering (bulleted lists, missing padding/shadow, z-index) in any consumer that sets a custom class. Consider concatenating the default class with the custom class (like the Select component does) so custom dropdowns keep the base styling.

Useful? React with 👍 / 👎.

[burieberry]

Here are a couple of suggestions for improvement:

Functionality:

• When a selection is made, the default selection ("All" Realms or Types) should no longer be selected as per the design:

Styling:

• the default state needs to be updated to mimic the design
• The X button on pills looks really small and not aligned in the middle. You can use a similar X button as the linksToMany component pills.
• We need to adjust the colors for hover, selected, selected hover states. Currently they seem to have uneven padding and different coloring:

[FadhlanR]

@burieberry Thanks for the feedback! I made a few updates based on your suggestions:

• Made the select-all option required in the picker options.
• Set the select-all option as selected by default.
• Removed the “remove” button from the selected select-all option.
• Automatically deselect select-all when the user selects any other non–select-all option.
• Automatically select select-all (and deselect other options) when the user selects all non–select-all options.
• Deselect all non–select-all options when the user selects select-all.
• Followed the use of "remove" button from linksToManyCompactEditor.
• Updated some css.

Screen.Recording.2026-01-29.at.13.53.44.mov

[FadhlanR]

The only left is the icon for select-all icon, I'm asking for it in the design channel, but we can add it in the next PR.