feat(Select): add size prop (xs/sm/base/lg) matching Input/Combobox

[mattrothenberg]

Summary

• Adds size prop to Select component with xs/sm/base/lg variants
• Reuses KUMO_INPUT_VARIANTS.size so heights match Input and Combobox exactly
• Applies text-kumo-placeholder to placeholder text to match Input styling
• Scales caret icon per size

Addresses feedback that Select needs to sit alongside Input at the same height (e.g., ZT's "small" variant use case).

Changes

• packages/kumo/src/components/select/select.tsx — size prop, variants, icon scaling
• packages/kumo-docs-astro/src/components/demos/SelectDemo.tsx — sizes demo
• packages/kumo-docs-astro/src/pages/components/select.mdx — docs section

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: component behavior change needs human review
• Tests
• Tests included/updated
• Additional testing not necessary because: visual change only, manually verified in docs

[mattrothenberg]

/bonk do your thing

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@405

commit: e0c474f

[github-actions]

Docs Preview

View docs preview

Commit: f406cdf

[ask-bonk]

Review Summary

Overall LGTM 👍 Clean implementation that follows Kumo conventions.

What Looks Good

1. Proper reuse of KUMO_INPUT_VARIANTS.size - This ensures Select heights will always match Input and Combobox exactly, which is exactly what was needed for the ZT use case

2. Correct variant pattern - Following the established conventions:

   • KUMO_SELECT_VARIANTS exported (line 16-18)
   • KUMO_SELECT_DEFAULT_VARIANTS exported (line 20-22)
   • Derived type KumoSelectSize exported (line 63)

3. Scalable icon sizing - The triggerIconStyles mapping (lines 87-95) properly scales the caret icon from 12px (xs) to 18px (lg)

4. Placeholder styling fix - Adding data-[placeholder]:text-kumo-placeholder (line 410) properly matches Input's placeholder styling

5. Tests included - New test coverage for size prop (lines 7-21 in test file) validates the CSS classes are applied

6. Changeset present - Minor version bump is appropriate for this feature addition

Minor Observations

• The KUMO_SELECT_STYLING metadata export (lines 28-60) still shows the base size values. This is fine since it's used by the Figma plugin as styling hints, but the actual runtime sizes come from the button variants which is correct.

• The demo and docs updates are comprehensive and follow the established patterns

Verification

Tested that the Select component:

• ✅ Properly accepts size prop with xs/sm/base/lg values
• ✅ Applies correct height classes (h-5, h-6.5, h-9, h-10)
• ✅ Scales the caret icon appropriately
• ✅ Placeholder text uses text-kumo-placeholder

Approve - Ready to merge

[ask-bonk]

I reviewed PR #405 by reading all changed files and verifying that the Select component properly reuses KUMO_INPUT_VARIANTS.size to match Input/Combobox heights, includes proper tests, and follows Kumo conventions. I then posted an approval review with detailed feedback confirming the implementation is clean and ready to merge.

github run

[github-actions]

Visual Regression Report — 18 changed, 18 unchanged

18 screenshot(s) with visual changes:

Button / Loading State

3 px (0%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

244 px (0.24%) changed

Before	After	Diff

Select / Select Basic

12 px (0.01%) changed

Before	After	Diff

Select / Select Without Label

159 px (0.16%) changed

Before	After	Diff

Select / Select With Field

636 px (0.54%) changed

Before	After	Diff

Select / Select Placeholder

553 px (0.54%) changed

Before	After	Diff

Select / Select With Tooltip

624 px (0.61%) changed

Before	After	Diff

Select / Select Custom Rendering

415 px (0.41%) changed

Before	After	Diff

Select / Select Loading

269 px (0.13%) changed

Before	After	Diff

Select / Select Multiple

12 px (0.01%) changed

Before	After	Diff

Select / Select Complex

1,238 px (1.05%) changed

Before	After	Diff

Select / Select Disabled Options

223 px (0.22%) changed

Before	After	Diff

Select / Select Disabled Items

12 px (0.01%) changed

Before	After	Diff

Select / Select Grouped

145 px (0.14%) changed

Before	After	Diff

Select / Select Grouped With Disabled

763 px (0.75%) changed

Before	After	Diff

Select / Select Long List

1,044 px (0.88%) changed

Before	After	Diff

Select (Open)

2,531,358 px (10.61%) changed

Before	After	Diff

18 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Dialog (Open)

---

Generated by Kumo Visual Regression