feat(switch): add xs extra-small size variant

[awhobbs87]

Summary

Adds a new size="xs" option to the Switch component for use in inline badges, pills, and compact toolbars where the existing sm size is too large.

Motivation

In an internal admin tool, we embed toggle switches inside compact sidebar pills (10px font, tight padding). The Kumo Switch sm (16px track height) is too bulky for this context — it visually dominates the pill and causes wrapping at narrow sidebar widths. We initially built a custom micro-toggle matching Kumo's visual language (squircle corners, ring border, thumb shadow, blue/neutral palette) but would prefer to use the official component.

Changes

• KUMO_SWITCH_VARIANTS.size: Added xs entry with h-4.5 w-7 wrapper classes
• sizeStyles (both SwitchBase and SwitchItem): Added xs with h-3.5 w-7 track, w-3.5 thumb, left-3.5 slide — following the existing progression where each step adds +0.5 TW units to height/thumb and +1 to width
• SwitchSizesDemo: Added xs example
• switch.mdx: Updated sizes documentation to mention all four sizes
• Changeset: Minor bump for @cloudflare/kumo

Size progression

Size	Track	Thumb	Track px
xs	h-3.5 w-7	w-3.5	14×28
sm	h-4 w-8	w-4	16×32
base	h-4.5 w-9	w-4.5	18×36
lg	h-5 w-10	w-5	20×40

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: external contributor PR, bonk not available
• Tests
  • Tests included/updated

[pkg-pr-new]

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

commit: 0591d50

[github-actions]

Docs Preview

View docs preview

Commit: 0591d50

[github-actions]

Visual Regression Report — 17 changed, 20 unchanged

17 screenshot(s) with visual changes:

Button / Basic

198 px (0.2%) changed

Before	After	Diff

Button / Variant: Secondary

161 px (0.16%) changed

Before	After	Diff

Button / Variant: Destructive

585 px (0.58%) changed

Before	After	Diff

Button / Sizes

676 px (0.67%) changed

Before	After	Diff

Button / Icon Only

32 px (0.03%) changed

Before	After	Diff

Button / Loading State

506 px (0.5%) changed

Before	After	Diff

Dialog / Dialog With Actions

191 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Basic

241 px (0.24%) changed

Before	After	Diff

Dialog / Dialog Alert

744 px (0.73%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,566 px (1.54%) changed

Before	After	Diff

Dialog / Dialog With Select

225 px (0.22%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

225 px (0.22%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Loading

1,449 px (0.72%) changed

Before	After	Diff

Select / Select Complex

1,225 px (1.03%) changed

Before	After	Diff

Select / Select Grouped

194 px (0.19%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

20 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Ghost
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / With Icon
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Combobox
• Select / Select Basic
• Select / Select Sizes
• Select / Select Without Label
• Select / Select With Field
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression