Select / MultiSelect icon support, menuItemVariant and showSearchIcon toggle (WEB-1075, WEB-1076, WEB-1118)

Version: 0.6.0 · Type: ✨ Feature

WEB-1075 · WEB-1076 · WEB-1118

Problem

Figma's Select design system updated the multi-select and search specs; the code hadn't caught up:

1. Chips lacked hover (gray fill) and selected/active (darker fill + border) visual states; menu items lacked Checkbox and left-aligned Checkmark style variants; MultiSelect couldn't switch its dropdown item visual style
2. The leading search icon on searchable triggers couldn't be turned off
3. The checkbox variant was a pure visual span, not backed by the shared Checkbox component

Changed Files

• packages/design/src/components/Select/styles.ts
• packages/design/src/components/Select/SearchableOptionItem.tsx
• packages/design/src/components/Select/MultiSelect.tsx
• packages/design/src/components/Select/Select.tsx
• packages/design/src/components/Select/index.ts
• packages/design/src/components/Select/SelectDesignSpec.md
• packages/design/src/components/Input/styles.ts
• packages/design/src/components/Select/__tests__/MultiSelect.test.tsx
• packages/design/src/components/Select/__tests__/Select.test.tsx
• packages/design-site/docs/components/select.mdx

Changes

1. Chip states — MULTI_SELECT_CHIP_CLASS gains hover (Grays-Gray-1 fill + Separators-Emphasized border) and selected/active/focus-visible (Grays-Gray-2 fill + Labels-Primary border) states
2. SearchableOptionItem gains a variant prop — 'checkmark-right' | 'checkmark' | 'checkbox', default 'checkmark-right' for backward compatibility; the checkbox variant is driven directly by selected / disabled
3. New icon prop — optional leading icon (matches Figma's Show Icon)
4. MultiSelect gains a menuItemVariant prop — 'checkmark-right' (default) | 'checkbox', forwarded to SearchableOptionItem
5. New exported SelectItemVariant type
6. Select gains a showSearchIcon prop (default true) controlling whether the searchable trigger shows a leading search icon
7. SearchableOptionItem's checkbox variant now renders the shared Checkbox component instead of a hand-rolled visual span
8. Input border gains a hover state (hover:border-(--Labels-Primary))
9. Select item default text color confirmed as text-(--Labels-Primary); synced the design spec doc, style comments, and unit test assertions
10. Docs site select.mdx (English + Chinese) updated with a Menu Item Variants demo and a menuItemVariant Props entry

Token Alignment

State	Property	Token
Chip Hover	Background	Grays-Gray-1 (#EBEBEB)
Chip Hover	Border	Separators-Emphasized (#CCCCCC)
Chip Selected	Background	Grays-Gray-2 (#D6D6D6)
Chip Selected	Border	Labels-Primary (#000000)
Checkbox Unselected	Border	Separators-Default
Checkbox Selected	Fill	Labels-Primary (#000000)
Checkbox Disabled Unselected	Border + BG	Separators-Emphasized + Grays-Gray-1
Checkbox Disabled Selected	Fill	Grays-Gray-2 (#D6D6D6)