cloudflare · FBalint · Aug 5, 2026
diff --git a/.changeset/remove-xs-size.md b/.changeset/remove-xs-size.md
@@ -0,0 +1,14 @@
+---
+"@cloudflare/kumo": major
+---
+
+**BREAKING:** Remove the `xs` size variant from `Button`, `Input`, `InputArea`, `InputGroup`, `Select`, `Combobox`, `Autocomplete`, `SensitiveInput`, and `Toolbar`.
+
+The type unions no longer include `"xs"` and the runtime `KUMO_*_VARIANTS.size` objects no longer contain an `xs` entry. Passing `size="xs"` will fail TypeScript compilation. Migrate to `size="sm"` — it is the next visual step and remains available.
+
+**`Banner`:** A `size="sm"` Banner used to render its `Banner.Action` children at Button's `xs` size (h-5). It now renders them at `sm` (h-6.5) instead. `Banner.Action` accepts only `size="sm"` as a consequence.
+
+**Unaffected:**
+
+- `Text` — `xs` is a legitimate typographic step (12px) and stays.
+- `Banner.Action` — the type still exists but is narrowed to `"sm"` only.
diff --git a/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx b/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx
@@ -210,22 +210,10 @@ export function AutocompleteGroupedDemo() {
   );
 }
 
