@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/DatePicker/parts.tsx

@@ -3,6 +3,7 @@ import {
   ensureFocusVisibleRing,
   formatAbsoluteDate,
   getMonthNames,
+  useAccentOnSurface,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import {
@@ -16,21 +17,11 @@ import {
 } from "react";
 import { AnimatePresence, Text, View, isWeb } from "tamagui";
 
-import { Button } from "../../Button";
 import { FloatingPanel } from "../../FloatingPanel";
-import { FocusContext, Input as InputParts } from "../../InputParts";
+import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 
-/**
- * The knob focus ring must be CSS-driven on the focused trigger input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. The Box ring
- * is suppressed via this no-op FocusContext so the trigger shows exactly one
- * ring — same pattern as OTPInput/Stepper/Input.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -179,13 +170,384 @@ export function isSameDay(a: Date | null | undefined, b: Date | null | undefined
 
 /**
  * Day cells are circular by default; at the "none" borderRadius knob they go
- * square (binary-pointy, same contract as Switch/Radio). Uses an inline style
- * because the `circular` variant's expansion wins over a plain borderRadius prop.
+ * square (binary-pointy, same contract as Switch/Radio). Inline style so a
+ * consumer `circular` variant cannot expand past the nested-control box.
  */
 export function dayCellRadius(knobProps: {
   pointy?: boolean;
-}): { style: { borderRadius: number } } | undefined {
-  return knobProps.pointy ? { style: { borderRadius: 0 } } : undefined;
+}): { style: { borderRadius: number } } {
+  return { style: { borderRadius: knobProps.pointy ? 0 : 9999 } };
+}
+
+/** Calendar chrome sits one density step below the page (LC-73). */
+export function useCalendarKnobs() {
+  return useResolvedKnobs({ compact: true });
+}
+
+/** Overlay/dialog calendar frame: compact padding + a 7-cell content width. */
+export function CalendarPanelFrame({ children }: { children: ReactNode }) {
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
+  return (
+    <View
+      flexDirection="column"
+      alignItems="center"
+      {...knobProps.gap}
+      width={px * 7}
+      alignSelf="center"
+      {...knobProps.panelPadding}
+      data-testid="date-picker-calendar"
+    >
+      {children}
+    </View>
+  );
+}
+
+function splitNestedControl(nested: {
+  px: number;
+  hitSlop: { top: number; bottom: number; left: number; right: number };
+  width: number;
+  height: number;
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+}) {
+  const { px, hitSlop, ...box } = nested;
+  return { px, hitSlop, box };
+}
+
+function calendarKeyHandler(onPress: () => void) {
+  return (e: { key?: string; preventDefault?: () => void }) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
+    }
+  };
+}
+
+export function CalendarChromeButton({
+  onPress,
+  label,
+  children,
+}: {
+  onPress: () => void;
+  label: string;
+  children: ReactNode;
+}) {
+  const { knobProps } = useCalendarKnobs();
+  const { hitSlop, box } = splitNestedControl(knobProps.nestedControl);
+  return (
+    <View
+      {...box}
+      role="button"
+      aria-label={label}
+      cursor="pointer"
+      alignItems="center"
+      justifyContent="center"
+      onPress={onPress}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing()}
+      {...(!isWeb ? { hitSlop } : {})}
+      {...(isWeb
+        ? { tabIndex: 0, onKeyDown: calendarKeyHandler(onPress) as unknown as () => void }
+        : { accessible: true })}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function CalendarTextButton({
+  onPress,
+  children,
+}: {
+  onPress: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <View
+      role="button"
+      cursor="pointer"
+      paddingVertical={2}
+      paddingHorizontal={4}
+      onPress={onPress}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing()}
+      {...(isWeb
+        ? { tabIndex: 0, onKeyDown: calendarKeyHandler(onPress) as unknown as () => void }
+        : { accessible: true })}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function CalendarDaySlot({ children }: { children?: ReactNode }) {
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
+  return (
+    <View width={px} height={px} justifyContent="center" alignItems="center" position="relative">
+      {children}
+    </View>
+  );
+}
+
+export function CalendarWeekRow({ children }: { children: ReactNode }) {
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
+  return (
+    <View flexDirection="row" width={px * 7}>
+      {children}
+    </View>
+  );
+}
+
+export function CalendarDayCell({
+  day,
+  selected,
+  today,
+  disabled,
+  visible = true,
+  dimmed,
+  tabIndex,
+  onPress,
+  onKeyDown,
+  selectedBackground,
+}: {
+  day: Date;
+  selected?: boolean;
+  today?: boolean;
+  disabled?: boolean;
+  visible?: boolean;
+  dimmed?: boolean;
+  tabIndex?: number;
+  onPress: () => void;
+  onKeyDown?: (e: { key?: string; preventDefault?: () => void }) => void;
+  selectedBackground?: string;
+}) {
+  const { knobProps } = useCalendarKnobs();
+  const accentText = useAccentOnSurface();
+  const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
+
+  if (!visible) {
+    return <View width={px} height={px} />;
+  }
+
+  const showTodayMark = !!today && !selected;
+  const resolvedTabIndex = tabIndex ?? (disabled ? -1 : 0);
+
+  return (
+    <View
+      {...box}
+      {...dayCellRadius(knobProps)}
+      role="button"
+      aria-label={String(day.getDate())}
+      aria-disabled={disabled || undefined}
+      aria-pressed={selected || undefined}
+      aria-current={today ? "date" : undefined}
+      cursor={disabled ? "default" : "pointer"}
+      alignItems="center"
+      justifyContent="center"
+      onPress={() => {
+        if (!disabled) onPress();
+      }}
+      opacity={dimmed ? 0.45 : 1}
+      pointerEvents={disabled ? "none" : "auto"}
+      backgroundColor={selected ? (selectedBackground ?? "$background") : "transparent"}
+      theme={selected ? ("accent" as any) : undefined}
+      borderWidth={showTodayMark ? 2 : 0}
+      borderColor={showTodayMark ? accentText : "transparent"}
+      zIndex={1}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+      data-nested-px={px}
+      data-calendar-day={`${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`}
+      {...(!isWeb ? { hitSlop } : {})}
+      {...(isWeb
+        ? {
+            tabIndex: resolvedTabIndex,
+            onKeyDown: ((e: { key?: string; preventDefault?: () => void }) => {
+              calendarKeyHandler(onPress)(e);
+              onKeyDown?.(e);
+            }) as unknown as () => void,
+          }
+        : { accessible: true })}
+    >
+      <Text
+        {...knobProps.label}
+        {...knobProps.textWeight}
+        fontWeight={selected ? "bold" : knobProps.textWeight.fontWeight}
+        color={selected ? undefined : today ? accentText : formCommonColors.text}
+      >
+        {day.getDate()}
+      </Text>
+    </View>
+  );
+}
+
+export function CalendarDays({
+  calendarData,
+  minDate,
+  maxDate,
+  isSelected,
+  onSelect,
+  selectedBackground,
+  skipEmptyWeeks,
+  rangeStripe,
+  onToday,
+}: {
+  calendarData: CalendarData;
+  minDate?: Date;
+  maxDate?: Date;
+  isSelected: (day: Date) => boolean;
+  onSelect: (day: Date) => void;
+  selectedBackground?: string;
+  skipEmptyWeeks?: boolean;
+  rangeStripe?: (day: Date) => ReactNode;
+  onToday?: () => void;
+}) {
+  const { knobProps } = useCalendarKnobs();
+  const { animation, animationKey } = useDateAnimation(
+    `${calendarData.year}-${calendarData.month}`,
+  );
+  const weeks = toWeeks(calendarData.days);
+  const { px } = knobProps.nestedControl;
+
+  const [focusedDay, setFocusedDay] = useState<Date | null>(() => {
+    const selected = calendarData.days.find(
+      (day) => day.getMonth() === calendarData.month && isSelected(day),
+    );
+    const today = calendarData.days.find(
+      (day) => day.getMonth() === calendarData.month && isSameDay(calendarData.today, day),
+    );
+    return (
+      selected ??
+      today ??
+      calendarData.days.find((day) => day.getMonth() === calendarData.month) ??
+      null
+    );
+  });
+
+  useEffect(() => {
+    const selected = calendarData.days.find(
+      (day) => day.getMonth() === calendarData.month && isSelected(day),
+    );
+    const today = calendarData.days.find(
+      (day) => day.getMonth() === calendarData.month && isSameDay(calendarData.today, day),
+    );
+    setFocusedDay(
+      selected ??
+        today ??
+        calendarData.days.find((day) => day.getMonth() === calendarData.month) ??
+        null,
+    );
+  }, [calendarData.year, calendarData.month]);
+
+  const moveFocus = useCallback(
+    (from: Date, delta: number) => {
+      const idx = calendarData.days.findIndex((day) => isSameDay(day, from));
+      const next = calendarData.days[idx + delta];
+      if (!next) return;
+      setFocusedDay(next);
+      if (!isWeb) return;
+      const key = `${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`;
+      requestAnimationFrame(() => {
+        (document.querySelector(`[data-calendar-day="${key}"]`) as HTMLElement | null)?.focus?.();
+      });
+    },
+    [calendarData.days],
+  );
+
+  const todayOutOfRange =
+    (minDate != null && calendarData.today < minDate) ||
+    (maxDate != null && calendarData.today > maxDate);
+
+  return (
+    <AnimatePresence key={animationKey}>
+      <View
+        transition="medium"
+        {...animation}
+        alignSelf="center"
+        gap="$1"
+        width={px * 7}
+        role="grid"
+        aria-label={t("Calendar")}
+      >
+        <WeekView />
+        {weeks.map((week) => {
+          const hasCurrentMonthDay = week.some((d) => d.getMonth() === calendarData.month);
+          if (skipEmptyWeeks && !hasCurrentMonthDay) {
+            return <View key={week[0].toISOString()} height="$3" />;
+          }
+          return (
+            <CalendarWeekRow key={week[0].toISOString()}>
+              {week.map((day) => {
+                const key = day.toISOString();
+                const isCurrentMonth = day.getMonth() === calendarData.month;
+                const isToday = isSameDay(calendarData.today, day);
+                const isOutOfRange =
+                  (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
+                const isDisabled = isOutOfRange;
+                const cell = (
+                  <CalendarDayCell
+                    day={day}
+                    selected={isCurrentMonth && isSelected(day)}
+                    today={isToday}
+                    disabled={isDisabled}
+                    visible
+                    dimmed={!isCurrentMonth}
+                    tabIndex={isSameDay(focusedDay, day) ? 0 : -1}
+                    onPress={() => onSelect(day)}
+                    onKeyDown={(e) => {
+                      const delta =
+                        e.key === "ArrowLeft"
+                          ? -1
+                          : e.key === "ArrowRight"
+                            ? 1
+                            : e.key === "ArrowUp"
+                              ? -7
+                              : e.key === "ArrowDown"
+                                ? 7
+                                : 0;
+                      if (!delta) return;
+                      e.preventDefault?.();
+                      moveFocus(day, delta);
+                    }}
+                    selectedBackground={selectedBackground}
+                  />
+                );
+                if (!rangeStripe) {
+                  return <View key={key}>{cell}</View>;
+                }
+                return (
+                  <CalendarDaySlot key={key}>
+                    {rangeStripe(day)}
+                    {cell}
+                  </CalendarDaySlot>
+                );
+              })}
+            </CalendarWeekRow>
+          );
+        })}
+        {onToday ? (
+          <CalendarTextButton onPress={todayOutOfRange ? () => {} : onToday}>
+            <Text
+              {...knobProps.label}
+              {...knobProps.textWeight}
+              color={todayOutOfRange ? formCommonColors.muted : formCommonColors.text}
+              opacity={todayOutOfRange ? 0.5 : 1}
+            >
+              {t("Today")}
+            </Text>
+          </CalendarTextButton>
+        ) : null}
+      </View>
+    </AnimatePresence>
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -193,18 +555,17 @@ export function dayCellRadius(knobProps: {
 // ---------------------------------------------------------------------------
 
 export function WeekView() {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
   return (
-    <View flexDirection="row" {...knobProps.gap} width="100%">
+    <View flexDirection="row" width={px * 7} alignSelf="center">
       {weekdays.map((day) => (
         <Text
           key={day}
-          flex={1}
+          width={px}
           textAlign="center"
-          fontSize={knobProps.sizeToken}
-          // muted tier, not $placeholderColor: real text, AA 4.5:1 floor
           color={formCommonColors.muted}
-          {...knobProps.body}
+          {...knobProps.label}
           {...knobProps.textWeight}
         >
           {t(day)}
@@ -239,66 +600,43 @@ export function CalendarHeader({
   showPrev = true,
   showNext = true,
 }: CalendarHeaderProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
   return (
-    <View flexDirection="row" width="100%" alignItems="center" justifyContent="space-between">
+    <View
+      flexDirection="row"
+      width={px * 7}
+      alignSelf="center"
+      alignItems="center"
+      justifyContent="space-between"
+    >
       {showPrev && onPrevMonth ? (
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={onPrevMonth}
-          aria-label={t("Previous month")}
-        >
-          <Button.Icon>
-            <ChevronLeft />
-          </Button.Icon>
-        </Button>
+        <CalendarChromeButton onPress={onPrevMonth} label={t("Previous month")}>
+          <ChevronLeft size={16} />
+        </CalendarChromeButton>
       ) : (
-        <View width="$3" />
+        <View width={px} height={px} />
       )}
 
-      <View flexDirection="column" alignItems="center">
-        <Button onPress={onYearPress} chromeless padding={0}>
-          <Text
-            fontSize={knobProps.sizeToken}
-            // muted tier, not $placeholderColor: this is real text and
-            // $placeholderColor measured under the 4.5:1 AA floor
-            color={formCommonColors.muted}
-            {...knobProps.body}
-            {...knobProps.textWeight}
-          >
-            {year}
-          </Text>
-        </Button>
-        <Button onPress={onMonthPress} chromeless padding={0}>
-          <Text
-            fontSize={knobProps.sizeToken}
-            color="$color"
-            {...knobProps.body}
-            {...knobProps.textWeight}
-          >
+      <View flexDirection="row" alignItems="center" {...knobProps.gap}>
+        <CalendarTextButton onPress={onMonthPress}>
+          <Text color="$color" {...knobProps.label} {...knobProps.textWeight} fontWeight="600">
             {monthName}
           </Text>
-        </Button>
+        </CalendarTextButton>
+        <CalendarTextButton onPress={onYearPress}>
+          <Text color={formCommonColors.muted} {...knobProps.label} {...knobProps.textWeight}>
+            {year}
+          </Text>
+        </CalendarTextButton>
       </View>
 
       {showNext && onNextMonth ? (
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={onNextMonth}
-          aria-label={t("Next month")}
-        >
-          <Button.Icon>
-            <ChevronRight />
-          </Button.Icon>
-        </Button>
+        <CalendarChromeButton onPress={onNextMonth} label={t("Next month")}>
+          <ChevronRight size={16} />
+        </CalendarChromeButton>
       ) : (
-        <View width="$3" />
+        <View width={px} height={px} />
       )}
     </View>
   );
@@ -315,8 +653,10 @@ interface MonthGridProps {
 }
 
 export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGridProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
   const { animation, animationKey } = useDateAnimation(currentYear);
+  const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
+  const cellW = (px * 7) / 3;
 
   return (
     <AnimatePresence key={animationKey}>
@@ -325,30 +665,49 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
         transition="quick"
         flexDirection="row"
         flexWrap="wrap"
-        {...knobProps.gap}
-        width="100%"
+        width={px * 7}
+        alignSelf="center"
       >
         {months.map((name, index) => {
           const isSelected = selectedMonth === index;
           return (
-            <Button
+            <View
               key={name}
+              {...box}
+              width={cellW}
+              maxWidth={cellW}
+              minWidth={cellW}
+              height={px}
+              minHeight={px}
+              maxHeight={px}
+              role="button"
+              aria-pressed={isSelected || undefined}
+              cursor="pointer"
+              alignItems="center"
+              justifyContent="center"
               theme={isSelected ? ("accent" as any) : undefined}
-              borderRadius={knobProps.borderRadius.borderRadius}
-              flexBasis="30%"
-              flexGrow={1}
               backgroundColor={isSelected ? "$background" : "transparent"}
-              chromeless
-              padding={0}
               onPress={() => onSelectMonth(index)}
+              outlineWidth={0}
+              focusStyle={{ outlineWidth: 0 }}
+              focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+              data-nested-px={px}
+              {...(!isWeb ? { hitSlop } : {})}
+              {...(isWeb
+                ? {
+                    tabIndex: 0,
+                    onKeyDown: calendarKeyHandler(() => onSelectMonth(index)) as unknown as () => void,
+                  }
+                : { accessible: true })}
             >
               <Text
+                {...knobProps.label}
                 color={isSelected ? "$color" : formCommonColors.text}
                 fontWeight={isSelected ? "bold" : "400"}
               >
                 {t(name.slice(0, 3))}
               </Text>
-            </Button>
+            </View>
           );
         })}
       </View>
@@ -375,7 +734,9 @@ export function YearGrid({
   onPrevPage,
   onNextPage,
 }: YearGridProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
+  const cellW = (px * 7) / 3;
   const years = useMemo(() => {
     const result: number[] = [];
     for (let i = 0; i < yearPageSize; i++) {
@@ -387,35 +748,17 @@ export function YearGrid({
   const { animation, animationKey } = useDateAnimation(yearPageStart);
 
   return (
-    <View width="100%" {...knobProps.gapLg}>
-      <View flexDirection="row" width="100%" alignItems="center" justifyContent="space-between">
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={onPrevPage}
-          aria-label={t("Previous years")}
-        >
-          <Button.Icon>
-            <ChevronLeft />
-          </Button.Icon>
-        </Button>
-        <Text fontSize={knobProps.sizeToken} {...knobProps.body} {...knobProps.textWeight}>
+    <View width={px * 7} alignSelf="center" {...knobProps.gap}>
+      <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
+        <CalendarChromeButton onPress={onPrevPage} label={t("Previous years")}>
+          <ChevronLeft size={16} />
+        </CalendarChromeButton>
+        <Text {...knobProps.label} {...knobProps.textWeight}>
           {years[0]} – {years[years.length - 1]}
         </Text>
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={onNextPage}
-          aria-label={t("Next years")}
-        >
-          <Button.Icon>
-            <ChevronRight />
-          </Button.Icon>
-        </Button>
+        <CalendarChromeButton onPress={onNextPage} label={t("Next years")}>
+          <ChevronRight size={16} />
+        </CalendarChromeButton>
       </View>
 
       <AnimatePresence key={animationKey}>
@@ -424,30 +767,48 @@ export function YearGrid({
           transition="quick"
           flexDirection="row"
           flexWrap="wrap"
-          {...knobProps.gap}
-          width="100%"
+          width={px * 7}
         >
           {years.map((year) => {
             const isSelected = year === selectedYear;
             return (
-              <Button
+              <View
                 key={year}
+                {...box}
+                width={cellW}
+                maxWidth={cellW}
+                minWidth={cellW}
+                height={px}
+                minHeight={px}
+                maxHeight={px}
+                role="button"
+                aria-pressed={isSelected || undefined}
+                cursor="pointer"
+                alignItems="center"
+                justifyContent="center"
                 theme={isSelected ? ("accent" as any) : undefined}
-                borderRadius={knobProps.borderRadius.borderRadius}
-                flexBasis="30%"
-                flexGrow={1}
                 backgroundColor={isSelected ? "$background" : "transparent"}
-                chromeless
-                padding={0}
                 onPress={() => onSelectYear(year)}
+                outlineWidth={0}
+                focusStyle={{ outlineWidth: 0 }}
+                focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+                data-nested-px={px}
+                {...(!isWeb ? { hitSlop } : {})}
+                {...(isWeb
+                  ? {
+                      tabIndex: 0,
+                      onKeyDown: calendarKeyHandler(() => onSelectYear(year)) as unknown as () => void,
+                    }
+                  : { accessible: true })}
               >
                 <Text
+                  {...knobProps.label}
                   color={isSelected ? "$color" : formCommonColors.text}
                   fontWeight={isSelected ? "bold" : "400"}
                 >
                   {year}
                 </Text>
-              </Button>
+              </View>
             );
           })}
         </View>
@@ -464,6 +825,7 @@ interface DatePickerInputTriggerProps {
   value: string;
   placeholder: string;
   disabled?: boolean;
+  open?: boolean;
   onReset: () => void;
   onButtonPress: () => void;
   error?: boolean;
@@ -475,107 +837,104 @@ interface DatePickerInputTriggerProps {
   "aria-invalid"?: boolean;
 }
 
-export const DatePickerInputTrigger = InputParts.Area.styleable<DatePickerInputTriggerProps>(
-  (triggerProps, ref) => {
-    const {
-      value,
-      onButtonPress,
-      onReset,
-      disabled,
-      placeholder,
-      error,
-      id,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      ...props
-    } = triggerProps;
-    // Clear is rendered via FloatingPanel `triggerEnd` by callers that need a
-    // live clear control on native (pointerEvents="none" on the open trigger).
-    // Here we keep a compact clear for web; on native FloatingPanel owns open
-    // and a second onPress would double-toggle the sheet closed.
-    const { control } = useResolvedKnobs();
-    // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-    const areaFocusRing = ensureFocusVisibleRing({
-      ...control.focusVisibleKnobProps,
-      outlineOffset: -2,
-    });
-    return (
-      // LC-40: the disabled Box below is pointerEvents-none, so the cursor
-      // affordance must ride this wrapper — the fragment's not-allowed never
-      // reaches the pointer otherwise (the wrapper kept advertising
-      // "pointer" on a disabled field).
-      <View
-        flexDirection="row"
-        alignItems="center"
-        width="100%"
-        cursor={disabled ? "not-allowed" : "pointer"}
+export function DatePickerInputTrigger({
+  value,
+  onButtonPress,
+  onReset,
+  disabled,
+  placeholder,
+  error,
+  id,
+  open,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+}: DatePickerInputTriggerProps) {
+  const handleTriggerKey = (e: { key?: string; code?: string; preventDefault?: () => void }) => {
+    if (disabled) return;
+    const key = e.key;
+    if (key === "Enter" || key === " " || key === "ArrowDown" || e.code === "Space") {
+      e.preventDefault?.();
+      onButtonPress();
+      return;
+    }
+    if ((key === "Backspace" || key === "Delete") && value) {
+      e.preventDefault?.();
+      onReset();
+    }
+  };
+
+  return (
+    // LC-40: the disabled Box below is pointerEvents-none, so the cursor
+    // affordance must ride this wrapper — the fragment's not-allowed never
+    // reaches the pointer otherwise (the wrapper kept advertising
+    // "pointer" on a disabled field).
+    <View
+      flexDirection="row"
+      alignItems="center"
+      width="100%"
+      cursor={disabled ? "not-allowed" : "pointer"}
+    >
+      <InputParts.Box
+        theme={error ? "red" : undefined}
+        // Elevation is an overlay recipe: it belongs on the open panel, never
+        // on the closed text-field trigger.
+        elevation={undefined}
+        data-testid="date-picker-trigger"
+        id={id}
+        onPress={isWeb && !disabled ? onButtonPress : undefined}
+        {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
+        {...(isWeb
+          ? {
+              role: "combobox" as const,
+              "aria-haspopup": "dialog",
+              "aria-expanded": !!open,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-required": ariaRequired,
+              "aria-invalid": ariaInvalid,
+              tabIndex: disabled ? -1 : 0,
+              onKeyDown: handleTriggerKey as unknown as () => void,
+            }
+          : undefined)}
       >
-        <View flex={1} minWidth={0} onPress={isWeb && !disabled ? onButtonPress : undefined}>
-          <InputParts.Box
-            theme={error ? "red" : undefined}
-            // Elevation is an overlay recipe: it belongs on the open panel, never
-            // on the closed text-field trigger.
-            elevation={undefined}
-            onPress={isWeb && !disabled ? onButtonPress : undefined}
-            {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-          >
-            <InputParts.Section>
-              <FocusContext.Provider {...suppressBoxFocusRing}>
-                <InputParts.Area
-                  readOnly
-                  pointerEvents="none"
-                  value={value}
-                  ref={ref}
-                  id={id}
-                  placeholder={placeholder}
-                  disabled={disabled}
-                  color={formCommonColors.text}
-                  focusStyle={areaFocusRing}
-                  focusVisibleStyle={areaFocusRing}
-                  aria-label={ariaLabel}
-                  aria-labelledby={ariaLabelledBy}
-                  aria-describedby={ariaDescribedBy}
-                  onKeyPress={
-                    disabled
-                      ? undefined
-                      : (e: any) => {
-                          const key = e?.nativeEvent?.key ?? e?.key;
-                          if (key === "Enter" || key === " " || key === "Spacebar") {
-                            e?.preventDefault?.();
-                            onButtonPress();
-                          }
-                        }
-                  }
-                  {...(props as any)}
-                />
-              </FocusContext.Provider>
-            </InputParts.Section>
-            <InputParts.Section>
-              {value ? (
-                <InputParts.Button
-                  aria-label={t("Clear date")}
-                  onPress={(e) => {
-                    e.stopPropagation();
-                    onReset();
-                  }}
-                >
-                  <InputParts.Icon>
-                    <X />
-                  </InputParts.Icon>
-                </InputParts.Button>
-              ) : (
-                <InputParts.Icon adornment="trailing">
-                  <Calendar />
-                </InputParts.Icon>
-              )}
-            </InputParts.Section>
-          </InputParts.Box>
-        </View>
-      </View>
-    );
-  },
-);
+        <InputParts.Section>
+          <InputParts.Area
+            readOnly
+            pointerEvents="none"
+            tabIndex={-1}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            color={formCommonColors.text}
+          />
+        </InputParts.Section>
+        <InputParts.Section>
+          {value ? (
+            <InputParts.Button
+              aria-label={t("Clear date")}
+              onPress={(e) => {
+                e.stopPropagation();
+                onReset();
+              }}
+            >
+              <InputParts.Icon>
+                <X />
+              </InputParts.Icon>
+            </InputParts.Button>
+          ) : (
+            <InputParts.Icon adornment="trailing">
+              <Calendar />
+            </InputParts.Icon>
+          )}
+        </InputParts.Section>
+      </InputParts.Box>
+    </View>
+  );
+}
 
 // ---------------------------------------------------------------------------
 // DatePickerPopoverShell — Popover + Adapt/Sheet wrapper
@@ -610,7 +969,7 @@ export function DatePickerPopoverShell({
       triggerEnd={triggerEnd}
       disabled={disabled}
       scrollable
-      sizing="fill"
+      sizing="grow"
       fitContent
       triggerA11y={triggerA11y}
     >
@@ -644,7 +1003,7 @@ export function CalendarViewSwitcher({
   setYearPageStart,
   children,
 }: CalendarViewSwitcherProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
   const handleSelectMonth = useCallback(
     (month: number) => {
       const newDate = new Date(displayDate);
@@ -667,19 +1026,8 @@ export function CalendarViewSwitcher({
 
   if (viewMode === "month") {
     return (
-      <View
-        flexDirection="column"
-        alignItems="center"
-        {...knobProps.gapLg}
-        width="100%"
-        {...knobProps.panelPadding}
-      >
-        <Text
-          fontSize={knobProps.sizeToken}
-          alignSelf="center"
-          {...knobProps.body}
-          {...knobProps.textWeight}
-        >
+      <CalendarPanelFrame>
+        <Text alignSelf="center" {...knobProps.label} {...knobProps.textWeight}>
           Select a month
         </Text>
         <MonthGrid
@@ -687,19 +1035,13 @@ export function CalendarViewSwitcher({
           selectedMonth={calendarData.month}
           onSelectMonth={handleSelectMonth}
         />
-      </View>
+      </CalendarPanelFrame>
     );
   }
 
   if (viewMode === "year") {
     return (
-      <View
-        flexDirection="column"
-        alignItems="center"
-        {...knobProps.gapLg}
-        width="100%"
-        {...knobProps.panelPadding}
-      >
+      <CalendarPanelFrame>
         <YearGrid
           yearPageStart={yearPageStart}
           selectedYear={calendarData.year}
@@ -707,7 +1049,7 @@ export function CalendarViewSwitcher({
           onPrevPage={() => setYearPageStart((s) => s - yearPageSize)}
           onNextPage={() => setYearPageStart((s) => s + yearPageSize)}
         />
-      </View>
+      </CalendarPanelFrame>
     );
   }