@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrl.svelte

@@ -1,462 +1,294 @@
-<script lang="ts">
-  import { tick } from 'svelte';
-  import Portal from '../../Portal/Portal.svelte';
-  import { registerOverlay } from '../../OverlayStack';
-  import type { CtrlBaseProps } from '../types';
-  import DateTimeCtrlPickerPanel from './DateTimeCtrlPickerPanel.svelte';
-  import {
-    formatDateTimeByFormat,
-    getCalendarCells,
-    getNowDateTimeParts,
-    getYearMonthLabel,
-    isDateSelectable,
-    normalizePartsForMode,
-    parseDateTimeByFormat,
-    parsePartialDateTimeByFormat,
-    parseNativeDate,
-    resolveDateTimeFormat,
-    shiftYearMonth,
-    toNativeDate,
-    validateDateTimeParts,
-    type DateTimeMode,
-    type DateTimeParts,
-  } from './DateTimeCtrl.utils';
-
-  interface TimePickerProps {
-    amLabel?: string;
-    hoursStep?: number;
-    minutesStep?: number;
-    pmLabel?: string;
-    presets?: Array<string | { label: string; value: string }>;
-    secondsStep?: number;
-    use12Hour?: boolean;
-    withDropdown?: boolean;
-  }
-
-  interface PopoverProps {
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    dialogAriaLabel?: string;
-    panelClass?: string;
-  }
-
-  export interface Props extends CtrlBaseProps {
-    amLabel?: string;
-    closeOnPick?: boolean;
-    clearable?: boolean;
-    disableAutocomplete?: boolean;
-    disablePortal?: boolean;
-    hoursStep?: number;
-    inputFormat?: string;
-    maxDate?: string;
-    maxTime?: string;
-    minDate?: string;
-    minTime?: string;
-    minutesStep?: number;
-    mode?: DateTimeMode;
-    onblur?: () => void;
-    onchange?: (value: string | null) => void;
-    outputFormat?: string;
-    pmLabel?: string;
-    popoverProps?: PopoverProps;
-    secondsStep?: number;
-    timePickerProps?: TimePickerProps;
-    timePresets?: Array<string | { label: string; value: string }>;
-    use12Hour?: boolean;
-    withPicker?: boolean;
-    withTimeDropdown?: boolean;
-    value?: string | null;
-  }
-
-  let {
-    amLabel,
-    closeOnPick = true,
-    clearable = true,
-    disableAutocomplete = false,
-    disablePortal = false,
-    disabled,
-    error,
-    hoursStep,
-    inputFormat = 'ISO',
-    label,
-    maxDate,
-    maxTime,
-    minDate,
-    minTime,
-    minutesStep,
-    mode = 'datetime',
-    name,
-    onblur,
-    onchange,
-    outputFormat = 'ISO',
-    pmLabel,
-    popoverProps,
-    placeholder,
-    required,
-    sid,
-    tooltip,
-    secondsStep,
-    timePickerProps,
-    timePresets,
-    use12Hour,
-    value = $bindable(null),
-    withPicker = true,
-    withTimeDropdown,
-  }: Props = $props();
-
-  const id = $derived(`field_${name ?? ''}_${sid ?? ''}`);
-  const pickerDialogId = $derived(`${id}_picker_dialog`);
-  const resolvedInputFormat = $derived(resolveDateTimeFormat(inputFormat, mode));
-  const resolvedOutputFormat = $derived(resolveDateTimeFormat(outputFormat, mode));
-  const showDatePicker = $derived(mode === 'date' || mode === 'datetime');
-  const showTimePicker = $derived(mode === 'time' || mode === 'datetime');
-  const rightSectionCount = $derived((withPicker ? 1 : 0) + (clearable ? 1 : 0));
-  const inputRightPaddingClass = $derived(rightSectionCount >= 2 ? 'pr-20' : rightSectionCount === 1 ? 'pr-12' : 'pr-3');
-  const resolvedUse12Hour = $derived(use12Hour ?? timePickerProps?.use12Hour ?? false);
-  const resolvedWithTimeDropdown = $derived(withTimeDropdown ?? timePickerProps?.withDropdown ?? false);
-  const resolvedHoursStep = $derived(hoursStep ?? timePickerProps?.hoursStep ?? 1);
-  const resolvedMinutesStep = $derived(minutesStep ?? timePickerProps?.minutesStep ?? 1);
-  const resolvedSecondsStep = $derived(secondsStep ?? timePickerProps?.secondsStep ?? 1);
-  const resolvedAmLabel = $derived(amLabel ?? timePickerProps?.amLabel ?? 'AM');
-  const resolvedPmLabel = $derived(pmLabel ?? timePickerProps?.pmLabel ?? 'PM');
-  const resolvedTimePresets = $derived(timePresets ?? timePickerProps?.presets ?? []);
-  const closeOnClickOutside = $derived(popoverProps?.closeOnClickOutside ?? true);
-  const closeOnEscape = $derived(popoverProps?.closeOnEscape ?? true);
-  const dialogAriaLabel = $derived(popoverProps?.dialogAriaLabel ?? 'Date time picker');
-  const panelClass = $derived(popoverProps?.panelClass ?? '');
-
-  let displayValue = $state('');
-  let pickerOpen = $state(false);
-  let pickerHour = $state(0);
-  let pickerMinute = $state(0);
-  let pickerSecond = $state(0);
-  let selectedDateIso = $state('');
-  let calendarYear = $state(getNowDateTimeParts().year);
-  let calendarMonth = $state(getNowDateTimeParts().month);
-
-  let localError = $state<string | undefined>(undefined);
-  const effectiveError = $derived(error ?? localError);
-
-  let anchorRef = $state<HTMLDivElement | null>(null);
-  let popupTop = $state(0);
-  let popupLeft = $state(0);
-  let popupWidth = $state(0);
-  let pickerZIndex = $state(1100);
-
-  const calendarMonthLabel = $derived(getYearMonthLabel(calendarYear, calendarMonth));
-  const calendarCells = $derived(getCalendarCells(calendarYear, calendarMonth));
-
-  function syncPickerFromParts(parts: DateTimeParts): void {
-    selectedDateIso = toNativeDate(parts);
-    pickerHour = parts.hour;
-    pickerMinute = parts.minute;
-    pickerSecond = parts.second;
-    calendarYear = parts.year;
-    calendarMonth = parts.month;
-  }
-
-  function getCurrentParts(): DateTimeParts {
-    const trimmed = displayValue.trim();
-    if (trimmed === '') {
-      const now = normalizePartsForMode(getNowDateTimeParts(), mode);
-      return now ?? getNowDateTimeParts();
-    }
-
-    const parsed = parseDateTimeByFormat(trimmed, resolvedInputFormat, mode);
-    if (parsed) {
-      return parsed;
-    }
-
-    const now = normalizePartsForMode(getNowDateTimeParts(), mode);
-    return now ?? getNowDateTimeParts();
-  }
-
-  function emitParts(parts: DateTimeParts): void {
-    const normalizedInput = formatDateTimeByFormat(parts, resolvedInputFormat);
-    const normalizedOutput = formatDateTimeByFormat(parts, resolvedOutputFormat);
-
-    displayValue = normalizedInput;
-    value = normalizedOutput;
-    syncPickerFromParts(parts);
-    onchange?.(normalizedOutput);
-  }
-
-  function applyParts(parts: DateTimeParts, closeAfterApply = false): boolean {
-    const normalized = normalizePartsForMode(parts, mode);
-    if (!normalized) {
-      localError = 'Invalid date/time value';
-      return false;
-    }
-
-    const constraintError = validateDateTimeParts(normalized, mode, {
-      minDate,
-      maxDate,
-      minTime,
-      maxTime,
-    });
-
-    if (constraintError) {
-      localError = constraintError;
-      return false;
-    }
-
-    localError = undefined;
-    emitParts(normalized);
-
-    if (closeAfterApply && closeOnPick) {
-      pickerOpen = false;
-    }
-
-    return true;
-  }
-
-  function syncFromExternalValue(): void {
-    const incoming = value;
-
-    if (!incoming || incoming.trim() === '') {
-      displayValue = '';
-      selectedDateIso = '';
-      localError = undefined;
-      return;
-    }
-
-    const parsed = parseDateTimeByFormat(incoming, resolvedOutputFormat, mode);
-    if (!parsed) {
-      displayValue = incoming;
-      selectedDateIso = '';
-      return;
-    }
-
-    displayValue = formatDateTimeByFormat(parsed, resolvedInputFormat);
-    syncPickerFromParts(parsed);
-  }
-
-  function clearValue(): void {
-    displayValue = '';
-    selectedDateIso = '';
-    localError = undefined;
-    value = null;
-    onchange?.(null);
-  }
-
-  function commitFromTextInput(): void {
-    const trimmed = displayValue.trim();
-
-    if (trimmed === '') {
-      clearValue();
-      return;
-    }
-
-    const parsed = parseDateTimeByFormat(trimmed, resolvedInputFormat, mode);
-    if (parsed) {
-      applyParts(parsed);
-      return;
-    }
-
-    // Fallback: if input is partial, complete missing segments from current date/time
-    // and commit without blocking tab/blur flow.
-    if (!disableAutocomplete) {
-      const partialParsed = parsePartialDateTimeByFormat(trimmed, resolvedInputFormat, mode);
-      if (partialParsed) {
-        applyParts(partialParsed);
-        return;
-      }
-    }
-
-    // Do not block blur/tab flow on partial or non-matching input.
-    // Keep current text and skip hard error here.
-    localError = undefined;
-  }
-
-  function handleSelectCalendarDate(isoDate: string): void {
-    const parsedDate = parseNativeDate(isoDate);
-    if (!parsedDate) {
-      return;
-    }
-
-    const current = getCurrentParts();
-    current.year = parsedDate.year;
-    current.month = parsedDate.month;
-    current.day = parsedDate.day;
-
-    const closeAfterApply = mode === 'date';
-    applyParts(current, closeAfterApply);
-  }
-
-  function handleTimeChange(value: { hour: number; minute: number; second: number }): void {
-    const current = getCurrentParts();
-    current.hour = value.hour;
-    current.minute = value.minute;
-    current.second = value.second;
-
-    const closeAfterApply = mode === 'time';
-    applyParts(current, closeAfterApply);
-  }
-
-  function handleNow(): void {
-    const now = normalizePartsForMode(getNowDateTimeParts(), mode);
-    if (!now) {
-      return;
-    }
-
-    applyParts(now, true);
-  }
-
-  function shiftMonth(delta: number): void {
-    const shifted = shiftYearMonth(calendarYear, calendarMonth, delta);
-    calendarYear = shifted.year;
-    calendarMonth = shifted.month;
-  }
-
-  function handleTextKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      commitFromTextInput();
-      (event.currentTarget as HTMLInputElement).blur();
-      return;
-    }
-
-    if (event.key === 'Escape' && closeOnEscape) {
-      pickerOpen = false;
-    }
-  }
-
-  function handleInputBlur(): void {
-    commitFromTextInput();
-    onblur?.();
-  }
-
-  function updatePortalPosition(): void {
-    if (!anchorRef) {
-      return;
-    }
-
-    const rect = anchorRef.getBoundingClientRect();
-    const viewportWidth = typeof window === 'undefined' ? rect.width : window.innerWidth;
-    const horizontalPadding = 8;
-    const desktopMaxWidth = 560;
-    const maxWidth = Math.min(desktopMaxWidth, Math.max(280, viewportWidth - horizontalPadding * 2));
-    const nextWidth = Math.min(Math.max(rect.width, 280), maxWidth);
-    const maxLeft = viewportWidth - nextWidth - horizontalPadding;
-
-    popupTop = rect.bottom + 8;
-    popupWidth = nextWidth;
-    popupLeft = Math.min(Math.max(rect.left, horizontalPadding), Math.max(horizontalPadding, maxLeft));
-  }
-
-  function handlePickerKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape' && closeOnEscape) {
-      event.preventDefault();
-      pickerOpen = false;
-    }
-  }
-
-  async function focusPickerFirstControl(): Promise<void> {
-    if (!pickerOpen || !showDatePicker || typeof document === 'undefined') {
-      return;
-    }
-
-    await tick();
-
-    const dialog = document.getElementById(pickerDialogId);
-    if (!dialog) {
-      return;
-    }
-
-    const selectedDay = dialog.querySelector<HTMLButtonElement>(
-      'button[data-calendar-day="true"][aria-selected="true"]:not([disabled])',
-    );
-    if (selectedDay) {
-      selectedDay.focus();
-      return;
-    }
-
-    const firstEnabledDay = dialog.querySelector<HTMLButtonElement>(
-      'button[data-calendar-day="true"]:not([disabled])',
-    );
-    firstEnabledDay?.focus();
-  }
-
-  $effect(() => {
-    syncFromExternalValue();
-  });
-
-  $effect(() => {
-    if (!pickerOpen || disabled || !closeOnClickOutside || typeof document === 'undefined') {
-      return;
-    }
-
-    const onDocumentPointerDown = (event: MouseEvent) => {
-      const target = event.target as Node | null;
-      const dialog = document.getElementById(pickerDialogId);
-      const insideAnchor = !!(target && anchorRef?.contains(target));
-      const insideDialog = !!(target && dialog?.contains(target));
-
-      if (!insideAnchor && !insideDialog) {
-        pickerOpen = false;
-      }
-    };
-
-    document.addEventListener('mousedown', onDocumentPointerDown);
-
-    return () => {
-      document.removeEventListener('mousedown', onDocumentPointerDown);
-    };
-  });
-
-  $effect(() => {
-    if (disablePortal || !pickerOpen || disabled) {
-      return;
-    }
-
-    updatePortalPosition();
-
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const onWindowChange = () => {
-      updatePortalPosition();
-    };
-
-    window.addEventListener('resize', onWindowChange);
-    window.addEventListener('scroll', onWindowChange, true);
-
-    return () => {
-      window.removeEventListener('resize', onWindowChange);
-      window.removeEventListener('scroll', onWindowChange, true);
-    };
-  });
-
-  $effect(() => {
-    if (!withPicker || !pickerOpen || disabled) {
-      return;
-    }
-
-    const overlay = registerOverlay({
-      kind: 'popover',
-      mount: disablePortal ? 'inline' : 'portal',
-    });
-    pickerZIndex = overlay.layer.content;
-
-    return () => {
-      overlay.unregister();
-      pickerZIndex = 1100;
-    };
-  });
+<script lang="ts">import { tick } from "svelte";
+import Portal from "../../Portal/Portal.svelte";
+import { registerOverlay } from "../../OverlayStack";
+import CtrlFieldShell from "../CtrlFieldShell.svelte";
+import { makeFieldId } from "../utils";
+import DateTimeCtrlPickerPanel from "./DateTimeCtrlPickerPanel.svelte";
+import { formatDateTimeByFormat, getCalendarCells, getNowDateTimeParts, getYearMonthLabel, isDateSelectable, normalizePartsForMode, parseDateTimeByFormat, parsePartialDateTimeByFormat, parseNativeDate, resolveDateTimeFormat, shiftYearMonth, toNativeDate, validateDateTimeParts } from "./DateTimeCtrl.utils";
+let { amLabel, closeOnPick = true, clearable = true, disableAutocomplete = false, disablePortal = false, disabled, error, hoursStep, inputFormat = "ISO", label, maxDate, maxTime, minDate, minTime, minutesStep, mode = "datetime", name, onblur, onchange, outputFormat = "ISO", pmLabel, popoverProps, placeholder, required, sid, tooltip, secondsStep, timePickerProps, timePresets, use12Hour, value = $bindable(null), withPicker = true, withTimeDropdown } = $props();
+const id = $derived(makeFieldId(name, sid));
+const pickerDialogId = $derived(`${id}_picker_dialog`);
+const resolvedInputFormat = $derived(resolveDateTimeFormat(inputFormat, mode));
+const resolvedOutputFormat = $derived(resolveDateTimeFormat(outputFormat, mode));
+const showDatePicker = $derived(mode === "date" || mode === "datetime");
+const showTimePicker = $derived(mode === "time" || mode === "datetime");
+const rightSectionCount = $derived((withPicker ? 1 : 0) + (clearable ? 1 : 0));
+const inputRightPaddingClass = $derived(rightSectionCount >= 2 ? "pr-20" : rightSectionCount === 1 ? "pr-12" : "pr-3");
+const resolvedUse12Hour = $derived(use12Hour ?? timePickerProps?.use12Hour ?? false);
+const resolvedWithTimeDropdown = $derived(withTimeDropdown ?? timePickerProps?.withDropdown ?? false);
+const resolvedHoursStep = $derived(hoursStep ?? timePickerProps?.hoursStep ?? 1);
+const resolvedMinutesStep = $derived(minutesStep ?? timePickerProps?.minutesStep ?? 1);
+const resolvedSecondsStep = $derived(secondsStep ?? timePickerProps?.secondsStep ?? 1);
+const resolvedAmLabel = $derived(amLabel ?? timePickerProps?.amLabel ?? "AM");
+const resolvedPmLabel = $derived(pmLabel ?? timePickerProps?.pmLabel ?? "PM");
+const resolvedTimePresets = $derived(timePresets ?? timePickerProps?.presets ?? []);
+const closeOnClickOutside = $derived(popoverProps?.closeOnClickOutside ?? true);
+const closeOnEscape = $derived(popoverProps?.closeOnEscape ?? true);
+const dialogAriaLabel = $derived(popoverProps?.dialogAriaLabel ?? "Date time picker");
+const panelClass = $derived(popoverProps?.panelClass ?? "");
+let displayValue = $state("");
+let pickerOpen = $state(false);
+let pickerHour = $state(0);
+let pickerMinute = $state(0);
+let pickerSecond = $state(0);
+let selectedDateIso = $state("");
+let calendarYear = $state(getNowDateTimeParts().year);
+let calendarMonth = $state(getNowDateTimeParts().month);
+let localError = $state(undefined);
+const effectiveError = $derived(error ?? localError);
+let anchorRef = $state(null);
+let popupTop = $state(0);
+let popupLeft = $state(0);
+let popupWidth = $state(0);
+let pickerZIndex = $state(1100);
+const calendarMonthLabel = $derived(getYearMonthLabel(calendarYear, calendarMonth));
+const calendarCells = $derived(getCalendarCells(calendarYear, calendarMonth));
+function syncPickerFromParts(parts) {
+	selectedDateIso = toNativeDate(parts);
+	pickerHour = parts.hour;
+	pickerMinute = parts.minute;
+	pickerSecond = parts.second;
+	calendarYear = parts.year;
+	calendarMonth = parts.month;
+}
+function getCurrentParts() {
+	const trimmed = displayValue.trim();
+	if (trimmed === "") {
+		const now = normalizePartsForMode(getNowDateTimeParts(), mode);
+		return now ?? getNowDateTimeParts();
+	}
+	const parsed = parseDateTimeByFormat(trimmed, resolvedInputFormat, mode);
+	if (parsed) {
+		return parsed;
+	}
+	const now = normalizePartsForMode(getNowDateTimeParts(), mode);
+	return now ?? getNowDateTimeParts();
+}
+function emitParts(parts) {
+	const normalizedInput = formatDateTimeByFormat(parts, resolvedInputFormat);
+	const normalizedOutput = formatDateTimeByFormat(parts, resolvedOutputFormat);
+	displayValue = normalizedInput;
+	value = normalizedOutput;
+	syncPickerFromParts(parts);
+	onchange?.(normalizedOutput);
+}
+function applyParts(parts, closeAfterApply = false) {
+	const normalized = normalizePartsForMode(parts, mode);
+	if (!normalized) {
+		localError = "Invalid date/time value";
+		return false;
+	}
+	const constraintError = validateDateTimeParts(normalized, mode, {
+		minDate,
+		maxDate,
+		minTime,
+		maxTime
+	});
+	if (constraintError) {
+		localError = constraintError;
+		return false;
+	}
+	localError = undefined;
+	emitParts(normalized);
+	if (closeAfterApply && closeOnPick) {
+		pickerOpen = false;
+	}
+	return true;
+}
+function syncFromExternalValue() {
+	const incoming = value;
+	if (!incoming || incoming.trim() === "") {
+		displayValue = "";
+		selectedDateIso = "";
+		localError = undefined;
+		return;
+	}
+	const parsed = parseDateTimeByFormat(incoming, resolvedOutputFormat, mode);
+	if (!parsed) {
+		displayValue = incoming;
+		selectedDateIso = "";
+		return;
+	}
+	displayValue = formatDateTimeByFormat(parsed, resolvedInputFormat);
+	syncPickerFromParts(parsed);
+}
+function clearValue() {
+	displayValue = "";
+	selectedDateIso = "";
+	localError = undefined;
+	value = null;
+	onchange?.(null);
+}
+function commitFromTextInput() {
+	const trimmed = displayValue.trim();
+	if (trimmed === "") {
+		clearValue();
+		return;
+	}
+	const parsed = parseDateTimeByFormat(trimmed, resolvedInputFormat, mode);
+	if (parsed) {
+		applyParts(parsed);
+		return;
+	}
+	// Fallback: if input is partial, complete missing segments from current date/time
+	// and commit without blocking tab/blur flow.
+	if (!disableAutocomplete) {
+		const partialParsed = parsePartialDateTimeByFormat(trimmed, resolvedInputFormat, mode);
+		if (partialParsed) {
+			applyParts(partialParsed);
+			return;
+		}
+	}
+	// Do not block blur/tab flow on partial or non-matching input.
+	// Keep current text and skip hard error here.
+	localError = undefined;
+}
+function handleSelectCalendarDate(isoDate) {
+	const parsedDate = parseNativeDate(isoDate);
+	if (!parsedDate) {
+		return;
+	}
+	const current = getCurrentParts();
+	current.year = parsedDate.year;
+	current.month = parsedDate.month;
+	current.day = parsedDate.day;
+	const closeAfterApply = mode === "date";
+	applyParts(current, closeAfterApply);
+}
+function handleTimeChange(value) {
+	const current = getCurrentParts();
+	current.hour = value.hour;
+	current.minute = value.minute;
+	current.second = value.second;
+	const closeAfterApply = mode === "time";
+	applyParts(current, closeAfterApply);
+}
+function handleNow() {
+	const now = normalizePartsForMode(getNowDateTimeParts(), mode);
+	if (!now) {
+		return;
+	}
+	applyParts(now, true);
+}
+function shiftMonth(delta) {
+	const shifted = shiftYearMonth(calendarYear, calendarMonth, delta);
+	calendarYear = shifted.year;
+	calendarMonth = shifted.month;
+}
+function handleTextKeydown(event) {
+	if (event.key === "Enter") {
+		commitFromTextInput();
+		event.currentTarget.blur();
+		return;
+	}
+	if (event.key === "Escape" && closeOnEscape) {
+		pickerOpen = false;
+	}
+}
+function handleInputBlur() {
+	commitFromTextInput();
+	onblur?.();
+}
+function updatePortalPosition() {
+	if (!anchorRef) {
+		return;
+	}
+	const rect = anchorRef.getBoundingClientRect();
+	const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
+	const horizontalPadding = 8;
+	const desktopMaxWidth = 560;
+	const maxWidth = Math.min(desktopMaxWidth, Math.max(280, viewportWidth - horizontalPadding * 2));
+	const nextWidth = Math.min(Math.max(rect.width, 280), maxWidth);
+	const maxLeft = viewportWidth - nextWidth - horizontalPadding;
+	popupTop = rect.bottom + 8;
+	popupWidth = nextWidth;
+	popupLeft = Math.min(Math.max(rect.left, horizontalPadding), Math.max(horizontalPadding, maxLeft));
+}
+function handlePickerKeydown(event) {
+	if (event.key === "Escape" && closeOnEscape) {
+		event.preventDefault();
+		pickerOpen = false;
+	}
+}
+async function focusPickerFirstControl() {
+	if (!pickerOpen || !showDatePicker || typeof document === "undefined") {
+		return;
+	}
+	await tick();
+	const dialog = document.getElementById(pickerDialogId);
+	if (!dialog) {
+		return;
+	}
+	const selectedDay = dialog.querySelector("button[data-calendar-day=\"true\"][aria-selected=\"true\"]:not([disabled])");
+	if (selectedDay) {
+		selectedDay.focus();
+		return;
+	}
+	const firstEnabledDay = dialog.querySelector("button[data-calendar-day=\"true\"]:not([disabled])");
+	firstEnabledDay?.focus();
+}
+$effect(() => {
+	syncFromExternalValue();
+});
+$effect(() => {
+	if (!pickerOpen || disabled || !closeOnClickOutside || typeof document === "undefined") {
+		return;
+	}
+	const onDocumentPointerDown = (event) => {
+		const target = event.target;
+		const dialog = document.getElementById(pickerDialogId);
+		const insideAnchor = !!(target && anchorRef?.contains(target));
+		const insideDialog = !!(target && dialog?.contains(target));
+		if (!insideAnchor && !insideDialog) {
+			pickerOpen = false;
+		}
+	};
+	document.addEventListener("mousedown", onDocumentPointerDown);
+	return () => {
+		document.removeEventListener("mousedown", onDocumentPointerDown);
+	};
+});
+$effect(() => {
+	if (disablePortal || !pickerOpen || disabled) {
+		return;
+	}
+	updatePortalPosition();
+	if (typeof window === "undefined") {
+		return;
+	}
+	const onWindowChange = () => {
+		updatePortalPosition();
+	};
+	window.addEventListener("resize", onWindowChange);
+	window.addEventListener("scroll", onWindowChange, true);
+	return () => {
+		window.removeEventListener("resize", onWindowChange);
+		window.removeEventListener("scroll", onWindowChange, true);
+	};
+});
+$effect(() => {
+	if (!withPicker || !pickerOpen || disabled) {
+		return;
+	}
+	const overlay = registerOverlay({
+		kind: "popover",
+		mount: disablePortal ? "inline" : "portal"
+	});
+	pickerZIndex = overlay.layer.content;
+	return () => {
+		overlay.unregister();
+		pickerZIndex = 1100;
+	};
+});
 </script>
 
-<div class="flex flex-col gap-1" title={tooltip}>
-  {#if label}
-    <label class="label text-sm font-medium" for={id}>
-      {label}{#if required}<span class="text-error-500">*</span>{/if}
-    </label>
-  {/if}
-
+<CtrlFieldShell error={effectiveError} {id} {label} {required} {tooltip}>
   <div class="relative" bind:this={anchorRef}>
     <div class="relative">
       <input
         {id}
         {disabled}
+        {name}
         {required}
         class={`input ${inputRightPaddingClass}`}
         class:input-error={!!effectiveError}
@@ -644,8 +476,4 @@
       {/if}
     </Portal>
   </div>
-
-  {#if effectiveError}
-    <p class="text-xs text-error-500">{effectiveError}</p>
-  {/if}
-</div>
+</CtrlFieldShell>