feat(month-grid, year-grid): add xs size

Both grids now accept size='xs' alongside sm/md/lg.

- recipe: add calendar-padding-xs / control-size-xs / day-size-xs /
  font-size-xs tokens (space-2, control-height-xxs=22px, font-size-xs).
  Regenerated generated/base.css.
- eidos css: add [data-month-grid][data-size='xs'] and the year-grid
  equivalent before the existing sm block.
- types: MonthGridSize / YearGridSize extend Size with 'xs'.
- demos: size chip group now lists xs / sm / md / lg.

Verified in browser at /uix/components/month-grid with size='xs':
cell block-size = 22px, padding = 8px (space-2), font-size = 12px.
svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files.

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

src/uix/eidos/components/month-grid/month-grid.css

@@ -27,6 +27,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-month-grid][data-size='xs'] {
+	--_month-grid-padding: var(--calendar-padding-xs);
+	--_month-grid-control-size: var(--calendar-control-size-xs);
+	--_month-grid-cell-size: var(--calendar-day-size-xs);
+	--_month-grid-font-size: var(--calendar-font-size-xs);
+}
+
 [data-month-grid][data-size='sm'] {
 	--_month-grid-padding: var(--calendar-padding-sm);
 	--_month-grid-control-size: var(--calendar-control-size-sm);

src/uix/eidos/components/month-grid/types.ts

@@ -14,7 +14,7 @@ import type {
 } from '$soma/components/month-grid'
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
 
-export type MonthGridSize = Extract<Size, 'sm' | 'md' | 'lg'>
+export type MonthGridSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>
 export type MonthGridVariant = ControlVariant
 export type MonthGridColor = ColorRole
 

src/uix/eidos/components/year-grid/types.ts

@@ -14,7 +14,7 @@ import type {
 } from '$soma/components/year-grid'
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
 
-export type YearGridSize = Extract<Size, 'sm' | 'md' | 'lg'>
+export type YearGridSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>
 export type YearGridVariant = ControlVariant
 export type YearGridColor = ColorRole
 

src/uix/eidos/components/year-grid/year-grid.css

@@ -27,6 +27,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-year-grid][data-size='xs'] {
+	--_year-grid-padding: var(--calendar-padding-xs);
+	--_year-grid-control-size: var(--calendar-control-size-xs);
+	--_year-grid-cell-size: var(--calendar-day-size-xs);
+	--_year-grid-font-size: var(--calendar-font-size-xs);
+}
+
 [data-year-grid][data-size='sm'] {
 	--_year-grid-padding: var(--calendar-padding-sm);
 	--_year-grid-control-size: var(--calendar-control-size-sm);

src/uix/eidos/generated/base.css

@@ -1041,6 +1041,7 @@
 	--color-picker-transition-ease: var(--ease-default);
 	--color-picker-disabled-opacity: 0.56;
 	--calendar-gap: var(--space-3);
+	--calendar-padding-xs: var(--space-2);
 	--calendar-padding-sm: var(--space-3);
 	--calendar-padding-md: var(--space-4);
 	--calendar-padding-lg: var(--space-5);
@@ -1054,6 +1055,7 @@
 	--calendar-color: var(--color-content-primary);
 	--calendar-shadow: var(--shadow-sm);
 	--calendar-font-family: var(--font-ui);
+	--calendar-font-size-xs: var(--font-size-xs);
 	--calendar-font-size-sm: var(--font-size-xs);
 	--calendar-font-size-md: var(--font-size-sm);
 	--calendar-font-size-lg: var(--font-size-sm);
@@ -1062,6 +1064,7 @@
 	--calendar-heading-color: var(--color-content-primary);
 	--calendar-heading-font-size: var(--font-size-sm);
 	--calendar-heading-font-weight: var(--font-weight-semibold);
+	--calendar-control-size-xs: var(--control-height-xxs);
 	--calendar-control-size-sm: var(--control-height-xs);
 	--calendar-control-size-md: var(--control-height-sm);
 	--calendar-control-size-lg: var(--control-height-md);
@@ -1080,6 +1083,7 @@
 	--calendar-weekday-color: var(--color-content-muted);
 	--calendar-weekday-font-size: var(--font-size-xs);
 	--calendar-weekday-font-weight: var(--font-weight-medium);
+	--calendar-day-size-xs: var(--control-height-xxs);
 	--calendar-day-size-sm: var(--control-height-xs);
 	--calendar-day-size-md: var(--control-height-sm);
 	--calendar-day-size-lg: var(--control-height-md);

src/uix/eidos/lib/recipes/base.ts

@@ -838,6 +838,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 	},
 	calendar: {
 		gap: 'var(--space-3)',
+		'padding-xs': 'var(--space-2)',
 		'padding-sm': 'var(--space-3)',
 		'padding-md': 'var(--space-4)',
 		'padding-lg': 'var(--space-5)',
@@ -851,6 +852,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		color: 'var(--color-content-primary)',
 		shadow: 'var(--shadow-sm)',
 		'font-family': 'var(--font-ui)',
+		'font-size-xs': 'var(--font-size-xs)',
 		'font-size-sm': 'var(--font-size-xs)',
 		'font-size-md': 'var(--font-size-sm)',
 		'font-size-lg': 'var(--font-size-sm)',
@@ -859,6 +861,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'heading-color': 'var(--color-content-primary)',
 		'heading-font-size': 'var(--font-size-sm)',
 		'heading-font-weight': 'var(--font-weight-semibold)',
+		'control-size-xs': 'var(--control-height-xxs)',
 		'control-size-sm': 'var(--control-height-xs)',
 		'control-size-md': 'var(--control-height-sm)',
 		'control-size-lg': 'var(--control-height-md)',
@@ -877,6 +880,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'weekday-color': 'var(--color-content-muted)',
 		'weekday-font-size': 'var(--font-size-xs)',
 		'weekday-font-weight': 'var(--font-weight-medium)',
+		'day-size-xs': 'var(--control-height-xxs)',
 		'day-size-sm': 'var(--control-height-xs)',
 		'day-size-md': 'var(--control-height-sm)',
 		'day-size-lg': 'var(--control-height-md)',

web/routes/uix/components/month-grid/+page.svelte

@@ -323,7 +323,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as v (v)}
+						{#each ['xs', 'sm', 'md', 'lg'] as v (v)}
 							<button data-uix-chip data-active={size === v} onclick={() => (size = v as MonthGridSize)}>{v}</button>
 						{/each}
 					</span>

web/routes/uix/components/year-grid/+page.svelte

@@ -320,7 +320,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as v (v)}
+						{#each ['xs', 'sm', 'md', 'lg'] as v (v)}
 							<button data-uix-chip data-active={size === v} onclick={() => (size = v as YearGridSize)}>{v}</button>
 						{/each}
 					</span>