diff --git a/web/routes/uix/components/date-picker/+page.svelte b/web/routes/uix/components/date-picker/+page.svelte
index 46455ab6d..c7f91c850 100644
--- a/web/routes/uix/components/date-picker/+page.svelte
+++ b/web/routes/uix/components/date-picker/+page.svelte
@@ -50,17 +50,17 @@
 	let value = $state<DateValue | undefined>(delivery);
 	let valueInput = $state(toDateInput(delivery));
 	let placeholder = $state<DateValue>(delivery);
-	let open = $state(false);
+	let open = $state(true);
 	let minInput = $state(toDateInput(defaultMin));
 	let maxInput = $state(toDateInput(defaultMax));
 	let required = $state(true);
 	let disabled = $state(false);
 	let readonly = $state(false);
-	let closeOnDateSelect = $state(true);
+	let closeOnDateSelect = $state(false);
 	let mode = $state<'inline' | 'modal'>('inline');
-	let clearButton = $state(false);
-	let cancelButton = $state(false);
-	let closeButton = $state(false);
+	let clearButton = $state(true);
+	let cancelButton = $state(true);
+	let closeButton = $state(true);
 	let segmentLock = $state<SegmentLock>('none');
 	let disableDaysOutsideMonth = $state(true);
 	let fixedWeeks = $state(false);
diff --git a/web/routes/uix/components/date-range-picker/+page.svelte b/web/routes/uix/components/date-range-picker/+page.svelte
index f2908126d..fd081e7df 100644
--- a/web/routes/uix/components/date-range-picker/+page.svelte
+++ b/web/routes/uix/components/date-range-picker/+page.svelte
@@ -47,9 +47,10 @@
 	let stageRef = $state<HTMLElement | null>(null);
 	let value = $state<DateRange | undefined>({ start: sprintStart, end: sprintEnd });
 	let placeholder = $state<DateValue>(sprintStart);
-	// Popover starts closed: the field's segments are for direct keyboard
-	// entry; the popover is only for visual exploration via the trigger icon.
-	let open = $state(false);
+	// Popover starts open in the demo so the new Footer + segment-lock
+	// affordances are visible on first load. Consumers can close it via
+	// the Cancel/Close buttons or by clicking outside (in inline mode).
+	let open = $state(true);
 	let startInput = $state(toDateInput(sprintStart));
 	let endInput = $state(toDateInput(sprintEnd));
 	let minInput = $state(toDateInput(defaultMin));
@@ -59,9 +60,9 @@
 	let allowSingleDay = $state(false);
 	let closeOnRangeSelect = $state(false);
 	let mode = $state<'inline' | 'modal'>('inline');
-	let clearButton = $state(false);
-	let cancelButton = $state(false);
-	let closeButton = $state(false);
+	let clearButton = $state(true);
+	let cancelButton = $state(true);
+	let closeButton = $state(true);
 	let disableDaysOutsideMonth = $state(true);
 	let fixedWeeks = $state(true);
 	let pagedNavigation = $state(false);