# Picker mode

The gallery as a chooser: tick to select cards (cloths for a product family), an anchor card fixed in navy, siblings tagged, and a selection bar with mini swatches and the one primary.

- **Group:** Cards and gallery · **family:** `cards-gallery` · **shadcn:** Card, Command
- **Build:** `Command` (search) + selectable `Card`s; phone full-screen `Drawer`.
- **In apps/admin today:** Card exists.
- **Client component:** yes. 

## Content rules

- Primary: "Use 4 cloths".

## Do

- Show the anchor clearly.

## Don't

- Allow deselecting the anchor.

## Accessibility

- **Keyboard:** Space toggles a card; Enter confirms the selection bar.
- **ARIA:** `role="listbox" aria-multiselectable` with `option` cards, or checkbox cards.
- **Focus:** Ring on the card.

## Tokens

`--s-3` `--s-4` `--s-5` `--border` `--s-2` `--r-card-inner` `--background` `--input` `--e-1` `--motion-hover` `--r-chip` `--r-pill` `--primary` `--e-pop` `--primary-foreground` `--muted` `--card` `--w-semibold` `--text-micro` `--font-voice` `--font-stretch-title` `--accent` `--accent-foreground` `--ring` `--s-1` `--foreground` `--text-card` `--text-small` `--muted-foreground` `--secondary-border` `--r-card`

## Files

`picker.html` live specimen · `picker.css` kit rules · `picker.d.ts` props · full page: `docs/components/picker/` (phone: `m/`).