refactor: use one size name per control height

.agents/skills/add-new-component/SKILL.md

@@ -472,7 +472,7 @@ export const playground = {
   type: 'playground',
   controls: {
     variant: { type: 'select', options: ['solid', 'outline'], defaultValue: 'solid' },
-    size: { type: 'select', options: ['small', 'normal'], defaultValue: 'normal' },
+    size: { type: 'select', options: ['small', 'medium'], defaultValue: 'medium' },
     disabled: { type: 'checkbox', defaultValue: false },
     children: { type: 'text', initialValue: 'Click me' }
   },

apps/www/src/components/dataview-demo.tsx

@@ -896,16 +896,16 @@ function TaskCard({
         {task.title}
       </Text>
       <Flex align='center' gap={2}>
-        <Badge size='micro' variant={TASK_STATUS_BADGE[task.status]}>
+        <Badge size='xsmall' variant={TASK_STATUS_BADGE[task.status]}>
           {task.status}
         </Badge>
         <DataView.DisplayAccess accessorKey='team'>
-          <Badge size='micro' variant='neutral'>
+          <Badge size='xsmall' variant='neutral'>
             {task.team}
           </Badge>
         </DataView.DisplayAccess>
         <DataView.DisplayAccess accessorKey='priority'>
-          <Badge size='micro' variant='neutral'>
+          <Badge size='xsmall' variant='neutral'>
             {task.priority}
           </Badge>
         </DataView.DisplayAccess>

apps/www/src/components/docs/footer.tsx

@@ -16,7 +16,7 @@ export default function DocsFooter({ url }: DocsFooterProps) {
           <Button
             variant='outline'
             color='neutral'
-            size='normal'
+            size='medium'
             leadingIcon={<ArrowLeft size={16} strokeWidth={1.5} />}
           >
             {neighbours.previous.name}
@@ -30,7 +30,7 @@ export default function DocsFooter({ url }: DocsFooterProps) {
           <Button
             variant='outline'
             color='neutral'
-            size='normal'
+            size='medium'
             trailingIcon={<ArrowRight size={16} strokeWidth={1.5} />}
           >
             {neighbours.next.name}

apps/www/src/components/tag/tag.module.css

@@ -3,7 +3,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-.tag.regular {
+.tag.medium {
   border-radius: 28px;
   padding-left: 12px;
   padding-right: 12px;

apps/www/src/components/tag/tag.tsx

@@ -7,15 +7,15 @@ import styles from './tag.module.css';
 
 interface TagProps {
   value: TagType;
-  size?: 'small' | 'regular';
+  size?: 'small' | 'medium';
 }
 
 export default function Tag({ value, size = 'small' }: TagProps) {
   if (!value.length) return;
   return (
     <Badge
       screenReaderText={value}
-      size={size === 'regular' ? 'regular' : 'micro'}
+      size={size === 'medium' ? 'medium' : 'xsmall'}
       variant={value === 'beta' ? 'neutral' : 'gradient'}
       className={cx(styles.tag, styles[size])}
     >

apps/www/src/content/docs/(overview)/upgrading.mdx

@@ -116,6 +116,44 @@ These filters used to match by mistake, and now match differently:
   `'2026/1/1T10:30'`, used to be read. It now matches only `neq`, and the
   timeline does not draw it. Store such dates as ISO 8601 (`2026-01-01T10:30`).
 
+## Unreleased: one size name per control height
+
+Controls share one set of size names. The 32px input and button size is
+`medium` everywhere. The pixel sizes do not change, and each component keeps
+its default size, so only code that passes an old value needs a change.
+TypeScript reports each old value.
+
+| Component | Before | After |
+|---|---|---|
+| `Button` | `size="normal"` (default) | `size="medium"` (default) |
+| `Input`, `TextArea`, `Search`, `Combobox.Input`, `Command.Input` | `size="large"` (default) | `size="medium"` (default) |
+| `Checkbox`, `Radio`, `Radio.Group`, `Switch` | `size="large"` (default) | `size="medium"` (default) |
+| `Badge` | `size="micro"` | `size="xsmall"` |
+| `Badge` | `size="regular"` | `size="medium"` |
+
+`small` keeps its name on every component, and `small` is still the `Badge`
+default.
+
+### Separator `size` becomes `variant`
+
+| Before | After |
+|---|---|
+| `size="full"` (default) | `variant="full"` (default) |
+| `size="half"` | `variant="middle"` |
+| `size="small"` | `variant="middle"`, or set the length with a class |
+
+`middle` insets both ends of the line from the container edges: 16px on a
+horizontal line and 8px on a vertical line. The line is centered. `half` was
+50% of the container and `small` was 20px, so check the lines that used them.
+
+```tsx
+// Before
+<Separator size="half" />
+
+// After
+<Separator variant="middle" />
+```
+
 ## 2.0: `Theme` is rewritten
 
 `Theme` used to put its tokens on `<html>` from an effect, so it could not

apps/www/src/content/docs/ai-elements/prompt-input/demo.ts

@@ -178,7 +178,7 @@ export const editorCapabilitiesDemo = {
       type: 'user',
       group: 'Users',
       icon: <Avatar size={1} fallback="A" />,
-      trailing: <Badge size="micro" variant="neutral">Agent</Badge>
+      trailing: <Badge size="xsmall" variant="neutral">Agent</Badge>
     },
     {
       id: 'u3',
@@ -309,7 +309,7 @@ export const mentionsDemo = {
       label: 'Apsara Assistant',
       type: 'user',
       group: 'Users',
-      trailing: <Badge size="micro" variant="neutral">Agent</Badge>
+      trailing: <Badge size="xsmall" variant="neutral">Agent</Badge>
     },
     { id: 'u3', label: 'Dana Whitfield', type: 'user', group: 'Users' }
   ];

apps/www/src/content/docs/components/badge/demo.ts

@@ -24,7 +24,7 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['micro', 'small', 'regular'],
+      options: ['xsmall', 'small', 'medium'],
       defaultValue: 'small'
     },
     icon: {
@@ -59,9 +59,9 @@ export const sizesDemo = {
   type: 'code',
   code: `
   <Flex gap={5} align="center">
-    <Badge size="micro">Micro</Badge>
+    <Badge size="xsmall">Extra small</Badge>
     <Badge size="small">Small</Badge>
-    <Badge size="regular">Regular</Badge>
+    <Badge size="medium">Medium</Badge>
   </Flex>`
 };
 

apps/www/src/content/docs/components/badge/index.mdx

@@ -36,7 +36,7 @@ Choose between different variants to convey different meanings or importance lev
 
 ### Size
 
-Three sizes. `small` is the default. `regular` matches body text and suits badges that stand alone, for example beside a heading. `micro` fits inside table rows and beside dense labels.
+Three sizes. `small` is the default. `medium` matches body text and suits badges that stand alone, for example beside a heading. `xsmall` fits inside table rows and beside dense labels.
 
 <Demo data={sizesDemo} />
 

apps/www/src/content/docs/components/badge/props.ts

@@ -15,7 +15,7 @@ export interface BadgeProps {
    * Size of the badge
    * @defaultValue "small"
    */
-  size?: 'micro' | 'small' | 'regular';
+  size?: 'xsmall' | 'small' | 'medium';
 
   /** Optional ReactNode to display an icon before the text */
   icon?: React.ReactNode;

apps/www/src/content/docs/components/button/demo.ts

@@ -23,8 +23,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['small', 'normal'],
-      defaultValue: 'normal'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     },
     leadingIcon: { type: 'icon' },
     trailingIcon: { type: 'icon' },
@@ -96,7 +96,7 @@ export const sizesDemo = {
   type: 'code',
   code: `<Flex gap={9} align="center">
     <Button size="small">Small</Button>
-    <Button size="normal">Normal</Button>
+    <Button size="medium">Medium</Button>
   </Flex>`
 };
 export const disabledDemo = {

apps/www/src/content/docs/components/button/index.mdx

@@ -45,7 +45,7 @@ Color carries meaning, not decoration. `danger` for destructive actions, `succes
 
 ### Size
 
-Two sizes. `normal` is the default and fits most layouts. Use `small` inside toolbars, table rows, and other dense surfaces.
+Two sizes. `medium` is the default and fits most layouts. Use `small` inside toolbars, table rows, and other dense surfaces.
 
 <Demo data={sizesDemo} />
 

apps/www/src/content/docs/components/button/props.ts

@@ -15,9 +15,9 @@ export type ButtonProps = {
 
   /**
    * Size of the button
-   * @defaultValue "normal"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'normal';
+  size?: 'small' | 'medium';
 
   /**
    * Whether the button is disabled

apps/www/src/content/docs/components/checkbox/demo.ts

@@ -29,8 +29,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     }
   },
   getCode
@@ -62,8 +62,8 @@ export const sizeExamples = {
   type: 'code',
   tabs: [
     {
-      name: 'Large (default)',
-      code: `<Checkbox size="large" />`
+      name: 'Medium (default)',
+      code: `<Checkbox size="medium" />`
     },
     {
       name: 'Small',

apps/www/src/content/docs/components/checkbox/index.mdx

@@ -36,7 +36,7 @@ A checkbox on its own, then in a group, where a parent can both reflect and driv
 
 ### Size variants
 
-Two sizes. `large` is the default; `small` fits table rows and dense lists.
+Two sizes. `medium` is the default; `small` fits table rows and dense lists.
 
 <Demo data={sizeExamples} />
 

apps/www/src/content/docs/components/checkbox/props.ts

@@ -51,9 +51,9 @@ export interface CheckboxProps {
 
   /**
    * The size of the checkbox.
-   * @defaultValue 'large'
+   * @defaultValue 'medium'
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /**
    * Custom render function for the indicator. Receives `(props, state)` where state includes `checked` and `indeterminate`.

apps/www/src/content/docs/components/combobox/demo.ts

@@ -24,8 +24,8 @@ export const playground = {
     label: { type: 'text', initialValue: 'Fruits' },
     size: {
       type: 'select',
-      options: ['small', 'large'],
-      defaultValue: 'large'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     },
     multiple: {
       type: 'checkbox',

apps/www/src/content/docs/components/combobox/props.ts

@@ -65,9 +65,9 @@ export interface ComboboxRootProps {
 export interface ComboboxInputProps {
   /**
    * Size variant of the input field.
-   * @default "large"
+   * @default "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Whether the input is disabled. */
   disabled?: boolean;

apps/www/src/content/docs/components/command/props.ts

@@ -69,9 +69,9 @@ export interface CommandInputProps {
 
   /**
    * Size variant of the input field.
-   * @defaultValue "large"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Additional CSS class names. */
   className?: string;

apps/www/src/content/docs/components/floating-actions/props.ts

@@ -42,10 +42,10 @@ export interface FloatingActionsSeparatorProps {
   color?: 'primary' | 'secondary' | 'tertiary';
 
   /**
-   * Size variant inherited from the underlying `Separator`.
+   * Variant inherited from the underlying `Separator`.
    * @defaultValue "full"
    */
-  size?: 'small' | 'half' | 'full';
+  variant?: 'full' | 'middle';
 
   /** Additional CSS class names. */
   className?: string;

apps/www/src/content/docs/components/input/demo.ts

@@ -17,8 +17,8 @@ export const playground = {
     suffix: { type: 'text', initialValue: '' },
     size: {
       type: 'select',
-      options: ['small', 'large'],
-      initialValue: 'large'
+      options: ['small', 'medium'],
+      defaultValue: 'medium'
     }
   },
   getCode

apps/www/src/content/docs/components/input/index.mdx

@@ -52,7 +52,7 @@ A single-line text input. `placeholder` hints at the expected value; it is not a
 
 ### Size
 
-Input comes in two sizes: small (24px) and large (32px).
+Input comes in two sizes: `small` (24px) and `medium` (32px).
 
 <Demo data={sizeDemo} />
 

apps/www/src/content/docs/components/input/props.ts

@@ -1,9 +1,9 @@
 export interface InputProps {
   /**
    * Size variant of the input.
-   * @defaultValue "large"
+   * @defaultValue "medium"
    */
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium';
 
   /** Whether the input is disabled. When true, chips are also disabled and their dismiss buttons are hidden. */
   disabled?: boolean;

apps/www/src/content/docs/components/radio/demo.ts

@@ -31,8 +31,8 @@ export const playground = {
     },
     size: {
       type: 'select',
-      options: ['large', 'small'],
-      defaultValue: 'large'
+      options: ['medium', 'small'],
+      defaultValue: 'medium'
     },
     disabled: {
       type: 'checkbox',
@@ -72,16 +72,16 @@ export const sizeDemo = {
   type: 'code',
   tabs: [
     {
-      name: 'Large (default)',
+      name: 'Medium (default)',
       code: `
-<Radio.Group defaultValue="1" size="large">
+<Radio.Group defaultValue="1" size="medium">
   <Flex gap={3} align="center">
     <Radio value="1" id="sl1" />
-    <label htmlFor="sl1">Large Option One</label>
+    <label htmlFor="sl1">Medium Option One</label>
   </Flex>
   <Flex gap={3} align="center">
     <Radio value="2" id="sl2" />
-    <label htmlFor="sl2">Large Option Two</label>
+    <label htmlFor="sl2">Medium Option Two</label>
   </Flex>
 </Radio.Group>`
     },
@@ -108,8 +108,8 @@ export const sizeDemo = {
     <label htmlFor="so1">Small (from group)</label>
   </Flex>
   <Flex gap={3} align="center">
-    <Radio value="2" size="large" id="so2" />
-    <label htmlFor="so2">Large (overrides group)</label>
+    <Radio value="2" size="medium" id="so2" />
+    <label htmlFor="so2">Medium (overrides group)</label>
   </Flex>
 </Radio.Group>`
     }

apps/www/src/content/docs/components/radio/index.mdx

@@ -29,7 +29,7 @@ Radios always live in a group. The group owns the value; the radios are the opti
 
 ### Size
 
-Two sizes. `large` is the default; `small` fits dense lists. Set `size` on `Radio.Root` and every item follows.
+Two sizes. `medium` is the default; `small` fits dense lists. Set `size` on `Radio.Group` and every item follows.
 
 <Demo data={sizeDemo} />