Add large size to Badge

- Add lg tokens: height 32px, paddingX 16px, fontSize 14px, iconSize 16px
- Refactor component to use size map instead of ternary
- Update stories: Sizes now shows all three, CompleteMatrix includes large

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/atoms/Badge/Badge.stories.tsx

@@ -35,7 +35,7 @@ const meta: Meta<typeof Badge> = {
     },
     size: {
       control: 'select',
-      options: ['small', 'medium'],
+      options: ['small', 'medium', 'large'],
       description: 'Size preset',
       table: { defaultValue: { summary: 'medium' } },
     },
@@ -120,27 +120,13 @@ export const WithIconsFilled: Story = {
 
 // ─── Sizes ──────────────────────────────────────────────────────────────────
 
-/** Both sizes side by side */
+/** All three sizes side by side */
 export const Sizes: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
       <Badge size="small" color="brand" icon={<StarIcon />}>Small</Badge>
       <Badge size="medium" color="brand" icon={<StarIcon />}>Medium</Badge>
-    </div>
-  ),
-};
-
-/** All colours in small size */
-export const SmallSizes: Story = {
-  name: 'Small — All Colours',
-  render: () => (
-    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
-      <Badge size="small" color="default">Default</Badge>
-      <Badge size="small" color="brand" icon={<StarIcon />}>Brand</Badge>
-      <Badge size="small" color="success" icon={<CheckCircleIcon />}>Success</Badge>
-      <Badge size="small" color="warning">Warning</Badge>
-      <Badge size="small" color="error">Error</Badge>
-      <Badge size="small" color="info">Info</Badge>
+      <Badge size="large" color="brand" icon={<StarIcon />}>Large</Badge>
     </div>
   ),
 };
@@ -249,7 +235,7 @@ export const CompleteMatrix: Story = {
               {variant}
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              {(['medium', 'small'] as const).map((size) => (
+              {(['large', 'medium', 'small'] as const).map((size) => (
                 <div key={size} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                   <span style={{ width: 60, fontSize: 12, color: '#737373' }}>{size}</span>
                   {colors.map((color) => (

src/components/atoms/Badge/Badge.tsx

@@ -15,7 +15,7 @@ export interface BadgeProps extends Omit<BoxProps, 'color'> {
   /** Visual style: "filled" (solid background) or "soft" (tonal/subtle background) */
   variant?: 'filled' | 'soft';
   /** Size preset */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   /** Optional leading icon */
   icon?: React.ReactNode;
   /** Label text */
@@ -91,7 +91,28 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
     },
     ref,
   ) => {
-    const isSmall = size === 'small';
+    const sizeMap = {
+      small: {
+        height: 'var(--fa-badge-height-sm)',
+        px: 'var(--fa-badge-padding-x-sm)',
+        fontSize: 'var(--fa-badge-font-size-sm)',
+        iconSize: 'var(--fa-badge-icon-size-sm)',
+      },
+      medium: {
+        height: 'var(--fa-badge-height-md)',
+        px: 'var(--fa-badge-padding-x-md)',
+        fontSize: 'var(--fa-badge-font-size-md)',
+        iconSize: 'var(--fa-badge-icon-size-md)',
+      },
+      large: {
+        height: 'var(--fa-badge-height-lg)',
+        px: 'var(--fa-badge-padding-x-lg)',
+        fontSize: 'var(--fa-badge-font-size-lg)',
+        iconSize: 'var(--fa-badge-icon-size-lg)',
+      },
+    } as const;
+
+    const s = sizeMap[size];
 
     return (
       <Box
@@ -107,12 +128,12 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
               display: 'inline-flex',
               alignItems: 'center',
               gap: 'var(--fa-badge-icon-gap-default)',
-              minHeight: isSmall ? 'var(--fa-badge-height-sm)' : 'var(--fa-badge-height-md)',
-              px: isSmall ? 'var(--fa-badge-padding-x-sm)' : 'var(--fa-badge-padding-x-md)',
+              minHeight: s.height,
+              px: s.px,
               borderRadius: 'var(--fa-badge-border-radius-default)',
               backgroundColor: colors.bg,
               color: colors.text,
-              fontSize: isSmall ? 'var(--fa-badge-font-size-sm)' : 'var(--fa-badge-font-size-md)',
+              fontSize: s.fontSize,
               fontWeight: 600,
               fontFamily: theme.typography.fontFamily,
               lineHeight: 1,
@@ -121,7 +142,7 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
               userSelect: 'none',
               // Icon sizing
               '& > .MuiSvgIcon-root, & > svg': {
-                fontSize: isSmall ? 'var(--fa-badge-icon-size-sm)' : 'var(--fa-badge-icon-size-md)',
+                fontSize: s.iconSize,
                 flexShrink: 0,
               },
             };