ajo-ui 0.1.0

package/dist/input-date.js

@@ -0,0 +1,994 @@
+import { flag, triggerAttrs } from "./utils.js";
+import { a as field, c as isReversed, i as defaultMessage, l as timeRun, o as formatValue, r as compile, s as fromISO, t as Calendar, u as unitLabel } from "./chunks/calendar-q8jZ8Cxr.js";
+import { n as popup, t as contentAttrs } from "./chunks/popup-C8Bb3l_g.js";
+import { FieldContext } from "./field.js";
+import { callHandler, callRef, controlled, dom, id, listen, restore, roving, spin, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/input-date.tsx
+var InputDateContext = context(null);
+var resolveLocale = (locale) => {
+	const code = typeof locale === "string" ? locale : locale?.code;
+	if (code) return code;
+	if (typeof document !== "undefined" && document.documentElement.lang) return document.documentElement.lang;
+	return "en-US";
+};
+var InputDateRoot = function* (initial) {
+	let kind = initial.kind;
+	const rootId = id("input-date");
+	const domReady = dom(this);
+	const ownerDocument = domReady ? this.ownerDocument : null;
+	const node = (value) => {
+		const view = ownerDocument?.defaultView;
+		return Boolean(view && value instanceof view.Node);
+	};
+	const ios = domReady && typeof navigator !== "undefined" && (/iP(ad|hone|od)/.test(navigator.userAgent) || navigator.userAgent.includes("Mac") && navigator.maxTouchPoints > 1);
+	const warned = /* @__PURE__ */ new Set();
+	const timeSurfaces = /* @__PURE__ */ new Set();
+	let closeOnSelect;
+	let composing = null;
+	let controlId = `${rootId}-control`;
+	let availabilitySource = initial.unavailable;
+	let availability = compile(initial.unavailable);
+	let boundsSource;
+	let boundsAvailability;
+	let calendarUserSource;
+	let calendarUserAvailability;
+	let allowNonContiguous = Boolean(initial.allowNonContiguous);
+	let disabled = Boolean(initial.disabled);
+	let isRange = Boolean(initial.range);
+	let locale = resolveLocale(initial.locale);
+	let onOpenChange;
+	let onValueChange;
+	let pendingFocus = false;
+	let pendingReference = null;
+	let closingInside = false;
+	let pop;
+	let presets = [];
+	let readOnly = Boolean(initial.readOnly);
+	let required = Boolean(initial.required);
+	let visibleMonth;
+	const unavailableValue = (value) => availability?.value(kind, value) ?? false;
+	const sideDefault = (value, side) => {
+		if (value == null) return void 0;
+		if (typeof value === "string") return side === "from" ? value : void 0;
+		return value[side] ?? void 0;
+	};
+	const optionsFor = (side, args) => ({
+		kind,
+		locale,
+		granularity: args.granularity,
+		hourCycle: args.hourCycle,
+		step: args.step,
+		placeholderValue: args.placeholderValue,
+		defaultValue: sideDefault(args.defaultValue, side),
+		min: args.min,
+		max: args.max,
+		unavailable: availability ? unavailableValue : void 0,
+		errorMessage: args.errorMessage
+	});
+	const fields = {
+		from: field(optionsFor("from", initial)),
+		to: field(optionsFor("to", initial))
+	};
+	const composeValue = () => {
+		const from = fields.from.value();
+		if (!isRange) return from;
+		const to = fields.to.value();
+		return from == null && to == null ? null : {
+			from,
+			to
+		};
+	};
+	const valueState = controlled(this, {
+		fallback: initial.defaultValue ?? null,
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const sideValue = (side) => {
+		if (!valueState.controlled) return void 0;
+		const value = valueState.value;
+		if (value == null) return null;
+		if (typeof value === "string") return side === "from" ? value : null;
+		return value[side];
+	};
+	const emitIfChanged = (results, event) => {
+		if (results.every((result) => result.emit === void 0)) return;
+		valueState.set(composeValue(), event);
+	};
+	const segmentsOf = (surface = "field", rendered = true) => domReady ? Array.from(this.querySelectorAll("[data-segment]")).filter((item) => item.dataset.surface === surface && (!rendered || item.offsetParent !== null)) : [];
+	const segmentOf = (event) => event.target instanceof Element ? event.target.closest("[data-segment]") : null;
+	const sideOf = (segment) => segment.dataset.side ?? "from";
+	const surfaceOf = (segment) => segment.dataset.surface === "popover" ? "popover" : "field";
+	const unitOf = (segment) => segment.dataset.segment;
+	const moveFocus = (from, step) => {
+		const list = segmentsOf(surfaceOf(from));
+		list[list.indexOf(from) + step]?.focus();
+	};
+	const apply = (result, event, segment) => {
+		if (!result.handled) return false;
+		emitIfChanged([result], event);
+		if (result.advance) moveFocus(segment, 1);
+		if (result.retreat) moveFocus(segment, -1);
+		this.next();
+		return true;
+	};
+	const focusMemory = restore(this);
+	const clearFocusIntent = () => {
+		pendingFocus = false;
+		pendingReference = null;
+	};
+	const restoreAfterClose = () => {
+		clearFocusIntent();
+		const active = ownerDocument?.activeElement;
+		if (dom(active) && pop.content?.contains(active) && !closingInside) focusMemory.restore();
+		else focusMemory.capture(null);
+		closingInside = false;
+	};
+	pop = popup(this, {
+		prefix: "input-date",
+		profile: "date",
+		initialOpen: Boolean(initial.open ?? initial.defaultOpen),
+		disabled: () => disabled,
+		onOpenChange: (next, event) => onOpenChange?.(next, event),
+		reference: (view) => view.reference,
+		source: (view) => view.trigger,
+		referenceHidden: "close",
+		dismiss: {
+			escape: false,
+			outside: true,
+			inside: (view) => [
+				dom(view.reference) ? view.reference : null,
+				view.trigger,
+				view.content
+			],
+			onDismiss: (event) => setOpen(false, event)
+		},
+		onPosition: () => {
+			if (!pendingFocus || pop.reference !== pendingReference) return;
+			clearFocusIntent();
+			if (!pop.content) return;
+			(pop.content.querySelector("[data-slot=\"calendar-day-button\"][data-state=\"selected\"]:not(:disabled)") ?? pop.content.querySelector("[data-slot=\"calendar-day-button\"][data-today]:not(:disabled)") ?? pop.content.querySelector("[data-slot=\"calendar-day-button\"]:not(:disabled)") ?? pop.content).focus();
+		},
+		onSync: (opened) => {
+			if (!opened) restoreAfterClose();
+		}
+	});
+	pop.setReference(this);
+	const setOpen = (next, event) => {
+		if (disabled && next) return;
+		if (next === pop.open) return;
+		if (next) {
+			visibleMonth = void 0;
+			pendingFocus = true;
+			pendingReference = pop.reference;
+		} else {
+			clearFocusIntent();
+			closingInside = event?.type === "pointerdown" && node(event.target) && this.contains(event.target);
+		}
+		pop.setOpen(next, event);
+	};
+	const toggleOpen = (event) => {
+		const next = !pop.open;
+		if (next) focusMemory.capture(pop.trigger);
+		setOpen(next, event);
+	};
+	const popupPart = (part) => {
+		if (kind !== "time") return true;
+		if (!warned.has(part)) {
+			warned.add(part);
+			console.warn(`[input-date] <${part}> has no effect under InputTime; popup parts require a date family root.`);
+		}
+		return false;
+	};
+	const timeSurface = (part) => {
+		if (kind === "datetime") return true;
+		if (!warned.has(part)) {
+			warned.add(part);
+			console.warn(`[input-date] <${part}> has no effect outside InputDateTime.`);
+		}
+		return false;
+	};
+	const hasTimeSurface = () => timeSurfaces.size > 0;
+	const dateOfValue = (side) => {
+		const units = fields[side].units;
+		return units.year != null && units.month != null && units.day != null ? new Date(units.year, units.month - 1, units.day, 12) : void 0;
+	};
+	const daySelected = () => dateOfValue("from") ?? null;
+	const rangeSelected = () => {
+		const from = dateOfValue("from");
+		const to = dateOfValue("to");
+		return from || to ? {
+			from,
+			to
+		} : null;
+	};
+	const monthOf = () => visibleMonth ?? dateOfValue("from");
+	const onMonthChange = (month, event) => {
+		const slot = event?.target instanceof Element ? event.target.closest("[data-slot]")?.dataset.slot : void 0;
+		this.next(() => visibleMonth = month);
+		if (!domReady || !slot) return;
+		const active = document.activeElement;
+		if (active && active !== document.body) return;
+		pop.content?.querySelector(`[data-slot="${slot}"]`)?.focus();
+	};
+	const dayOfBound = (value) => {
+		if (!value) return void 0;
+		const units = fromISO(kind, value);
+		return units && units.year != null && units.month != null && units.day != null ? new Date(units.year, units.month - 1, units.day, 12) : void 0;
+	};
+	const syncAvailability = (args) => {
+		if (args.unavailable !== availabilitySource) {
+			availabilitySource = args.unavailable;
+			availability = compile(args.unavailable);
+		}
+		const bounds = `${args.min ?? ""}\0${args.max ?? ""}`;
+		if (bounds !== boundsSource) {
+			boundsSource = bounds;
+			const matcher = [];
+			const before = dayOfBound(args.min);
+			const after = dayOfBound(args.max);
+			if (before) matcher.push({ before });
+			if (after) matcher.push({ after });
+			boundsAvailability = compile(matcher);
+		}
+	};
+	const hardDisabled = (date) => Boolean(calendarUserAvailability?.day(date) || boundsAvailability?.day(date));
+	const hardDisabledMatcher = [hardDisabled];
+	const calendarDisabled = (user) => {
+		if (user !== calendarUserSource) {
+			calendarUserSource = user;
+			calendarUserAvailability = compile(user);
+		}
+		return calendarUserAvailability || boundsAvailability ? hardDisabledMatcher : void 0;
+	};
+	const datePatch = (editor, date) => {
+		const patch = {
+			year: date.getFullYear(),
+			month: date.getMonth() + 1,
+			day: date.getDate()
+		};
+		if (kind === "datetime") {
+			const units = editor.units;
+			const seeded = editor.placeholder();
+			if (units.hour == null) patch.hour = seeded.hour;
+			if (units.minute == null) patch.minute = seeded.minute;
+			if (units.second == null && editor.segments.some((segment) => segment.type === "second")) patch.second = seeded.second;
+			if (units.dayPeriod == null && editor.hourCycle === "h12") patch.dayPeriod = seeded.dayPeriod;
+		}
+		return patch;
+	};
+	const emptyDate = {
+		year: null,
+		month: null,
+		day: null
+	};
+	const pickDay = (next, event) => {
+		if (disabled || readOnly) return;
+		emitIfChanged([fields.from.merge(next ? datePatch(fields.from, next) : emptyDate)], event);
+		if (closeOnSelect ?? (Boolean(next) && !hasTimeSurface())) setOpen(false, event);
+		this.next();
+	};
+	const pickRange = (next, event) => {
+		if (disabled || readOnly) return;
+		const patchFor = (editor, date) => date ? datePatch(editor, date) : emptyDate;
+		emitIfChanged([fields.from.merge(patchFor(fields.from, next?.from)), fields.to.merge(patchFor(fields.to, next?.to))], event);
+		if (closeOnSelect ?? (Boolean(next?.from && next?.to) && !hasTimeSurface())) setOpen(false, event);
+		this.next();
+	};
+	const applyPreset = (value, event) => {
+		if (disabled || readOnly) return;
+		const mergeSide = (side, next) => {
+			if (next == null) return fields[side].clear();
+			const units = fromISO(kind, next, fields[side].hourCycle);
+			if (!units) {
+				console.warn(`[input-date] invalid ${kind} preset value: "${next}"`);
+				return { handled: false };
+			}
+			return fields[side].merge(units);
+		};
+		emitIfChanged(typeof value === "string" ? [mergeSide("from", value)] : [mergeSide("from", value.from), mergeSide("to", value.to)], event);
+		setOpen(false, event);
+		this.next();
+	};
+	const clearValue = (event) => {
+		if (disabled || readOnly) return;
+		const results = [fields.from.clear()];
+		if (isRange) results.push(fields.to.clear());
+		emitIfChanged(results, event);
+		if (domReady) queueMicrotask(() => segmentsOf("field")[0]?.focus());
+		this.next();
+	};
+	const relocateFocus = () => {
+		const active = document.activeElement;
+		if (!(active instanceof HTMLElement) || !active.dataset.segment || !this.contains(active)) return;
+		const survives = (item) => fields[sideOf(item)].segments.some((segment) => segment.type === unitOf(item));
+		if (survives(active)) return;
+		const surface = surfaceOf(active);
+		const list = segmentsOf(surface, false);
+		const index = list.indexOf(active);
+		const target = list.slice(0, Math.max(index, 0)).reverse().find(survives) ?? list.slice(index + 1).find(survives);
+		if (!target) return;
+		const side = sideOf(target);
+		const unit = unitOf(target);
+		queueMicrotask(() => {
+			const current = document.activeElement;
+			if (current instanceof HTMLElement && current !== document.body && this.contains(current)) return;
+			segmentsOf(surface).find((item) => sideOf(item) === side && unitOf(item) === unit)?.focus();
+		});
+	};
+	const stepper = spin(this, { onMove: (move, event) => {
+		const segment = segmentOf(event);
+		if (!segment || readOnly || disabled) return;
+		apply(fields[sideOf(segment)].spin(unitOf(segment), move), event, segment);
+	} });
+	const nav = roving(this, {
+		items: () => {
+			const active = document.activeElement;
+			return segmentsOf(active instanceof HTMLElement && active.dataset.segment ? surfaceOf(active) : "field");
+		},
+		orientation: () => "horizontal",
+		dir: () => domReady && getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr",
+		loop: () => false,
+		onMove: (target) => target.focus()
+	});
+	listen(this, "keydown", (event) => {
+		if (event.key === "Escape") {
+			if (!pop.open) return;
+			event.preventDefault();
+			setOpen(false, event);
+			return;
+		}
+		const segment = segmentOf(event);
+		if (!segment) return;
+		const side = sideOf(segment);
+		const unit = unitOf(segment);
+		if (event.altKey && event.key.startsWith("Arrow")) {
+			if (event.key === "ArrowDown" && pop.content) {
+				event.preventDefault();
+				focusMemory.capture(segment);
+				setOpen(true, event);
+			}
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "Backspace" || event.key === "Delete") {
+			event.preventDefault();
+			if (!readOnly && !disabled) apply(fields[side].erase(unit), event, segment);
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			moveFocus(segment, 1);
+			return;
+		}
+		if (!readOnly && stepper.handle(event)) return;
+		if (!readOnly && (event.key === "+" || event.key === "-")) {
+			event.preventDefault();
+			apply(fields[side].spin(unit, { step: event.key === "+" ? 1 : -1 }), event, segment);
+			return;
+		}
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") nav.handle(event);
+	});
+	listen(this, "beforeinput", (event) => {
+		const segment = segmentOf(event);
+		if (!segment) return;
+		if (event.cancelable) event.preventDefault();
+		if (disabled || readOnly) return;
+		const side = sideOf(segment);
+		const unit = unitOf(segment);
+		if (event.inputType === "insertCompositionText") {
+			composing ??= {
+				side,
+				unit,
+				element: segment,
+				text: segment.textContent ?? ""
+			};
+			return;
+		}
+		if (event.inputType === "deleteContentBackward" || event.inputType === "deleteContentForward") {
+			apply(fields[side].erase(unit), event, segment);
+			return;
+		}
+		if (event.inputType === "insertText" && event.data) for (const key of event.data) apply(fields[side].type(unit, key), event, segment);
+	});
+	listen(this, "input", (event) => {
+		if (!composing) return;
+		const segment = segmentOf(event);
+		if (segment !== composing.element) return;
+		segment.textContent = composing.text;
+		this.next();
+	});
+	listen(this, "compositionend", (event) => {
+		if (!composing) return;
+		const { side, unit, element } = composing;
+		composing = null;
+		if (!disabled && !readOnly && event.data) for (const key of event.data) apply(fields[side].type(unit, key), event, element);
+		this.next();
+	});
+	listen(this, "paste", (event) => {
+		if (segmentOf(event)) event.preventDefault();
+	});
+	listen(this, "pointerdown", (event) => {
+		if (event.button) return;
+		const target = event.target instanceof Element ? event.target : null;
+		if (!target) return;
+		if (pop.open && !pop.content?.contains(target) && !pop.trigger?.contains(target)) setOpen(false, event);
+		const segment = target.closest("[data-segment]");
+		if (segment) {
+			event.preventDefault();
+			if (!disabled) segment.focus();
+			return;
+		}
+		const group = target.closest("[data-slot=\"input-date-field\"]");
+		if (!group || !this.contains(group)) return;
+		if (target.closest("[data-slot=\"input-date-trigger\"], a, button, input, select, textarea")) return;
+		event.preventDefault();
+		if (disabled) return;
+		const list = Array.from(group.querySelectorAll("[data-segment]"));
+		([...list].reverse().find((item) => item.dataset.placeholder !== "true") ?? list[0])?.focus();
+	});
+	listen(this, "focusout", (event) => {
+		const segment = segmentOf(event);
+		if (!segment) return;
+		fields[sideOf(segment)].blur();
+		this.next();
+	});
+	if (domReady) {
+		document.addEventListener("selectionchange", () => {
+			const selection = document.getSelection();
+			if (!selection || selection.isCollapsed || !selection.anchorNode) return;
+			const anchor = selection.anchorNode instanceof Element ? selection.anchorNode : selection.anchorNode.parentElement;
+			if (anchor?.closest("[data-segment]") && this.contains(anchor)) selection.collapseToEnd();
+		}, { signal: this.signal });
+		document.addEventListener("click", (event) => {
+			const label = event.target instanceof Element ? event.target.closest("label") : null;
+			if (!label || label.getAttribute("for") !== controlId) return;
+			segmentsOf("field")[0]?.focus();
+		}, { signal: this.signal });
+		document.addEventListener("reset", (event) => {
+			if (!(event.target instanceof HTMLFormElement) || !event.target.contains(this)) return;
+			if (valueState.controlled) return;
+			fields.from.reset();
+			if (isRange) fields.to.reset();
+			valueState.init(composeValue());
+			this.next();
+		}, { signal: this.signal });
+	}
+	for (const args of this) {
+		const kindChanged = args.kind !== kind;
+		kind = args.kind;
+		syncAvailability(args);
+		allowNonContiguous = Boolean(args.allowNonContiguous);
+		closeOnSelect = args.closeOnSelect;
+		disabled = Boolean(args.disabled);
+		isRange = Boolean(args.range);
+		locale = resolveLocale(args.locale);
+		const emptyLabel = args.emptyLabel ?? "Empty";
+		onOpenChange = args.onOpenChange;
+		onValueChange = args.onValueChange;
+		presets = args.presets ?? [];
+		readOnly = Boolean(args.readOnly);
+		required = Boolean(args.required);
+		valueState.sync(args.value);
+		if (!pop.sync(args.open == null ? void 0 : Boolean(args.open), {
+			placement: args.placement,
+			gap: args.gap
+		})) clearFocusIntent();
+		else closingInside = false;
+		if (kindChanged && args.value === void 0) {
+			fields.from.sync(sideDefault(args.defaultValue, "from") ?? null, optionsFor("from", args));
+			fields.to.sync(sideDefault(args.defaultValue, "to") ?? null, optionsFor("to", args));
+			valueState.init(composeValue());
+		} else {
+			fields.from.sync(sideValue("from"), optionsFor("from", args));
+			if (isRange) fields.to.sync(sideValue("to"), optionsFor("to", args));
+		}
+		if (domReady) relocateFocus();
+		const fieldCtx = FieldContext();
+		controlId = fieldCtx?.ids.control ?? `${rootId}-control`;
+		const externalDescribedby = fieldCtx?.groupAttrs["aria-describedby"];
+		const reasonFrom = fields.from.reason();
+		const reasonTo = isRange ? fields.to.reason() : null;
+		const reversed = isRange && isReversed(fields.from.value(), fields.to.value());
+		const rangeFrom = isRange ? dateOfValue("from") : void 0;
+		const rangeTo = isRange ? dateOfValue("to") : void 0;
+		const unavailableRange = !allowNonContiguous && Boolean(rangeFrom && rangeTo && availability?.crosses(rangeFrom, rangeTo));
+		const rangeReason = reversed ? { code: "reversed" } : unavailableRange ? { code: "unavailableRange" } : null;
+		const invalidOf = (side) => (side === "from" ? reasonFrom : reasonTo) != null || rangeReason != null;
+		const hourCycle = fields.from.hourCycle;
+		const message = fields.from.message() ?? (isRange ? fields.to.message() : null) ?? (rangeReason ? args.errorMessage?.(rangeReason) ?? defaultMessage(rangeReason, {
+			kind,
+			locale,
+			hourCycle
+		}) : null);
+		const descriptionId = `${rootId}-description`;
+		const messageId = `${rootId}-message`;
+		const human = (side) => {
+			const committed = fields[side].value();
+			return committed == null ? null : formatValue(committed, {
+				kind,
+				locale,
+				hourCycle
+			});
+		};
+		const formatted = isRange ? [human("from"), human("to")].filter(Boolean).join(" – ") : human("from");
+		const descriptionText = formatted ? `${kind === "time" ? "Selected time" : "Selected date"}: ${formatted}` : null;
+		const value = composeValue();
+		const firstUnit = fields.from.segments.find((segment) => segment.editable)?.type;
+		const sideLabel = (side, override) => override ?? (kind === "time" ? side === "from" ? "Start time" : "End time" : side === "from" ? "Start date" : "End date");
+		const describedbyOf = (side, first) => {
+			const parts = [];
+			if ((first || invalidOf(side)) && typeof externalDescribedby === "string") parts.push(externalDescribedby);
+			if (first && descriptionText) parts.push(descriptionId);
+			if (invalidOf(side) && message) parts.push(messageId);
+			return parts.join(" ") || void 0;
+		};
+		const valuetextOf = (side, unit) => {
+			const editor = fields[side];
+			const current = editor.units[unit];
+			if (current == null) return emptyLabel;
+			if (unit === "month" && editor.monthNames.length) return `${current} – ${editor.monthNames[current - 1]}`;
+			if (unit === "hour" && editor.hourCycle === "h12" && editor.units.dayPeriod != null) return `${current} ${editor.periods[editor.units.dayPeriod]}`;
+			return editor.text(unit);
+		};
+		const groupAttrs = (side, label, surface = "field") => {
+			const invalid = invalidOf(side);
+			const record = {
+				"aria-disabled": flag(disabled),
+				"aria-invalid": flag(invalid),
+				"data-disabled": flag(disabled),
+				"data-invalid": flag(invalid),
+				"data-readonly": flag(readOnly),
+				"data-side": side,
+				"data-slot": surface === "field" ? "input-date-field" : "input-date-time-field",
+				"data-surface": surface,
+				role: "group"
+			};
+			if (surface === "popover") record["aria-label"] = label;
+			else if (isRange) record["aria-label"] = sideLabel(side, label);
+			else {
+				if (label) record["aria-label"] = label;
+				if (fieldCtx) {
+					record["aria-labelledby"] = fieldCtx.groupAttrs["aria-labelledby"];
+					record["aria-describedby"] = fieldCtx.groupAttrs["aria-describedby"];
+				}
+			}
+			return record;
+		};
+		const segmentAttrs = (side, segment, label, surface = "field") => {
+			const unit = segment.type;
+			const editor = fields[side];
+			const first = surface === "field" && side === "from" && unit === firstUnit;
+			const filled = editor.units[unit] != null;
+			const bounds = editor.bounds(unit);
+			const unitName = unitLabel(locale, unit);
+			const segmentId = first ? controlId : `${rootId}-${surface}-${side}-${unit}`;
+			const labelId = fieldCtx?.ids.label;
+			const surfaceLabel = surface === "popover" ? label : isRange ? sideLabel(side, label) : label;
+			const record = {
+				"aria-describedby": describedbyOf(side, first),
+				"aria-invalid": flag(invalidOf(side)),
+				"aria-label": surfaceLabel ? `${unitName}, ${surfaceLabel}` : unitName,
+				"aria-labelledby": surface === "field" && labelId ? `${segmentId} ${labelId}` : void 0,
+				"aria-readonly": readOnly ? "true" : void 0,
+				"aria-required": first && required ? "true" : void 0,
+				autocapitalize: "off",
+				autocorrect: "off",
+				"data-placeholder": flag(!editor.text(unit)),
+				"data-side": side,
+				"data-segment": unit,
+				"data-slot": "input-date-segment",
+				"data-surface": surface,
+				enterkeyhint: "next",
+				id: segmentId,
+				role: ios ? "textbox" : "spinbutton",
+				spellcheck: "false",
+				style: "caret-color:transparent",
+				tabindex: disabled ? void 0 : "0"
+			};
+			if (!ios) if (unit === "dayPeriod") record["aria-valuetext"] = filled ? editor.text(unit) : emptyLabel;
+			else {
+				record["aria-valuemin"] = bounds.min;
+				record["aria-valuemax"] = bounds.max;
+				if (filled) record["aria-valuenow"] = editor.units[unit];
+				record["aria-valuetext"] = valuetextOf(side, unit);
+			}
+			if (domReady && !disabled && !readOnly) {
+				record.contenteditable = "true";
+				if (unit !== "dayPeriod") record.inputmode = "numeric";
+			}
+			return record;
+		};
+		const segmentText = (side, segment, surface = "field") => {
+			const unit = segment.type;
+			if (composing && composing.side === side && composing.unit === unit && surfaceOf(composing.element) === surface) return composing.text;
+			return fields[side].text(unit) || segment.placeholder;
+		};
+		InputDateContext({
+			allowNonContiguous,
+			applyPreset,
+			calendarDisabled,
+			calendarUnavailable: availabilitySource,
+			clear: clearValue,
+			contentId: pop.contentId,
+			contentStyle: pop.contentStyle,
+			daySelected,
+			disabled,
+			field: (side) => fields[side],
+			groupAttrs,
+			hasValue: value != null,
+			kind,
+			locale,
+			message,
+			monthOf,
+			onMonthChange,
+			open: pop.open,
+			pickDay,
+			pickRange,
+			popup: popupPart,
+			presets,
+			range: isRange,
+			rangeSelected,
+			readOnly,
+			registerTimeSurface: (element) => timeSurfaces.add(element),
+			segmentAttrs,
+			segmentText,
+			setContent: pop.setContent,
+			setTrigger: pop.setTrigger,
+			timeSurface,
+			toggleOpen,
+			triggerId: pop.triggerId,
+			unregisterTimeSurface: (element) => timeSurfaces.delete(element)
+		});
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [
+			args.name && !isRange ? /* @__PURE__ */ jsx("input", {
+				"data-slot": "input-date-hidden",
+				disabled,
+				name: args.name,
+				"set:value": fields.from.value() ?? "",
+				type: "hidden",
+				value: fields.from.value() ?? ""
+			}) : null,
+			args.name && isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+				"data-slot": "input-date-hidden",
+				disabled,
+				name: `${args.name}[from]`,
+				"set:value": fields.from.value() ?? "",
+				type: "hidden",
+				value: fields.from.value() ?? ""
+			}), /* @__PURE__ */ jsx("input", {
+				"data-slot": "input-date-hidden",
+				disabled,
+				name: `${args.name}[to]`,
+				"set:value": fields.to.value() ?? "",
+				type: "hidden",
+				value: fields.to.value() ?? ""
+			})] }) : null,
+			args.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputDateField, { side: "from" }), /* @__PURE__ */ jsx(InputDateField, { side: "to" })] }) : /* @__PURE__ */ jsx(InputDateField, {}), args.calendar && kind !== "time" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputDateTrigger, {}), /* @__PURE__ */ jsxs(InputDateContent, { children: [
+				/* @__PURE__ */ jsx(InputDateCalendar, { ...typeof args.calendar === "object" ? args.calendar : {} }),
+				kind === "datetime" ? isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputDateTimeField, { side: "from" }), /* @__PURE__ */ jsx(InputDateTimeField, { side: "to" })] }) : /* @__PURE__ */ jsx(InputDateTimeField, {}) : null,
+				presets.length ? /* @__PURE__ */ jsx(InputDatePresets, {}) : null
+			] })] }) : null] }),
+			descriptionText ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "input-date-description",
+				hidden: true,
+				id: descriptionId,
+				children: descriptionText
+			}) : null,
+			message ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "input-date-message",
+				hidden: true,
+				id: messageId,
+				children: message
+			}) : null
+		] });
+	}
+};
+/** Segment-based date field; the calendar popover is an optional part. */
+var InputDate = ({ allowNonContiguous, calendar, children, class: classes, closeOnSelect, defaultOpen, defaultValue, disabled, emptyLabel, errorMessage, gap, locale, max, min, name, onOpenChange, onValueChange, open, placement, placeholderValue, presets, range, readOnly, required, unavailable, value, ...attrs }) => {
+	const fieldCtx = FieldContext();
+	return /* @__PURE__ */ jsx(InputDateRoot, {
+		...statefulRootAttrs(attrs),
+		...range ? {
+			"attr:role": "group",
+			"attr:aria-describedby": fieldCtx?.groupAttrs["aria-describedby"],
+			"attr:aria-labelledby": fieldCtx?.groupAttrs["aria-labelledby"]
+		} : {},
+		allowNonContiguous,
+		calendar,
+		closeOnSelect,
+		defaultOpen,
+		defaultValue,
+		disabled,
+		emptyLabel,
+		errorMessage,
+		gap,
+		kind: "date",
+		locale,
+		max,
+		min,
+		name,
+		onOpenChange,
+		onValueChange,
+		open,
+		placement,
+		placeholderValue,
+		presets,
+		range,
+		readOnly,
+		required,
+		unavailable,
+		value,
+		"attr:class": classes,
+		"attr:data-slot": "input-date",
+		children
+	});
+};
+/** Segment-based time field; canonical 24h values regardless of display cycle. */
+var InputTime = ({ allowNonContiguous, children, class: classes, defaultValue, disabled, emptyLabel, errorMessage, granularity, hourCycle, locale, max, min, name, onValueChange, placeholderValue, range, readOnly, required, step, unavailable, value, ...attrs }) => {
+	const fieldCtx = FieldContext();
+	return /* @__PURE__ */ jsx(InputDateRoot, {
+		...statefulRootAttrs(attrs),
+		...range ? {
+			"attr:role": "group",
+			"attr:aria-describedby": fieldCtx?.groupAttrs["aria-describedby"],
+			"attr:aria-labelledby": fieldCtx?.groupAttrs["aria-labelledby"]
+		} : {},
+		allowNonContiguous,
+		defaultValue,
+		disabled,
+		emptyLabel,
+		errorMessage,
+		granularity,
+		hourCycle,
+		kind: "time",
+		locale,
+		max,
+		min,
+		name,
+		onValueChange,
+		placeholderValue,
+		range,
+		readOnly,
+		required,
+		step,
+		unavailable,
+		value,
+		"attr:class": classes,
+		"attr:data-slot": "input-time",
+		children
+	});
+};
+/** Segment-based date-time field; the calendar merges picked days with entered time. */
+var InputDateTime = ({ allowNonContiguous, calendar, children, class: classes, closeOnSelect, defaultOpen, defaultValue, disabled, emptyLabel, errorMessage, gap, granularity, hourCycle, locale, max, min, name, onOpenChange, onValueChange, open, placement, placeholderValue, presets, range, readOnly, required, step, unavailable, value, ...attrs }) => {
+	const fieldCtx = FieldContext();
+	return /* @__PURE__ */ jsx(InputDateRoot, {
+		...statefulRootAttrs(attrs),
+		...range ? {
+			"attr:role": "group",
+			"attr:aria-describedby": fieldCtx?.groupAttrs["aria-describedby"],
+			"attr:aria-labelledby": fieldCtx?.groupAttrs["aria-labelledby"]
+		} : {},
+		allowNonContiguous,
+		calendar,
+		closeOnSelect,
+		defaultOpen,
+		defaultValue,
+		disabled,
+		emptyLabel,
+		errorMessage,
+		gap,
+		granularity,
+		hourCycle,
+		kind: "datetime",
+		locale,
+		max,
+		min,
+		name,
+		onOpenChange,
+		onValueChange,
+		open,
+		placement,
+		placeholderValue,
+		presets,
+		range,
+		readOnly,
+		required,
+		step,
+		unavailable,
+		value,
+		"attr:class": classes,
+		"attr:data-slot": "input-datetime",
+		children
+	});
+};
+/** Segmented group surface; renders the derived segments and literals closed. */
+var InputDateField = ({ class: classes, label, literalClass, ref, segmentClass, side, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (!ctx) throw new Error("InputDateField must be used within an InputDate family root.");
+	if (ctx.range && !side) console.warn("[input-date] <InputDateField side> is required in range mode.");
+	const current = ctx.range ? side ?? "from" : "from";
+	const editor = ctx.field(current);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...ctx.groupAttrs(current, label),
+		class: classes,
+		ref,
+		children: editor.segments.map((segment, index) => segment.editable ? /* @__PURE__ */ jsx("div", {
+			...ctx.segmentAttrs(current, segment, label),
+			class: segmentClass,
+			children: ctx.segmentText(current, segment)
+		}, segment.type) : /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			class: literalClass,
+			"data-slot": "input-date-literal",
+			children: segment.text
+		}, `literal-${index}`))
+	});
+};
+/** Time run of the bound datetime field, rendered as a second popover surface. */
+var InputDateTimeField = ({ class: classes, label, literalClass, ref, segmentClass, side, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (!ctx || !ctx.timeSurface("InputDateTimeField")) return null;
+	if (ctx.range && !side) console.warn("[input-date] <InputDateTimeField side> is required in range mode.");
+	const current = ctx.range ? side ?? "from" : "from";
+	const resolvedLabel = label ?? (ctx.range ? current === "from" ? "Start time" : "End time" : "Time");
+	const editor = ctx.field(current);
+	let registered = null;
+	const reference = (element) => {
+		if (registered && registered !== element) ctx.unregisterTimeSurface(registered);
+		if (element && registered !== element) ctx.registerTimeSurface(element);
+		registered = element;
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...ctx.groupAttrs(current, resolvedLabel, "popover"),
+		class: classes,
+		ref: reference,
+		children: timeRun(editor.segments).map((segment, index) => segment.editable ? /* @__PURE__ */ jsx("div", {
+			...ctx.segmentAttrs(current, segment, resolvedLabel, "popover"),
+			class: segmentClass,
+			children: ctx.segmentText(current, segment, "popover")
+		}, segment.type) : /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			class: literalClass,
+			"data-slot": "input-date-time-literal",
+			children: segment.text
+		}, `literal-${index}`))
+	});
+};
+/** Optional calendar button; the popover still anchors to the field group. */
+var InputDateTrigger = ({ children, class: classes, disabled, iconClass, id: idArg, ref, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (ctx && !ctx.popup("InputDateTrigger")) return null;
+	const disabledFlag = Boolean(disabled ?? ctx?.disabled);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: ctx?.contentId,
+			expanded: Boolean(ctx?.open),
+			haspopup: "dialog",
+			id: idArg,
+			open: Boolean(ctx?.open),
+			ref,
+			setTrigger: ctx?.setTrigger,
+			triggerId: ctx?.triggerId
+		}),
+		"aria-label": attrs["aria-label"] ?? "Show calendar",
+		class: classes,
+		"data-slot": "input-date-trigger",
+		disabled: disabledFlag,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			ctx?.toggleOpen(event);
+		},
+		type,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass,
+			"data-slot": "input-date-trigger-icon"
+		})
+	});
+};
+/** Popover panel for the calendar; a dialog anchored to the field group. */
+var InputDateContent = ({ children, class: classes, ref, style, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (ctx && !ctx.popup("InputDateContent")) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...contentAttrs({
+			id: ctx?.contentId,
+			open: Boolean(ctx?.open),
+			ref,
+			setContent: ctx?.setContent,
+			style: ctx?.contentStyle(style),
+			tabindex: "-1"
+		}),
+		"aria-label": attrs["aria-label"] ?? "Calendar",
+		class: classes,
+		"data-slot": "input-date-content",
+		role: "dialog",
+		children
+	});
+};
+/** Calendar wired to the field: picked days fill the date units and commit. */
+var InputDateCalendar = ({ component, ...attrs }) => {
+	const ctx = InputDateContext();
+	const CurrentCalendar = component ?? Calendar;
+	if (!ctx) return /* @__PURE__ */ jsx(CurrentCalendar, { ...attrs });
+	if (!ctx.popup("InputDateCalendar")) return null;
+	const common = {
+		...attrs,
+		allowNonContiguous: ctx.allowNonContiguous,
+		disabled: ctx.calendarDisabled(attrs.disabled),
+		locale: attrs.locale ?? ctx.locale,
+		month: attrs.month ?? ctx.monthOf(),
+		onMonthChange: (month, event) => {
+			attrs.onMonthChange?.(month, event);
+			ctx.onMonthChange(month, event);
+		},
+		unavailable: ctx.calendarUnavailable
+	};
+	if (ctx.range) return /* @__PURE__ */ jsx(CurrentCalendar, {
+		...common,
+		mode: "range",
+		selected: ctx.rangeSelected(),
+		onSelect: (next, event) => ctx.pickRange(next, event)
+	});
+	return /* @__PURE__ */ jsx(CurrentCalendar, {
+		...common,
+		mode: "single",
+		selected: ctx.daySelected(),
+		onSelect: (next, event) => ctx.pickDay(next, event)
+	});
+};
+/** Clear button; renders only while a value exists and emits null. */
+var InputDateClear = ({ children, class: classes, disabled, iconClass, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (ctx && !ctx.hasValue) return null;
+	const disabledFlag = Boolean(disabled ?? ctx?.disabled);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": attrs["aria-label"] ?? "Clear",
+		class: classes,
+		"data-slot": "input-date-clear",
+		disabled: disabledFlag,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			ctx?.clear(event);
+		},
+		type,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass,
+			"data-slot": "input-date-clear-icon"
+		})
+	});
+};
+/** Preset value buttons for the popover; a pick commits and closes. */
+var InputDatePresets = ({ buttonClass, children, class: classes, ...attrs }) => {
+	const ctx = InputDateContext();
+	if (!ctx || !ctx.popup("InputDatePresets")) return null;
+	if (!children && !ctx.presets.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "input-date-presets",
+		children: children ?? ctx.presets.map((preset) => /* @__PURE__ */ jsx("button", {
+			class: buttonClass,
+			"data-slot": "input-date-preset",
+			disabled: ctx.disabled,
+			"set:onclick": (event) => ctx.applyPreset(preset.value, event),
+			type: "button",
+			children: preset.label
+		}, preset.label))
+	});
+};
+//#endregion
+export { InputDate, InputDateCalendar, InputDateClear, InputDateContent, InputDateField, InputDatePresets, InputDateTime, InputDateTimeField, InputDateTrigger, InputTime };