diff --git a/src/uix/eidos/components/calendar/calendar.css b/src/uix/eidos/components/calendar/calendar.css
index 86cd17d4d..8ad68e2b5 100644
--- a/src/uix/eidos/components/calendar/calendar.css
+++ b/src/uix/eidos/components/calendar/calendar.css
@@ -25,6 +25,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-calendar][data-size='xs'] {
+	--_calendar-padding: var(--calendar-padding-xs);
+	--_calendar-control-size: var(--calendar-control-size-xs);
+	--_calendar-day-size: var(--calendar-day-size-xs);
+	--_calendar-font-size: var(--calendar-font-size-xs);
+}
+
 [data-calendar][data-size='sm'] {
 	--_calendar-padding: var(--calendar-padding-sm);
 	--_calendar-control-size: var(--calendar-control-size-sm);
diff --git a/src/uix/eidos/components/calendar/types.ts b/src/uix/eidos/components/calendar/types.ts
index c2feb1a43..17178e5bb 100644
--- a/src/uix/eidos/components/calendar/types.ts
+++ b/src/uix/eidos/components/calendar/types.ts
@@ -24,7 +24,7 @@ import type {
 import type { DateValue } from '$libs/days'
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
 
-export type CalendarSize = Extract<Size, 'sm' | 'md' | 'lg'>
+export type CalendarSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>
 export type CalendarVariant = ControlVariant
 export type CalendarColor = ColorRole
 
diff --git a/src/uix/eidos/components/date-picker/date-picker-content.svelte b/src/uix/eidos/components/date-picker/date-picker-content.svelte
index b57116dcf..d01ab5fd4 100644
--- a/src/uix/eidos/components/date-picker/date-picker-content.svelte
+++ b/src/uix/eidos/components/date-picker/date-picker-content.svelte
@@ -21,6 +21,10 @@
 	const eidos = ActiveEidos.require();
 	const visual = getDatePickerVisualContext();
 	const resolvedSize = $derived(eidos.resolve(size ?? visual?.getSize() ?? 'md', 'md'));
+	// Popover doesn't have an `xs` chrome variant — clamp to `sm` so the
+	// popover surface stays consistent while the calendar inside still
+	// renders at xs via [data-date-picker][data-size='xs'].
+	const popoverSize = $derived(resolvedSize === 'xs' ? 'sm' : resolvedSize);
 
 	function serializeLength(value: string | number | undefined): string | undefined {
 		if (value === undefined) return undefined;
@@ -62,7 +66,7 @@
 	{align}
 	{sideOffset}
 	{collisionPadding}
-	size={resolvedSize}
+	size={popoverSize}
 	style={composedStyle}
 >
 	{#snippet children(snippetProps)}
diff --git a/src/uix/eidos/components/date-picker/date-picker.css b/src/uix/eidos/components/date-picker/date-picker.css
index 0773594f6..99035b37c 100644
--- a/src/uix/eidos/components/date-picker/date-picker.css
+++ b/src/uix/eidos/components/date-picker/date-picker.css
@@ -19,6 +19,14 @@
 	line-height: var(--date-field-line-height);
 }
 
+[data-date-picker][data-size='xs'] {
+	--_date-field-height: var(--date-field-height-xs);
+	--_date-field-px: var(--date-field-px-xs);
+	--_date-field-gap: var(--date-field-gap-xs);
+	--_date-field-segment-px: var(--date-field-segment-px-xs);
+	--_date-field-font-size: var(--date-field-font-size-xs);
+}
+
 [data-date-picker][data-size='sm'] {
 	--_date-field-height: var(--date-field-height-sm);
 	--_date-field-px: var(--date-field-px-sm);
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte b/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte
index fd7fe4133..2f8190469 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte
+++ b/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte
@@ -21,6 +21,10 @@
 	const eidos = ActiveEidos.require();
 	const visual = getDateRangePickerVisualContext();
 	const resolvedSize = $derived(eidos.resolve(size ?? visual?.getSize() ?? 'md', 'md'));
+	// Popover doesn't have an `xs` chrome variant — clamp to `sm` so the
+	// popover surface stays consistent while the calendar inside still
+	// renders at xs via [data-date-range-picker][data-size='xs'].
+	const popoverSize = $derived(resolvedSize === 'xs' ? 'sm' : resolvedSize);
 
 	function serializeLength(value: string | number | undefined): string | undefined {
 		if (value === undefined) return undefined;
@@ -62,7 +66,7 @@
 	{align}
 	{sideOffset}
 	{collisionPadding}
-	size={resolvedSize}
+	size={popoverSize}
 	style={composedStyle}
 >
 	{#snippet children(snippetProps)}
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.css b/src/uix/eidos/components/date-range-picker/date-range-picker.css
index 7e07ce22d..5c03b233c 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker.css
+++ b/src/uix/eidos/components/date-range-picker/date-range-picker.css
@@ -39,6 +39,18 @@
 	line-height: var(--date-field-line-height);
 }
 
+[data-date-range-picker][data-size='xs'] {
+	--_date-field-height: var(--date-field-height-xs);
+	--_date-field-px: var(--date-field-px-xs);
+	--_date-field-gap: var(--date-field-gap-xs);
+	--_date-field-segment-px: var(--date-field-segment-px-xs);
+	--_date-field-font-size: var(--date-field-font-size-xs);
+	--_calendar-padding: var(--calendar-padding-xs);
+	--_calendar-control-size: var(--calendar-control-size-xs);
+	--_calendar-day-size: var(--calendar-day-size-xs);
+	--_calendar-font-size: var(--calendar-font-size-xs);
+}
+
 [data-date-range-picker][data-size='sm'] {
 	--_date-field-height: var(--date-field-height-sm);
 	--_date-field-px: var(--date-field-px-sm);
@@ -433,6 +445,13 @@
 	line-height: var(--calendar-line-height);
 }
 
+[data-date-range-picker-calendar][data-range-calendar][data-size='xs'] {
+	--_calendar-padding: var(--calendar-padding-xs);
+	--_calendar-control-size: var(--calendar-control-size-xs);
+	--_calendar-day-size: var(--calendar-day-size-xs);
+	--_calendar-font-size: var(--calendar-font-size-xs);
+}
+
 [data-date-range-picker-calendar][data-range-calendar][data-size='sm'] {
 	--_calendar-padding: var(--calendar-padding-sm);
 	--_calendar-control-size: var(--calendar-control-size-sm);
diff --git a/web/routes/uix/components/calendar/+page.svelte b/web/routes/uix/components/calendar/+page.svelte
index 74b62d3f7..4b58962f4 100644
--- a/web/routes/uix/components/calendar/+page.svelte
+++ b/web/routes/uix/components/calendar/+page.svelte
@@ -779,7 +779,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as value}
+						{#each ['xs', 'sm', 'md', 'lg'] as value}
 							<button
 								data-uix-chip
 								data-active={size === value}
diff --git a/web/routes/uix/components/date-picker/+page.svelte b/web/routes/uix/components/date-picker/+page.svelte
index 45bb026af..f92f9f3bc 100644
--- a/web/routes/uix/components/date-picker/+page.svelte
+++ b/web/routes/uix/components/date-picker/+page.svelte
@@ -694,7 +694,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as value}
+						{#each ['xs', 'sm', 'md', 'lg'] as value}
 							<button data-uix-chip data-active={size === value} onclick={() => (size = value as DatePickerSize)}>{value}</button>
 						{/each}
 					</span>
@@ -1090,11 +1090,6 @@
 			</div>
 		{/each}
 	</div>
-	<DatePicker.Footer>
-		<DatePicker.Clear />
-		<DatePicker.Cancel />
-		<DatePicker.Close />
-	</DatePicker.Footer>
 {/snippet}
 
 <style>
diff --git a/web/routes/uix/components/date-range-picker/+page.svelte b/web/routes/uix/components/date-range-picker/+page.svelte
index d5be678e1..7b32e7d49 100644
--- a/web/routes/uix/components/date-range-picker/+page.svelte
+++ b/web/routes/uix/components/date-range-picker/+page.svelte
@@ -775,7 +775,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['sm', 'md', 'lg'] as value}
+						{#each ['xs', 'sm', 'md', 'lg'] as value}
 							<button data-uix-chip data-active={size === value} onclick={() => (size = value as DateRangePickerSize)}>{value}</button>
 						{/each}
 					</span>