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   1h 42m 49s ⏱️ + 1m 10s
1 925 tests +9  1 908 ✅ +14  17 💤 ±0  0 ❌ ±0 
1 940 runs  +9  1 923 ✅ +19  17 💤 ±0  0 ❌  - 5 

Results for commit d9de8dc. ± 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".

[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.

[burieberry]

Now the selection process looks much better. The styles are still off, though. I still see the blue highlights I posted screenshots of, and the paddings and margins are uneven for the dropdown items and the selected pills. Also opening/closing of the dropdown menu should not cause a shift in the page.

If styling is not going to be handled here, there should be a new ticket made. Here's the zeplin link for the next reviewer for reference: https://app.zeplin.io/project/67eda3cfaa0e10139932a389/screen/67f441fff878385c6cc2771e

[FadhlanR]

I’ve made the following styling updates:

• Removed the blue highlights. These persisted because I hadn't disabled the linting rule for require-scoped-style.
• Fixed the dropdown menu so that opening/closing it no longer causes a layout shift.
• Updated the padding and margins to match the provided design specifications.

Screen.Recording.2026-02-02.at.14.47.39.mov