@sixthshift/design-system 0.3.0 → 0.4.0

package/src/components/Code/Editor/Editor.tsx

@@ -5,7 +5,7 @@ import { useCallback, useRef } from "react";
 import { useTheme } from "../../../hooks/useTheme";
 import type { ValidationError } from "../ValidationStatus";
 import { createSemanticTokensProvider, workerExtensionUrl } from "./semanticTokenProvider";
-import { defineThemes, PA_THEME_DARK, PA_THEME_LIGHT } from "./themes";
+import { defineThemes, EDITOR_THEME_DARK, EDITOR_THEME_LIGHT } from "./themes";
 
 let semanticTokensRegistered = false;
 function registerSemanticTokenProviders(monaco: typeof import("monaco-editor")) {
@@ -51,7 +51,7 @@ export type EditorProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
  */
 export const Editor = ({ value, onChange, onValidate, readOnly = false, className, typeDefinitions, compilerOptions = {}, ...props }: EditorProps) => {
   const { resolvedTheme } = useTheme();
-  const monacoTheme = resolvedTheme === "dark" ? PA_THEME_DARK : PA_THEME_LIGHT;
+  const monacoTheme = resolvedTheme === "dark" ? EDITOR_THEME_DARK : EDITOR_THEME_LIGHT;
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
   const handleEditorDidMount = useCallback(

package/src/components/Code/Editor/themes.ts

@@ -1,40 +1,58 @@
 import type { editor } from "monaco-editor";
 
-export const PA_THEME_LIGHT = "pa-light";
-export const PA_THEME_DARK = "pa-dark";
+export const EDITOR_THEME_LIGHT = "ds-light";
+export const EDITOR_THEME_DARK = "ds-dark";
 
+/**
+ * The token palettes are One Light and One Dark, with every colour raised to
+ * 4.5:1 against the worst background it can land on — which is the active line's
+ * highlight, not the editor background, since that is the darker (light theme)
+ * or lighter (dark theme) of the two.
+ *
+ * Stock One Light fails that on 21 of its 25 token colours: syntax highlighting
+ * is text as far as axe is concerned, so it carries the full 4.5:1 obligation
+ * rather than the 3:1 that non-text contrast gets. Hue and saturation are kept;
+ * only lightness moves, and only as far as it has to. The most visible
+ * consequence is that comments recede less than in stock One Light — #a0a1a7
+ * managed 2.30.
+ *
+ * `scripts/check-contrast.ts` covers the design system's own tokens; these are
+ * Monaco's, so they are checked by the editor stories' a11y run instead. A story
+ * with a play function is what exercises it: without one, axe runs before Monaco
+ * has painted and sees nothing to measure.
+ */
 const lightTheme: editor.IStandaloneThemeData = {
   base: "vs",
   inherit: true,
   rules: [
     // Monarch tokenizer rules
-    { token: "comment", foreground: "a0a1a7", fontStyle: "italic" },
+    { token: "comment", foreground: "6b6c73", fontStyle: "italic" },
     { token: "keyword", foreground: "a626a4" },
-    { token: "string", foreground: "50a14f" },
-    { token: "number", foreground: "986801" },
+    { token: "string", foreground: "3c7a3c" },
+    { token: "number", foreground: "906301" },
     { token: "delimiter", foreground: "383a42" },
     { token: "delimiter.bracket", foreground: "383a42" },
-    { token: "tag", foreground: "e45649" },
-    { token: "attribute.name", foreground: "986801" },
-    { token: "attribute.value", foreground: "50a14f" },
-    { token: "operator", foreground: "0184bc" },
-    { token: "identifier", foreground: "e45649" },
+    { token: "tag", foreground: "cf2d1f" },
+    { token: "attribute.name", foreground: "906301" },
+    { token: "attribute.value", foreground: "3c7a3c" },
+    { token: "operator", foreground: "0174a5" },
+    { token: "identifier", foreground: "cf2d1f" },
 
     // Semantic token rules (TypeScript language service)
-    { token: "variable", foreground: "e45649" },
-    { token: "variable.readonly", foreground: "986801" },
+    { token: "variable", foreground: "cf2d1f" },
+    { token: "variable.readonly", foreground: "906301" },
     { token: "parameter", foreground: "383a42" },
-    { token: "property", foreground: "e45649" },
-    { token: "property.readonly", foreground: "986801" },
-    { token: "function", foreground: "4078f2" },
-    { token: "method", foreground: "4078f2" },
-    { token: "type", foreground: "c18401" },
-    { token: "type.identifier", foreground: "c18401" },
-    { token: "class", foreground: "c18401" },
-    { token: "interface", foreground: "c18401" },
-    { token: "enum", foreground: "c18401" },
-    { token: "enumMember", foreground: "986801" },
-    { token: "namespace", foreground: "e45649" },
+    { token: "property", foreground: "cf2d1f" },
+    { token: "property.readonly", foreground: "906301" },
+    { token: "function", foreground: "2162f0" },
+    { token: "method", foreground: "2162f0" },
+    { token: "type", foreground: "916301" },
+    { token: "type.identifier", foreground: "916301" },
+    { token: "class", foreground: "916301" },
+    { token: "interface", foreground: "916301" },
+    { token: "enum", foreground: "916301" },
+    { token: "enumMember", foreground: "906301" },
+    { token: "namespace", foreground: "cf2d1f" },
   ],
   colors: {
     "editor.background": "#fafafa",
@@ -60,23 +78,23 @@ const darkTheme: editor.IStandaloneThemeData = {
   inherit: true,
   rules: [
     // Monarch tokenizer rules
-    { token: "comment", foreground: "5c6370", fontStyle: "italic" },
-    { token: "keyword", foreground: "c678dd" },
+    { token: "comment", foreground: "939aa6", fontStyle: "italic" },
+    { token: "keyword", foreground: "c97edf" },
     { token: "string", foreground: "98c379" },
     { token: "number", foreground: "d19a66" },
     { token: "delimiter", foreground: "abb2bf" },
     { token: "delimiter.bracket", foreground: "abb2bf" },
-    { token: "tag", foreground: "e06c75" },
+    { token: "tag", foreground: "e37b83" },
     { token: "attribute.name", foreground: "d19a66" },
     { token: "attribute.value", foreground: "98c379" },
     { token: "operator", foreground: "56b6c2" },
-    { token: "identifier", foreground: "e06c75" },
+    { token: "identifier", foreground: "e37b83" },
 
     // Semantic token rules (TypeScript language service)
-    { token: "variable", foreground: "e06c75" },
+    { token: "variable", foreground: "e37b83" },
     { token: "variable.readonly", foreground: "d19a66" },
     { token: "parameter", foreground: "abb2bf" },
-    { token: "property", foreground: "e06c75" },
+    { token: "property", foreground: "e37b83" },
     { token: "property.readonly", foreground: "d19a66" },
     { token: "function", foreground: "61afef" },
     { token: "method", foreground: "61afef" },
@@ -86,7 +104,7 @@ const darkTheme: editor.IStandaloneThemeData = {
     { token: "interface", foreground: "e5c07b" },
     { token: "enum", foreground: "e5c07b" },
     { token: "enumMember", foreground: "d19a66" },
-    { token: "namespace", foreground: "e06c75" },
+    { token: "namespace", foreground: "e37b83" },
   ],
   colors: {
     "editor.background": "#282c34",
@@ -107,6 +125,6 @@ const darkTheme: editor.IStandaloneThemeData = {
 };
 
 export function defineThemes(monaco: typeof import("monaco-editor")) {
-  monaco.editor.defineTheme(PA_THEME_LIGHT, lightTheme);
-  monaco.editor.defineTheme(PA_THEME_DARK, darkTheme);
+  monaco.editor.defineTheme(EDITOR_THEME_LIGHT, lightTheme);
+  monaco.editor.defineTheme(EDITOR_THEME_DARK, darkTheme);
 }

package/src/components/Code/ValidationStatus/ValidationStatus.tsx

@@ -1,7 +1,7 @@
-import { Message } from "@sixthshift/design-system/message";
+import { Message, type MessageIntentName } from "@sixthshift/design-system/message";
 import { cn } from "@sixthshift/design-system/utils";
 import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 
 export type ValidationError = {
   line: number;
@@ -16,7 +16,10 @@ export type ValidationStatusProps = HTMLAttributes<HTMLDivElement> & {
   maxRows?: number;
 };
 
-type Intent = NonNullable<ComponentProps<typeof Message>["intent"]>;
+// The closed union, not `ComponentProps<typeof Message>["intent"]`: that is now
+// widened to admit any string so consumers can add intents in CSS, which would
+// silently let a typo through this map.
+type Intent = MessageIntentName;
 
 const SEVERITY_INTENT: Record<ValidationError["severity"], Intent> = {
   error: "danger",

package/src/components/DatePicker/DatePicker.tsx

@@ -3,7 +3,7 @@ import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { Calendar as CalendarIcon, X } from "lucide-react";
 import * as React from "react";
-import { useCallback, useId, useMemo, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import {
   adaptDisabledDates,
   fromISODate,
@@ -18,8 +18,11 @@ import {
   toISODateOrUndefined,
   toISODateRange,
 } from "../../date-time";
+import { PickerField } from "../../internal";
 import { CalendarView } from "../Calendar/CalendarView";
+import { isDateDisabled } from "../Calendar/calendar.hooks";
 import type { PresetOption } from "../Calendar/calendar.types";
+import { DateSegments } from "./DateSegments";
 import { defaultFormatDisplay, getDisplayValue, temporalToISO } from "./datepicker.hooks";
 import type { DatePickerProps, DateRangeValue } from "./datepicker.types";
 
@@ -35,6 +38,49 @@ function toTemporal(mode: DatePickerProps["mode"], value: ISODate | ISODateRange
   return fromISODateOrUndefined(value as ISODate | undefined);
 }
 
+/**
+ * A typeable date field and a `Calendar` popover, as one control. `mode`
+ * (`"single" | "range" | "multiple"`, default `"single"`) decides the shape of
+ * `value`/`defaultValue`/`onChange`: an `ISODate` string, an `ISODateRange`
+ * (`{ from?, to? }`), or an `ISODate[]`.
+ *
+ * In `single` mode the field is three `role="spinbutton"` segments rather than a
+ * text box. It is built to be typed straight through: `152026` is January the
+ * 5th 2026, because a digit that cannot extend the segment being typed rolls
+ * into the next one instead of restarting it. Separators (`/`, `-`, `.`) say
+ * done-with-this-one, arrows step a segment, `Backspace` takes back one digit
+ * (then clears, then steps back), `Alt+ArrowDown` opens the grid and moves focus
+ * there, and a paste fills all three. Segments rather than free
+ * text because `08/09` cannot be read without knowing the order: `segmentOrder`
+ * (default `mdy`) says which, the labels say it to a screen reader, and no
+ * parser has to guess. `range` and `multiple` keep the read-only text trigger —
+ * a list of dates has no sensible typed form.
+ *
+ * Typing and picking move one value. The segments show the draft while the
+ * popover is open and the committed value while it is closed, so typing a date
+ * moves the grid to it and picking a day shows up in the segments. The commit
+ * contract stays single: while the popover is open its Apply/Cancel owns the
+ * value (`Enter` in a segment is Apply); while it is closed, a date commits as
+ * soon as all three segments describe one. A partial date is never reported —
+ * clearing a segment reports `undefined`.
+ *
+ * Supports both controlled (`value`/`onChange`) and uncontrolled
+ * (`defaultValue`) use. Opening the popover seeds a draft from the committed
+ * value; picking a date only updates the draft; the footer's Apply commits it
+ * and closes, Cancel discards it and reverts to the last committed value. The
+ * clear button (hidden when `clearable={false}`) bypasses the draft and
+ * commits immediately.
+ *
+ * `minDate`/`maxDate` bound selectable dates inclusively; `disabled` accepts a
+ * single date, a list, or a declarative matcher (before/after/range/weekday)
+ * or predicate — see `DisabledDates`. `presets` renders a sidebar of quick
+ * picks whose values must match `mode`. When `name` is set, the committed
+ * value is mirrored into hidden `<input>`s for native form submission
+ * (`name.from`/`name.to` in range mode, `name[]` per entry in multiple mode).
+ *
+ * Keyboard interaction — arrow keys/Home/End/PageUp/PageDown on the day
+ * grid — is inherited from `Calendar`.
+ */
 export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
   const {
     mode = "single",
@@ -50,6 +96,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
     className,
     align = "end",
     clearable = true,
+    segmentOrder = "mdy",
   } = props;
 
   // Get mode-specific props
@@ -60,6 +107,9 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
 
   // Open state
   const [open, setOpen] = useState(false);
+  // Whether the day grid should take focus when the popover mounts — true only
+  // when the popover was opened from the keyboard. See `openWithGridFocus`.
+  const [autoFocusDay, setAutoFocusDay] = useState(false);
 
   // ---------------------------------------------------------------------------
   // The ISO boundary.
@@ -127,6 +177,8 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
     (newOpen: boolean) => {
       if (newOpen) {
         setDraftValue(committedValue);
+      } else {
+        setAutoFocusDay(false);
       }
       setOpen(newOpen);
     },
@@ -219,35 +271,233 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
 
   const rangeFormValues = getRangeFormValues();
 
+  // ---------------------------------------------------------------------------
+  // The typeable field (single mode).
+  //
+  // One value, two ways to move it. The segments show the draft while the
+  // popover is open and the committed value while it is closed, which is what
+  // makes typing and clicking feel like one control: type a date and the grid
+  // follows it, click a day and the segments follow that. The commit contract
+  // stays single — open means the popover's Apply/Cancel owns it, closed means a
+  // complete date commits as soon as it is complete.
+  // ---------------------------------------------------------------------------
+
+  const segmentSource = open ? draftValue : committedValue;
+  const segmentValue = isPlainDate(segmentSource) ? segmentSource : undefined;
+
+  /**
+   * A typed date can be one the grid would refuse — nothing stops you typing
+   * past `maxDate`. Rather than silently clamping it (which loses what was
+   * typed) or refusing it (which strands the field mid-edit), the field says so:
+   * `aria-invalid` and the danger border, with the value still reported so the
+   * caller's own validation sees the attempt.
+   */
+  const outOfBounds = useCallback(
+    (date: Temporal.PlainDate | undefined) => date !== undefined && isDateDisabled(date, temporalDisabled, temporalMinDate, temporalMaxDate),
+    [temporalDisabled, temporalMaxDate, temporalMinDate]
+  );
+
+  const handleSegmentsChange = useCallback(
+    (date: Temporal.PlainDate | undefined) => {
+      // Keep the grid on the month being typed, so opening it lands where the
+      // user already is rather than on today.
+      if (date) setMonth(date);
+      if (open) {
+        setDraftValue(date);
+        return;
+      }
+      setCommittedValue(date as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[]);
+    },
+    [open, setCommittedValue]
+  );
+
+  /** `Alt+ArrowDown` from a segment: open the grid *and* go there. */
+  const openWithGridFocus = useCallback(() => {
+    setAutoFocusDay(true);
+    handleOpenChange(true);
+  }, [handleOpenChange]);
+
+  /** `Enter` in a segment commits the draft, matching the popover's Apply. */
+  const handleFieldSubmit = useCallback(() => {
+    if (open) handleApply();
+  }, [handleApply, open]);
+
+  // ---------------------------------------------------------------------------
+  // Range mode: two fields, not one.
+  //
+  // A range is two dates, and typing one of them should not require knowing
+  // where the other ends. Each half is its own segmented field with its own
+  // clear button; they share the one popover, which anchors to whichever half
+  // you are in so it opens under the date you are editing.
+  // ---------------------------------------------------------------------------
+
+  const rangeSource = (open ? draftValue : committedValue) as DateRangeValue | undefined;
+
+  const setRangeEnd = useCallback(
+    (end: "from" | "to", date: Temporal.PlainDate | undefined) => {
+      if (date) setMonth(date);
+      const current = (open ? draftValue : committedValue) as DateRangeValue | undefined;
+      const next: DateRangeValue = { from: current?.from, to: current?.to, [end]: date };
+      if (open) {
+        setDraftValue(next);
+        return;
+      }
+      setCommittedValue(next as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[]);
+    },
+    [committedValue, draftValue, open, setCommittedValue]
+  );
+
+  const clearRangeEnd = useCallback(
+    (end: "from" | "to") => (event: React.MouseEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const existing = committedValue as DateRangeValue | undefined;
+      const next: DateRangeValue = {
+        from: end === "from" ? undefined : existing?.from,
+        to: end === "to" ? undefined : existing?.to,
+      };
+      // Clearing the last remaining end clears the range itself, so a consumer
+      // gets `undefined` rather than a husk with two empty ends.
+      const cleared = !next.from && !next.to;
+      setCommittedValue((cleared ? undefined : next) as Temporal.PlainDate | DateRangeValue | Temporal.PlainDate[]);
+    },
+    [committedValue, setCommittedValue]
+  );
+
+  // The popover anchors to the half being edited, so it opens under the date in
+  // question rather than under the middle of a wide trigger.
+  const rangeHalves = useRef<Record<"from" | "to", HTMLDivElement | null>>({ from: null, to: null });
+  const anchorToHalf = useCallback(
+    (end: "from" | "to") => {
+      const node = rangeHalves.current[end];
+      if (node) refs.setPositionReference(node);
+    },
+    [refs]
+  );
+
+  /**
+   * One end of the range. A render function rather than a component so the
+   * fields are not remounted — and so focus is not dropped — on every keystroke.
+   */
+  const renderRangeHalf = (end: "from" | "to", label: string) => {
+    const shown = end === "from" ? rangeSource?.from : rangeSource?.to;
+    const settled = end === "from" ? (committedValue as DateRangeValue | undefined)?.from : (committedValue as DateRangeValue | undefined)?.to;
+
+    return (
+      <PickerField
+        ref={(node) => {
+          rangeHalves.current[end] = node;
+        }}
+        onFocusCapture={() => anchorToHalf(end)}
+        className="min-w-45 flex-1"
+        icon={<CalendarIcon className="h-4 w-4" />}
+        toggleLabel={`Open calendar for ${label.toLowerCase()}`}
+        // Both handlers have to run: Floating UI's opens the popover, and ours
+        // points it at this half. Spreading after `onClick` would drop ours on
+        // the floor, which is how the popover ended up anchored to the whole
+        // trigger.
+        toggleProps={getReferenceProps({ onClick: () => anchorToHalf(end) })}
+        isOpen={open}
+        contentId={contentId}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid || outOfBounds(shown)}
+        onClear={clearable && settled && !isDisabled ? clearRangeEnd(end) : undefined}
+        clearLabel={`Clear ${label.toLowerCase()}`}
+      >
+        <DateSegments
+          className="h-full flex-1"
+          label={label}
+          value={shown}
+          onChange={(date) => setRangeEnd(end, date)}
+          order={segmentOrder}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid || outOfBounds(shown)}
+          onOpenRequest={() => {
+            anchorToHalf(end);
+            openWithGridFocus();
+          }}
+          onSubmit={handleFieldSubmit}
+        />
+      </PickerField>
+    );
+  };
+
   return (
     <>
       {/* Trigger Input */}
-      <div ref={ref} className={cn("relative flex items-center", mode === "range" && "min-w-91.25", mode !== "range" && "min-w-65")}>
-        <CalendarIcon className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
-        <input
-          ref={refs.setReference as React.Ref<HTMLInputElement>}
-          id={inputId}
-          type="text"
-          readOnly
-          value={displayValue}
-          placeholder={placeholder}
-          disabled={isDisabled}
-          role="combobox"
-          aria-invalid={isInvalid}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          aria-controls={open ? contentId : undefined}
-          className={cn(
-            `flex h-9 w-full cursor-pointer rounded-md border border-border-normal bg-transparent py-1 pl-9 text-sm shadow-xs transition-colors placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
-            mode === "range" && "min-w-91.25",
-            mode !== "range" && "min-w-65",
-            clearable && hasValue ? "pr-9" : "pr-3",
-            isInvalid && "border-border-danger",
-            className
-          )}
-          {...getReferenceProps()}
-        />
-        {clearable && hasValue && !isDisabled && (
+      <div
+        ref={(node) => {
+          // The container is the interaction reference, so a click in either
+          // range half counts as inside; range mode then re-points the
+          // *position* reference at the half being edited.
+          refs.setReference(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        className={cn("relative flex items-center gap-2", mode === "range" && "min-w-91.25", mode !== "range" && "min-w-65")}
+      >
+        {mode === "range" ? (
+          <>
+            {renderRangeHalf("from", "Start date")}
+            <span aria-hidden="true" className="text-fg-subtle">
+              –
+            </span>
+            {renderRangeHalf("to", "End date")}
+          </>
+        ) : mode === "single" ? (
+          <PickerField
+            className={cn("w-full min-w-65", className)}
+            icon={<CalendarIcon className="h-4 w-4" />}
+            toggleLabel="Open calendar"
+            toggleProps={getReferenceProps()}
+            isOpen={open}
+            contentId={contentId}
+            isDisabled={isDisabled}
+            isInvalid={isInvalid || outOfBounds(segmentValue)}
+            onClear={clearable && hasValue && !isDisabled ? handleClear : undefined}
+            clearLabel="Clear date"
+          >
+            <DateSegments
+              className="h-full flex-1"
+              id={inputId}
+              value={segmentValue}
+              onChange={handleSegmentsChange}
+              order={segmentOrder}
+              isDisabled={isDisabled}
+              isInvalid={isInvalid || outOfBounds(segmentValue)}
+              onOpenRequest={openWithGridFocus}
+              onSubmit={handleFieldSubmit}
+            />
+          </PickerField>
+        ) : (
+          <>
+            <CalendarIcon className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
+            <input
+              id={inputId}
+              type="text"
+              readOnly
+              value={displayValue}
+              placeholder={placeholder}
+              disabled={isDisabled}
+              role="combobox"
+              aria-invalid={isInvalid}
+              aria-haspopup="dialog"
+              aria-expanded={open}
+              aria-controls={open ? contentId : undefined}
+              className={cn(
+                `flex h-9 w-full cursor-pointer rounded-md border border-border-normal bg-transparent py-1 pl-9 text-sm shadow-xs transition-colors placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
+                "min-w-65",
+                clearable && hasValue ? "pr-9" : "pr-3",
+                isInvalid && "border-border-danger",
+                className
+              )}
+              {...getReferenceProps()}
+            />
+          </>
+        )}
+        {/* `multiple` mode still uses the read-only input, so its clear button
+            stays here; the other two modes get theirs from `PickerField`. */}
+        {clearable && hasValue && !isDisabled && mode === "multiple" && (
           <button
             type="button"
             onClick={handleClear}
@@ -280,7 +530,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
             ref={refs.setFloating}
             id={contentId}
             role="dialog"
-            aria-modal="true"
+            aria-label="Choose date"
             style={floatingStyles}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
@@ -301,6 +551,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
               showToday={mode !== "range"}
               onApply={handleApply}
               onCancel={handleCancel}
+              autoFocusDay={autoFocusDay}
               {...(mode === "multiple" && max ? { max } : {})}
             />
           </div>

package/src/components/DatePicker/DateSegments.tsx

@@ -0,0 +1,125 @@
+import { type Temporal, today, toISODate } from "../../date-time";
+import { SegmentedField, type SegmentSpec, type SegmentValues } from "../../internal";
+import type { DateSegmentOrder } from "./datepicker.types";
+
+type SegmentName = "day" | "month" | "year";
+
+export type DateSegmentsProps = {
+  /** The date the segments display. `undefined` leaves them empty. */
+  value: Temporal.PlainDate | undefined;
+  /**
+   * Fires with a complete date, or `undefined` the moment the segments stop
+   * describing one. Never fires a partial date.
+   */
+  onChange: (date: Temporal.PlainDate | undefined) => void;
+  order?: DateSegmentOrder | undefined;
+  isDisabled?: boolean | undefined;
+  isInvalid?: boolean | undefined;
+  /** Accessible name for the segment group. */
+  label?: string | undefined;
+  /** `Alt+ArrowDown` — the combobox convention for "open the popup". */
+  onOpenRequest?: (() => void) | undefined;
+  /** `Enter` — the caller decides whether that means commit, submit or nothing. */
+  onSubmit?: (() => void) | undefined;
+  id?: string | undefined;
+  className?: string | undefined;
+};
+
+export const DATE_ORDERS: Record<DateSegmentOrder, SegmentName[]> = {
+  mdy: ["month", "day", "year"],
+  dmy: ["day", "month", "year"],
+  ymd: ["year", "month", "day"],
+};
+
+const BASE: Record<SegmentName, Omit<Extract<SegmentSpec, { kind?: "numeric" }>, "separatorBefore" | "stepFrom">> = {
+  day: { name: "day", label: "Day", placeholder: "dd", digits: 2, min: 1, max: 31 },
+  month: { name: "month", label: "Month", placeholder: "mm", digits: 2, min: 1, max: 12 },
+  year: { name: "year", label: "Year", placeholder: "yyyy", digits: 4, min: 1, max: 9999 },
+};
+
+/** Days in a (year, month). `day: 1` keeps `with` from constraining a stale day. */
+const daysInMonth = (year: number, month: number) => today().with({ year, month, day: 1 }).daysInMonth;
+
+export const dateToSegments = (date: Temporal.PlainDate | undefined): SegmentValues =>
+  date ? { day: date.day, month: date.month, year: date.year } : { day: null, month: null, year: null };
+
+/**
+ * The day is clamped rather than rejected: typing `31` and then moving the month
+ * to February is a normal editing path, and snapping to the 28th keeps the field
+ * describing a date the user can see and correct. Nothing else can be out of
+ * range — the segments cap themselves as they are typed.
+ */
+export const dateFromSegments = (values: Record<string, number>): Temporal.PlainDate => {
+  const year = values.year!;
+  const month = values.month!;
+  return today().with({ year, month, day: Math.min(values.day!, daysInMonth(year, month)) });
+};
+
+/**
+ * ISO is always accepted — it is unambiguous, and it is what the rest of the
+ * library speaks. Anything else is read in the field's own segment order, which
+ * is the only reading that cannot be wrong.
+ */
+export function parseDatePasteIn(order: DateSegmentOrder) {
+  return (text: string): SegmentValues | null => {
+    const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
+    const parts = iso ? [iso[1]!, iso[2]!, iso[3]!] : text.split(/[/\-.\s]+/);
+    const names = iso ? DATE_ORDERS.ymd : DATE_ORDERS[order];
+    if (parts.length !== 3 || parts.some((part) => !/^\d+$/.test(part))) return null;
+
+    const next: SegmentValues = { day: null, month: null, year: null };
+    names.forEach((name, index) => {
+      const numeric = Number(parts[index]);
+      next[name] = numeric >= BASE[name].min && numeric <= BASE[name].max ? numeric : null;
+    });
+    return next;
+  };
+}
+
+/**
+ * The typeable half of `DatePicker`: a date as three spinbutton segments.
+ *
+ * A thin spec over `SegmentedField`, which owns the keyboard model — digits
+ * rolling forward, separators, digit-aware `Backspace`, deferred `onChange`.
+ * What belongs to dates specifically lives here: the segment order (never
+ * inferred from the locale, because `08/09` is a different date under each),
+ * clamping the day to the month, and accepting a pasted ISO date.
+ *
+ * Internal to `DatePicker`; not exported from `./index.ts`.
+ */
+/**
+ * The three date segments in the given order.
+ *
+ * Exported because `DateTimePicker` builds one field out of these plus the time
+ * segments, rather than two fields glued together.
+ */
+export function dateSpec(order: DateSegmentOrder): SegmentSpec[] {
+  const separator = order === "ymd" ? "-" : "/";
+  const current = dateToSegments(today());
+
+  return DATE_ORDERS[order].map((name, index) => ({
+    ...BASE[name],
+    // An arrow key on an empty segment starts from today, not from 1: the year
+    // is the segment most likely to already be right.
+    stepFrom: current[name] ?? BASE[name].min,
+    separatorBefore: index > 0 ? separator : undefined,
+  }));
+}
+
+export function DateSegments({ value, onChange, order = "mdy", label = "Date", ...rest }: DateSegmentsProps) {
+  const spec = dateSpec(order);
+
+  return (
+    <SegmentedField<Temporal.PlainDate>
+      spec={spec}
+      value={value}
+      toSegments={dateToSegments}
+      fromSegments={dateFromSegments}
+      keyOf={toISODate}
+      onChange={onChange}
+      parsePaste={parseDatePasteIn(order)}
+      label={label}
+      {...rest}
+    />
+  );
+}