From f744583c128fa6ba7168389806d0652d9310dab0 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 23 May 2026 21:48:41 +0200
Subject: [PATCH] fix(range-calendar demo): add explicit none/preset chips to
 minDays + maxDays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A bare `<input type="number" placeholder="—">` made it non-obvious how to
clear the constraint — users would type and not realise empty=undefined.
Mirroring the date-range-picker demo's bounds row, both minDays and
maxDays now expose a chip row with `none` as the first option plus
common presets (`2/3/7/14` for min, `7/14/30/90` for max). The custom
number input stays alongside for ad-hoc values. The label header shows
the current effective value (`none` when undefined).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../uix/components/range-calendar/+page.svelte   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/routes/uix/components/range-calendar/+page.svelte b/web/routes/uix/components/range-calendar/+page.svelte
index 506a31fcb..c751e2321 100644
--- a/web/routes/uix/components/range-calendar/+page.svelte
+++ b/web/routes/uix/components/range-calendar/+page.svelte
@@ -373,11 +373,23 @@
 					</span>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>minDays</span>
+					<span data-uix-control-label>minDays <span data-uix-control-hint>{minDays ?? 'none'}</span></span>
+					<span data-uix-chips role="radiogroup">
+						<button data-uix-chip data-active={minDaysInput === ''} onclick={() => (minDaysInput = '')}>none</button>
+						{#each ['2', '3', '7', '14'] as n (n)}
+							<button data-uix-chip data-active={minDaysInput === n} onclick={() => (minDaysInput = n)}>{n}</button>
+						{/each}
+					</span>
 					<input type="number" min="1" placeholder="—" bind:value={minDaysInput} style="inline-size: 4rem;" />
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>maxDays</span>
+					<span data-uix-control-label>maxDays <span data-uix-control-hint>{maxDays ?? 'none'}</span></span>
+					<span data-uix-chips role="radiogroup">
+						<button data-uix-chip data-active={maxDaysInput === ''} onclick={() => (maxDaysInput = '')}>none</button>
+						{#each ['7', '14', '30', '90'] as n (n)}
+							<button data-uix-chip data-active={maxDaysInput === n} onclick={() => (maxDaysInput = n)}>{n}</button>
+						{/each}
+					</span>
 					<input type="number" min="1" placeholder="—" bind:value={maxDaysInput} style="inline-size: 4rem;" />
 				</label>
 				<label data-uix-control>