-/** Demonstrates the four size variants: xs, sm, base, and lg. */
+/** Demonstrates the three size variants: sm, base, and lg. */
 export function AutocompleteSizesDemo() {
   return (
     <div className="flex flex-wrap items-center gap-4">
-      <Autocomplete items={fruits.slice(0, 10)}>
-        <Autocomplete.InputGroup size="xs" placeholder="xs" />
-        <Autocomplete.Content>
-          <Autocomplete.List>
-            {(item: string) => (
-              <Autocomplete.Item key={item} value={item}>
-                {item}
-              </Autocomplete.Item>
-            )}
-          </Autocomplete.List>
-        </Autocomplete.Content>
-      </Autocomplete>
       <Autocomplete items={fruits.slice(0, 10)}>
         <Autocomplete.InputGroup size="sm" placeholder="sm" />
         <Autocomplete.Content>

diff --git a/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx b/packages/kumo-docs-astro/src/components/demos/ButtonDemo.tsx
@@ -42,9 +42,6 @@ export function ButtonSecondaryDestructiveDemo() {
 export function ButtonSizesDemo() {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Button size="xs" variant="secondary">
-        Extra Small
-      </Button>
       <Button size="sm" variant="secondary">
         Small
       </Button>

diff --git a/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputAreaDemo.tsx
@@ -48,11 +48,6 @@ export function InputAreaErrorObjectDemo() {
 export function InputAreaSizesDemo() {
   return (
     <div className="flex flex-col gap-4">
-      <InputArea
-        size="xs"
-        label="Extra Small"
-        placeholder="Extra small textarea"
-      />
       <InputArea size="sm" label="Small" placeholder="Small textarea" />
       <InputArea label="Base" placeholder="Base textarea (default)" />
       <InputArea size="lg" label="Large" placeholder="Large textarea" />

diff --git a/packages/kumo-docs-astro/src/components/demos/InputDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputDemo.tsx
@@ -50,7 +50,6 @@ export function InputErrorObjectDemo() {
 export function InputSizesDemo() {
   return (
     <div className="flex flex-col gap-4">
-      <Input size="xs" label="Extra Small" placeholder="Extra small input" />
       <Input size="sm" label="Small" placeholder="Small input" />
       <Input label="Base" placeholder="Base input (default)" />
       <Input size="lg" label="Large" placeholder="Large input" />

diff --git a/packages/kumo-docs-astro/src/components/demos/InputGroupDemo.tsx b/packages/kumo-docs-astro/src/components/demos/InputGroupDemo.tsx
@@ -226,21 +226,6 @@ export function InputGroupSuffixDemo() {
 export function InputGroupSizesDemo() {
   return (
     <div className="flex w-full max-w-3xs flex-col gap-4">
-      <InputGroup size="xs" label="Extra Small">
-        <InputGroup.Addon>
-          <MagnifyingGlassIcon />
-        </InputGroup.Addon>
-        <InputGroup.Input placeholder="Extra small input" />
-        <InputGroup.Addon align="end">
-          <InputGroup.Button
-            className="text-kumo-subtle"
-            icon={QuestionIcon}
-            shape="square"
-            aria-label="Help"
-          />
-        </InputGroup.Addon>
-      </InputGroup>
-
       <InputGroup size="sm" label="Small">
         <InputGroup.Addon>
           <MagnifyingGlassIcon />

diff --git a/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx b/packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx
@@ -200,7 +200,7 @@ export function PopoverVirtualAnchorDemo() {
                 <td className="px-4 py-2 text-kumo-subtle">{row.status}</td>
                 <td className="px-4 py-2">
                   <Button
-                    size="xs"
+                    size="sm"
                     variant="ghost"
                     shape="square"
                     icon={DotsThree}

diff --git a/packages/kumo-docs-astro/src/components/demos/SelectDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SelectDemo.tsx
@@ -16,20 +16,10 @@ export function SelectBasicDemo() {
   );
 }
 
-/** Select trigger sizes (xs/sm/base/lg) matching Input and Combobox. */
+/** Select trigger sizes (sm/base/lg) matching Input and Combobox. */
 export function SelectSizesDemo() {
   return (
     <div className="grid gap-4">
-      <div className="flex items-center gap-3">
-        <span className="w-10 text-sm text-kumo-subtle">xs</span>
-        <Select
-          aria-label="Select size xs"
-          size="xs"
-          className="w-[200px]"
-          placeholder="Choose..."
-          items={{ a: "Option A", b: "Option B" }}
-        />
-      </div>
       <div className="flex items-center gap-3">
         <span className="w-10 text-sm text-kumo-subtle">sm</span>
         <Select

diff --git a/packages/kumo-docs-astro/src/components/demos/SelectStressTestDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SelectStressTestDemo.tsx
@@ -403,12 +403,6 @@ export function SelectSizeVariantsDemo() {
 
   return (
     <div className="space-y-4">
-      <Select
-        size="xs"
-        label="Extra Small (xs)"
-        placeholder="xs size"
-        items={items}
-      />
       <Select
         size="sm"
         label="Small (sm)"

diff --git a/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx b/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx
@@ -124,8 +124,9 @@ import {
 ## Sizes
 
 <p>
-  The `size` prop on `Autocomplete.InputGroup` supports four variants matching the
-  Input component: `xs`, `sm`, `base` (default), and `lg`.
+  The `size` prop on `Autocomplete.InputGroup` supports three variants matching
+  the Input component: `sm`, `base` (default), and `lg`. (`xs` is deprecated —
+  use `sm`.)
 </p>
 <ComponentExample demo="AutocompleteSizesDemo">
   <AutocompleteSizesDemo client:load />

diff --git a/packages/kumo-docs-astro/src/pages/components/combobox.mdx b/packages/kumo-docs-astro/src/pages/components/combobox.mdx
@@ -95,8 +95,8 @@ export default function Example() {
 ### Sizes
 
 <p>
-  The Combobox supports four size variants that match the Input component: `xs`,
-  `sm`, `base` (default), and `lg`.
+  The Combobox supports three size variants that match the Input component:
+  `sm`, `base` (default), and `lg`. (`xs` is deprecated — use `sm`.)
 </p>
 <ComponentExample demo="ComboboxSizesDemo">
   <ComboboxSizesDemo client:load />

diff --git a/packages/kumo-docs-astro/src/pages/components/input-area.mdx b/packages/kumo-docs-astro/src/pages/components/input-area.mdx
@@ -132,7 +132,7 @@ export default function Example() {
 
 ### Sizes
 
-<p>Four sizes available: `xs`, `sm`, `base` (default), `lg`.</p>
+<p>Three sizes available: `sm`, `base` (default), `lg`. (`xs` is deprecated — use `sm`.)</p>
 <ComponentExample demo="InputAreaSizesDemo">
   <InputAreaSizesDemo client:visible />
 </ComponentExample>

diff --git a/packages/kumo-docs-astro/src/pages/components/input-group.mdx b/packages/kumo-docs-astro/src/pages/components/input-group.mdx
@@ -170,8 +170,8 @@ export default function Example() {
 ### Sizes
 
 <p>
-  Four sizes: `xs`, `sm`, `base` (default), and `lg`. The size applies to the
-  entire group.
+  Three sizes: `sm`, `base` (default), and `lg`. The size applies to the
+  entire group. (`xs` is deprecated — use `sm`.)
 </p>
 <ComponentExample demo="InputGroupSizesDemo">
   <InputGroupSizesDemo client:visible />

diff --git a/packages/kumo-docs-astro/src/pages/components/input.mdx b/packages/kumo-docs-astro/src/pages/components/input.mdx
@@ -136,7 +136,7 @@ export default function Example() {
 
 ### Input Sizes
 
-<p>Four sizes available: `xs`, `sm`, `base` (default), `lg`.</p>
+<p>Three sizes available: `sm`, `base` (default), `lg`. (`xs` is deprecated — use `sm`.)</p>
 <ComponentExample demo="InputSizesDemo">
   <InputSizesDemo client:visible />
 </ComponentExample>

diff --git a/packages/kumo-docs-astro/src/pages/components/toolbar.mdx b/packages/kumo-docs-astro/src/pages/components/toolbar.mdx
@@ -105,8 +105,8 @@ inline addon or suffix.
 
 ### Sizes
 
-The `size` prop supports `xs`, `sm`, `base`, and `lg`. Every supported toolbar
-item is locked to the same size.
+The `size` prop supports `sm`, `base`, and `lg`. Every supported toolbar
+item is locked to the same size. (`xs` is deprecated — use `sm`.)
 
 <ComponentExample demo="ToolbarSizesDemo">
   <ToolbarSizesDemo client:visible />

diff --git a/packages/kumo-docs-astro/src/pages/tests/select.astro b/packages/kumo-docs-astro/src/pages/tests/select.astro
@@ -259,14 +259,13 @@ const [value, setValue] = useState<string | null>(null);
       <div>
         <h2 class="text-xl font-semibold text-kumo-default">9. Size Variants</h2>
         <p class="text-sm text-kumo-subtle mt-1">
-          All four sizes match Input component sizing.
+          Three sizes match Input component sizing.
         </p>
       </div>
       <div class="p-4 rounded-lg border border-kumo-hairline bg-kumo-base">
         <SelectSizeVariantsDemo client:visible />
       </div>
-      <pre class={codeBlockClass}>{`<Select size="xs" ... />  // Extra small: h-5 (20px)
-<Select size="sm" ... />  // Small: h-6.5 (26px)
+      <pre class={codeBlockClass}>{`<Select size="sm" ... />  // Small: h-6.5 (26px)
 <Select size="base" ... /> // Default: h-9 (36px)
 <Select size="lg" ... />  // Large: h-10 (40px)`}</pre>
     </section>

diff --git a/packages/kumo-figma/src/build-theme-data.ts b/packages/kumo-figma/src/build-theme-data.ts
@@ -367,7 +367,7 @@ function generateSpacingScale(baseUnitPx: number): Record<string, number> {
  */
 function parseButtonCompactSizes(tsx: string): Record<string, number> {
   const sizes: Record<string, number> = {};
-  const sizeNames = ["xs", "sm", "base", "lg"];
+  const sizeNames = ["sm", "base", "lg"];
 
   for (const name of sizeNames) {
     // Match: xs: { classes: "size-3.5" }
@@ -421,7 +421,7 @@ console.log(
 console.log("\n🔘 Parsing button.tsx compact sizes...");
 const buttonCompactSizes = parseButtonCompactSizes(buttonTsx);
 console.log(
-  `   - Compact sizes: xs=${buttonCompactSizes.xs}px, sm=${buttonCompactSizes.sm}px, base=${buttonCompactSizes.base}px, lg=${buttonCompactSizes.lg}px`,
+  `   - Compact sizes: sm=${buttonCompactSizes.sm}px, base=${buttonCompactSizes.base}px, lg=${buttonCompactSizes.lg}px`,
 );
 
 // Generate full spacing scale

diff --git a/packages/kumo-figma/src/generators/button.ts b/packages/kumo-figma/src/generators/button.ts
@@ -167,7 +167,6 @@ export function getButtonParsedShapeStyles(shape: string) {
  * Parses size-* Tailwind classes to derive pixel values.
  *
  * Source: button.tsx KUMO_BUTTON_VARIANTS.compactSize
- * - xs: size-3.5 = 14px
  * - sm: size-6.5 = 26px
  * - base: size-9 = 36px
  * - lg: size-10 = 40px
@@ -178,7 +177,6 @@ export function getButtonParsedShapeStyles(shape: string) {
 export function getCompactSizeMap(): Record<string, number> {
   // Compact size classes from KUMO_BUTTON_VARIANTS.compactSize in button.tsx
   const compactSizeClasses: Record<string, string> = {
-    xs: "size-3.5",
     sm: "size-6.5",
     base: "size-9",
     lg: "size-10",
@@ -727,7 +725,7 @@ export async function generateButtonComponents(
   ];
 
   // Define column headers for shape rows (sizes)
-  const shapeColumnHeaders = ["xs", "sm", "base", "lg"];
+  const shapeColumnHeaders = ["sm", "base", "lg"];
 
   // Track shape section column headers separately
   const shapeColumnHeaderPositions: { x: number; text: string }[] = [];

diff --git a/packages/kumo-figma/src/generators/drift-detection.test.ts b/packages/kumo-figma/src/generators/drift-detection.test.ts
@@ -403,7 +403,6 @@ describe("Figma Plugin - Registry Sync Validation", () => {
 
     // Expected compact sizes from Button COMPACT_SIZE_MAP (derived from registry)
     const expectedSizes: Record<string, number> = {
-      xs: 14, // size-3.5 = 3.5 * 4 = 14px
       sm: 26, // size-6.5 = 6.5 * 4 = 26px
       base: 36, // size-9 = 9 * 4 = 36px
       lg: 40, // size-10 = 10 * 4 = 40px
@@ -817,10 +816,10 @@ describe("Figma Plugin - Phase 6 Magic Number Enforcement", () => {
           content,
         );
 
-      // Check for explicit hardcoded COMPACT_SIZE_MAP definition: { xs: 14, sm: 26, base: 36, lg: 40 }
+      // Check for explicit hardcoded COMPACT_SIZE_MAP definition: { sm: 26, base: 36, lg: 40 }
       // This is the most drift-prone pattern - explicit recreation of button compact sizes
       const hasHardcodedCompactMap =
-        /(?:const|let|var)\s+COMPACT_SIZE_MAP[^=]*=\s*\{[^}]*xs:\s*14[^}]*sm:\s*26/.test(
+        /(?:const|let|var)\s+COMPACT_SIZE_MAP[^=]*=\s*\{[^}]*sm:\s*26[^}]*base:\s*36/.test(
           content,
         );
 
@@ -840,7 +839,6 @@ describe("Figma Plugin - Phase 6 Magic Number Enforcement", () => {
           `  2. Replace hardcoded definitions:\n` +
           `     - const COMPACT_SIZE_MAP = FALLBACK_VALUES.buttonCompactSize;\n` +
           `  Or reference values directly:\n` +
-          `     - FALLBACK_VALUES.buttonCompactSize.xs  (14px)\n` +
           `     - FALLBACK_VALUES.buttonCompactSize.sm  (26px)\n` +
           `     - FALLBACK_VALUES.buttonCompactSize.base (36px)\n` +
           `     - FALLBACK_VALUES.buttonCompactSize.lg  (40px)\n`,
@@ -1214,15 +1212,13 @@ describe("Figma Plugin - CSS Theme Sync Validation", () => {
     };
 
     // Verify theme-data.json matches button.tsx source
-    expect(themeData.kumo.buttonCompactSize.xs).toBe(extractSizeClass("xs"));
     expect(themeData.kumo.buttonCompactSize.sm).toBe(extractSizeClass("sm"));
     expect(themeData.kumo.buttonCompactSize.base).toBe(
       extractSizeClass("base"),
     );
     expect(themeData.kumo.buttonCompactSize.lg).toBe(extractSizeClass("lg"));
 
     // Verify expected values
-    expect(themeData.kumo.buttonCompactSize.xs).toBe(14); // size-3.5 = 14px
     expect(themeData.kumo.buttonCompactSize.sm).toBe(26); // size-6.5 = 26px
     expect(themeData.kumo.buttonCompactSize.base).toBe(36); // size-9 = 36px
     expect(themeData.kumo.buttonCompactSize.lg).toBe(40); // size-10 = 40px

diff --git a/packages/kumo-figma/src/generators/input-area.ts b/packages/kumo-figma/src/generators/input-area.ts
@@ -74,7 +74,6 @@ function getSizeConfigFromRegistry(size: string) {
     string,
     { minHeight: number; width: number }
   > = {
-    xs: { minHeight: 60, width: 200 },
     sm: { minHeight: 72, width: 240 },
     base: { minHeight: 88, width: 320 },
     lg: { minHeight: 100, width: 360 },
@@ -124,7 +123,6 @@ const SIZE_CONFIG: Record<
     width: number;
   }
 > = {
-  xs: getSizeConfigFromRegistry("xs"),
   sm: getSizeConfigFromRegistry("sm"),
   base: getSizeConfigFromRegistry("base"),
   lg: getSizeConfigFromRegistry("lg"),

diff --git a/packages/kumo-figma/src/generators/input.ts b/packages/kumo-figma/src/generators/input.ts
@@ -84,7 +84,6 @@ function getSizeConfigFromRegistry(size: string) {
     string,
     { height: number; paddingX: number; fontSize: number; borderRadius: number }
   > = {
-    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2 },
     sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6 },
     base: { height: 36, paddingX: 12, fontSize: 16, borderRadius: 8 },
     lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8 },
@@ -95,7 +94,6 @@ function getSizeConfigFromRegistry(size: string) {
 
   // Layout-specific widths (not in registry - generator specific)
   const widthMap: Record<string, number> = {
-    xs: 160,
     sm: 200,
     base: 280,
     lg: 320,
@@ -123,7 +121,6 @@ const SIZE_CONFIG: Record<
     width: number;
   }
 > = {
-  xs: getSizeConfigFromRegistry("xs"),
   sm: getSizeConfigFromRegistry("sm"),
   base: getSizeConfigFromRegistry("base"),
   lg: getSizeConfigFromRegistry("lg"),