@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/dist/DateTimeInput/DateTimeInput.js

@@ -15,10 +15,10 @@
  * - /apps/storybook/stories/DateTimeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateTimeInput/ (showcase blocks)
  */
-import { use, useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
+import { use, useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
@@ -29,7 +29,7 @@ import { usePopover } from "../Popover/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
-import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
+import { parseDateInput, parseISOTime, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, isFocusDetached } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
@@ -37,8 +37,14 @@ import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useTranslator, InternationalizationContext } from "../i18n/index.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
+
+/**
+ * Supported minute cadences for the preset-time dropdown. Every value divides
+ * an hour evenly, so each option lands on a round clock time.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   row: {
@@ -72,6 +78,51 @@ const styles = {
     kUk6DE: "x98rzlu",
     kCS8Yb: "x1r8uery",
     $$css: true
+  },
+  timeOption: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kzqmXN: "xh8yej3",
+    k8WAf4: "x1vofgu7",
+    kg3NbH: "xf314gf",
+    kaIpWk: "xh6dtrn",
+    kkrTdU: "x1ypdohk x16khyan",
+    k9WMMc: "x1yc453h",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xjm74w1",
+    kLWn49: "xw6l6zx",
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  timeOptionHighlighted: {
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  timeOptionSelected: {
+    k63SB2: "x1e4wzip",
+    $$css: true
+  }
+};
+
+/**
+ * Size-specific padding for the preset-time options, so an `sm` field gets a
+ * compact list. Matches DropdownMenuItem / Selector / BaseTypeahead.
+ */
+const timeOptionSizeStyles = {
+  sm: {
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  md: {
+    k8WAf4: "x1vofgu7",
+    $$css: true
+  },
+  lg: {
+    k8WAf4: "xce4md1",
+    $$css: true
   }
 };
 const sizeStyles = {
@@ -113,6 +164,7 @@ function combineDateTime(date, time) {
   }
   return `${date}T${time}`;
 }
+const MINUTES_PER_DAY = 24 * 60;
 function getDefaultTime(hasSeconds) {
   const now = new Date();
   return formatISOTime({
@@ -154,6 +206,7 @@ export function DateTimeInput({
   hasSeconds = false,
   hourFormat = '12h',
   timeIncrement = 1,
+  timeOptionInterval,
   hasClear = false,
   placeholder: placeholderFromProps,
   timePlaceholder: timePlaceholderFromProps,
@@ -300,6 +353,42 @@ export function DateTimeInput({
     return timePlaceholder;
   }, [isTimeFocused, timeDisplayValue, hourFormat, timePlaceholder, t]);
 
+  // The time field's own accessible name. The option list is named from this
+  // rather than from `label`, so a consumer-supplied timeLabel renames both
+  // together instead of leaving the list announcing the old name.
+  const resolvedTimeLabel = timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {
+    label
+  });
+
+  // --- Preset time options (#2727) ---
+  // Opt-in: without timeOptionInterval the time field keeps exactly the
+  // semantics it shipped with — a plain text input, no combobox role, no
+  // second listbox in the accessibility tree.
+  const hasTimeOptions = timeOptionInterval !== undefined;
+  const timeOptions = useMemo(() => {
+    if (timeOptionInterval === undefined) {
+      return [];
+    }
+    const options = [];
+    for (let minutes = 0; minutes < MINUTES_PER_DAY; minutes += timeOptionInterval) {
+      const time = formatISOTime({
+        hour: Math.floor(minutes / 60),
+        minute: minutes % 60,
+        second: 0
+      }, hasSeconds);
+      // The same bound the typed path enforces, so the list can never offer a
+      // time that typing the identical string would reject.
+      if (!isTimeInRange(time, timeMin, timeMax)) {
+        continue;
+      }
+      options.push({
+        time,
+        label: formatDisplayTime(time, hasSeconds)
+      });
+    }
+    return options;
+  }, [timeOptionInterval, hasSeconds, timeMin, timeMax, formatDisplayTime]);
+
   // --- Unified change handler ---
   const fireChange = useCallback(newValue => {
     if (isBusy) {
@@ -436,6 +525,179 @@ export function DateTimeInput({
     }
   }, [popover, commitDatePendingInput, isEffectivelyDisabled]);
 
+  // --- Time-option popover (#2727) ---
+  const timeListboxId = useId();
+  const [highlightedTimeIndex, setHighlightedTimeIndex] = useState(-1);
+
+  // With popover="auto", showing the popover between pointerdown and
+  // pointerup/click lets the browser's light-dismiss treat that same click as
+  // "outside" and close it again. Defer the show past the click, as
+  // BaseTypeahead does for the same reason.
+  const timePointerActiveRef = useRef(false);
+
+  // Whether the highlight is still the one typing derived, or the user has
+  // since moved it themselves. Enter honours typed text only in the former
+  // case — otherwise the field would commit something other than the option
+  // it is showing as active.
+  const timeHighlightFollowsTypingRef = useRef(true);
+  const markTimePointerActive = useCallback(() => {
+    timePointerActiveRef.current = true;
+    document.addEventListener('click', () => {
+      timePointerActiveRef.current = false;
+    }, {
+      once: true
+    });
+  }, []);
+  const timePopover = usePopover({
+    hasLightDismiss: true,
+    hasCloseButton: false,
+    hasAutoFocus: false,
+    // The popup's own role="listbox" carries the semantics; the input keeps
+    // DOM focus, so announcing a dialog here would misrepresent it.
+    role: 'none',
+    onHide: () => setHighlightedTimeIndex(-1)
+  });
+
+  // Anchor the list to the time wrapper, not the date input the field's own
+  // trigger ref points at.
+  useEffect(() => {
+    if (!hasTimeOptions) {
+      return;
+    }
+    const el = timeContainerRef.current;
+    if (el) {
+      timePopover.triggerRef(el);
+    }
+    return () => {
+      timePopover.triggerRef(null);
+    };
+  }, [timePopover, hasTimeOptions]);
+  const timeOptionId = useCallback(index => `${timeListboxId}-option-${index}`, [timeListboxId]);
+
+  // A field can go disabled or busy while its list is open — a changeAction
+  // starting elsewhere in the form is enough. Leave it up and the dropdown
+  // hangs over a control that no longer accepts input.
+  // The same applies to a list that empties after it opened, which a narrowing
+  // min/max window does. An open-but-empty list gates the keyboard switch off,
+  // so the arrows quietly fall back to stepping the value instead.
+  useEffect(() => {
+    if (timePopover.isOpen && (isEffectivelyDisabled || timeOptions.length === 0)) {
+      timePopover.hide();
+    }
+  }, [isEffectivelyDisabled, timeOptions.length, timePopover]);
+
+  // The option list can shrink under an open popover — min/max tighten when
+  // the date moves onto a boundary day, or the cadence prop changes. A stale
+  // index past the new end shows no highlight at all and makes the arrow keys
+  // look dead until the user walks it back into range.
+  // Clamped as it is read rather than synced through an effect: no extra
+  // render, and the index can never point past the end even for the paint
+  // where the list shrank.
+  const activeTimeIndex = highlightedTimeIndex > timeOptions.length - 1 ? timeOptions.length - 1 : highlightedTimeIndex;
+
+  // Keep the active option visible. The listbox is a fixed-height scroll
+  // container, so without this a list opens at midnight with the highlight far
+  // below the fold, and keyboard navigation walks off-screen. Mirrors
+  // BaseTypeahead's scrollIntoView({block: 'nearest'}).
+  useEffect(() => {
+    if (!timePopover.isOpen || activeTimeIndex < 0 || activeTimeIndex >= timeOptions.length) {
+      return;
+    }
+    document.getElementById(timeOptionId(activeTimeIndex))?.scrollIntoView?.({
+      block: 'nearest'
+    });
+  }, [timePopover.isOpen, activeTimeIndex, timeOptionId, timeOptions.length]);
+
+  /**
+   * The selected time in the same shape the options carry. splitDateTime slices
+   * whatever follows the `T`, so a caller passing `14:00:00` with hasSeconds
+   * off leaves `"14:00:00"` against options of `"14:00"` — comparing raw would
+   * mark nothing selected, silently.
+   */
+  const selectedOptionTime = useMemo(() => {
+    if (!valueParts.time) {
+      return undefined;
+    }
+    const parsed = parseISOTime(valueParts.time);
+    return parsed ? formatISOTime(parsed, hasSeconds) : undefined;
+  }, [valueParts.time, hasSeconds]);
+
+  /**
+   * Index of the option at or immediately before `time`, so opening on a value
+   * that is not itself an option (13:07 in a 15-minute list) still lands the
+   * highlight somewhere sensible instead of nowhere.
+   */
+  const closestOptionIndex = useCallback(time => {
+    if (timeOptions.length === 0) {
+      return -1;
+    }
+    // No time yet — the state a field lands in once a date is picked. The
+    // list still opens on the first option, per the APG listbox pattern;
+    // leaving it inactive made ArrowUp and Enter do nothing at all.
+    if (!time) {
+      return 0;
+    }
+    let candidate = -1;
+    for (let i = 0; i < timeOptions.length; i++) {
+      if (timeOptions[i].time <= time) {
+        candidate = i;
+      } else {
+        break;
+      }
+    }
+    // A value below every option (min pushes the list past it) still gets the
+    // first option rather than an empty highlight.
+    return candidate === -1 ? 0 : candidate;
+  }, [timeOptions]);
+  const showTimeOptions = useCallback(() => {
+    if (!hasTimeOptions || isEffectivelyDisabled || timePopover.isOpen ||
+    // A min/max window narrower than the cadence survives no option at all.
+    // Opening on that would show an empty panel with nothing to pick.
+    timeOptions.length === 0) {
+      return;
+    }
+    setHighlightedTimeIndex(closestOptionIndex(selectedOptionTime));
+    // useInputContainer routes wrapper clicks through input.click() once the
+    // input advertises a popup, and a programmatic click does not focus. The
+    // input must hold DOM focus or aria-activedescendant announces nothing.
+    timeInputRef.current?.focus();
+    if (timePointerActiveRef.current) {
+      document.addEventListener('click', () => requestAnimationFrame(() => timePopover.show({
+        skipAutoFocus: true
+      })), {
+        once: true
+      });
+    } else {
+      timePopover.show({
+        skipAutoFocus: true
+      });
+    }
+  }, [hasTimeOptions, isEffectivelyDisabled, timePopover, timeOptions.length, closestOptionIndex, selectedOptionTime]);
+
+  /**
+   * The single commit path for a time chosen from the list. Deliberately the
+   * same shape as the typed path: same range check, same date requirement, so
+   * picking 9:00 AM and typing "9:00 AM" are indistinguishable downstream.
+   */
+  const commitTimeOption = useCallback(time => {
+    if (isEffectivelyDisabled || !isTimeInRange(time, timeMin, timeMax)) {
+      return;
+    }
+    setTimePendingInput(null);
+    // Compared against the normalised time, the same one the selected marker
+    // uses. Comparing the raw value instead made clicking the option that
+    // renders as selected emit a change, whenever the value carried seconds
+    // the field does not display.
+    if (time !== selectedOptionTime && valueParts.date) {
+      const combined = combineDateTime(valueParts.date, time);
+      if (combined) {
+        fireChange(combined);
+      }
+    }
+    timePopover.hide();
+    timeInputRef.current?.focus();
+  }, [isEffectivelyDisabled, timeMin, timeMax, selectedOptionTime, valueParts.date, fireChange, timePopover]);
+
   // --- Time handlers ---
   const handleTimeInputChange = useCallback(e => {
     // With a disabledMessage the input drops `disabled` for focusability, so
@@ -446,6 +708,14 @@ export function DateTimeInput({
     const text = e.target.value;
     setTimePendingInput(text);
     const parsed = parseTimeInput(text, hasSeconds);
+
+    // Typing narrows nothing — free-form entry is the contract, and a time
+    // between two options must stay reachable. The list instead follows the
+    // typed value so Enter lands somewhere the user expects.
+    if (timePopover.isOpen && parsed) {
+      timeHighlightFollowsTypingRef.current = true;
+      setHighlightedTimeIndex(closestOptionIndex(parsed));
+    }
     if (parsed && isTimeInRange(parsed, timeMin, timeMax) && parsed !== valueParts.time) {
       if (valueParts.date) {
         const combined = combineDateTime(valueParts.date, parsed);
@@ -454,7 +724,7 @@ export function DateTimeInput({
         }
       }
     }
-  }, [hasSeconds, timeMin, timeMax, valueParts.time, valueParts.date, fireChange, isEffectivelyDisabled]);
+  }, [hasSeconds, timeMin, timeMax, valueParts.time, valueParts.date, fireChange, isEffectivelyDisabled, timePopover.isOpen, closestOptionIndex]);
   const handleTimeFocus = useCallback(() => {
     // A disabled/busy input stays focusable (via aria-disabled) so its reason
     // is discoverable, but it must not present editing affordances — keep the
@@ -464,8 +734,20 @@ export function DateTimeInput({
     }
     setIsTimeFocused(true);
   }, [isEffectivelyDisabled]);
-  const handleTimeBlur = useCallback(() => {
+  const handleTimeBlur = useCallback(e => {
     setIsTimeFocused(false);
+
+    // Native light dismiss only fires on outside clicks and Escape, so a focus
+    // move that is neither — Tab handled elsewhere, or a programmatic focus —
+    // would strand the listbox open in the top layer. Focus landing inside the
+    // field or the popup itself is not a leave. Mirrors BaseTypeahead.
+    if (timePopover.isOpen) {
+      const next = e.relatedTarget;
+      const popoverEl = next ? document.getElementById(timePopover.id) : null;
+      if (!next || !(timeContainerRef.current?.contains(next) || popoverEl?.contains(next))) {
+        timePopover.hide();
+      }
+    }
     if (timePendingInput === null) {
       return;
     }
@@ -484,7 +766,7 @@ export function DateTimeInput({
       }
     }
     setTimePendingInput(null);
-  }, [timePendingInput, hasSeconds, timeMin, timeMax, valueParts, fireChange]);
+  }, [timePendingInput, hasSeconds, timeMin, timeMax, valueParts, fireChange, timePopover]);
   const handleTimeKeyDown = useCallback(e => {
     // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
     // window uses those same arrows to navigate candidates, so guard the
@@ -493,6 +775,72 @@ export function DateTimeInput({
     if (isImeKeyEvent(e.nativeEvent)) {
       return;
     }
+
+    // The dropdown claims the arrow keys only while it is open. Closed, they
+    // keep stepping the value by timeIncrement exactly as they always have —
+    // that behaviour is documented and tested, so the list borrows Alt+Arrow
+    // Down (the APG "open without moving" binding) to open instead.
+    if (hasTimeOptions && !isEffectivelyDisabled) {
+      if (e.key === 'Escape' && timePopover.isOpen) {
+        e.preventDefault();
+        timePopover.hide();
+        return;
+      }
+      if (e.key === 'ArrowDown' && e.altKey) {
+        e.preventDefault();
+        // A keyboard open is never mid-click, so clear the deferral flag. A
+        // press that ended without a click would otherwise leave it set and
+        // hold every later open hostage to the next click anywhere.
+        timePointerActiveRef.current = false;
+        showTimeOptions();
+        return;
+      }
+      if (timePopover.isOpen && timeOptions.length > 0) {
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            timeHighlightFollowsTypingRef.current = false;
+            setHighlightedTimeIndex(activeTimeIndex < timeOptions.length - 1 ? activeTimeIndex + 1 : activeTimeIndex);
+            return;
+          case 'ArrowUp':
+            e.preventDefault();
+            timeHighlightFollowsTypingRef.current = false;
+            setHighlightedTimeIndex(activeTimeIndex > 0 ? activeTimeIndex - 1 : activeTimeIndex);
+            return;
+          case 'Home':
+            e.preventDefault();
+            timeHighlightFollowsTypingRef.current = false;
+            setHighlightedTimeIndex(0);
+            return;
+          case 'End':
+            e.preventDefault();
+            timeHighlightFollowsTypingRef.current = false;
+            setHighlightedTimeIndex(timeOptions.length - 1);
+            return;
+          case 'Enter':
+            {
+              e.preventDefault();
+              // Typed text wins over the highlight. The highlight only tracks
+              // the option at or before what was typed, so committing it here
+              // would round 1:07 PM down to 1:00 PM and discard the entry.
+              const typed = timeHighlightFollowsTypingRef.current && timePendingInput !== null ? parseTimeInput(timePendingInput, hasSeconds) : null;
+              const option = timeOptions[activeTimeIndex];
+              if (typed) {
+                commitTimeOption(typed);
+              } else if (option) {
+                commitTimeOption(option.time);
+              }
+              return;
+            }
+          case 'Tab':
+            // Let focus leave; blur commits any typed text as usual.
+            timePopover.hide();
+            return;
+          default:
+            break;
+        }
+      }
+    }
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault();
       let currentTime = valueParts.time;
@@ -516,7 +864,7 @@ export function DateTimeInput({
         }
       }
     }
-  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime]);
+  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime, hasTimeOptions, isEffectivelyDisabled, timePopover, timeOptions, activeTimeIndex, timePendingInput, showTimeOptions, commitTimeOption]);
 
   // --- Clear ---
   const handleClear = useCallback(() => {
@@ -586,7 +934,7 @@ export function DateTimeInput({
             })
           })
         }), /*#__PURE__*/_jsx("input", {
-          ref: mergeRefs(ref, dateInputRef),
+          ref: useMergedRefs(ref, dateInputRef),
           id: dateInputId,
           type: "text",
           role: "combobox",
@@ -643,7 +991,12 @@ export function DateTimeInput({
       }), /*#__PURE__*/_jsxs("div", {
         ref: timeContainerRef,
         onClick: handleTimeWrapperClick,
-        onMouseUp: handleTimeWrapperMouseUp,
+        onMouseUp: handleTimeWrapperMouseUp
+        // On the wrapper, not just the input: clicking the clock icon or the
+        // padding is routed to the input as a synthetic click, which would
+        // otherwise open the list mid-gesture and let light dismiss eat it.
+        ,
+        onPointerDown: hasTimeOptions ? markTimePointerActive : undefined,
         ...mergeProps(themeProps('date-time-input-time-segment', {
           size,
           status: status?.type ?? null
@@ -672,7 +1025,17 @@ export function DateTimeInput({
           onFocus: handleTimeFocus,
           onBlur: handleTimeBlur,
           onKeyDown: handleTimeKeyDown,
+          onClick: hasTimeOptions ? showTimeOptions : undefined,
+          onPointerDown: hasTimeOptions ? markTimePointerActive : undefined,
           placeholder: resolvedTimePlaceholder
+          // Combobox semantics appear only with the dropdown opted in, so a
+          // field without it keeps a single combobox on the date half.
+          ,
+          role: hasTimeOptions ? 'combobox' : undefined,
+          "aria-expanded": hasTimeOptions ? timePopover.isOpen : undefined,
+          "aria-controls": hasTimeOptions && timePopover.isOpen ? timeListboxId : undefined,
+          "aria-autocomplete": hasTimeOptions ? 'list' : undefined,
+          "aria-activedescendant": hasTimeOptions && timePopover.isOpen && activeTimeIndex >= 0 && activeTimeIndex < timeOptions.length ? timeOptionId(activeTimeIndex) : undefined
           // With a disabledMessage the input keeps focusability via
           // aria-disabled so the reason is focus-discoverable; typing is
           // blocked with readOnly and the mutation guards.
@@ -680,9 +1043,7 @@ export function DateTimeInput({
           disabled: isEffectivelyDisabled && !showsDisabledMessage,
           "aria-disabled": showsDisabledMessage ? 'true' : undefined,
           readOnly: showsDisabledMessage || undefined,
-          "aria-label": timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {
-            label
-          }),
+          "aria-label": resolvedTimeLabel,
           "aria-describedby": ariaDescribedBy,
           "aria-required": isEffectivelyRequired ? 'true' : undefined,
           "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
@@ -721,6 +1082,39 @@ export function DateTimeInput({
     }), {
       placement: 'below',
       alignment: 'start'
+    }), hasTimeOptions && timePopover.render(
+    // The layer renders its children open or closed, so mount the list
+    // only while it is open — a 5-minute cadence is 288 nodes that would
+    // otherwise sit in the DOM of every opted-in field for its lifetime.
+    !timePopover.isOpen ? null : /*#__PURE__*/_jsx("div", {
+      id: timeListboxId,
+      role: "listbox",
+      "aria-label": t('@astryx.dateTimeInput.timeOptionsLabel', {
+        label: resolvedTimeLabel
+      }),
+      ...mergeProps(themeProps('date-time-input-time-listbox'), {
+        className: "x9f619 xuyqlj2 x1odjw0f x9epnlk xrzjruh"
+      }),
+      children: timeOptions.map((option, index) => {
+        const isSelected = option.time === selectedOptionTime;
+        return /*#__PURE__*/_jsx("div", {
+          id: timeOptionId(index),
+          role: "option",
+          "aria-selected": isSelected,
+          tabIndex: -1
+          // Pointer-down commit: the input must not lose focus to the
+          // option, or blur would fire its own commit first.
+          ,
+          onPointerDown: e => e.preventDefault(),
+          onClick: () => commitTimeOption(option.time),
+          onMouseEnter: () => setHighlightedTimeIndex(index),
+          ...mergeProps(themeProps('date-time-input-time-option'), stylex.props(styles.timeOption, timeOptionSizeStyles[size], index === activeTimeIndex && styles.timeOptionHighlighted, isSelected && styles.timeOptionSelected)),
+          children: option.label
+        }, option.time);
+      })
+    }), {
+      placement: 'below',
+      alignment: 'start'
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }

package/dist/DateTimeInput/index.d.ts

@@ -5,5 +5,5 @@
  * @position Package entry point for DateTimeInput
  */
 export { DateTimeInput } from './DateTimeInput';
-export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputTimeIncrement, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
+export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputTimeIncrement, DateTimeInputTimeOptionInterval, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/DateTimeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,0BAA0B,EAC1B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,0BAA0B,EAC1B,+BAA+B,EAC/B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/Dialog/Dialog.d.ts

@@ -4,6 +4,13 @@
  * @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
  * @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
  *
+ * The standard variant treats `width` as the preferred surface width, then
+ * clamps it to the dynamic viewport with spacing-token gutters so narrow
+ * viewports keep content and controls on screen without changing the public API.
+ * Fullscreen dialogs add safe-area protection to the default padding fallback
+ * while preserving explicit prop/theme padding overrides, and fade in without
+ * the centered-dialog translate/scale motion.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
@@ -47,6 +54,19 @@ export interface DialogPosition extends DialogBlockPosition {
     /** Logical inline-end offset (`inset-inline-end`); mirrors under RTL. */
     end?: number | string;
 }
+/** @internal Verified by Dialog.test.tsx; not re-exported from the package entry point. */
+export declare const dialogFullscreenSafeAreaPaddingContract: {
+    readonly blockStart: string;
+    readonly blockEnd: string;
+    readonly inlineStart: {
+        readonly ltr: string;
+        readonly rtl: string;
+    };
+    readonly inlineEnd: {
+        readonly ltr: string;
+        readonly rtl: string;
+    };
+};
 /**
  * Map a {@link DialogPosition} to resolved CSS offsets. Logical `start`/`end`
  * become `inset-inline-*` (mirror under RTL); each unset offset falls back to
@@ -99,7 +119,7 @@ export interface DialogProps extends BaseProps<HTMLDialogElement> {
      * The actual height will be the height of its content.
      * Numbers are treated as pixels, strings are used as-is.
      * Ignored when variant is 'fullscreen'.
-     * @default '75vh'
+     * @default '75dvh'
      */
     maxHeight?: number | string;
     /**

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA6Sb;yBA7Te,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAuB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAkJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAiTb;yBAjUe,MAAM"}