diff --git a/.changeset/date-picker.md b/.changeset/date-picker.md
new file mode 100644
index 00000000..f6c990ea
--- /dev/null
+++ b/.changeset/date-picker.md
@@ -0,0 +1,24 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add DateField, DatePicker, and Calendar components (@internationalized/date + Base UI implementation)
+
+Introduces three accessible date-input components, implemented on `@internationalized/date` (value layer) and Base UI (`Popover`) with hand-rolled segmented-input and calendar-grid behaviour:
+
+- `DateField` — segmented date/time input with label, description, and error message
+- `DatePicker` — date field with a popover calendar
+- `Calendar` — standalone calendar grid
+
+All three accept `LocalizedString` labels/descriptions and resolve locale + timezone from the AppShell context. The `@internationalized/date` value types (`CalendarDate`, `CalendarDateTime`, `ZonedDateTime`, …) and helpers (`today`, `parseDate`, `getLocalTimeZone`, …) are re-exported from `@tailor-platform/app-shell`.
+
+New AppShell context hooks:
+
+- `useResolvedLocale()` — full BCP-47 locale (e.g. `"en-GB"`) plus the language code
+- `useTimeZone()` — the configured IANA timezone, falling back to the user's local timezone
+
+AppShell now accepts an optional `timeZone` prop.
+
+> This is the **`@internationalized/date` + Base UI** variant — the lighter foundation tracked in the design proposal (§9). Net-new dependency is just `@internationalized/date` (~11 KB gz); Base UI is already in the bundle. Public API and accessibility contract are identical to the react-aria variant.
+>
+> **Known limitation:** the segmented input is built from `role="spinbutton"` elements that aren't `contentEditable`, so on-screen-keyboard typing on touch devices is limited — the calendar popover is the touch-friendly path (desktop keyboard entry works fully). The APG behaviour is unit-tested but not yet screen-reader-audited.
diff --git a/docs/components/data-table.md b/docs/components/data-table.md
index 1c0d0c9f..5b9c8140 100644
--- a/docs/components/data-table.md
+++ b/docs/components/data-table.md
@@ -492,7 +492,7 @@ The `filter` property on a column accepts a `FilterConfig` object. When set, the
 | `string`   | Text           | `eq`, `ne`, `contains`, `notContains`, `hasPrefix`, `hasSuffix`, `notHasPrefix`, `notHasSuffix`, `in`, `nin` |
 | `number`   | Number         | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin`                                             |
 | `datetime` | Datetime-local | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin`                                             |
-| `date`     | Date           | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin`                                             |
+| `date`     | **DatePicker** | `eq` (_exact date_), `gte` (_after_), `lte` (_before_), **`between`**                                        |
 | `time`     | Time           | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin`                                             |
 | `enum`     | Dropdown       | `eq`, `ne`, `in`, `nin`                                                                                      |
 | `boolean`  | Toggle         | `eq`, `ne`                                                                                                   |
@@ -500,6 +500,19 @@ The `filter` property on a column accepts a `FilterConfig` object. When set, the
 
 When the user selects the `between` operator on a `number`, `datetime`, `date`, or `time` column, the filter chip renders a range input with **min** and **max** bounds.
 
+### Date Filters
+
+`date` columns use the app-shell [`DatePicker`](./date-picker.md) as the filter input (single value and `between` ranges) and present a friendlier, slimmer operator set:
+
+| Operator  | Label        | Meaning                    |
+| --------- | ------------ | -------------------------- |
+| `eq`      | _exact date_ | matches that calendar date |
+| `gte`     | _after_      | on or after (inclusive)    |
+| `lte`     | _before_     | on or before (inclusive)   |
+| `between` | _between_    | inclusive min–max range    |
+
+`gt` / `lt` / `ne` are intentionally dropped — the inclusive _after_ / _before_ cover the intent. The filter chip shows the value as a locale-formatted date (e.g. `15 Jun 2026`), and the picker resolves its locale/timezone from the AppShell context. (Only `date` is remapped this way; `datetime` and `time` keep the full numeric operator set and native inputs.)
+
 ### String Filter Case Sensitivity
 
 String filters are **case-insensitive by default** — they use the Tailor Platform `regex` operator with an `(?i)` prefix. The filter chip renders a **"Case sensitive"** checkbox that lets users opt into exact-case matching.
diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
new file mode 100644
index 00000000..8f0a9dec
--- /dev/null
+++ b/docs/components/date-picker.md
@@ -0,0 +1,182 @@
+---
+title: DatePicker
+description: Accessible date input components (@internationalized/date + Base UI)
+---
+
+# DatePicker
+
+Three related components for date input — a segmented field, a field with a calendar popover, and a standalone calendar grid. Built on [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/) (the value layer) and Base UI (`Popover`), with the segmented input and calendar grid implemented to the [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/) date-picker/grid patterns. They integrate automatically with AppShell's locale and timezone context.
+
+> **Implementation note.** This is the `@internationalized/date` + Base UI variant. The public API and accessibility contract are identical to the react-aria variant; only the internals differ. See `docs/proposals/date-picker-impl-comparison.md`.
+
+## Import
+
+```tsx
+import {
+  DateField,
+  DatePicker,
+  Calendar,
+  // Date value helpers (re-exported from @internationalized/date)
+  today,
+  parseDate,
+  getLocalTimeZone,
+  type CalendarDate,
+  type DateValue,
+} from "@tailor-platform/app-shell";
+```
+
+No separate `@internationalized/date` install needed — the value types and helpers are re-exported from `@tailor-platform/app-shell`.
+
+## DateField
+
+A segmented input that lets users type dates digit-by-digit, with per-segment Up/Down, type-to-fill auto-advance, and full keyboard support.
+
+```tsx
+<DateField label="Invoice date" />
+```
+
+### With description and error
+
+```tsx
+<DateField
+  label="Start date"
+  description="Format follows your locale"
+  errorMessage="A start date is required"
+/>
+```
+
+### Controlled
+
+```tsx
+const [date, setDate] = useState<CalendarDate | null>(null);
+<DateField label="Invoice date" value={date} onChange={setDate} />;
+```
+
+## DatePicker
+
+A `DateField` with a calendar popover.
+
+```tsx
+<DatePicker label="Ship date" />
+```
+
+### Constrained + unavailable dates
+
+```tsx
+<DatePicker
+  label="Delivery date"
+  minValue={today(getLocalTimeZone())}
+  isDateUnavailable={(date) => {
+    const dow = date.toDate(getLocalTimeZone()).getDay();
+    return dow === 0 || dow === 6; // weekends
+  }}
+/>
+```
+
+### Week start
+
+```tsx
+<DatePicker label="Date" firstDayOfWeek="mon" />
+```
+
+## Calendar
+
+A standalone calendar grid for custom date-selection UIs (e.g. reporting filters).
+
+```tsx
+<Calendar aria-label="Select date" onChange={(date) => console.log(date)} />
+```
+
+## Localization
+
+Locale and timezone come from AppShell automatically. Override per field with `locale` / `timeZone`:
+
+```tsx
+<DatePicker label="Date" locale="ja-JP" />
+```
+
+Segment order, first-day-of-week, and month/weekday names all follow the resolved locale.
+
+## Keyboard
+
+- **Segments:** `↑`/`↓` increment/decrement, digits type-to-fill (auto-advance), `←`/`→` move between segments, `Backspace` clears.
+- **Calendar grid:** arrows move by day/week, `Home`/`End` to week start/end, `PageUp`/`PageDown` by month, `Shift`+`PageUp`/`PageDown` by year, `Enter`/`Space` selects.
+
+## Accessibility
+
+- The segmented field is a labelled `role="group"` of `role="spinbutton"` segments with `aria-valuemin`/`max`/`now`/`text`.
+- The calendar is a `role="grid"`; each day is a button with a full-date `aria-label`; disabled/unavailable days are announced via `aria-disabled`.
+- The popover is a labelled `role="dialog"`.
+
+> **Known limitations (this variant).** The segments are `<div role="spinbutton">` that aren't `contentEditable`, so a touch device's on-screen keyboard doesn't open for typing — on mobile, use the calendar popover to pick a date (desktop keyboard entry and the calendar both work fully). The APG patterns are implemented and unit-tested but **not yet screen-reader-audited**, and RTL arrow-key flipping isn't handled. See [the implementation comparison](../proposals/date-picker-impl-comparison.md) ("Known gaps vs react-aria") for the full list.
+
+## Props
+
+The tables below list props this variant **actually implements** for v1 (date granularity). A few props are part of the type surface — kept identical to the react-aria variant so a later swap is source-compatible — but aren't acted on yet; those are called out under [Proposed / not yet implemented](#proposed--not-yet-implemented).
+
+### DateFieldProps
+
+| Prop                                      | Type                             | Description                                                             |
+| ----------------------------------------- | -------------------------------- | ----------------------------------------------------------------------- |
+| `label`                                   | `LocalizedString`                | Field label                                                             |
+| `description`                             | `LocalizedString`                | Helper text below the field                                             |
+| `errorMessage`                            | `LocalizedString`                | Error text; also sets the invalid state                                 |
+| `value` / `defaultValue`                  | `DateValue \| null`              | Controlled / uncontrolled value (`CalendarDate` at date granularity)    |
+| `onChange`                                | `(v: DateValue \| null) => void` | Fires on a complete, valid value; `null` when cleared                   |
+| `isDisabled` / `isReadOnly` / `isInvalid` | `boolean`                        | State flags                                                             |
+| `isRequired`                              | `boolean`                        | Sets `aria-required` on the segments (no visual required indicator yet) |
+| `placeholderValue`                        | `DateValue`                      | Seeds unset segments (increment start + segment order)                  |
+| `autoFocus`                               | `boolean`                        | Focus the first segment on mount                                        |
+| `locale`                                  | `string`                         | BCP-47 locale override (defaults to the AppShell formatting locale)     |
+| `name`                                    | `string`                         | Emits a hidden `<input>` with the ISO value for form submission         |
+| `aria-label`                              | `string`                         | Accessible name when there's no visible `label` (e.g. compact filters)  |
+| `className`                               | `string`                         | Root element class                                                      |
+
+> `DateField` has no calendar, so `minValue` / `maxValue` / `isDateUnavailable` don't apply to it — they're honoured by `DatePicker` and `Calendar` below.
+
+### DatePickerProps
+
+All `DateFieldProps`, plus:
+
+| Prop                    | Type                                                          | Description                                                          |
+| ----------------------- | ------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `minValue` / `maxValue` | `DateValue`                                                   | Earliest / latest selectable date in the calendar                    |
+| `isDateUnavailable`     | `(date: DateValue) => boolean`                                | Mark individual dates unselectable (still keyboard-navigable)        |
+| `firstDayOfWeek`        | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` | Force the calendar's first column; omit to follow the locale         |
+| `timeZone`              | `string`                                                      | IANA timezone for resolving "today"; defaults to AppShell `timeZone` |
+
+### CalendarProps
+
+The standalone calendar grid. It has no segmented input, so its surface is listed in full:
+
+| Prop                                   | Type                           | Description                                                   |
+| -------------------------------------- | ------------------------------ | ------------------------------------------------------------- |
+| `value` / `defaultValue`               | `DateValue \| null`            | Controlled / uncontrolled selected date                       |
+| `onChange`                             | `(v: DateValue) => void`       | Fires when a date is selected                                 |
+| `minValue` / `maxValue`                | `DateValue`                    | Earliest / latest selectable date                             |
+| `isDateUnavailable`                    | `(date: DateValue) => boolean` | Mark individual dates unselectable (still keyboard-navigable) |
+| `focusedValue` / `defaultFocusedValue` | `DateValue`                    | Controlled / initial focused (visible) date                   |
+| `onFocusChange`                        | `(date: CalendarDate) => void` | Fires when the focused date changes (arrows, month paging)    |
+| `firstDayOfWeek`                       | `"sun" \| "mon" \| …`          | Force the first column; omit to follow the locale             |
+| `isDisabled` / `isReadOnly`            | `boolean`                      | Disable the grid / prevent selection changes                  |
+| `timeZone`                             | `string`                       | IANA timezone for "today"; defaults to AppShell `timeZone`    |
+| `locale`                               | `string`                       | BCP-47 locale override                                        |
+| `aria-label` / `aria-labelledby`       | `string`                       | Accessible name for the grid                                  |
+| `className`                            | `string`                       | Root element class                                            |
+
+### Proposed / not yet implemented
+
+Accepted by the prop types (for parity with the react-aria variant) but **not acted on** in this variant yet:
+
+| Prop           | Type                                      | Status                                                                                                                                                                                                             |
+| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `granularity`  | `"day" \| "hour" \| "minute" \| "second"` | Only `"day"` is supported (the default). Time granularities — and the `CalendarDateTime` / `ZonedDateTime` values they produce — are the tracked **DateTime fast-follow**; the calendar has no time selection yet. |
+| `hourCycle`    | `12 \| 24`                                | No effect until time granularity lands (12h/24h only matters with an hour segment).                                                                                                                                |
+| `hideTimeZone` | `boolean`                                 | Unused; only relevant to `ZonedDateTime` display (time granularity).                                                                                                                                               |
+
+See the proposal's [Post-v1 fast-follows](../proposals/date-picker.md) for the DateTime plan.
+
+## Related
+
+- [Form](./form.md) — wrap date fields with validation
+- [Input](./input.md) — plain text input
diff --git a/docs/proposals/date-picker-impl-comparison.md b/docs/proposals/date-picker-impl-comparison.md
new file mode 100644
index 00000000..4e2e89f5
--- /dev/null
+++ b/docs/proposals/date-picker-impl-comparison.md
@@ -0,0 +1,63 @@
+# DatePicker — implementation comparison (measured)
+
+Two complete, API-identical implementations of `DateField` / `DatePicker` / `Calendar` were built to validate the design proposal's library-choice analysis (`docs/proposals/date-picker.md`, §1.1 and §9) against real code:
+
+| Branch                            | Behaviour/a11y foundation                             |
+| --------------------------------- | ----------------------------------------------------- |
+| `feat/date-picker-pp-1093`        | **react-aria-components** (Adobe)                     |
+| `feat/date-picker-baseui-pp-1093` | **`@internationalized/date` + Base UI** (this branch) |
+
+Both expose the **same public API** (`DateFieldProps` / `DatePickerProps` / `CalendarProps`), the same `LocalizedString` label/description/error props, the same AppShell `useResolvedLocale()` / `useTimeZone()` wiring, and the same `@internationalized/date` re-exports. A consumer cannot tell them apart from the import surface — exactly the "foundation-agnostic API" the proposal relies on for a low-regret swap.
+
+## What "Base UI + raw @internationalized/date" actually means
+
+Base UI has **no date primitives**, so this branch hand-rolls the behaviour react-aria would otherwise supply, on top of two new state engines:
+
+- **`use-date-field-state.ts`** — segmented spinbutton field: locale-driven segment ordering via `DateFormatter.formatToParts`, per-segment increment/decrement with context-aware limits (e.g. day max from `endOfMonth`), numeric type-to-fill with auto-advance, and value-type discrimination by `granularity` (`CalendarDate` / `CalendarDateTime` / `ZonedDateTime`). No `Date` ever escapes.
+- **`use-calendar-state.ts`** — calendar grid: locale + first-day-of-week week computation (`getWeeksInMonth` / `startOfWeek`), selection, roving focus, and full APG keyboard navigation (arrows, Home/End, PageUp/PageDown, Shift+PageUp/Down).
+
+Base UI provides only the **`Popover`** (positioning, dismiss, portal) and the field's label/description/error structure idioms.
+
+## Measured bundle cost (esbuild, minified + gzipped, react/react-dom external)
+
+| Date slice                                        |     gzipped | Net-new for an app-shell consumer                |
+| ------------------------------------------------- | ----------: | ------------------------------------------------ |
+| `@internationalized/date` only                    | **11.2 KB** | both branches pay this                           |
+| Base UI `Popover` + `@internationalized/date`     |     46.3 KB | Base UI already in bundle → marginal ≈ **11 KB** |
+| react-aria date slice + `@internationalized/date` |     73.7 KB | whole second foundation → **+73.7 KB**           |
+
+The decisive point: **Base UI is already in the app-shell bundle** (Dialog, Select, Combobox, Popover all use it), so the marginal dependency cost of the date components on this branch is essentially just `@internationalized/date` (~11 KB gz). The react-aria branch adds an entire second headless foundation (~74 KB gz) that overlaps Base UI. This confirms the proposal's projected ~11 KB vs ~73 KB (§1.1).
+
+## Cost we take on: code we now own
+
+| Implementation                      | Source LOC | Hand-rolled behaviour logic  |
+| ----------------------------------- | ---------: | ---------------------------- |
+| react-aria variant                  |       ~565 | 0 (rented from Adobe)        |
+| `@internationalized/date` + Base UI |     ~1,526 | ~670 (the two state engines) |
+
+~2.7× the source, ~670 LOC of date-interaction behaviour to maintain ourselves — the "highest build effort" the proposal flagged, now quantified.
+
+## Parity verified
+
+- **Tests:** the same 23-test suite (public behaviour + the DOM a11y contract — spinbutton segments, `role="grid"` cells with `data-selected`/`data-disabled`/`data-unavailable`/`data-outside-month`, `role="dialog"` popover, roving-focus keyboard nav) passes against both implementations unchanged.
+- **Localization (verified in-browser):** segment order follows the locale — `en-US` → `mm/dd/yyyy`, `en-GB` → `dd/mm/yyyy`, `ja-JP` → `yyyy/mm/dd`; first-day-of-week follows the locale (Monday-first for `en-GB`); month/weekday names and the cell `aria-label` are `DateFormatter`-localized.
+- **Value correctness:** `onChange` emits `@internationalized/date` values (never `Date`); time is preserved when picking a day in a date+time picker.
+
+## Accessibility coverage (matched, verified in-browser)
+
+- **Segmented field:** labelled `role="group"` of `role="spinbutton"` segments carrying `aria-valuemin`/`max`/`now`/`text`, `aria-label`, `aria-invalid`, `aria-disabled`, `aria-readonly`; per-segment `↑`/`↓`, digit type-to-fill with auto-advance, `←`/`→`/`Home`/`End` between segments, `Backspace` to clear. Errors render as `role="alert"` and link via `aria-describedby`.
+- **Calendar grid:** `role="grid"` with localized `columnheader`s (full-day `aria-label`s), full-date cell `aria-label`s, roving `tabindex`, and APG keyboard — `←`/`→` day, `↑`/`↓` week, `Home`/`End` week ends, `PageUp`/`PageDown` month, `Shift`+`PageUp`/`PageDown` year, `Enter`/`Space` select. Focus follows across month boundaries; the month heading is an `aria-live` region.
+- **Popover/dialog:** opening the picker moves focus into the grid (today/selected cell) so arrows work immediately; selecting or `Escape` closes it and returns focus to the trigger (Base UI). The trigger gets `aria-haspopup="dialog"`/`aria-expanded` from Base UI.
+
+## Known gaps vs react-aria (the price of owning it)
+
+- **Mobile/touch text entry:** react-aria's segments are `contentEditable` spans with `inputmode="numeric"`, so a touch device surfaces the on-screen keyboard and types into them. Ours are **non-editable** (`contentEditable={false}`) `role="spinbutton"` divs driven by `keydown` — which soft keyboards don't emit — so touch typing doesn't work (desktop keyboard + the calendar both work fully; the calendar is the touch path). The biggest remaining gap, but **addressable** by matching react-aria: make the segments `contentEditable` with `inputmode="numeric"` and route `beforeinput` (a focused, contained fast-follow — needs real-device QA).
+- **RTL arrow direction:** `←`/`→` are LTR-fixed; in RTL locales react-aria flips them. Needs a direction check in the grid key handler.
+- **Calendar systems:** robust for Gregorian; the 13 non-Gregorian calendars react-aria supports automatically are not wired up (the value layer can represent them; the field/grid interaction would need extension).
+- **Localized chrome strings:** segment placeholders (`yyyy`/`mm`/`dd`) and the prev/next-month button labels are English; react-aria localizes these from its bundled CLDR strings.
+- **Dedicated navigation live-region:** we rely on roving focus + cell `aria-label` (the APG-standard announcement) plus an `aria-live` month heading; react-aria adds an extra visually-hidden live region for navigation/selection announcements.
+- **Breadth of SR/browser testing:** react-aria ships vendor-maintained cross-browser + screen-reader coverage; ours is the APG pattern implemented and unit-tested, not yet SR-audited.
+
+## Takeaway
+
+The Base-UI-native build is real and shippable: identical API, identical a11y/DOM contract, full localization for the common case, at ~1/7th the dependency weight — at the cost of ~670 LOC of behaviour we maintain and a few advanced-i18n gaps. This is precisely the trade the proposal framed as the §9 "future possibility," now de-risked with working code on both sides.
diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
new file mode 100644
index 00000000..d95e3106
--- /dev/null
+++ b/docs/proposals/date-picker.md
@@ -0,0 +1,449 @@
+# Proposal: DatePicker / DateField (and future DateRangePicker)
+
+> Status: **Decided — v1 builds on the §9 lighter foundation (`@internationalized/date` + Base UI), approved 2026-06-26 (superseding the original `react-aria-components` decision). See the Revision note.**
+> Scope: v1 ships `DateField`, `DatePicker`, and a standalone `Calendar`. `DateRangePicker` / `RangeCalendar` are designed-for but deferred.
+
+## Revision — 2026-06-26 (foundation swap approved)
+
+The original v1 foundation decision (`react-aria-components`, 2026-06-17, §1 below) has been **superseded**: v1 now builds on the **§9 lighter foundation** — `@internationalized/date` + Base UI — measured at **~11 KB gz vs ~74 KB** for react-aria, with the same public API and value layer (see [`date-picker-impl-comparison.md`](date-picker-impl-comparison.md)). The swap was **approved on 2026-06-26**.
+
+- **Decision (v1):** ship the `@internationalized/date` + Base UI variant. Public API and value layer are unchanged, so this is invisible to consumers.
+- **Trade-off accepted:** we own ~670 LOC of APG behaviour instead of Adobe-audited primitives. Known gaps tracked for follow-up: **mobile/touch typing** (segments are `role="spinbutton"` with no hidden numeric `<input>`, so on-screen-keyboard entry is limited — the calendar is the touch path), **RTL arrow-key flipping**, and the pattern is unit-tested but **not yet screen-reader-audited**.
+
+## Post-v1 fast-follows (Base UI variant)
+
+Owning the segmented input + grid means a handful of behaviours react-aria gave us for free are now our own follow-up work. The full inventory is in [`date-picker-impl-comparison.md`](date-picker-impl-comparison.md) ("Known gaps vs react-aria"); the highest-value item is written up here so the approach isn't lost.
+
+### Mobile / touch text entry (biggest gap)
+
+**Problem.** Our segments are `role="spinbutton"` `<div>`s with `contentEditable={false}`, and input is read only from `keydown`. On-screen keyboards don't emit usable `keydown`, and with no editable element focused the keyboard doesn't surface at all — so on touch devices you can't _type_ a date (the calendar popover is the only touch path). Desktop keyboard + calendar work fully.
+
+**Approach — mirror react-aria.** react-aria makes each segment a `contentEditable` span with `inputmode="numeric"`; that's exactly what surfaces the numeric soft keyboard and lets it type into the element (verified: react-aria's month segment is `<span role="spinbutton" contenteditable="true" inputmode="numeric" enterkeyhint="next" autocorrect="off" style="caret-color: transparent">`). To match it in `DateInputGroup`:
+
+1. Render each editable segment with `contentEditable` (when not disabled/readonly), `inputMode="numeric"` (omit for the AM/PM segment), plus `enterKeyHint="next"`, `autoCorrect="off"`, `autoCapitalize="off"`, `spellCheck={false}`. Keep the transparent caret so the field still renders our locale-formatted text, not an editing caret.
+2. Add a **native** `beforeinput` listener that **always `preventDefault`s** — the segment text stays React-controlled, so the browser must never mutate the `contentEditable` DOM — then translates the event into the existing engine:
+   - `insertText` → per character: digit → `setDigit(...)` (same typed-count / auto-advance path as `keydown`); `a`/`p` on the day-period segment → `setDayPeriod`.
+   - `deleteContentBackward` / `deleteContentForward` → `clearSegment`.
+   - anything else → ignored (already prevented), which also swallows stray characters so the segment can't accumulate junk.
+3. Keep the current `keydown` path for physical keyboards. The two are mutually exclusive: a handled `keydown` calls `preventDefault`, which suppresses the follow-on `beforeinput`; soft keyboards emit no actionable `keydown`, so `beforeinput` is the only path that fires there.
+
+**Why native `beforeinput`, not React's `onBeforeInput`:** React's synthetic `onBeforeInput` is unreliable for cancelling the native default on `contentEditable`; a native listener (attached via ref/effect) makes `preventDefault` reliably stop DOM mutation across browsers.
+
+**Scope:** touches only `DateInputGroup` (segment attributes + the input handler). No public-API or value-layer change. Segment DOM snapshots update (the new `contentEditable`/`inputmode` attributes).
+
+**Verification:** the desktop `keydown` path stays covered by the existing unit tests; the `beforeinput` path can be exercised by dispatching a synthetic `InputEvent("beforeinput", { inputType, data })`. The soft keyboard _appearing on focus_ is platform behaviour driven purely by the `contentEditable` + `inputmode` attributes, so it can't be unit-tested — it needs **real-device QA** (physical phone or BrowserStack) before sign-off.
+
+### Other gaps
+
+RTL arrow-key flipping, non-Gregorian calendar systems, localized placeholder/nav-button strings, a dedicated navigation live-region, and a full screen-reader audit — all inventoried in the comparison doc's "Known gaps vs react-aria" section.
+
+---
+
+Everything below is the **original 2026-06-17 decision and analysis**, kept verbatim for the record (now superseded by the notes above).
+
+## 1. Summary & decision
+
+> **Decision (v1):** build on **`react-aria-components`** (Adobe) for the behaviour/a11y layer, with **`@internationalized/date`** as the value layer, wrapped in a thin app-shell presentation layer that matches every other component in the library. We accept the ~75 KB cost (§7) in exchange for audited APG accessibility at the lowest build risk. A lighter foundation is kept as a deliberate **future possibility (§9)**.
+
+This choice is low-regret: the public API (§3) and the value layer are foundation-agnostic, so a later swap to a lighter foundation touches only the internal wrapper — not consumers, not stored values. The alternatives measured before settling here are kept in §1.1 for the record.
+
+Verified facts behind this decision:
+
+- **Single bundled stack.** Modern `react-aria-components` v1 ships as 3 pre-bundled artifacts (`react-aria-components`, `react-aria`, `react-stately`), not the 30+ split `@react-aria/*` packages of the v0 era. Net-new footprint ≈ 10 packages, 3 substantive.
+- **Base UI has no date primitives** and none on the near roadmap, so "wait for Base UI" is not an option. Base UI remains our primitive provider for everything else; react-aria is scoped strictly to the date family.
+
+The trade-off we accept: a second headless stack exists in the bundle, **bounded to date components** and invisible to consumers (they never import from `react-aria-components`).
+
+## 1.1 Library choice — alternatives re-evaluated
+
+The 75 KB figure prompted a re-test of the hypothesis: _is there a slimmer option that doesn't add a primitive foundation competing with Base UI?_ The deepest form of that concern is not bundle size — it's that **`react-aria-components` is itself a general primitive suite** (Popover, Dialog, Select, Menu, ComboBox, Table…) that directly overlaps Base UI. Measured with identical methodology (esbuild, minified + gzipped, `react`/`react-dom` externalised, tree-shaken to the date slice):
+
+| Option                                  | Date slice (gz) | Value layer                     | Adds a competing primitive foundation?                      | A11y                                     | Build effort                     |
+| --------------------------------------- | --------------: | ------------------------------- | ----------------------------------------------------------- | ---------------------------------------- | -------------------------------- |
+| react-aria-components                   |         73.4 KB | `@internationalized/date` ✅    | **Yes** — full primitive suite overlaps Base UI             | Best-in-class, APG-audited, SR-tested    | Lowest                           |
+| Ark UI / Zag.js                         |         42.7 KB | `@internationalized/date` ✅    | **Yes** — Ark is also a full headless suite (lighter)       | Good — Zag implements APG                | Low                              |
+| Zag machine only + Base UI              |         39.4 KB | `@internationalized/date` ✅    | Partial — own popper/dismiss/live-region (dual positioning) | Good                                     | Medium (awkward wiring)          |
+| **`@internationalized/date` + Base UI** |     **10.8 KB** | _is_ the value layer ✅         | **No** — value/math lib only                                | **We own it**                            | **Highest**                      |
+| react-day-picker v10 + Base UI          |         20.4 KB | ❌ `date-fns`, **`Date`-based** | No — calendar widget only                                   | Calendar grid only; build input + dialog | High (+ loses value correctness) |
+
+What the data changes:
+
+- **The hypothesis is partly confirmed.** Slimmer, better-aligned options exist. react-aria is the _heaviest_ candidate and, with Ark available, no longer the obvious pick.
+- **Ark UI/Zag strictly dominates react-aria** _if_ a second behaviour layer is acceptable: ~40% lighter, the **same** value layer (`@internationalized/date` → identical calendar systems, `ZonedDateTime`, value-type correctness), comparable APG a11y. react-aria's only remaining edges are maturity/ecosystem (Adobe, larger adoption) and an exceptionally polished segmented input.
+- **`@internationalized/date` + Base UI is the only option that honours "no competing foundation"** while keeping value correctness — ~7× slimmer than react-aria. The cost is real: we build and _own_ the segmented input + calendar grid + APG dialog a11y (date pickers are the #1 place teams ship broken a11y). De-riskable by shipping the simpler APG _text-input + calendar-dialog_ pattern first (Base UI `Dialog` already handles focus trap/return/dismiss), with the segmented input as a fast-follow.
+- **Drop react-day-picker:** `Date`-based, abandons the value-type thesis, _and_ still calendar-only (you build the input + dialog anyway). Worst of both.
+- **Drop raw Zag-machine-on-Base-UI:** not meaningfully lighter than Ark (39 vs 43 KB) and forces two positioning systems.
+
+**Outcome:** for v1 we chose **react-aria-components** (audited a11y, least build risk, largest ecosystem) and accept the bundle cost. Ark UI/Zag and the Base-UI-native build are retained as a **future direction** — see §9.
+
+## 2. Why wrap — what the wrapper actually buys us
+
+The interface-slimming is the _least_ of it. Ranked by value:
+
+1. **Styling ownership (the main reason).** react-aria ships **zero CSS**. Without a wrapper, "use the DatePicker" means assembling ~12 headless sub-components and re-authoring all the `astw:` / theme-token / dark-mode / animation classes at every call site. The wrapper is where the visual identity lives — **once**. This is the same reason `Select` is wrapped today.
+2. **Abstraction seam / vendor insulation (the strategic one).** Wrapping makes react-aria an _implementation detail_ behind our own stable API. If react-aria reshapes its composition, or we later move the popover to Base UI, or migrate off react-aria entirely, it's a one-package change — not a consumer-wide migration. This is precisely what makes "we took on a second stack" reversible rather than a long-term lock-in.
+3. **Library consistency.** Consumers get `<DatePicker value onChange … />`, shaped like every other app-shell component, instead of a foreign 12-part Adobe composition. The second stack never enters the consumer's mental model.
+4. **Footgun masking (correctness).** Bake in safe defaults: site timezone instead of `getLocalTimeZone()`, full BCP-47 locale, no `Date` round-trip, `granularity` → value-type discrimination. Hide the knobs that let people do the wrong thing.
+5. **Interface slimming itself.** ~40 props + 12 sub-components → ~12 flat props. Real, but a _consequence_ of 1–4, not the goal.
+
+**Counter-discipline:** don't re-design what's already good. Keep `value` / `onChange` / `minValue` / `maxValue` / `granularity` / `isDateUnavailable` named exactly as react-aria has them. We slim and add safety; we do not invent a new vocabulary (that would create a translation tax against upstream docs and churn).
+
+## 3. Proposed public API
+
+Three exports in v1, plus two deferred:
+
+```tsx
+<DateField />     // segmented typed input only, no popover  → DateValue
+<DatePicker />    // input + popover + calendar              → DateValue
+<Calendar />      // standalone inline calendar (reporting filters, no popover)
+
+// deferred, designed-for:
+<DateRangePicker />  // → { start: DateValue; end: DateValue }
+<RangeCalendar />
+```
+
+Single-date and range are **separate components, not a `mode` prop** — they have different value types (`T` vs `{ start: T; end: T }`), and a `mode` prop forces every callsite to discriminate.
+
+### 3.1 Value type is set by `granularity`
+
+```tsx
+<DatePicker granularity="day" />     // → CalendarDate          (no time, no tz)
+<DatePicker granularity="minute" />  // → CalendarDateTime       (local wall-time)
+<DatePicker granularity="minute" timeZone="America/Los_Angeles" />
+                                     // → ZonedDateTime          (tz-aware)
+```
+
+`onChange` returns the `@internationalized/date` type — **never a JS `Date`**. Returning `Date` discards the calendar system and corrupts timezone reasoning, which is the whole point of the stack. For callers that genuinely need a `Date`, the value carries `.toDate(timeZone)`; ISO round-tripping to the backend lives in a codec layer (see §7).
+
+### 3.2 Props we pass through (the 90% surface — names unchanged from react-aria)
+
+| Prop                                       | Type                                      | Notes                                                   |
+| ------------------------------------------ | ----------------------------------------- | ------------------------------------------------------- |
+| `value` / `defaultValue` / `onChange`      | `DateValue` (typed by `granularity`)      | Controlled or uncontrolled                              |
+| `granularity`                              | `"day" \| "hour" \| "minute" \| "second"` | Default `"day"`. Drives the value type                  |
+| `minValue` / `maxValue`                    | `DateValue`                               | Same type as `value`                                    |
+| `isDateUnavailable`                        | `(date) => boolean`                       | Single predicate — holidays, weekends, lead-time        |
+| `isDisabled` / `isReadOnly` / `isRequired` | `boolean`                                 |                                                         |
+| `isInvalid`                                | `boolean`                                 |                                                         |
+| `autoFocus`                                | `boolean`                                 |                                                         |
+| `hourCycle`                                | `12 \| 24`                                | Overrides locale default                                |
+| `hideTimeZone`                             | `boolean`                                 | Cosmetic, `ZonedDateTime` only                          |
+| `placeholderValue`                         | `DateValue`                               | Seeds the segment placeholder (e.g. default year)       |
+| `firstDayOfWeek`                           | `"sun" \| "mon" \| …`                     | Forwarded to the inner `Calendar`; defaults from locale |
+| `name`                                     | `string`                                  | Native form / form-library integration                  |
+
+### 3.3 Props we add (app-shell conveniences)
+
+| Prop           | Type              | Why                                                                                                |
+| -------------- | ----------------- | -------------------------------------------------------------------------------------------------- |
+| `label`        | `LocalizedString` | Renders `<Label>`; accepts our `LocalizedString` (string \| `(locale) => string`)                  |
+| `description`  | `LocalizedString` | Renders the help text slot                                                                         |
+| `errorMessage` | `LocalizedString` | Simpler than react-aria's `validate`-returns-`ValidationError`; matches our Field pattern          |
+| `timeZone`     | `string` (IANA)   | **Defaults to the AppShell `timeZone`** (§6), _not_ `getLocalTimeZone()`                           |
+| `locale`       | `string` (BCP-47) | Per-field override; **defaults to AppShell formatting locale** (§5)                                |
+| `className`    | `string`          | Applied to the root group only — deep restyling is intentionally not a goal (wrapper owns visuals) |
+| `data-slot`    | (internal)        | `date-picker`, `date-segment`, `calendar-cell`, … for testing/identification                       |
+
+### 3.4 Props we mask or omit (explicit call-outs)
+
+| react-aria prop / seam                                                                                                                                                                   | What we do                                  | Why                                                                                                                                                  |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Whole sub-component composition** — `DateInput` render-prop, `DateSegment`, `Group`, `Button`, `Popover`, `Dialog`, `Calendar`, `CalendarGrid`, `CalendarCell`, `Heading`, nav buttons | **Internalised.** Not exposed.              | This _is_ the styling/theme layer. Consumers must never assemble or re-style it — that's the wrapper's whole job (§2.1). The single biggest masking. |
+| `validate` (returns `ValidationError`)                                                                                                                                                   | Replace with `isInvalid` + `errorMessage`   | Aligns with how every other app-shell field expresses errors. A power `validate` can be added later if the Form integration needs it.                |
+| `validationBehavior` (`"native" \| "aria"`)                                                                                                                                              | **Pin `"aria"` default**, not exposed in v1 | One validation mode across the app instead of per-callsite drift. Revisit when we wire native `<Form>` integration.                                  |
+| `isOpen` / `defaultOpen` / `onOpenChange`                                                                                                                                                | **Masked (uncontrolled only) in v1**        | Externally controlling the popover is rare; YAGNI. Easy to add later without breaking the surface.                                                   |
+| `shouldForceLeadingZeros`                                                                                                                                                                | Omit                                        | Cosmetic; the locale already decides.                                                                                                                |
+| `pageBehavior`                                                                                                                                                                           | Pin a sensible default, not exposed         | Niche calendar paging knob.                                                                                                                          |
+| `shouldCloseOnSelect`                                                                                                                                                                    | Default `true`, not exposed                 | Sensible default; expose only if asked.                                                                                                              |
+| RAC form context / `slot` plumbing                                                                                                                                                       | Internal                                    | Not part of the public contract.                                                                                                                     |
+
+## 4. Example code
+
+### 4.1 Consumer usage
+
+```tsx
+// Date helpers + types are re-exported from app-shell — no extra install (see §7.2):
+import {
+  DatePicker,
+  DateField,
+  Calendar,
+  today,
+  getLocalTimeZone,
+  type CalendarDate,
+} from "@tailor-platform/app-shell";
+
+// Basic — date only (value is CalendarDate)
+function ShipDate() {
+  const [value, setValue] = useState<CalendarDate | null>(null);
+  return <DatePicker label="Ship date" value={value} onChange={setValue} />;
+}
+
+// Constrained — no past dates, no weekends
+<DatePicker
+  label="Delivery date"
+  minValue={today(getLocalTimeZone())}
+  isDateUnavailable={(date) => {
+    const dow = date.toDate(getLocalTimeZone()).getDay();
+    return dow === 0 || dow === 6; // weekends unavailable
+  }}
+  errorMessage="Pick a weekday on or after today"
+/>
+
+// Date + time, timezone from the AppShell site config (value is ZonedDateTime)
+<DatePicker label="Cut-off" granularity="minute" />
+
+// Input-only, no popover (value is CalendarDate)
+<DateField label="Invoice date" />
+
+// Inline calendar for a reporting filter (no popover)
+<Calendar aria-label="Report range start" value={value} onChange={setValue} />
+```
+
+### 4.2 Internal wrapper sketch (illustrative — proves where styling lives)
+
+This is the part consumers never see. It shows the masking + theme-token reuse + data-attribute styling. Note the **popover reuses the exact same tokens as our Base UI popovers** (`bg-popover`, `--z-popup`, the same enter/exit animation classes); only the state-attribute _names_ differ (`data-entering`/`data-exiting` for react-aria vs `data-ending-style` for Base UI).
+
+```tsx
+import {
+  DatePicker as RACDatePicker,
+  Group,
+  DateInput,
+  DateSegment,
+  Button,
+  Label,
+  Text,
+  FieldError,
+  Popover,
+  Dialog,
+  Calendar as RACCalendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+} from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+import { useTimeZone, useResolvedLocale } from "../contexts/appshell-context";
+
+// Cell styling driven entirely by react-aria's boolean data-* attributes (Tailwind v4 arbitrary variants).
+const cell = cva(
+  "astw:flex astw:size-9 astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:outline-none",
+  {
+    variants: {
+      state: {
+        base: [
+          "astw:data-[hovered]:bg-accent astw:data-[hovered]:text-accent-foreground",
+          "astw:data-[focus-visible]:ring-ring/50 astw:data-[focus-visible]:ring-2",
+          "astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground",
+          "astw:data-[outside-month]:text-muted-foreground/50",
+          "astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through",
+          "astw:data-[disabled]:opacity-50 astw:data-[disabled]:pointer-events-none",
+          // range states wired now so DateRangePicker is purely additive later:
+          "astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md",
+        ],
+      },
+    },
+    defaultVariants: { state: "base" },
+  },
+);
+
+function DatePicker({ label, description, errorMessage, timeZone, locale, className, ...props }) {
+  const shellTz = useTimeZone(); // §6
+  const { locale: shellLocale } = useResolvedLocale(); // §5
+  return (
+    <RACDatePicker
+      data-slot="date-picker"
+      className={cn("astw:flex astw:flex-col astw:gap-1.5", className)}
+      // resolution order: field prop → shell config → browser fallback handled in hook
+      {...props}
+    >
+      {label && (
+        <Label className="astw:text-foreground astw:text-sm astw:font-medium">{label}</Label>
+      )}
+      <Group
+        className={cn(
+          "astw:border-input astw:bg-background astw:flex astw:h-9 astw:w-full astw:items-center",
+          "astw:rounded-md astw:border astw:px-3 astw:text-sm",
+          "astw:focus-within:border-ring astw:focus-within:ring-ring/50 astw:focus-within:ring-[3px]",
+          "astw:data-[invalid]:border-destructive",
+        )}
+      >
+        <DateInput className="astw:flex astw:flex-1">
+          {(segment) => (
+            <DateSegment
+              segment={segment}
+              data-slot="date-segment"
+              className={cn(
+                "astw:rounded astw:px-0.5 astw:tabular-nums astw:outline-none",
+                "astw:data-[focused]:bg-primary astw:data-[focused]:text-primary-foreground",
+                "astw:data-[placeholder]:text-muted-foreground",
+              )}
+            />
+          )}
+        </DateInput>
+        <Button className="astw:text-muted-foreground hover:astw:text-foreground astw:cursor-pointer">
+          <CalendarIcon className="astw:size-4" />
+        </Button>
+      </Group>
+      {description && (
+        <Text slot="description" className="astw:text-muted-foreground astw:text-xs">
+          {description}
+        </Text>
+      )}
+      <FieldError className="astw:text-destructive astw:text-xs">{errorMessage}</FieldError>
+
+      <Popover
+        data-slot="date-popover"
+        className={cn(
+          // SAME tokens as our Base UI popover (see badge-list.tsx); only the
+          // animation state-attribute names differ (data-entering/exiting vs data-ending-style).
+          "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup)",
+          "astw:rounded-md astw:border astw:p-3 astw:shadow-md astw:origin-(--trigger-anchor-point)",
+          "astw:data-[entering]:animate-in astw:data-[entering]:fade-in-0 astw:data-[entering]:zoom-in-95",
+          "astw:data-[exiting]:animate-out astw:data-[exiting]:fade-out-0 astw:data-[exiting]:zoom-out-95",
+        )}
+      >
+        <Dialog className="astw:outline-none">
+          <RACCalendar>
+            <header className="astw:flex astw:items-center astw:justify-between astw:pb-2">
+              <Button slot="previous">
+                <ChevronLeftIcon className="astw:size-4" />
+              </Button>
+              <Heading className="astw:text-sm astw:font-medium" />
+              <Button slot="next">
+                <ChevronRightIcon className="astw:size-4" />
+              </Button>
+            </header>
+            <CalendarGrid>{(date) => <CalendarCell date={date} className={cell()} />}</CalendarGrid>
+          </RACCalendar>
+        </Dialog>
+      </Popover>
+    </RACDatePicker>
+  );
+}
+```
+
+## 5. Locale — tag format call-out + granular-locale direction
+
+### 5.1 The call-out (a real bug if we don't fix it)
+
+`detectBrowserLocale()` in [lib/i18n.ts](../../packages/core/src/lib/i18n.ts) deliberately **strips to the language subtag**:
+
+```ts
+const locale = new Intl.Locale(browserLocale);
+return locale.language; // "ja-JP" → "ja"
+```
+
+That is correct for **label resolution** (we have one translation table per language), but it throws away exactly the information formatting needs. react-aria's `I18nProvider` / `Intl` need the **full BCP-47 tag** to drive first-day-of-week (US = Sun, GB/EU = Mon), segment order (`MM/DD/YYYY` vs `DD/MM/YYYY`), 12h vs 24h, and numbering system.
+
+Concrete failure: a browser reporting `en-GB` gets stripped to `en`, react-aria falls back to en-US defaults, and a British user sees `MM/DD/YYYY`, Sunday-first — wrong.
+
+**Rule: never feed the stripped language code into react-aria. Feed the full tag.**
+
+### 5.2 Direction: split "language" from "formatting locale" at the AppShell
+
+This is bigger than DatePicker and shouldn't be solved DatePicker-locally — currency, number, and relative-time formatting will all want the same thing. The shape (high-level; to be specced separately):
+
+- The AppShell takes **one source of truth: a full BCP-47 `locale`** (e.g. `"en-GB"`, `"ja-JP"`). Default to `navigator.languages[0]` (the full tag we already have), _not_ the stripped version.
+- From it, derive two consumers held in `appshell-context`:
+  - **`language`** = `new Intl.Locale(locale).language` → drives the **existing** label/i18n system, unchanged downstream.
+  - **`locale`** (full) → drives **all Intl/CLDR formatting**: react-aria's `<I18nProvider locale={locale}>` mounted once at the shell root, and future `Intl.NumberFormat` / currency / `Intl.DateTimeFormat`.
+- Expose via a hook, e.g. `useResolvedLocale(): { locale: string; language: string }`. DatePicker is simply the **first consumer**; currency/number formatters join later.
+- **Backward compatible:** the label path still receives a language code (derived), so existing behaviour is preserved. We just stop discarding the region for the formatting path. Passing a bare `"en"` still works (Intl falls back to language defaults).
+- Optional future: allow `language` and formatting `locale` to be set independently (e.g. Japanese UI text but US number format). A footnote, not v1.
+
+## 6. Time zone — AppShell global config param
+
+First-cut design, matching the "global context param" instinct:
+
+- Add **`timeZone?: string`** (IANA, e.g. `"America/Los_Angeles"`) to the AppShell config, living in `appshell-context` alongside `locale`. Conceptually, **`locale` + `timeZone` together form the AppShell "formatting / i18n context"** — a cohesive concept, extensible to currency etc.
+- Expose **`useTimeZone()`**.
+- DatePicker resolves the zone in this order: **field `timeZone` prop → AppShell `timeZone` → `getLocalTimeZone()`** (last-resort fallback).
+- **Only relevant for date+time** (`ZonedDateTime`). For `granularity="day"` the value is a `CalendarDate` with no zone, so this is a no-op — the common case is unaffected.
+- **Multi-warehouse:** the per-field `timeZone` prop is the pressure valve for "this field is pinned to the site's zone, not the user's." Where that site zone comes from in context is a product question, but the mechanism is in place.
+
+## 7. Bundle / dependency impact
+
+### Dependency delta (verified)
+
+- **~10 net-new packages**, of which **3 are substantive** (`react-aria-components`, `react-aria`, `react-stately`); the rest are small utilities (`@internationalized/*`, `@react-types/shared`, `aria-hidden`, `client-only`, `use-sync-external-store`).
+
+### Measured size (esbuild, minified + gzipped, `react`/`react-dom` externalised, tree-shaken to the date slice)
+
+| Surface                                                                        | minified |     gzipped |
+| ------------------------------------------------------------------------------ | -------: | ----------: |
+| Value layer (`@internationalized/date`)                                        |  32.8 KB | **10.8 KB** |
+| RAC date components (DatePicker + DateField + Calendar + Popover + Dialog + …) | 241.5 KB | **73.4 KB** |
+| Full date surface (both)                                                       | 246.4 KB | **74.7 KB** |
+
+(The value layer is largely subsumed by the components — RAC already depends on it, so the marginal cost of adding it is ~1.3 KB.)
+
+**This is notable — ~75 KB gz if loaded eagerly** — and bigger than the original research's ~30 KB estimate. The drivers are overlay/positioning, focus management, collections, and **bundled localized ARIA strings for ~30+ locales**.
+
+### Mitigations (in priority order)
+
+1. **Additive & opt-in.** Only routes/consumers that import a date component pay; everything else tree-shakes it out. A consumer using only `DateField` (no calendar/popover) pays substantially less.
+2. **Lazy-load the popover/calendar behind the trigger.** Code-split so the field renders cheaply and the calendar chunk loads on first open. This moves the bulk off the initial bundle.
+3. **Strip unused locales.** react-aria ships a build plugin (`@react-aria/optimize-locales-plugin`, Vite/Webpack/Babel) that drops ARIA strings for locales we don't ship. If we ship only `en` + `ja`, this trims a meaningful slice of the 73 KB. _(Verify exact savings in our build.)_
+4. **Gate merge on a real bundle report** in the app's own bundler. This was an open question in the research; the measurement here confirms it's necessary, not optional.
+
+## 7.1 What the bundle actually buys us
+
+Reframed against the value layer, the premium is almost entirely **pre-built accessibility**, not i18n.
+
+`@internationalized/date` alone (**10.8 KB**) already delivers the _correctness_ dimensions — and we keep these in **every** option:
+
+- **Value-type correctness** — `CalendarDate` / `CalendarDateTime` / `ZonedDateTime`; no `Date` round-trip corruption.
+- **13 calendar systems** (Gregorian, Buddhist, Hebrew, Indian, Islamic variants, Japanese, Persian, ROC…) selected by locale.
+- **i18n formatting** — locale-driven segment order, first-day-of-week, 12/24h, numbering system.
+- **All date math** — add/subtract, compare, parse, constrain, DST-correct zone conversions.
+
+The **+32 KB (Ark)** or **+62 KB (react-aria)** on top buys the _interaction / a11y_ dimensions we would otherwise hand-build and maintain:
+
+- **WAI-ARIA APG conformance** — dialog/grid roles, roving tabindex, live-region announcements, focus management/trap, scroll lock.
+- **Segmented input behaviour** — per-segment Up/Down, type-to-fill auto-advance, locale segment ordering, backspace, invalid-input rejection at the segment.
+- **Full keyboard grid nav** — arrows, Home/End, PageUp/Down, Shift+PageUp/Down (the keyboard-research "must-haves" come free).
+- **Cross-browser + screen-reader testing** maintained by the vendor, not us.
+
+So the real question is not "is 75 KB worth i18n + calendars" — that's the 11 KB value layer we keep regardless. It's **"is the a11y/interaction layer worth building and owning ourselves (~11 KB, highest effort), or worth renting for +32 KB (Ark) / +62 KB (react-aria)?"** That is the Decision fork.
+
+### `@internationalized/date` vs `Intl.DateTimeFormat` — different layers, not alternatives
+
+What this doc calls the "value layer" is the date **representation**: the immutable objects our `value` / `onChange` hold (`CalendarDate` / `CalendarDateTime` / `ZonedDateTime`) plus their arithmetic and parsing. `Intl.DateTimeFormat` is a **formatter** (value → localized string) — the zero-bundle native engine we use directly for display / number / currency, and which `@internationalized/date` itself calls under the hood. They compose; they don't compete.
+
+"Use `Intl` instead of the lib" really means making JS `Date` the value type again — which reintroduces `Date`'s footguns, most notably the **date-only midnight-UTC shift**: a plain calendar date forced through a `Date` becomes an instant at midnight, so any timezone conversion (on parse, display, or save) can roll it a day forward/back. `CalendarDate` has no time and no zone, so there is nothing to shift.
+
+Net: the ~11 KB buys **representation + parsing + timezone/calendar correctness**, _not_ formatting — formatting is free and native in every option.
+
+## 7.2 Packaging / dependency surface
+
+`@internationalized/date` is **public API**, not an internal detail — its types _are_ the `value` / `onChange` / `minValue` types. Decision: ship it as a **regular `dependency`** of `@tailor-platform/app-shell` and **re-export its common surface**, so consumers import everything from one place and install nothing extra.
+
+- **Re-exported from `@tailor-platform/app-shell`** (the 90% surface): helpers `today`, `now`, `getLocalTimeZone`, `parseDate`, `parseDateTime`, `parseAbsolute`, `parseZonedDateTime`; types `CalendarDate`, `CalendarDateTime`, `ZonedDateTime`, `Time`, `DateValue`.
+- **Long tail**: a consumer needing a helper we don't re-export adds `@internationalized/date` to their own deps and imports it directly; it dedupes with app-shell's copy (and react-aria's internal copy) to a **single instance** as long as version ranges overlap — keep app-shell's range compatible with react-aria's.
+
+**Why a regular dep, not a peer:** lowest friction for a multi-feature library where dates are one feature. Consumers install only `@tailor-platform/app-shell`; there's no phantom-dependency hazard under pnpm because app-shell owns and resolves the copy. The contract is: **import date helpers/types from `@tailor-platform/app-shell`; only add `@internationalized/date` yourself for a long-tail helper.**
+
+A later move to a peer dep, or to a lighter foundation (§9), stays an internal change — the re-export surface is the consumer contract, not the underlying package.
+
+## 8. Open questions (follow-ups, not blockers)
+
+- **Form integration.** `CalendarDate` doesn't `JSON.stringify` cleanly. Decide whether to coerce to ISO at the form boundary or teach the schema/validator the `@internationalized/date` types. Drives whether `validate` / `validationBehavior` get exposed.
+- **Backend codec.** A small `parseAbsolute(iso, tz) → ZonedDateTime` / `value.toAbsoluteString()` layer. Decide where it lives (resolver edge vs GraphQL client vs field).
+- **Presets** (`{ label, value }[]` rail in the popover) — defer to v1.1; validate that imperatively setting a value from a preset click doesn't break focus management. **→ track as a subtask on the issue.**
+- **Keyboard / expression layer** (`t`, `+7`, `next tue`, etc.) — substantial enough to be **its own proposal**; the chosen foundation gives us the full APG grid + segment nav for free, the expression overlay is additive on top. **→ track as a subtask on the issue.**
+- **Inline `Calendar` a11y.** The APG pattern is dialog-shaped; confirm RAC's standalone `Calendar` is correct for the no-popover reporting-filter case.
+- **DateRangePicker.** Cells already carry range-state styling (§4.2), so it should be additive — confirm when we pick it up.
+
+## 9. Future plans — a lighter foundation
+
+We chose `react-aria-components` for v1, but the ~75 KB cost and the overlap with Base UI make a lighter foundation worth revisiting once the component is established and we have real usage + bundle data. **This is a tracked possibility, not a commitment.**
+
+Why deferring is low-regret: all candidates share the **same public API (§3)** and the **same value layer (`@internationalized/date`)**, so a future migration touches only the internal wrapper — consumers and stored values are unaffected.
+
+Two directions, in order of preference if/when we revisit:
+
+1. **`@internationalized/date` + Base UI** (~11 KB) — removes the second foundation entirely; maximal alignment with our Base UI stack. Cost: we build and own the segmented input + calendar-grid + APG dialog a11y. De-risk by starting from the simpler APG _text-input + calendar-dialog_ pattern (Base UI `Dialog` already handles focus trap/dismiss), adding the segmented input afterward.
+2. **Ark UI / Zag.js** (~43 KB) — ~40 % lighter than react-aria with the same value layer and good APG a11y, if a lighter, date-scoped second foundation is acceptable.
+
+**Triggers to revisit:** the date components show up as a material slice in a bundle report; we adopt `@internationalized/date` elsewhere anyway; or Base UI ships its own date primitives. **Not pursued:** react-day-picker (`Date`-based, abandons value correctness) and raw Zag-machine-on-Base-UI (no lighter than Ark, dual positioning).
diff --git a/examples/vite-app/src/App.tsx b/examples/vite-app/src/App.tsx
index fba2c8d2..7b482d47 100644
--- a/examples/vite-app/src/App.tsx
+++ b/examples/vite-app/src/App.tsx
@@ -36,6 +36,8 @@ const App = () => {
               <SidebarItem to="/dashboard/products" />
               <SidebarItem to="/dashboard/document-progress" />
             </SidebarGroup>
+            <SidebarItem to="/date-picker" />
+            <SidebarItem to="/data-table" />
             <SidebarItem to="/settings" />
           </DefaultSidebar>
         }
diff --git a/examples/vite-app/src/pages/data-table/page.tsx b/examples/vite-app/src/pages/data-table/page.tsx
new file mode 100644
index 00000000..1febf870
--- /dev/null
+++ b/examples/vite-app/src/pages/data-table/page.tsx
@@ -0,0 +1,273 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Layout,
+  Badge,
+  DataTable,
+  useDataTable,
+  useCollectionVariables,
+  createColumnHelper,
+  type CollectionVariables,
+  type PageInfo,
+  type DataTableData,
+  type AppShellPageProps,
+} from "@tailor-platform/app-shell";
+import { Table2 } from "lucide-react";
+
+// ─── Dummy data ────────────────────────────────────────────────────────────────
+
+type InvoiceStatus = "draft" | "sent" | "paid" | "overdue";
+
+// A `type` (not `interface`) so it satisfies `Record<string, unknown>` —
+// `createColumnHelper`/`useDataTable`'s row constraint. Interfaces lack the
+// implicit index signature that type aliases of object literals have.
+type Invoice = {
+  id: string;
+  customer: string;
+  amount: number;
+  status: InvoiceStatus;
+  /** ISO date, "YYYY-MM-DD" — matches what the date filter / DatePicker emit. */
+  dueDate: string;
+};
+
+const CUSTOMERS = [
+  "Acme Corp",
+  "Globex",
+  "Initech",
+  "Umbrella",
+  "Soylent",
+  "Hooli",
+  "Stark Industries",
+];
+const STATUSES: InvoiceStatus[] = ["draft", "sent", "paid", "overdue"];
+
+// Deterministic pseudo-random so the dataset is stable across renders/reloads.
+function makeInvoices(count: number): Invoice[] {
+  const rows: Invoice[] = [];
+  let seed = 1337;
+  const rand = () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+  const base = new Date("2026-01-01T00:00:00Z").getTime();
+  for (let i = 0; i < count; i++) {
+    const dayOffset = Math.floor(rand() * 270); // ~9 months spread
+    const d = new Date(base + dayOffset * 86_400_000);
+    rows.push({
+      id: `INV-${String(1000 + i)}`,
+      customer: CUSTOMERS[Math.floor(rand() * CUSTOMERS.length)],
+      amount: Math.round((rand() * 9000 + 100) * 100) / 100,
+      status: STATUSES[Math.floor(rand() * STATUSES.length)],
+      dueDate: d.toISOString().slice(0, 10),
+    });
+  }
+  return rows;
+}
+
+const ALL_INVOICES = makeInvoices(57);
+
+// ─── Async data source (stub for a GraphQL query) ───────────────────────────────
+// Mirrors a real resolver: takes the collection `variables` (filter `query`,
+// `order`, cursor `pagination`) and resolves a connection-shaped page after a
+// simulated network delay. Swap this out for `useQuery(gql\`...\`)` later.
+
+function applyOperator(fieldValue: unknown, op: string, opValue: unknown): boolean {
+  switch (op) {
+    case "eq":
+      return fieldValue === opValue;
+    case "ne":
+      return fieldValue !== opValue;
+    case "gt":
+      return (fieldValue as string | number) > (opValue as string | number);
+    case "gte":
+      return (fieldValue as string | number) >= (opValue as string | number);
+    case "lt":
+      return (fieldValue as string | number) < (opValue as string | number);
+    case "lte":
+      return (fieldValue as string | number) <= (opValue as string | number);
+    case "between": {
+      const { min, max } = opValue as { min: string | number; max: string | number };
+      return (fieldValue as string | number) >= min && (fieldValue as string | number) <= max;
+    }
+    case "in":
+      return Array.isArray(opValue) && opValue.includes(fieldValue);
+    case "nin":
+      return Array.isArray(opValue) && !opValue.includes(fieldValue);
+    case "contains":
+      return String(fieldValue).includes(String(opValue));
+    case "regex": {
+      // Tailor's case-insensitive filters use a "(?i)" prefix (not valid JS regex).
+      const pattern = String(opValue);
+      const ci = pattern.startsWith("(?i)");
+      return new RegExp(ci ? pattern.slice(4) : pattern, ci ? "i" : "").test(String(fieldValue));
+    }
+    default:
+      return true;
+  }
+}
+
+function matchesQuery(row: Invoice, query: CollectionVariables["query"]): boolean {
+  if (!query) return true;
+  return Object.entries(query).every(([field, ops]) =>
+    Object.entries(ops).every(([op, value]) =>
+      applyOperator(row[field as keyof Invoice], op, value),
+    ),
+  );
+}
+
+async function queryInvoices(variables: CollectionVariables): Promise<DataTableData<Invoice>> {
+  // 1. filter
+  let rows = ALL_INVOICES.filter((r) => matchesQuery(r, variables.query));
+
+  // 2. sort
+  if (variables.order?.length) {
+    const [{ field, direction }] = variables.order;
+    const dir = direction === "Desc" ? -1 : 1;
+    rows = [...rows].sort((a, b) => {
+      const av = a[field as keyof Invoice];
+      const bv = b[field as keyof Invoice];
+      if (av < bv) return -1 * dir;
+      if (av > bv) return 1 * dir;
+      return 0;
+    });
+  }
+
+  const total = rows.length;
+
+  // 3. cursor pagination (cursor === stringified index into the filtered+sorted list)
+  const { first, after, last, before } = variables.pagination;
+  let startIndex: number;
+  let endIndex: number;
+  if (last != null) {
+    endIndex = before != null ? Number(before) : total;
+    startIndex = Math.max(0, endIndex - last);
+  } else {
+    startIndex = after != null ? Number(after) + 1 : 0;
+    endIndex = startIndex + (first ?? 10);
+  }
+  const page = rows.slice(startIndex, endIndex);
+
+  const pageInfo: PageInfo = {
+    startCursor: page.length ? String(startIndex) : null,
+    endCursor: page.length ? String(startIndex + page.length - 1) : null,
+    hasPreviousPage: startIndex > 0,
+    hasNextPage: startIndex + page.length < total,
+  };
+
+  // simulate network latency
+  await new Promise((resolve) => setTimeout(resolve, 450));
+  return { rows: page, pageInfo, total };
+}
+
+// ─── Columns ─────────────────────────────────────────────────────────────────
+
+const { column } = createColumnHelper<Invoice>();
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+});
+const moneyFormatter = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" });
+
+const statusVariant = (status: InvoiceStatus) =>
+  status === "paid"
+    ? ("success" as const)
+    : status === "overdue"
+      ? ("outline-warning" as const)
+      : status === "sent"
+        ? ("outline-info" as const)
+        : ("neutral" as const);
+
+const columns = [
+  column({ label: "Invoice", render: (row) => row.id }),
+  column({
+    label: "Customer",
+    render: (row) => row.customer,
+    sort: { field: "customer", type: "string" },
+    filter: { field: "customer", type: "string" },
+  }),
+  column({
+    label: "Amount",
+    render: (row) => moneyFormatter.format(row.amount),
+    sort: { field: "amount", type: "number" },
+    filter: { field: "amount", type: "number" },
+  }),
+  column({
+    label: "Status",
+    render: (row) => <Badge variant={statusVariant(row.status)}>{row.status}</Badge>,
+    filter: {
+      field: "status",
+      type: "enum",
+      options: STATUSES.map((s) => ({ value: s, label: s })),
+    },
+  }),
+  column({
+    label: "Due date",
+    render: (row) => dateFormatter.format(new Date(`${row.dueDate}T00:00:00`)),
+    sort: { field: "dueDate", type: "date" },
+    // `type: "date"` → the filter editor renders the app-shell DatePicker.
+    filter: { field: "dueDate", type: "date" },
+  }),
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+const DataTablePage = () => {
+  const { variables, control } = useCollectionVariables({
+    params: {
+      pageSize: 10,
+      initialSort: [{ field: "dueDate", direction: "Asc" }],
+    },
+  });
+
+  const [data, setData] = useState<DataTableData<Invoice>>();
+  const [loading, setLoading] = useState(true);
+  const requestId = useRef(0);
+
+  useEffect(() => {
+    const id = ++requestId.current;
+    setLoading(true);
+    queryInvoices(variables).then((result) => {
+      // Ignore out-of-order responses from superseded requests.
+      if (id === requestId.current) {
+        setData(result);
+        setLoading(false);
+      }
+    });
+  }, [variables]);
+
+  const table = useDataTable({ columns, data, loading, control });
+
+  return (
+    <Layout>
+      <Layout.Header title="DataTable + Filters" />
+      <Layout.Column>
+        <div className="mb-6 rounded-md border border-border bg-muted/40 px-4 py-3 text-sm">
+          <strong>Filterable invoice list.</strong> Data is supplied by a promise-based stub that
+          takes the collection <code className="bg-muted px-1 py-0.5 rounded">variables</code>{" "}
+          (filter <code className="bg-muted px-1 py-0.5 rounded">query</code>, order, cursor
+          pagination) — a stand-in for the GraphQL query that would normally drive the table. Add a{" "}
+          <strong>Due date</strong> filter to use the <strong>DatePicker</strong> as the input.
+        </div>
+        <DataTable.Root value={table}>
+          <DataTable.Toolbar>
+            <DataTable.Filters />
+          </DataTable.Toolbar>
+          <DataTable.Table />
+          <DataTable.Footer>
+            <DataTable.Pagination pageSizeOptions={[10, 20, 50]} />
+          </DataTable.Footer>
+        </DataTable.Root>
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+DataTablePage.appShellPageProps = {
+  meta: {
+    title: "DataTable + Filters",
+    icon: <Table2 size={16} />,
+  },
+} satisfies AppShellPageProps;
+
+export default DataTablePage;
diff --git a/examples/vite-app/src/pages/date-picker/page.tsx b/examples/vite-app/src/pages/date-picker/page.tsx
new file mode 100644
index 00000000..910981c2
--- /dev/null
+++ b/examples/vite-app/src/pages/date-picker/page.tsx
@@ -0,0 +1,256 @@
+import { useState, type FormEvent } from "react";
+import {
+  Layout,
+  DateField,
+  DatePicker,
+  Calendar,
+  Form,
+  Button,
+  today,
+  getLocalTimeZone,
+  parseDate,
+  type CalendarDate,
+  type DateValue,
+  type AppShellPageProps,
+} from "@tailor-platform/app-shell";
+import { CalendarDays } from "lucide-react";
+
+const tz = getLocalTimeZone();
+
+const DatePickerPage = () => {
+  const [fieldValue, setFieldValue] = useState<CalendarDate | null>(null);
+  const [pickerValue, setPickerValue] = useState<CalendarDate | null>(null);
+  const [calendarValue, setCalendarValue] = useState<DateValue | null>(null);
+  const [weekendValue, setWeekendValue] = useState<CalendarDate | null>(null);
+
+  // Form-validation demo state.
+  const [deliveryDate, setDeliveryDate] = useState<CalendarDate | null>(null);
+  const [deliveryError, setDeliveryError] = useState<string | undefined>(undefined);
+  const [confirmedDate, setConfirmedDate] = useState<string | null>(null);
+
+  const tomorrow = today(tz).add({ days: 1 });
+  const threeMonths = today(tz).add({ months: 3 });
+
+  // Validation runs on submit; the DatePicker surfaces the message through its
+  // own `errorMessage` / `isInvalid` props (it isn't a Base UI Field control).
+  const handleDeliverySubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!deliveryDate) {
+      setConfirmedDate(null);
+      setDeliveryError("Please select a delivery date.");
+      return;
+    }
+    if (deliveryDate.compare(today(tz)) < 0) {
+      setConfirmedDate(null);
+      setDeliveryError("Delivery date can't be in the past.");
+      return;
+    }
+    setDeliveryError(undefined);
+    setConfirmedDate(deliveryDate.toString());
+  };
+
+  return (
+    <Layout>
+      <Layout.Header title="DatePicker" />
+      <Layout.Column>
+        <div className="mb-6 rounded-md border border-border bg-muted/40 px-4 py-3 text-sm">
+          <strong>Implementation: @internationalized/date + Base UI.</strong> Same public API and
+          a11y/localization contract as the react-aria variant — segmented input, calendar grid, and
+          APG keyboard support are hand-rolled here. Net-new dependency: just{" "}
+          <code className="bg-muted px-1 py-0.5 rounded">@internationalized/date</code> (~11 KB gz);
+          Base UI is already in the bundle.
+        </div>
+        <p className="mb-8 text-muted-foreground">
+          Interactive demo of{" "}
+          <code className="bg-muted px-1.5 py-0.5 rounded text-sm">DateField</code>,{" "}
+          <code className="bg-muted px-1.5 py-0.5 rounded text-sm">DatePicker</code>, and{" "}
+          <code className="bg-muted px-1.5 py-0.5 rounded text-sm">Calendar</code>. Try keyboard:
+          arrows in segments, arrows/PageUp/PageDown/Home/End in the calendar grid.
+        </p>
+
+        <div className="grid gap-10 max-w-2xl">
+          {/* ── DateField ──────────────────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">DateField</h2>
+
+            <div className="flex flex-wrap gap-6 items-start">
+              <DateField
+                label="Basic"
+                value={fieldValue}
+                onChange={(v) => setFieldValue(v as CalendarDate | null)}
+              />
+              <DateField
+                label="With description"
+                description="Select a date within the next 3 months"
+                minValue={tomorrow}
+                maxValue={threeMonths}
+              />
+              <DateField label="Disabled" isDisabled defaultValue={parseDate("2025-06-15")} />
+              <DateField label="Required" isRequired errorMessage="Date is required" />
+            </div>
+
+            {fieldValue && (
+              <p className="text-sm text-muted-foreground">
+                Selected: <strong>{fieldValue.toString()}</strong>
+              </p>
+            )}
+          </section>
+
+          {/* ── DatePicker ─────────────────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">DatePicker</h2>
+
+            <div className="flex flex-wrap gap-6 items-start">
+              <DatePicker
+                label="Basic"
+                value={pickerValue}
+                onChange={(v) => setPickerValue(v as CalendarDate | null)}
+              />
+              <DatePicker
+                label="Future dates only"
+                description="Minimum: tomorrow"
+                minValue={tomorrow}
+              />
+              <DatePicker
+                label="No weekends"
+                description="Weekday dates only"
+                isDateUnavailable={(d) => {
+                  const day = d.toDate(tz).getDay();
+                  return day === 0 || day === 6;
+                }}
+              />
+              <DatePicker
+                label="With range"
+                minValue={today(tz)}
+                maxValue={threeMonths}
+                description={`Today → ${threeMonths.toString()}`}
+              />
+            </div>
+
+            {pickerValue && (
+              <p className="text-sm text-muted-foreground">
+                Selected: <strong>{pickerValue.toString()}</strong>
+              </p>
+            )}
+          </section>
+
+          {/* ── In a form (submit validation) ───────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">In a form (submit validation)</h2>
+            <p className="text-sm text-muted-foreground">
+              Standard <code className="bg-muted px-1 py-0.5 rounded">Form</code> +{" "}
+              <code className="bg-muted px-1 py-0.5 rounded">Button</code>. Submitting empty (or
+              with a past date) triggers validation — the error surfaces through the DatePicker's
+              own <code className="bg-muted px-1 py-0.5 rounded">errorMessage</code> /{" "}
+              <code className="bg-muted px-1 py-0.5 rounded">isInvalid</code> props, and clears as
+              soon as a valid date is picked.
+            </p>
+            <Form
+              onSubmit={handleDeliverySubmit}
+              className="flex flex-col items-start gap-4 max-w-sm"
+            >
+              <DatePicker
+                label="Delivery date"
+                description="When should we ship your order?"
+                isRequired
+                value={deliveryDate}
+                onChange={(v) => {
+                  setDeliveryDate(v as CalendarDate | null);
+                  if (v) setDeliveryError(undefined);
+                }}
+                errorMessage={deliveryError}
+                isInvalid={!!deliveryError}
+              />
+              <Button type="submit">Schedule delivery</Button>
+            </Form>
+            {confirmedDate && (
+              <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">
+                ✓ Delivery scheduled for <strong>{confirmedDate}</strong>
+              </p>
+            )}
+          </section>
+
+          {/* ── DatePicker week start ───────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">DatePicker — week start</h2>
+            <p className="text-sm text-muted-foreground">
+              Omitting <code className="bg-muted px-1 py-0.5 rounded">firstDayOfWeek</code> follows
+              the active locale's convention (e.g. Sunday for en-US, Monday for en-GB). Pass it
+              explicitly to force a specific start day regardless of locale.
+            </p>
+            <div className="flex flex-wrap gap-6 items-start">
+              <DatePicker label="Forced Sunday" firstDayOfWeek="sun" />
+              <DatePicker label="Forced Monday" firstDayOfWeek="mon" />
+              <DatePicker label="Locale default" />
+            </div>
+          </section>
+
+          {/* ── Locale ──────────────────────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">
+              Locale (segment order + names)
+            </h2>
+            <div className="flex flex-wrap gap-6 items-start">
+              <DatePicker label="en-US (MM/DD/YYYY)" locale="en-US" />
+              <DatePicker label="en-GB (DD/MM/YYYY, Mon-first)" locale="en-GB" />
+              <DatePicker label="ja-JP (YYYY/MM/DD)" locale="ja-JP" />
+            </div>
+          </section>
+
+          {/* ── Calendar ───────────────────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">Calendar (standalone)</h2>
+
+            <div className="flex flex-wrap gap-8 items-start">
+              <div className="flex flex-col gap-2">
+                <p className="text-sm font-medium">Basic</p>
+                <Calendar
+                  aria-label="Select date"
+                  value={calendarValue}
+                  onChange={setCalendarValue}
+                />
+                {calendarValue && (
+                  <p className="text-sm text-muted-foreground">
+                    Selected: <strong>{calendarValue.toString()}</strong>
+                  </p>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <p className="text-sm font-medium">Pre-selected + min/max</p>
+                <Calendar
+                  aria-label="Constrained calendar"
+                  defaultValue={parseDate("2025-06-15")}
+                  minValue={parseDate("2025-06-01")}
+                  maxValue={parseDate("2025-06-30")}
+                />
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <p className="text-sm font-medium">No weekends</p>
+                <Calendar
+                  aria-label="Weekdays only"
+                  isDateUnavailable={(d) => {
+                    const day = d.toDate(tz).getDay();
+                    return day === 0 || day === 6;
+                  }}
+                  value={weekendValue}
+                  onChange={(v) => setWeekendValue(v as CalendarDate)}
+                />
+              </div>
+            </div>
+          </section>
+        </div>
+      </Layout.Column>
+    </Layout>
+  );
+};
+
+DatePickerPage.appShellPageProps = {
+  meta: {
+    title: "DatePicker",
+    icon: <CalendarDays size={16} />,
+  },
+} satisfies AppShellPageProps;
+
+export default DatePickerPage;
diff --git a/examples/vite-app/src/routes.generated.ts b/examples/vite-app/src/routes.generated.ts
index 93a66bcf..65c22798 100644
--- a/examples/vite-app/src/routes.generated.ts
+++ b/examples/vite-app/src/routes.generated.ts
@@ -21,6 +21,8 @@ export type GeneratedRouteParams = {
   "/dashboard/orders": {};
   "/dashboard/orders/:id": { id: string };
   "/dashboard/products": {};
+  "/data-table": {};
+  "/date-picker": {};
   "/settings": {};
 };
 
diff --git a/packages/core/.oxlintrc.jsonc b/packages/core/.oxlintrc.jsonc
index ef5e146b..28b22169 100644
--- a/packages/core/.oxlintrc.jsonc
+++ b/packages/core/.oxlintrc.jsonc
@@ -10,5 +10,23 @@
     "react/react-in-jsx-scope": "off",
     "no-nested-ternary": "error",
   },
+  "overrides": [
+    {
+      // The date components hand-author the ARIA Authoring Practices widget
+      // patterns (a labelled spinbutton group, a calendar grid, a date-picker
+      // dialog) that react-aria emits internally. The roles and the opt-in
+      // `autoFocus` prop are intentional and spec-compliant here.
+      "files": ["src/components/date-field/**/*.tsx", "src/components/calendar/**/*.tsx"],
+      "rules": {
+        "jsx-a11y/prefer-tag-over-role": "off",
+        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+        "jsx-a11y/no-autofocus": "off",
+        // The calendar wrapper carries a keydown handler purely to contain Tab
+        // focus within the popover (prev → next → grid) — a focus-management
+        // concern, not a clickable control.
+        "jsx-a11y/no-static-element-interactions": "off",
+      },
+    },
+  ],
   "ignorePatterns": ["dist", "node_modules"],
 }
diff --git a/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap
new file mode 100644
index 00000000..99bd521b
--- /dev/null
+++ b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`snapshots > Calendar — pre-selected 1`] = `"<div data-slot="calendar" class="astw:w-fit"><header class="astw:mb-2 astw:flex astw:items-center astw:justify-between"><button type="button" data-slot="calendar-nav" aria-label="Previous month" class="astw:flex astw:size-7 astw:items-center astw:justify-center astw:rounded-sm astw:outline-none astw:text-muted-foreground astw:hover:bg-accent astw:hover:text-accent-foreground astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:opacity-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left astw:size-4" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></button><span id="_r_0_" aria-live="polite" class="astw:text-sm astw:font-medium astw:text-foreground">June 2025</span><button type="button" data-slot="calendar-nav" aria-label="Next month" class="astw:flex astw:size-7 astw:items-center astw:justify-center astw:rounded-sm astw:outline-none astw:text-muted-foreground astw:hover:bg-accent astw:hover:text-accent-foreground astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:opacity-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right astw:size-4" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></header><table role="grid" aria-label="Select date" class="astw:border-collapse"><thead><tr><th scope="col" aria-label="Sunday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Sun</span></th><th scope="col" aria-label="Monday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Mon</span></th><th scope="col" aria-label="Tuesday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Tue</span></th><th scope="col" aria-label="Wednesday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Wed</span></th><th scope="col" aria-label="Thursday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Thu</span></th><th scope="col" aria-label="Friday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Fri</span></th><th scope="col" aria-label="Saturday" class="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"><span aria-hidden="true">Sat</span></th></tr></thead><tbody><tr><td class="astw:p-0"><button type="button" aria-label="Sunday, June 1, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">1</button></td><td class="astw:p-0"><button type="button" aria-label="Monday, June 2, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">2</button></td><td class="astw:p-0"><button type="button" aria-label="Tuesday, June 3, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">3</button></td><td class="astw:p-0"><button type="button" aria-label="Wednesday, June 4, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">4</button></td><td class="astw:p-0"><button type="button" aria-label="Thursday, June 5, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">5</button></td><td class="astw:p-0"><button type="button" aria-label="Friday, June 6, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">6</button></td><td class="astw:p-0"><button type="button" aria-label="Saturday, June 7, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">7</button></td></tr><tr><td class="astw:p-0"><button type="button" aria-label="Sunday, June 8, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">8</button></td><td class="astw:p-0"><button type="button" aria-label="Monday, June 9, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">9</button></td><td class="astw:p-0"><button type="button" aria-label="Tuesday, June 10, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">10</button></td><td class="astw:p-0"><button type="button" aria-label="Wednesday, June 11, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">11</button></td><td class="astw:p-0"><button type="button" aria-label="Thursday, June 12, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">12</button></td><td class="astw:p-0"><button type="button" aria-label="Friday, June 13, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">13</button></td><td class="astw:p-0"><button type="button" aria-label="Saturday, June 14, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">14</button></td></tr><tr><td aria-selected="true" class="astw:p-0"><button type="button" aria-label="Sunday, June 15, 2025" tabindex="0" data-selected="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">15</button></td><td class="astw:p-0"><button type="button" aria-label="Monday, June 16, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">16</button></td><td class="astw:p-0"><button type="button" aria-label="Tuesday, June 17, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">17</button></td><td class="astw:p-0"><button type="button" aria-label="Wednesday, June 18, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">18</button></td><td class="astw:p-0"><button type="button" aria-label="Thursday, June 19, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">19</button></td><td class="astw:p-0"><button type="button" aria-label="Friday, June 20, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">20</button></td><td class="astw:p-0"><button type="button" aria-label="Saturday, June 21, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">21</button></td></tr><tr><td class="astw:p-0"><button type="button" aria-label="Sunday, June 22, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">22</button></td><td class="astw:p-0"><button type="button" aria-label="Monday, June 23, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">23</button></td><td class="astw:p-0"><button type="button" aria-label="Tuesday, June 24, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">24</button></td><td class="astw:p-0"><button type="button" aria-label="Wednesday, June 25, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">25</button></td><td class="astw:p-0"><button type="button" aria-label="Thursday, June 26, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">26</button></td><td class="astw:p-0"><button type="button" aria-label="Friday, June 27, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">27</button></td><td class="astw:p-0"><button type="button" aria-label="Saturday, June 28, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">28</button></td></tr><tr><td class="astw:p-0"><button type="button" aria-label="Sunday, June 29, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">29</button></td><td class="astw:p-0"><button type="button" aria-label="Monday, June 30, 2025" tabindex="-1" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">30</button></td><td class="astw:p-0"><button type="button" aria-label="Tuesday, July 1, 2025" tabindex="-1" data-outside-month="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">1</button></td><td class="astw:p-0"><button type="button" aria-label="Wednesday, July 2, 2025" tabindex="-1" data-outside-month="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">2</button></td><td class="astw:p-0"><button type="button" aria-label="Thursday, July 3, 2025" tabindex="-1" data-outside-month="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">3</button></td><td class="astw:p-0"><button type="button" aria-label="Friday, July 4, 2025" tabindex="-1" data-outside-month="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">4</button></td><td class="astw:p-0"><button type="button" aria-label="Saturday, July 5, 2025" tabindex="-1" data-outside-month="true" class="astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm astw:hover:bg-accent astw:hover:text-accent-foreground astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px] astw:active:scale-95 astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground astw:data-[selected]:hover:bg-primary/90 astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40 astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50 astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2">5</button></td></tr></tbody></table></div>"`;
diff --git a/packages/core/__snapshots__/src__components__date-field__date-field.test.tsx.snap b/packages/core/__snapshots__/src__components__date-field__date-field.test.tsx.snap
new file mode 100644
index 00000000..856ed2c5
--- /dev/null
+++ b/packages/core/__snapshots__/src__components__date-field__date-field.test.tsx.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`snapshots > DateField 1`] = `"<div data-slot="date-field" class="astw:flex astw:flex-col astw:gap-1"><span data-slot="date-picker-label" class="astw:text-sm astw:font-medium astw:text-foreground" id="_r_0_">Invoice date</span><div role="group" data-slot="date-picker-group" aria-labelledby="_r_0_" class="astw:border-input astw:w-full astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:shadow-xs astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:flex astw:h-9 astw:min-w-[142px] astw:items-center astw:gap-0 astw:py-0 astw:focus-within:border-ring astw:focus-within:ring-[3px] astw:focus-within:ring-ring/50 astw:data-[invalid]:border-destructive astw:data-[invalid]:ring-destructive/20 astw:data-[disabled]:cursor-not-allowed astw:data-[disabled]:opacity-50"><div data-slot="date-input" class="astw:flex astw:flex-1 astw:items-center astw:gap-px"><div role="spinbutton" data-slot="date-segment" data-type="month" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="month" aria-valuemin="1" aria-valuemax="12" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">mm</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="day" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="day" aria-valuemin="1" aria-valuemax="31" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">dd</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="year" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="year" aria-valuemin="1" aria-valuemax="9999" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">yyyy</div></div></div></div>"`;
+
+exports[`snapshots > DateField — invalid with error 1`] = `"<div data-slot="date-field" class="astw:flex astw:flex-col astw:gap-1"><span data-slot="date-picker-label" class="astw:text-sm astw:font-medium astw:text-foreground" id="_r_3_">Date</span><div role="group" data-slot="date-picker-group" aria-labelledby="_r_3_" aria-describedby="_r_4_ _r_5_" data-invalid="true" class="astw:border-input astw:w-full astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:shadow-xs astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:flex astw:h-9 astw:min-w-[142px] astw:items-center astw:gap-0 astw:py-0 astw:focus-within:border-ring astw:focus-within:ring-[3px] astw:focus-within:ring-ring/50 astw:data-[invalid]:border-destructive astw:data-[invalid]:ring-destructive/20 astw:data-[disabled]:cursor-not-allowed astw:data-[disabled]:opacity-50"><div data-slot="date-input" class="astw:flex astw:flex-1 astw:items-center astw:gap-px"><div role="spinbutton" data-slot="date-segment" data-type="month" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="month" aria-invalid="true" aria-valuemin="1" aria-valuemax="12" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">mm</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="day" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="day" aria-invalid="true" aria-valuemin="1" aria-valuemax="31" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">dd</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="year" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="year" aria-invalid="true" aria-valuemin="1" aria-valuemax="9999" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">yyyy</div></div></div><p data-slot="date-picker-description" class="astw:text-sm astw:text-muted-foreground" id="_r_4_">Pick a date</p><p data-slot="date-picker-error" role="alert" class="astw:text-sm astw:font-medium astw:text-destructive" id="_r_5_">Required</p></div>"`;
+
+exports[`snapshots > DatePicker — closed 1`] = `"<div data-slot="date-picker" class="astw:flex astw:flex-col astw:gap-1"><span data-slot="date-picker-label" class="astw:text-sm astw:font-medium astw:text-foreground" id="_r_6_">Ship date</span><div role="group" data-slot="date-picker-group" aria-labelledby="_r_6_" class="astw:border-input astw:w-full astw:rounded-md astw:border astw:bg-transparent astw:px-3 astw:text-base astw:shadow-xs astw:outline-none astw:md:text-sm astw:dark:bg-input/30 astw:transition-[color,box-shadow] astw:selection:bg-primary astw:selection:text-primary-foreground astw:placeholder:text-muted-foreground astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:flex astw:h-9 astw:min-w-[142px] astw:items-center astw:gap-0 astw:py-0 astw:focus-within:border-ring astw:focus-within:ring-[3px] astw:focus-within:ring-ring/50 astw:data-[invalid]:border-destructive astw:data-[invalid]:ring-destructive/20 astw:data-[disabled]:cursor-not-allowed astw:data-[disabled]:opacity-50"><div data-slot="date-input" class="astw:flex astw:flex-1 astw:items-center astw:gap-px"><div role="spinbutton" data-slot="date-segment" data-type="month" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="month" aria-valuemin="1" aria-valuemax="12" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">mm</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="day" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="day" aria-valuemin="1" aria-valuemax="31" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">dd</div><span aria-hidden="true" data-slot="date-segment" data-type="literal" class="astw:select-none astw:px-px astw:text-muted-foreground/60">/</span><div role="spinbutton" data-slot="date-segment" data-type="year" data-placeholder="true" contenteditable="false" tabindex="0" aria-label="year" aria-valuemin="1" aria-valuemax="9999" aria-valuetext="Empty" class="astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none astw:focus:bg-primary astw:focus:text-primary-foreground astw:data-[placeholder]:text-muted-foreground">yyyy</div></div><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_r_a_" aria-haspopup="dialog" aria-expanded="false" data-slot="date-picker-button" aria-label="Open calendar" class="astw:ml-1 astw:flex astw:size-7 astw:items-center astw:justify-center astw:rounded-sm astw:outline-none astw:text-muted-foreground astw:hover:text-foreground astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:pointer-events-none astw:disabled:opacity-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar astw:size-4" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg></button></div></div>"`;
diff --git a/packages/core/package.json b/packages/core/package.json
index 62c07369..14e5ad42 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@internationalized/date": "3.12.2",
     "@standard-schema/spec": "^1.1.0",
     "@tailor-platform/app-shell-vite-plugin": "workspace:*",
     "@tailor-platform/auth-public-client": "^0.5.0",
diff --git a/packages/core/src/components/appshell.tsx b/packages/core/src/components/appshell.tsx
index 78d791d2..7f62e4ba 100644
--- a/packages/core/src/components/appshell.tsx
+++ b/packages/core/src/components/appshell.tsx
@@ -107,6 +107,14 @@ type SharedAppShellProps = React.PropsWithChildren<{
    */
   locale?: string;
 
+  /**
+   * IANA timezone (e.g. "America/Los_Angeles") used by date/time components
+   * as the default for resolving "today" and for `ZonedDateTime` values.
+   *
+   * If not provided, date/time components fall back to the user's local timezone.
+   */
+  timeZone?: string;
+
   /**
    * Global error boundary component applied to all routes.
    *
@@ -302,9 +310,17 @@ export const AppShell = (props: AppShellProps) => {
             basePath: props.basePath,
             errorBoundary: props.errorBoundary,
             locale: props.locale,
+            timeZone: props.timeZone,
           })
         : null,
-    [modules, props.settingsResources, props.basePath, props.errorBoundary, props.locale],
+    [
+      modules,
+      props.settingsResources,
+      props.basePath,
+      props.errorBoundary,
+      props.locale,
+      props.timeZone,
+    ],
   );
 
   // Memoize context values to prevent unnecessary re-renders
diff --git a/packages/core/src/components/calendar/calendar-view.tsx b/packages/core/src/components/calendar/calendar-view.tsx
new file mode 100644
index 00000000..b7800c72
--- /dev/null
+++ b/packages/core/src/components/calendar/calendar-view.tsx
@@ -0,0 +1,261 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCalendarT } from "./i18n";
+import type { CalendarDay, useCalendarState } from "./use-calendar-state";
+
+/**
+ * Calendar-grid presentation — the APG date-grid markup, driven by our own
+ * `useCalendarState` engine. Shared by the standalone `Calendar` and the
+ * `DatePicker` popover. Not exported from the package.
+ *
+ * Styling mirrors the rest of the library (`astw:` tokens, dark mode).
+ */
+
+// ─── Calendar cell styling ───────────────────────────────────────────────────
+// Driven by boolean data-* attributes we set on each cell button (Tailwind v4
+// arbitrary variants match attribute presence) — the same contract the
+// react-aria implementation uses, so the visual identity is identical.
+const calendarCellVariants = cva(
+  "astw:flex astw:size-9 astw:cursor-pointer astw:items-center astw:justify-center astw:rounded-md astw:text-sm",
+  {
+    variants: {
+      state: {
+        base: [
+          // Interaction states use native pseudo-classes (the cell is a real
+          // <button>); the boolean data-* attributes below are the ones we set.
+          "astw:hover:bg-accent astw:hover:text-accent-foreground",
+          // Roving focus moves programmatically during keyboard nav, so key the
+          // ring off :focus (not :focus-visible) so it shows on popover open too.
+          // relative+z-10 lifts the ring above adjacent cells (no gap between).
+          "astw:outline-none astw:focus:relative astw:focus:z-10 astw:focus:ring-ring/50 astw:focus:ring-[3px]",
+          "astw:active:scale-95",
+          "astw:data-[selected]:bg-primary astw:data-[selected]:text-primary-foreground",
+          "astw:data-[selected]:hover:bg-primary/90",
+          "astw:data-[outside-month]:pointer-events-none astw:data-[outside-month]:opacity-40",
+          "astw:data-[unavailable]:pointer-events-none astw:data-[unavailable]:text-muted-foreground astw:data-[unavailable]:line-through",
+          "astw:data-[disabled]:pointer-events-none astw:data-[disabled]:opacity-50",
+          // Range states — wired now so a future DateRangePicker is purely additive
+          "astw:data-[selection-start]:rounded-l-md astw:data-[selection-end]:rounded-r-md",
+          "astw:data-[today]:font-semibold astw:data-[today]:underline astw:data-[today]:underline-offset-2",
+        ],
+      },
+    },
+    defaultVariants: { state: "base" },
+  },
+);
+
+// Keyboard focus ring — the same `ring` treatment used by Button / inputs.
+const navButtonClasses = cn(
+  "astw:flex astw:size-7 astw:items-center astw:justify-center astw:rounded-sm astw:outline-none",
+  "astw:text-muted-foreground",
+  "astw:hover:bg-accent astw:hover:text-accent-foreground",
+  "astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px]",
+  "astw:disabled:pointer-events-none astw:disabled:opacity-50",
+);
+
+type CalendarState = ReturnType<typeof useCalendarState>;
+
+interface CalendarViewProps {
+  state: CalendarState;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  className?: string;
+  /**
+   * Used when the calendar is opened in a popover: moves focus into the grid on
+   * mount and contains Tab/Shift+Tab within the prev → next → grid loop (the
+   * APG date-picker dialog pattern). Off for the inline standalone calendar,
+   * which must let Tab pass through to the rest of the page.
+   */
+  inPopover?: boolean;
+}
+
+export function CalendarView({
+  state,
+  ariaLabel,
+  ariaLabelledBy,
+  className,
+  inPopover,
+}: CalendarViewProps) {
+  const t = useCalendarT();
+  const headingId = React.useId();
+  const cellRefs = React.useRef<Map<string, HTMLButtonElement | null>>(new Map());
+  const prevBtnRef = React.useRef<HTMLButtonElement>(null);
+  const nextBtnRef = React.useRef<HTMLButtonElement>(null);
+
+  // Move DOM focus to the focused date only when keyboard grid navigation asked
+  // for it (one-shot `moveFocusRef`). This deliberately does NOT fire for the
+  // prev/next month buttons, so clicking those keeps focus on the button.
+  React.useEffect(() => {
+    if (!state.moveFocusRef.current) return;
+    state.moveFocusRef.current = false;
+    // preventScroll: focus is moved programmatically (popover open / roving
+    // nav); letting the browser scroll the cell into view would jump the page
+    // even when the field is already visible.
+    cellRefs.current.get(state.focusedDate.toString())?.focus({ preventScroll: true });
+  }, [state.focusedDate, state.moveFocusRef]);
+
+  // When opened in a popover, move focus into the grid so arrow keys work
+  // immediately (the APG pattern; Base UI's non-modal popover won't do this).
+  React.useEffect(() => {
+    if (!inPopover) return;
+    state.isFocusedRef.current = true;
+    // preventScroll — see the roving-focus effect above.
+    cellRefs.current.get(state.focusedDate.toString())?.focus({ preventScroll: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Contain Tab within the prev → next → grid loop while in the popover.
+  const handleContainerKeyDown = (e: React.KeyboardEvent) => {
+    if (!inPopover || e.key !== "Tab") return;
+    const gridCell = cellRefs.current.get(state.focusedDate.toString()) ?? null;
+    const stops = [
+      state.prevDisabled ? null : prevBtnRef.current,
+      state.nextDisabled ? null : nextBtnRef.current,
+      gridCell,
+    ].filter((el): el is HTMLButtonElement => el != null);
+    if (stops.length === 0) return;
+    const idx = stops.indexOf(document.activeElement as HTMLButtonElement);
+    if (idx === -1) return;
+    e.preventDefault();
+    const dir = e.shiftKey ? -1 : 1;
+    const next = stops[(idx + dir + stops.length) % stops.length];
+    // Entering the grid stop should re-arm the roving-focus effect.
+    if (next === gridCell) state.isFocusedRef.current = true;
+    next.focus({ preventScroll: true });
+  };
+
+  return (
+    <div
+      data-slot="calendar"
+      className={cn("astw:w-fit", className)}
+      onKeyDown={handleContainerKeyDown}
+    >
+      <header className="astw:mb-2 astw:flex astw:items-center astw:justify-between">
+        <button
+          ref={prevBtnRef}
+          type="button"
+          data-slot="calendar-nav"
+          aria-label={t("previousMonth")}
+          disabled={state.prevDisabled}
+          onClick={state.previousMonth}
+          className={navButtonClasses}
+        >
+          <ChevronLeftIcon className="astw:size-4" />
+        </button>
+        <span
+          id={headingId}
+          aria-live="polite"
+          className="astw:text-sm astw:font-medium astw:text-foreground"
+        >
+          {state.title}
+        </span>
+        <button
+          ref={nextBtnRef}
+          type="button"
+          data-slot="calendar-nav"
+          aria-label={t("nextMonth")}
+          disabled={state.nextDisabled}
+          onClick={state.nextMonth}
+          className={navButtonClasses}
+        >
+          <ChevronRightIcon className="astw:size-4" />
+        </button>
+      </header>
+      {/* APG calendar-grid pattern: role="grid" upgrades the table's cell/row
+          semantics so arrow-key navigation is announced correctly. */}
+      <table
+        role="grid"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+        className="astw:border-collapse"
+      >
+        <thead>
+          <tr>
+            {state.weekDays.map((day, i) => (
+              <th
+                key={i}
+                scope="col"
+                aria-label={day.long}
+                className="astw:w-9 astw:pb-1 astw:text-center astw:text-xs astw:font-normal astw:text-muted-foreground"
+              >
+                <span aria-hidden="true">{day.short}</span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {state.weeks.map((week, w) => (
+            <tr key={w}>
+              {week.map((day) => (
+                <CalendarCell
+                  key={day.date.toString()}
+                  day={day}
+                  label={state.cellLabel(day.date)}
+                  onSelect={() => state.selectDate(day.date)}
+                  onKeyDown={(e) => state.onCellKeyDown(e, day.date)}
+                  registerRef={(el) => cellRefs.current.set(day.date.toString(), el)}
+                  onFocus={() => {
+                    state.isFocusedRef.current = true;
+                  }}
+                />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+interface CalendarCellProps {
+  day: CalendarDay;
+  label: string;
+  onSelect: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  registerRef: (el: HTMLButtonElement | null) => void;
+  onFocus: () => void;
+}
+
+function CalendarCell({
+  day,
+  label,
+  onSelect,
+  onKeyDown,
+  registerRef,
+  onFocus,
+}: CalendarCellProps) {
+  // Selectable: a real, in-range, available day. Gates click + Enter/Space.
+  const interactive = !day.isOutsideMonth && !day.isDisabled && !day.isUnavailable;
+  // Reachable by roving keyboard focus: any in-month day, including disabled and
+  // unavailable ones. Per APG, arrow keys traverse *through* disabled dates — they
+  // just can't be selected — so the keydown handler must be attached to them too,
+  // otherwise focus lands on a disabled day with no way to navigate away.
+  const focusable = !day.isOutsideMonth;
+  // `<td>` inside `role="grid"` is implicitly a gridcell — no explicit role needed.
+  return (
+    <td aria-selected={day.isSelected || undefined} className="astw:p-0">
+      <button
+        type="button"
+        ref={registerRef}
+        aria-label={label}
+        aria-disabled={day.isDisabled || day.isUnavailable || undefined}
+        tabIndex={day.isFocused && !day.isOutsideMonth ? 0 : -1}
+        data-selected={day.isSelected || undefined}
+        data-disabled={day.isDisabled || undefined}
+        data-unavailable={day.isUnavailable || undefined}
+        data-outside-month={day.isOutsideMonth || undefined}
+        data-today={day.isToday || undefined}
+        onClick={interactive ? onSelect : undefined}
+        onKeyDown={focusable ? onKeyDown : undefined}
+        onFocus={onFocus}
+        className={calendarCellVariants()}
+      >
+        {day.date.day}
+      </button>
+    </td>
+  );
+}
+
+export { calendarCellVariants };
diff --git a/packages/core/src/components/calendar/calendar.test.tsx b/packages/core/src/components/calendar/calendar.test.tsx
new file mode 100644
index 00000000..047d46e5
--- /dev/null
+++ b/packages/core/src/components/calendar/calendar.test.tsx
@@ -0,0 +1,170 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CalendarDate, parseDate, isSameDay } from "@internationalized/date";
+import { createAppShellWrapper } from "../../../tests/test-utils";
+import { Calendar } from "./calendar";
+
+// Behaviour + DOM a11y contract for the standalone Calendar grid (roving focus,
+// APG keyboard nav, selection). The field/popover coverage lives in
+// ../date-field/date-field.test.tsx.
+
+afterEach(() => {
+  cleanup();
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Find <div role="button"> day cells inside a calendar grid (not nav buttons). */
+function getCalendarCells() {
+  return screen.getAllByRole("button", { hidden: true }).filter((c) => c.closest('[role="grid"]'));
+}
+
+function getEnabledCalendarCells() {
+  return getCalendarCells().filter(
+    (c) => !c.hasAttribute("data-disabled") && !c.hasAttribute("data-outside-month"),
+  );
+}
+
+// ─── Snapshot ─────────────────────────────────────────────────────────────────
+// Pinned input (fixed `defaultValue`, no live "today") so output is stable.
+
+describe("snapshots", () => {
+  it("Calendar — pre-selected", () => {
+    const { container } = render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+});
+
+// ─── Calendar ─────────────────────────────────────────────────────────────────
+
+describe("Calendar", () => {
+  it("renders a calendar grid", () => {
+    render(<Calendar aria-label="Select date" />);
+    expect(screen.getByRole("grid")).toBeDefined();
+  });
+
+  it("renders navigation buttons", () => {
+    render(<Calendar aria-label="Select date" />);
+    const navButtons = screen.getAllByRole("button").filter((b) => !b.closest('[role="grid"]'));
+    expect(navButtons.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("localizes the month-nav aria-labels from the AppShell locale (ja)", () => {
+    render(<Calendar aria-label="日付を選択" />, { wrapper: createAppShellWrapper("ja") });
+    expect(screen.getByRole("button", { name: "前の月" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "次の月" })).toBeDefined();
+  });
+
+  it("fires onChange when a date cell is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Calendar aria-label="Select date" onChange={onChange} />);
+
+    const enabled = getEnabledCalendarCells();
+    if (enabled.length > 0) {
+      await user.click(enabled[0]);
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    }
+  });
+
+  it("renders selected cell with data-selected attribute", () => {
+    const defaultValue = parseDate("2025-06-15") as CalendarDate;
+    render(<Calendar aria-label="Select date" defaultValue={defaultValue} />);
+
+    const selected = getCalendarCells().find((c) => c.hasAttribute("data-selected"));
+    expect(selected).toBeDefined();
+  });
+
+  it("renders no disabled cells when minValue is not set", () => {
+    render(<Calendar aria-label="Select date" />);
+    const currentMonthCells = getCalendarCells().filter(
+      (c) => !c.hasAttribute("data-outside-month"),
+    );
+    expect(currentMonthCells.length).toBeGreaterThan(0);
+  });
+
+  it("uses a roving tabindex anchored on the focused date", () => {
+    render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    const tabbable = getCalendarCells().filter((c) => c.getAttribute("tabindex") === "0");
+    expect(tabbable).toHaveLength(1);
+    expect(tabbable[0].textContent).toBe("15");
+  });
+
+  it("carries a focus-ring utility class on day cells", () => {
+    render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    const cell = getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")!;
+    // Focus styling is the same `ring` utility used by Button/inputs.
+    expect(cell.className).toMatch(/focus:ring/);
+  });
+
+  it("keeps focus on the month nav button when changing months", async () => {
+    const user = userEvent.setup();
+    render(<Calendar aria-label="Select date" />);
+    const nextBtn = screen
+      .getAllByRole("button")
+      .find((b) => b.getAttribute("aria-label") === "Next month")!;
+    // Simulate the grid having been focused first (e.g. via keyboard nav).
+    const cell = getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")!;
+    cell.focus();
+    await user.click(nextBtn);
+    // Focus must remain on the nav button, not jump back into the grid.
+    expect(document.activeElement).toBe(nextBtn);
+    expect(document.activeElement?.closest('[role="grid"]')).toBeNull();
+  });
+
+  it("moves the roving focus with arrow keys (→ next day, ↓ next week)", async () => {
+    const user = userEvent.setup();
+    render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    const start = getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")!;
+    start.focus();
+    await user.keyboard("{ArrowRight}");
+    expect(getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")?.textContent).toBe(
+      "16",
+    );
+    await user.keyboard("{ArrowDown}");
+    expect(getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")?.textContent).toBe(
+      "23",
+    );
+  });
+
+  it("lets arrow keys traverse through unavailable dates without getting stuck", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    // Mark the 16th unavailable — the day we'll land on mid-navigation.
+    const unavailable = parseDate("2025-06-16") as CalendarDate;
+    render(
+      <Calendar
+        aria-label="Select date"
+        defaultValue={parseDate("2025-06-15") as CalendarDate}
+        isDateUnavailable={(d) => isSameDay(d, unavailable)}
+        onChange={onChange}
+      />,
+    );
+    const tabbable = () => getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")!;
+
+    tabbable().focus();
+    await user.keyboard("{ArrowRight}"); // → 16 (unavailable, but focusable)
+    const onSixteenth = tabbable();
+    expect(onSixteenth.textContent).toBe("16");
+    expect(onSixteenth.hasAttribute("data-unavailable")).toBe(true);
+
+    // Selection is blocked on the unavailable day...
+    await user.keyboard("{Enter}");
+    expect(onChange).not.toHaveBeenCalled();
+
+    // ...but navigation continues right off it (this is the bug being fixed).
+    await user.keyboard("{ArrowRight}");
+    expect(tabbable().textContent).toBe("17");
+  });
+});
diff --git a/packages/core/src/components/calendar/calendar.tsx b/packages/core/src/components/calendar/calendar.tsx
new file mode 100644
index 00000000..985d64f7
--- /dev/null
+++ b/packages/core/src/components/calendar/calendar.tsx
@@ -0,0 +1,95 @@
+import type { CalendarDate, DateValue } from "@internationalized/date";
+import { useResolvedLocale, useTimeZone } from "@/contexts/appshell-context";
+import { useCalendarState, type FirstDayOfWeek } from "./use-calendar-state";
+import { CalendarView } from "./calendar-view";
+
+/**
+ * Public, closed-API standalone calendar — the @internationalized/date + Base UI
+ * implementation. Same surface as the react-aria variant; only the internals
+ * differ. Consumers never see Base UI or the calendar engine.
+ */
+
+export interface CalendarProps<T extends DateValue = DateValue> {
+  value?: T | null;
+  defaultValue?: T | null;
+  onChange?: (value: T) => void;
+  minValue?: DateValue;
+  maxValue?: DateValue;
+  isDateUnavailable?: (date: DateValue) => boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  focusedValue?: DateValue;
+  defaultFocusedValue?: DateValue;
+  onFocusChange?: (date: CalendarDate) => void;
+  firstDayOfWeek?: FirstDayOfWeek;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  timeZone?: string;
+  className?: string;
+  /** BCP-47 locale override; defaults to the AppShell formatting locale. */
+  locale?: string;
+}
+
+/**
+ * A standalone inline calendar — no popover, suitable for reporting filters
+ * or date selection within a larger layout.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from "@tailor-platform/app-shell";
+ *
+ * <Calendar aria-label="Select date" value={value} onChange={setValue} />
+ * ```
+ */
+function Calendar<T extends DateValue = DateValue>({
+  value,
+  defaultValue,
+  onChange,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  isDisabled,
+  isReadOnly,
+  focusedValue,
+  defaultFocusedValue,
+  onFocusChange,
+  firstDayOfWeek,
+  timeZone: timeZoneProp,
+  locale: localeProp,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+}: CalendarProps<T>) {
+  const { locale: shellLocale } = useResolvedLocale();
+  const shellTz = useTimeZone();
+  const resolvedLocale = localeProp ?? shellLocale;
+  const resolvedTz = timeZoneProp ?? shellTz;
+
+  const state = useCalendarState({
+    value: value ?? undefined,
+    defaultValue,
+    onChange: onChange as (v: DateValue) => void,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    isDisabled,
+    isReadOnly,
+    focusedValue,
+    defaultFocusedValue,
+    onFocusChange,
+    firstDayOfWeek,
+    locale: resolvedLocale,
+    timeZone: resolvedTz,
+  });
+
+  return (
+    <CalendarView
+      state={state}
+      ariaLabel={ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      className={className}
+    />
+  );
+}
+
+export { Calendar };
diff --git a/packages/core/src/components/calendar/i18n.ts b/packages/core/src/components/calendar/i18n.ts
new file mode 100644
index 00000000..417c1053
--- /dev/null
+++ b/packages/core/src/components/calendar/i18n.ts
@@ -0,0 +1,15 @@
+import { defineI18nLabels } from "@/hooks/i18n";
+
+/** Built-in aria-label strings for the calendar grid chrome (month nav). */
+export const calendarLabels = defineI18nLabels({
+  en: {
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+  },
+  ja: {
+    previousMonth: "前の月",
+    nextMonth: "次の月",
+  },
+});
+
+export const useCalendarT = calendarLabels.useT;
diff --git a/packages/core/src/components/calendar/index.ts b/packages/core/src/components/calendar/index.ts
new file mode 100644
index 00000000..55ed1ae1
--- /dev/null
+++ b/packages/core/src/components/calendar/index.ts
@@ -0,0 +1 @@
+export { Calendar, type CalendarProps } from "./calendar";
diff --git a/packages/core/src/components/calendar/use-calendar-state.ts b/packages/core/src/components/calendar/use-calendar-state.ts
new file mode 100644
index 00000000..31ea9f87
--- /dev/null
+++ b/packages/core/src/components/calendar/use-calendar-state.ts
@@ -0,0 +1,311 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  ZonedDateTime,
+  endOfMonth,
+  getWeeksInMonth,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+  toCalendarDate,
+  today,
+  type DateValue,
+} from "@internationalized/date";
+
+/**
+ * Hand-rolled calendar-grid state — the logic react-aria's `useCalendarState`
+ * would otherwise provide. We own: month/week computation (locale + first-day-
+ * of-week aware), selection, roving focus, and full APG keyboard navigation
+ * (arrows, Home/End, PageUp/Down, Shift+PageUp/Down).
+ */
+
+export type FirstDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+
+export interface CalendarStateOptions {
+  value?: DateValue | null;
+  defaultValue?: DateValue | null;
+  onChange?: (value: DateValue) => void;
+  focusedValue?: DateValue;
+  defaultFocusedValue?: DateValue;
+  onFocusChange?: (date: CalendarDate) => void;
+  minValue?: DateValue;
+  maxValue?: DateValue;
+  isDateUnavailable?: (date: DateValue) => boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  firstDayOfWeek?: FirstDayOfWeek;
+  locale: string;
+  timeZone: string;
+}
+
+export interface CalendarDay {
+  date: CalendarDate;
+  isOutsideMonth: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isUnavailable: boolean;
+  isToday: boolean;
+  isFocused: boolean;
+}
+
+function toCal(v: DateValue | null | undefined): CalendarDate | null {
+  if (!v) return null;
+  return toCalendarDate(v as never);
+}
+
+export function useCalendarState(options: CalendarStateOptions) {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    focusedValue,
+    defaultFocusedValue,
+    onFocusChange,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    isDisabled,
+    isReadOnly,
+    firstDayOfWeek,
+    locale,
+    timeZone,
+  } = options;
+
+  const isValueControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState<DateValue | null>(defaultValue ?? null);
+  const value = isValueControlled ? controlledValue : internalValue;
+  const selectedDate = toCal(value);
+
+  const todayDate = useMemo(() => today(timeZone), [timeZone]);
+
+  const isFocusControlled = focusedValue !== undefined;
+  const [internalFocused, setInternalFocused] = useState<CalendarDate>(
+    () => toCal(defaultFocusedValue) ?? selectedDate ?? todayDate,
+  );
+  const focusedDate = isFocusControlled ? toCal(focusedValue)! : internalFocused;
+
+  // Tracks whether the grid currently holds focus (used by Tab containment).
+  const isFocusedRef = useRef(false);
+  // One-shot signal: when a `focusedDate` change should pull DOM focus onto the
+  // new day cell. Set by keyboard grid navigation only — NOT by the prev/next
+  // month buttons, so clicking those keeps focus on the button.
+  const moveFocusRef = useRef(false);
+
+  const min = useMemo(() => toCal(minValue), [minValue]);
+  const max = useMemo(() => toCal(maxValue), [maxValue]);
+
+  const isInvalidRange = useCallback(
+    (date: CalendarDate) =>
+      (min != null && date.compare(min) < 0) || (max != null && date.compare(max) > 0),
+    [min, max],
+  );
+
+  const setFocusedDate = useCallback(
+    (date: CalendarDate) => {
+      // Clamp focus to the allowed range.
+      let next = date;
+      if (min != null && next.compare(min) < 0) next = min;
+      if (max != null && next.compare(max) > 0) next = max;
+      if (!isFocusControlled) setInternalFocused(next);
+      onFocusChange?.(next);
+    },
+    [min, max, isFocusControlled, onFocusChange],
+  );
+
+  const selectDate = useCallback(
+    (date: CalendarDate) => {
+      if (isDisabled || isReadOnly) return;
+      if (isInvalidRange(date) || isDateUnavailable?.(date)) return;
+      // Preserve the time portion when the existing value carries time.
+      const next: DateValue = withDatePart(value, date);
+      if (!isValueControlled) setInternalValue(next);
+      onChange?.(next);
+      setFocusedDate(date);
+    },
+    [
+      isDisabled,
+      isReadOnly,
+      isInvalidRange,
+      isDateUnavailable,
+      value,
+      isValueControlled,
+      onChange,
+      setFocusedDate,
+    ],
+  );
+
+  const visibleMonth = startOfMonth(focusedDate);
+
+  // ── Weeks ─────────────────────────────────────────────────────────────────
+  const weeks = useMemo<CalendarDay[][]>(() => {
+    const weeksInMonth = getWeeksInMonth(visibleMonth, locale, firstDayOfWeek);
+    const gridStart = startOfWeek(visibleMonth, locale, firstDayOfWeek);
+    const result: CalendarDay[][] = [];
+    for (let w = 0; w < weeksInMonth; w++) {
+      const days: CalendarDay[] = [];
+      for (let d = 0; d < 7; d++) {
+        const date = gridStart.add({ days: w * 7 + d });
+        const outside = !isSameMonth(date, visibleMonth);
+        days.push({
+          date,
+          isOutsideMonth: outside,
+          isSelected: selectedDate != null && isSameDay(date, selectedDate),
+          isDisabled: !!isDisabled || isInvalidRange(date),
+          isUnavailable: !outside && !!isDateUnavailable?.(date),
+          isToday: isSameDay(date, todayDate),
+          isFocused: isSameDay(date, focusedDate),
+        });
+      }
+      result.push(days);
+    }
+    return result;
+  }, [
+    visibleMonth,
+    locale,
+    firstDayOfWeek,
+    selectedDate,
+    isDisabled,
+    isInvalidRange,
+    isDateUnavailable,
+    todayDate,
+    focusedDate,
+  ]);
+
+  // ── Localised chrome ────────────────────────────────────────────────────────
+  const weekDays = useMemo(() => {
+    const shortFmt = new DateFormatter(locale, { weekday: "short", timeZone });
+    const longFmt = new DateFormatter(locale, { weekday: "long", timeZone });
+    const gridStart = startOfWeek(visibleMonth, locale, firstDayOfWeek);
+    return Array.from({ length: 7 }, (_, i) => {
+      const d = gridStart.add({ days: i }).toDate(timeZone);
+      return { short: shortFmt.format(d), long: longFmt.format(d) };
+    });
+  }, [locale, timeZone, visibleMonth, firstDayOfWeek]);
+
+  const title = useMemo(
+    () =>
+      new DateFormatter(locale, { month: "long", year: "numeric", timeZone }).format(
+        visibleMonth.toDate(timeZone),
+      ),
+    [locale, timeZone, visibleMonth],
+  );
+
+  // One formatter per locale/timezone, reused for every cell — the grid renders
+  // ~42 cells and re-renders on each arrow keypress, so building a fresh
+  // DateFormatter per cell (per frame while a key is held) was needless churn.
+  const cellLabelFmt = useMemo(
+    () =>
+      new DateFormatter(locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        timeZone,
+      }),
+    [locale, timeZone],
+  );
+  const cellLabel = useCallback(
+    (date: CalendarDate) => cellLabelFmt.format(date.toDate(timeZone)),
+    [cellLabelFmt, timeZone],
+  );
+
+  // ── Month paging ────────────────────────────────────────────────────────────
+  const previousMonth = useCallback(
+    () => setFocusedDate(visibleMonth.subtract({ months: 1 })),
+    [visibleMonth, setFocusedDate],
+  );
+  const nextMonth = useCallback(
+    () => setFocusedDate(visibleMonth.add({ months: 1 })),
+    [visibleMonth, setFocusedDate],
+  );
+
+  const prevDisabled = useMemo(
+    () =>
+      !!isDisabled ||
+      (min != null && endOfMonth(visibleMonth.subtract({ months: 1 })).compare(min) < 0),
+    [isDisabled, min, visibleMonth],
+  );
+  const nextDisabled = useMemo(
+    () =>
+      !!isDisabled ||
+      (max != null && startOfMonth(visibleMonth.add({ months: 1 })).compare(max) > 0),
+    [isDisabled, max, visibleMonth],
+  );
+
+  // ── Keyboard navigation ──────────────────────────────────────────────────────
+  const onCellKeyDown = useCallback(
+    (e: React.KeyboardEvent, date: CalendarDate) => {
+      let next: CalendarDate | null = null;
+      switch (e.key) {
+        case "ArrowLeft":
+          next = date.subtract({ days: 1 });
+          break;
+        case "ArrowRight":
+          next = date.add({ days: 1 });
+          break;
+        case "ArrowUp":
+          next = date.subtract({ weeks: 1 });
+          break;
+        case "ArrowDown":
+          next = date.add({ weeks: 1 });
+          break;
+        case "Home":
+          next = startOfWeek(date, locale, firstDayOfWeek);
+          break;
+        case "End":
+          next = startOfWeek(date, locale, firstDayOfWeek).add({ days: 6 });
+          break;
+        case "PageUp":
+          next = date.subtract(e.shiftKey ? { years: 1 } : { months: 1 });
+          break;
+        case "PageDown":
+          next = date.add(e.shiftKey ? { years: 1 } : { months: 1 });
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          selectDate(date);
+          return;
+        default:
+          return;
+      }
+      e.preventDefault();
+      isFocusedRef.current = true;
+      moveFocusRef.current = true;
+      setFocusedDate(next);
+    },
+    [locale, firstDayOfWeek, selectDate, setFocusedDate],
+  );
+
+  return {
+    weeks,
+    weekDays,
+    title,
+    cellLabel,
+    focusedDate,
+    isFocusedRef,
+    moveFocusRef,
+    setFocusedDate,
+    selectDate,
+    previousMonth,
+    nextMonth,
+    prevDisabled,
+    nextDisabled,
+    onCellKeyDown,
+  };
+}
+
+/**
+ * Returns a value whose date portion is `date`, preserving the time/zone of
+ * `base` when it carries one (so picking a day in a date+time picker keeps the
+ * time the user typed).
+ */
+function withDatePart(base: DateValue | null | undefined, date: CalendarDate): DateValue {
+  const parts = { year: date.year, month: date.month, day: date.day };
+  if (base instanceof ZonedDateTime) return base.set(parts);
+  if (base instanceof CalendarDateTime) return base.set(parts);
+  return date;
+}
diff --git a/packages/core/src/components/data-table/i18n.ts b/packages/core/src/components/data-table/i18n.ts
index 63aa6371..9732593d 100644
--- a/packages/core/src/components/data-table/i18n.ts
+++ b/packages/core/src/components/data-table/i18n.ts
@@ -50,6 +50,11 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "between",
     filterOperator_in: "in",
     filterOperator_nin: "not in",
+    // Date-specific operator labels (date filters drop gt/lt/ne and treat the
+    // boundary as inclusive).
+    filterDateOperator_eq: "exact date",
+    filterDateOperator_gte: "after",
+    filterDateOperator_lte: "before",
     filterBetweenFrom: "From",
     filterBetweenTo: "To",
     filterBetweenMin: "Min",
@@ -102,6 +107,9 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "の範囲内",
     filterOperator_in: "次のいずれか",
     filterOperator_nin: "次のいずれでもない",
+    filterDateOperator_eq: "指定日",
+    filterDateOperator_gte: "以降",
+    filterDateOperator_lte: "以前",
     filterBetweenFrom: "開始",
     filterBetweenTo: "終了",
     filterBetweenMin: "最小",
diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
index 4c25fb91..9ac83509 100644
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ b/packages/core/src/components/data-table/toolbar.test.tsx
@@ -1,5 +1,5 @@
 import { afterEach, describe, it, expect, vi } from "vitest";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createAppShellWrapper } from "../../../tests/test-utils";
 import { DataTable } from "./data-table";
@@ -127,6 +127,42 @@ const booleanColumn: Column<TestRow> = {
   filter: { type: "boolean", field: "enabled" },
 };
 
+// ---------------------------------------------------------------------------
+// Date filter (DatePicker) helpers
+// ---------------------------------------------------------------------------
+// `date` filters render the app-shell DatePicker — a labelled group of
+// `spinbutton` segments — instead of a native date input. These helpers drive
+// it via the segments, re-querying by index so they survive controlled
+// re-renders.
+
+const datePickerGroup = (index: number) => screen.getAllByRole("group")[index];
+
+async function typeDateInto(
+  user: ReturnType<typeof userEvent.setup>,
+  groupIndex: number,
+  iso: string,
+) {
+  const [year, month, day] = iso.split("-");
+  const seg = (name: string) =>
+    within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name });
+  await user.click(seg("month"));
+  await user.keyboard(month);
+  await user.click(seg("day"));
+  await user.keyboard(day);
+  await user.click(seg("year"));
+  await user.keyboard(year);
+}
+
+async function clearDateIn(user: ReturnType<typeof userEvent.setup>, groupIndex: number) {
+  // Clear every segment. Leaving the day set would trigger the field's on-blur
+  // backfill (assume current month/year), so a genuine "cleared" state must
+  // remove the day too — the day is the trigger for that backfill.
+  for (const name of ["day", "month", "year"]) {
+    await user.click(within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name }));
+    await user.keyboard("{Delete}");
+  }
+}
+
 // ---------------------------------------------------------------------------
 // DataTable.Filters — rendering
 // ---------------------------------------------------------------------------
@@ -471,50 +507,116 @@ describe("DateFilterEditor", () => {
       wrapper,
     });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
 
     expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
   });
 
-  it("Apply button calls addFilter with the selected date", async () => {
+  it("renders a DatePicker (spinbutton segments) for the date filter", async () => {
     const user = userEvent.setup();
     const control = makeControl({
       filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
     });
-    const { container } = render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
+
+    // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
+    expect(
+      await within(datePickerGroup(0)).findByRole("spinbutton", { name: "day" }),
+    ).toBeDefined();
+  });
+
+  it("Apply button calls addFilter with the selected date", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
     });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
+    await screen.findByRole("button", { name: "Apply" });
 
-    // Use the data-slot selector since date inputs have no simple ARIA role
-    const dateInput = await screen.findByDisplayValue("2025-01-01");
-    await user.clear(dateInput);
-    await user.type(dateInput, "2026-06-15");
+    await typeDateInto(user, 0, "2026-06-15");
     await user.click(screen.getByRole("button", { name: "Apply" }));
 
     expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", "2026-06-15");
-    // Verify empty value triggers removeFilter instead
-    void container; // suppress unused-var
   });
 
-  it("Apply button calls removeFilter when date is cleared", async () => {
+  it("Apply button calls removeFilter when the date is cleared", async () => {
     const user = userEvent.setup();
     const control = makeControl({
       filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
     });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
+    await screen.findByRole("button", { name: "Apply" });
 
-    const dateInput = await screen.findByDisplayValue("2025-01-01");
-    await user.clear(dateInput);
+    await clearDateIn(user, 0);
     await user.click(screen.getByRole("button", { name: "Apply" }));
 
     expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
   });
+
+  it("labels date operators as exact date / after / before", () => {
+    const control = makeControl({
+      filters: [
+        { field: "createdAt", operator: "eq", value: "2025-01-01" },
+        { field: "createdAt", operator: "gte", value: "2025-02-01" },
+        { field: "createdAt", operator: "lte", value: "2025-03-01" },
+      ],
+    });
+    // Render each via its own chip; assert the friendly date labels appear and
+    // the numeric labels do not.
+    const { rerender } = render(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[0]] })}
+        columns={[dateColumn]}
+      />,
+      { wrapper },
+    );
+    // Operator label is friendly, and the value is locale-formatted (not raw ISO).
+    expect(screen.getByText(/Created At exact date Jan 1, 2025/)).toBeDefined();
+    expect(screen.queryByText(/2025-01-01/)).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[1]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At after Feb 1, 2025/)).toBeDefined();
+    expect(screen.queryByText(/greater than/)).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[2]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At before Mar 1, 2025/)).toBeDefined();
+  });
+
+  it("preserves a legacy operator (e.g. gt) on Apply instead of coercing to eq", async () => {
+    const user = userEvent.setup();
+    // A saved view / useCollectionVariables config can hold a date filter on the
+    // now-dropped `gt` operator. Opening + re-applying it must NOT silently flip
+    // it to `eq` (which would turn "after X" into "on X").
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "gt", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    // The chip still renders the legacy operator's (generic) label.
+    await user.click(screen.getByRole("button", { name: /Created At greater than/ }));
+    await screen.findByRole("button", { name: "Apply" });
+
+    // Apply without touching the operator → the operator is preserved.
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "gt", "2025-01-01");
+    expect(control.addFilter).not.toHaveBeenCalledWith("createdAt", "eq", expect.anything());
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -807,7 +909,7 @@ describe("NumericFilterEditor (between)", () => {
 // ---------------------------------------------------------------------------
 
 describe("TemporalFilterEditor (between)", () => {
-  it("shows two date inputs when filter operator is between", async () => {
+  it("shows two date pickers when filter operator is between", async () => {
     const user = userEvent.setup();
     const control = makeControl({
       filters: [
@@ -818,18 +920,16 @@ describe("TemporalFilterEditor (between)", () => {
         },
       ],
     });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
 
-    const inputs = await screen.findAllByDisplayValue(/2025/);
-    expect(inputs.length).toBe(2);
+    await screen.findByRole("button", { name: "Apply" });
+    expect(screen.getAllByRole("group")).toHaveLength(2);
   });
 
   it("Apply button calls addFilter with min/max range for date between", async () => {
@@ -843,21 +943,17 @@ describe("TemporalFilterEditor (between)", () => {
         },
       ],
     });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
+    await screen.findByRole("button", { name: "Apply" });
 
-    const inputs = await screen.findAllByDisplayValue(/2025/);
-    await user.clear(inputs[0]);
-    await user.type(inputs[0], "2026-03-01");
-    await user.clear(inputs[1]);
-    await user.type(inputs[1], "2026-06-30");
+    await typeDateInto(user, 0, "2026-03-01");
+    await typeDateInto(user, 1, "2026-06-30");
     await user.click(screen.getByRole("button", { name: "Apply" }));
 
     expect(control.addFilter).toHaveBeenCalledWith("createdAt", "between", {
@@ -866,7 +962,7 @@ describe("TemporalFilterEditor (between)", () => {
     });
   });
 
-  it("Apply button calls removeFilter when both temporal inputs are empty", async () => {
+  it("Apply button calls removeFilter when both date pickers are cleared", async () => {
     const user = userEvent.setup();
     const control = makeControl({
       filters: [
@@ -877,19 +973,17 @@ describe("TemporalFilterEditor (between)", () => {
         },
       ],
     });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
+    await screen.findByRole("button", { name: "Apply" });
 
-    const inputs = await screen.findAllByDisplayValue(/2025/);
-    await user.clear(inputs[0]);
-    await user.clear(inputs[1]);
+    await clearDateIn(user, 0);
+    await clearDateIn(user, 1);
     await user.click(screen.getByRole("button", { name: "Apply" }));
 
     expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index a27ff1f5..711902cb 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -7,6 +7,9 @@ import { useCollectionControlOptional } from "@/contexts/collection-control-cont
 import { Button } from "@/components/button";
 import { Input } from "@/components/input";
 import { Select } from "@/components/select-standalone";
+import { DatePicker } from "@/components/date-field";
+import { parseDate, DateFormatter } from "@internationalized/date";
+import { useResolvedLocale } from "@/contexts/appshell-context";
 import { useDataTableContext } from "./data-table-context";
 import { useDataTableT } from "./i18n";
 import type { CollectionControl, Filter, FilterConfig, FilterOperator } from "@/types/collection";
@@ -52,6 +55,42 @@ const DEFAULT_OPERATOR: Record<FilterConfig["type"], FilterOperator> = {
 const NUMERIC_TEMPORAL_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "between"] as const;
 type NumericTemporalOperator = (typeof NUMERIC_TEMPORAL_OPERATORS)[number];
 
+// Date filters use a slimmer, friendlier operator set: an exact date, inclusive
+// "after"/"before" (gte/lte), and a between range. No gt/lt/ne.
+const DATE_OPERATORS = ["eq", "gte", "lte", "between"] as const;
+
+/** Operators offered for a temporal editor, narrowed for `date` columns. */
+function temporalOperatorsFor(type: FilterConfig["type"]): readonly NumericTemporalOperator[] {
+  return type === "date" ? DATE_OPERATORS : NUMERIC_TEMPORAL_OPERATORS;
+}
+
+/**
+ * Operator options + initial selection for a numeric/temporal editor.
+ *
+ * A saved view or `useCollectionVariables` config can hold a filter whose
+ * operator is no longer in the standard set — most importantly a `date` filter
+ * on the now-dropped `gt`/`lt`/`ne` (the pre-narrowing operator set). In that
+ * case we keep the incoming operator as a selectable, preselected option rather
+ * than resetting to `eq`, so opening the editor and hitting Apply never silently
+ * rewrites the filter's operator (e.g. "after X" → "on X"). A truly unknown
+ * operator falls back to `eq`.
+ */
+function resolveTemporalOperator(
+  standard: readonly NumericTemporalOperator[],
+  current: FilterOperator,
+): { items: readonly NumericTemporalOperator[]; initial: NumericTemporalOperator } {
+  if (standard.includes(current as NumericTemporalOperator)) {
+    return { items: standard, initial: current as NumericTemporalOperator };
+  }
+  if ((NUMERIC_TEMPORAL_OPERATORS as readonly string[]).includes(current)) {
+    return {
+      items: [...standard, current as NumericTemporalOperator],
+      initial: current as NumericTemporalOperator,
+    };
+  }
+  return { items: standard, initial: "eq" };
+}
+
 /** String operators available in the operator selector. */
 const STRING_OPERATORS = ["eq", "ne", "contains", "notContains", "hasPrefix", "hasSuffix"] as const;
 type StringOperator = (typeof STRING_OPERATORS)[number];
@@ -166,6 +205,30 @@ function BetweenInputGroup({
   );
 }
 
+/**
+ * Date filter input backed by the app-shell `DatePicker`. Bridges the filter's
+ * string value (`"YYYY-MM-DD"`) and the `CalendarDate` the picker works with.
+ */
+function DateFilterPicker({
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const calValue = /^\d{4}-\d{2}-\d{2}$/.test(value) ? parseDate(value) : null;
+  return (
+    <DatePicker
+      aria-label={ariaLabel}
+      value={calValue}
+      onChange={(v) => onChange(v ? v.toString() : "")}
+      className="astw:w-full"
+    />
+  );
+}
+
 function AddFilterPopover({
   availableColumns,
   control,
@@ -320,8 +383,26 @@ function AddFilterPopover({
     }
 
     if (isTemporalFilterType(config.type)) {
+      const isDate = config.type === "date";
+      const fieldLabel = selectedColumn.label ?? config.field;
       if (operator === "between") {
         const [min, max] = Array.isArray(value) ? value : ["", ""];
+        if (isDate) {
+          return (
+            <div className="astw:flex astw:flex-col astw:gap-1.5">
+              <DateFilterPicker
+                ariaLabel={`${fieldLabel} — ${t("filterBetweenFrom")}`}
+                value={min}
+                onChange={(v) => setValue([v, max])}
+              />
+              <DateFilterPicker
+                ariaLabel={`${fieldLabel} — ${t("filterBetweenTo")}`}
+                value={max}
+                onChange={(v) => setValue([min, v])}
+              />
+            </div>
+          );
+        }
         return (
           <BetweenInputGroup
             labels={[t("filterBetweenFrom"), t("filterBetweenTo")]}
@@ -333,6 +414,15 @@ function AddFilterPopover({
           />
         );
       }
+      if (isDate) {
+        return (
+          <DateFilterPicker
+            ariaLabel={fieldLabel}
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => setValue(v)}
+          />
+        );
+      }
       return (
         <Input
           {...getTemporalInputProps(config.type)}
@@ -436,7 +526,7 @@ function AddFilterPopover({
                   }}
                   mapItem={(op) => ({
                     value: op,
-                    label: getOperatorLabel(op, t),
+                    label: getOperatorLabel(op, t, selectedColumn?.filter.type),
                   })}
                   className="astw:h-8 astw:text-sm"
                 />
@@ -486,6 +576,7 @@ function FilterChip({
   control: CollectionControl;
 }) {
   const t = useDataTableT();
+  const { locale } = useResolvedLocale();
   const config = column.filter;
   const label = column.label ?? config.field;
 
@@ -503,7 +594,7 @@ function FilterChip({
     control.removeFilter(config.field);
   }, [control, config.field]);
 
-  const chipLabel = getChipDisplayLabel(label, filter, config, t);
+  const chipLabel = getChipDisplayLabel(label, filter, config, t, locale);
 
   return (
     <div data-slot="data-table-filter-chip" className="astw:flex astw:items-center astw:gap-0">
@@ -568,6 +659,7 @@ function FilterPopoverContent({
   onClose: () => void;
 }) {
   const config = column.filter;
+  const label = column.label ?? config.field;
 
   switch (config.type) {
     case "enum":
@@ -592,7 +684,13 @@ function FilterPopoverContent({
     case "date":
     case "time":
       return (
-        <TemporalFilterEditor config={config} filter={filter} control={control} onClose={onClose} />
+        <TemporalFilterEditor
+          config={config}
+          label={label}
+          filter={filter}
+          control={control}
+          onClose={onClose}
+        />
       );
   }
 }
@@ -867,11 +965,11 @@ function NumericFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
-      ? (filter.operator as NumericTemporalOperator)
-      : "eq",
+  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
+    temporalOperatorsFor(config.type),
+    filter.operator,
   );
+  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
   const [localValue, setLocalValue] = useState(() => {
     if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
       const range = filter.value as { min?: unknown; max?: unknown };
@@ -932,12 +1030,12 @@ function NumericFilterEditor({
       className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
     >
       <Select
-        items={[...NUMERIC_TEMPORAL_OPERATORS]}
+        items={[...operatorItems]}
         value={localOp}
         onValueChange={(v) => {
           if (v) setLocalOp(v);
         }}
-        mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
+        mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
         className="astw:h-8 astw:text-sm"
       />
       {localOp === "between" ? (
@@ -973,21 +1071,24 @@ function NumericFilterEditor({
 
 function TemporalFilterEditor({
   config,
+  label,
   filter,
   control,
   onClose,
 }: {
   config: Extract<FilterConfig, { type: "datetime" | "date" | "time" }>;
+  /** The column's visible label — used for the date picker's accessible name. */
+  label: string;
   filter: Filter;
   control: CollectionControl;
   onClose: () => void;
 }) {
   const t = useDataTableT();
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
-      ? (filter.operator as NumericTemporalOperator)
-      : "eq",
+  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
+    temporalOperatorsFor(config.type),
+    filter.operator,
   );
+  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
   const [localValue, setLocalValue] = useState(() => {
     if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
       const range = filter.value as { min?: unknown; max?: unknown };
@@ -1046,44 +1147,67 @@ function TemporalFilterEditor({
     onClose();
   }, [localValue, localValueMax, localOp, control, config.field, config.type, onClose]);
 
+  const isDate = config.type === "date";
+  let valueInput: ReactNode;
+  if (localOp === "between") {
+    valueInput = isDate ? (
+      <div className="astw:flex astw:flex-col astw:gap-1.5">
+        <DateFilterPicker
+          ariaLabel={`${label} — ${t("filterBetweenFrom")}`}
+          value={localValue}
+          onChange={setLocalValue}
+        />
+        <DateFilterPicker
+          ariaLabel={`${label} — ${t("filterBetweenTo")}`}
+          value={localValueMax}
+          onChange={setLocalValueMax}
+        />
+      </div>
+    ) : (
+      <BetweenInputGroup
+        labels={[t("filterBetweenFrom"), t("filterBetweenTo")]}
+        values={[localValue, localValueMax]}
+        onChangeMin={setLocalValue}
+        onChangeMax={setLocalValueMax}
+        onSubmit={handleCommit}
+        inputProps={getTemporalInputProps(config.type)}
+      />
+    );
+  } else {
+    valueInput = isDate ? (
+      <DateFilterPicker ariaLabel={label} value={localValue} onChange={setLocalValue} />
+    ) : (
+      <Input
+        {...getTemporalInputProps(config.type)}
+        value={localValue}
+        onChange={(e) => {
+          setLocalValue(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            handleCommit();
+          }
+        }}
+        className="astw:h-8 astw:text-sm"
+      />
+    );
+  }
+
   return (
     <div
       data-slot={`data-table-filter-${config.type}`}
       className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
     >
       <Select
-        items={[...NUMERIC_TEMPORAL_OPERATORS]}
+        items={[...operatorItems]}
         value={localOp}
         onValueChange={(v) => {
           if (v) setLocalOp(v);
         }}
-        mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
+        mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
         className="astw:h-8 astw:text-sm"
       />
-      {localOp === "between" ? (
-        <BetweenInputGroup
-          labels={[t("filterBetweenFrom"), t("filterBetweenTo")]}
-          values={[localValue, localValueMax]}
-          onChangeMin={setLocalValue}
-          onChangeMax={setLocalValueMax}
-          onSubmit={handleCommit}
-          inputProps={getTemporalInputProps(config.type)}
-        />
-      ) : (
-        <Input
-          {...getTemporalInputProps(config.type)}
-          value={localValue}
-          onChange={(e) => {
-            setLocalValue(e.target.value);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              handleCommit();
-            }
-          }}
-          className="astw:h-8 astw:text-sm"
-        />
-      )}
+      {valueInput}
       <Button size="xs" onClick={handleCommit} disabled={!canCommit} className="astw:self-end">
         {t("applyFilter")}
       </Button>
@@ -1099,9 +1223,10 @@ function getAddFilterOperators(type: FilterConfig["type"]): FilterOperator[] {
   switch (type) {
     case "string":
       return [...STRING_OPERATORS];
+    case "date":
+      return [...DATE_OPERATORS];
     case "number":
     case "datetime":
-    case "date":
     case "time":
       return [...NUMERIC_TEMPORAL_OPERATORS];
     case "enum":
@@ -1235,7 +1360,17 @@ function getTemporalInputProps(type: "datetime" | "date" | "time") {
   }
 }
 
-function getOperatorLabel(operator: FilterOperator, t: ReturnType<typeof useDataTableT>): string {
+function getOperatorLabel(
+  operator: FilterOperator,
+  t: ReturnType<typeof useDataTableT>,
+  type?: FilterConfig["type"],
+): string {
+  // Date columns relabel the comparison operators (exact date / after / before).
+  if (type === "date") {
+    if (operator === "eq") return t("filterDateOperator_eq");
+    if (operator === "gte") return t("filterDateOperator_gte");
+    if (operator === "lte") return t("filterDateOperator_lte");
+  }
   switch (operator) {
     case "eq":
       return t("filterOperator_eq");
@@ -1272,10 +1407,28 @@ function getOperatorLabel(operator: FilterOperator, t: ReturnType<typeof useData
   }
 }
 
+/** Format an ISO "YYYY-MM-DD" value as a locale-appropriate medium date. */
+function formatDateValue(iso: string, locale: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return iso;
+  try {
+    // Format in UTC against a UTC-anchored instant so the calendar date never
+    // shifts across timezones.
+    return new DateFormatter(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    }).format(parseDate(iso).toDate("UTC"));
+  } catch {
+    return iso;
+  }
+}
+
 function formatFilterValue(
   filter: Filter,
   config: FilterConfig,
   t: ReturnType<typeof useDataTableT>,
+  locale: string,
 ): string {
   if (config.type === "enum" && Array.isArray(filter.value)) {
     const labels = filter.value
@@ -1296,6 +1449,18 @@ function formatFilterValue(
     return [min, max].filter(Boolean).join(" - ");
   }
 
+  if (config.type === "date") {
+    if (filter.operator === "between") {
+      const range = filter.value as { min?: unknown; max?: unknown } | null;
+      if (!range || typeof range !== "object") return "";
+      const min = range.min != null ? formatDateValue(String(range.min), locale) : "";
+      const max = range.max != null ? formatDateValue(String(range.max), locale) : "";
+      return [min, max].filter(Boolean).join(" - ");
+    }
+    if (filter.value == null || filter.value === "") return "";
+    return formatDateValue(String(filter.value), locale);
+  }
+
   if (isTemporalFilterType(config.type) && filter.operator === "between") {
     const range = filter.value as { min?: unknown; max?: unknown } | null;
     if (!range || typeof range !== "object") return "";
@@ -1317,11 +1482,12 @@ function getChipDisplayLabel(
   filter: Filter,
   config: FilterConfig,
   t: ReturnType<typeof useDataTableT>,
+  locale: string,
 ): string {
-  const valueLabel = formatFilterValue(filter, config, t);
+  const valueLabel = formatFilterValue(filter, config, t, locale);
   if (!valueLabel) return columnLabel;
 
-  const operatorLabel = getOperatorLabel(filter.operator, t);
+  const operatorLabel = getOperatorLabel(filter.operator, t, config.type);
   const ciSuffix = filter.caseSensitive ? " (Aa)" : "";
 
   if (config.type === "enum") {
diff --git a/packages/core/src/components/date-field/date-field.test.tsx b/packages/core/src/components/date-field/date-field.test.tsx
new file mode 100644
index 00000000..95b8fac9
--- /dev/null
+++ b/packages/core/src/components/date-field/date-field.test.tsx
@@ -0,0 +1,527 @@
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CalendarDate, parseDate, today, getLocalTimeZone } from "@internationalized/date";
+import { createAppShellWrapper } from "../../../tests/test-utils";
+import { DateField, DatePicker } from "./date-field";
+
+// This suite is the parity contract shared with the react-aria implementation:
+// it asserts public behaviour + the DOM accessibility contract (spinbutton
+// segments, role="grid" cells with data-* state attributes, role="dialog"
+// popover), not implementation details.
+
+afterEach(() => {
+  cleanup();
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Find <div role="button"> day cells inside a calendar grid (not nav buttons). */
+function getCalendarCells() {
+  return screen.getAllByRole("button", { hidden: true }).filter((c) => c.closest('[role="grid"]'));
+}
+
+function getEnabledCalendarCells() {
+  return getCalendarCells().filter(
+    (c) => !c.hasAttribute("data-disabled") && !c.hasAttribute("data-outside-month"),
+  );
+}
+
+// ─── Snapshots ──────────────────────────────────────────────────────────────
+// Visual-structure snapshots per the add-component convention. Inputs are
+// pinned (fixed `defaultValue`, no live "today" in view) so output is stable.
+
+describe("snapshots", () => {
+  it("DateField", () => {
+    const { container } = render(<DateField label="Invoice date" />);
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it("DateField — invalid with error", () => {
+    const { container } = render(
+      <DateField label="Date" errorMessage="Required" description="Pick a date" />,
+    );
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it("DatePicker — closed", () => {
+    const { container } = render(<DatePicker label="Ship date" />);
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+});
+
+// ─── DateField ─────────────────────────────────────────────────────────────────
+
+describe("DateField", () => {
+  it("renders with a label", () => {
+    render(<DateField label="Invoice date" />);
+    expect(screen.getByText("Invoice date")).toBeDefined();
+  });
+
+  it("renders date segments", () => {
+    render(<DateField label="Date" />);
+    // segments are exposed as spinbuttons for day, month, year
+    const segments = screen.getAllByRole("spinbutton");
+    expect(segments.length).toBeGreaterThan(0);
+  });
+
+  it("renders with description", () => {
+    render(<DateField label="Date" description="Pick any date" />);
+    expect(screen.getByText("Pick any date")).toBeDefined();
+  });
+
+  it("renders error message when isInvalid", () => {
+    render(<DateField label="Date" errorMessage="Required" />);
+    expect(screen.getByText("Required")).toBeDefined();
+  });
+
+  it("renders as disabled", () => {
+    render(<DateField label="Date" isDisabled />);
+    const groups = screen.getAllByRole("group");
+    const disabledGroup = groups.find((g) => g.getAttribute("aria-disabled") === "true");
+    expect(disabledGroup).toBeDefined();
+  });
+
+  it("resolves LocalizedString label with language fallback", () => {
+    render(<DateField label={(locale) => (locale === "ja" ? "日付" : "Date")} />);
+    // default locale resolves to english
+    expect(screen.getByText("Date")).toBeDefined();
+  });
+
+  it("fires onChange once a complete date is typed across the segments", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    // Fill every segment by aria-label (order-independent across locales).
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("06");
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("15");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2025");
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+      const last = onChange.mock.calls.at(-1)?.[0];
+      expect(last?.toString()).toBe("2025-06-15");
+    });
+  });
+
+  it("auto-advances across segments as a full date is typed (no explicit tabbing)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    // Locale here is "en" → MM/DD/YYYY. Typing carries across segments:
+    // "02" fills+advances month, "15" fills+advances day, "2025" fills year.
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02152025");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2025-02-15");
+    });
+  });
+
+  it("accumulates a non-leading-zero entry (2 then 9 → 29, not 9)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("12");
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2025");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2025-12-29");
+    });
+  });
+
+  it("accepts day 31 typed before a month (day max isn't tied to the current month)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    // Type the day first — "31" must not collapse to "1" just because the
+    // current (anchor) month happens to have 30/28 days.
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("31");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("12");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2025");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2025-12-31");
+    });
+  });
+
+  it("clamps an impossible day to the month's length on blur", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <>
+        <DateField label="Date" onChange={onChange} />
+        <button type="button">elsewhere</button>
+      </>,
+    );
+
+    // Enter 30 / 02 / 2026 (Feb 2026 has 28 days) — invalid until blur.
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("30");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2026");
+    // Blur the field.
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-02-28");
+    });
+  });
+
+  it("keeps 29 Feb in a leap year (no over-clamp)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <>
+        <DateField label="Date" onChange={onChange} />
+        <button type="button">elsewhere</button>
+      </>,
+    );
+
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2024"); // leap year
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2024-02-29");
+    });
+  });
+
+  // A controlled field round-trips every emit through the parent's `value`, so
+  // these guard the clamp against external-sync interference (the uncontrolled
+  // cases above don't exercise that path).
+  function ControlledField({ onChange }: { onChange: (v: unknown) => void }) {
+    const [v, setV] = useState<CalendarDate | null>(null);
+    return (
+      <>
+        <DateField
+          label="Date"
+          value={v}
+          onChange={(nv) => {
+            setV(nv as CalendarDate | null);
+            onChange(nv);
+          }}
+        />
+        <button type="button">elsewhere</button>
+      </>
+    );
+  }
+
+  it("clamps an impossible day on blur even when controlled (29/02/2026)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ControlledField onChange={onChange} />);
+
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2026"); // not a leap year → Feb has 28 days
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-02-28");
+    });
+  });
+
+  it("re-clamps when editing the year turns a valid leap day invalid (29 Feb 2024 → 2026)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ControlledField onChange={onChange} />);
+
+    // First enter a genuinely valid leap-year date.
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2024");
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2024-02-29");
+    });
+
+    // Now change the year to a non-leap year — 29 Feb no longer exists.
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2026");
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-02-28");
+    });
+  });
+
+  it("auto-corrects an impossible day as soon as the year is complete (no blur)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    // 29 typed before the month (allowed), then Feb 2026 (28 days). The moment
+    // the 4-digit year lands, the day self-corrects — without leaving the field.
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2026");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-02-28");
+    });
+  });
+
+  it("re-corrects on year completion when a leap day turns invalid (no blur)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2024");
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2024-02-29");
+    });
+
+    // Retype the year to a non-leap year — corrects on completion, no blur.
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2026");
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2026-02-28");
+    });
+  });
+
+  // On-blur backfill: a provided day (finest unit) lets the coarser fields
+  // default to the current month/year. The anchor for a bare DateField is
+  // today("UTC"), so expectations are derived from that same basis.
+  it("backfills the current month + year when only the day is entered, on blur", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <>
+        <DateField label="Date" onChange={onChange} />
+        <button type="button">elsewhere</button>
+      </>,
+    );
+
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("2");
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    const expected = today("UTC").set({ day: 2 });
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe(expected.toString());
+    });
+  });
+
+  it("backfills the current year when day + month are entered, on blur", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <>
+        <DateField label="Date" onChange={onChange} />
+        <button type="button">elsewhere</button>
+      </>,
+    );
+
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("02");
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("08");
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    const expected = today("UTC").set({ month: 8, day: 2 });
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe(expected.toString());
+    });
+  });
+
+  it("never backfills the day — a lone year entry emits nothing on blur", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <>
+        <DateField label="Date" onChange={onChange} />
+        <button type="button">elsewhere</button>
+      </>,
+    );
+
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2025");
+    await user.click(screen.getByRole("button", { name: "elsewhere" }));
+
+    // The day is the trigger for backfill; without it we never guess a value.
+    expect(onChange.mock.calls.some(([v]) => v != null)).toBe(false);
+  });
+
+  it("clears a controlled DateField when the value is reset to null", () => {
+    const { rerender } = render(
+      <DateField
+        label="Date"
+        value={parseDate("2025-06-15") as CalendarDate}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole("spinbutton", { name: "day" }).textContent).toBe("15");
+
+    // Parent clears the field: value={null} is controlled-empty, not uncontrolled.
+    rerender(<DateField label="Date" value={null} onChange={() => {}} />);
+    expect(screen.getByRole("spinbutton", { name: "day" }).getAttribute("aria-valuetext")).toBe(
+      "Empty",
+    );
+  });
+
+  it("sets aria-required on the segments when isRequired", () => {
+    render(<DateField label="Date" isRequired />);
+    const day = screen.getByRole("spinbutton", { name: "day" });
+    expect(day.getAttribute("aria-required")).toBe("true");
+  });
+});
+
+// ─── DatePicker ───────────────────────────────────────────────────────────────
+
+describe("DatePicker", () => {
+  it("renders with a label", () => {
+    render(<DatePicker label="Ship date" />);
+    expect(screen.getByText("Ship date")).toBeDefined();
+  });
+
+  it("renders the calendar trigger button", () => {
+    render(<DatePicker label="Date" />);
+    const btn = screen.getAllByRole("button").find((b) => !b.closest('[role="grid"]'));
+    expect(btn).toBeDefined();
+  });
+
+  it("opens the popover when the trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(<DatePicker label="Date" />);
+
+    const triggerBtn = screen.getAllByRole("button")[0];
+    await user.click(triggerBtn);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeDefined();
+    });
+  });
+
+  it("shows a calendar grid in the popover", async () => {
+    const user = userEvent.setup();
+    render(<DatePicker label="Date" />);
+
+    await user.click(screen.getAllByRole("button")[0]);
+
+    await waitFor(() => {
+      expect(screen.getByRole("grid")).toBeDefined();
+    });
+  });
+
+  it("fires onChange when a calendar date cell is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DatePicker label="Date" onChange={onChange} />);
+
+    await user.click(screen.getAllByRole("button")[0]);
+    await waitFor(() => expect(screen.getByRole("grid")).toBeDefined());
+
+    const enabled = getEnabledCalendarCells();
+    if (enabled.length > 0) {
+      await user.click(enabled[0]);
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+        expect(onChange.mock.calls[0][0]).not.toBeNull();
+      });
+    }
+  });
+
+  it("renders cells with data-disabled when minValue is set", async () => {
+    const user = userEvent.setup();
+    const tomorrow = today(getLocalTimeZone()).add({ days: 1 });
+    render(<DatePicker label="Date" minValue={tomorrow} />);
+
+    await user.click(screen.getAllByRole("button")[0]);
+    await waitFor(() => expect(screen.getByRole("grid")).toBeDefined());
+
+    const disabled = getCalendarCells().filter((c) => c.hasAttribute("data-disabled"));
+    expect(disabled.length).toBeGreaterThan(0);
+  });
+
+  it("renders cells with data-unavailable when isDateUnavailable returns true", async () => {
+    const user = userEvent.setup();
+    render(<DatePicker label="Date" isDateUnavailable={() => true} />);
+
+    await user.click(screen.getAllByRole("button")[0]);
+    await waitFor(() => expect(screen.getByRole("grid")).toBeDefined());
+
+    const unavailable = getCalendarCells().filter((c) => c.hasAttribute("data-unavailable"));
+    expect(unavailable.length).toBeGreaterThan(0);
+  });
+
+  it("renders error message when errorMessage is set", () => {
+    render(<DatePicker label="Date" errorMessage="Date is required" />);
+    expect(screen.getByText("Date is required")).toBeDefined();
+  });
+
+  it("clears a controlled DatePicker when the value is reset to null", () => {
+    const { rerender } = render(
+      <DatePicker
+        label="Date"
+        value={parseDate("2025-06-15") as CalendarDate}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole("spinbutton", { name: "day" }).textContent).toBe("15");
+
+    rerender(<DatePicker label="Date" value={null} onChange={() => {}} />);
+    expect(screen.getByRole("spinbutton", { name: "day" }).getAttribute("aria-valuetext")).toBe(
+      "Empty",
+    );
+  });
+
+  it("localizes segment names and chrome from the AppShell locale (ja)", () => {
+    render(<DatePicker label="日付" />, { wrapper: createAppShellWrapper("ja") });
+    // Segment accessible name: month → 月.
+    expect(screen.getByRole("spinbutton", { name: "月" })).toBeDefined();
+    // Popover trigger aria-label is localized too.
+    expect(screen.getByRole("button", { name: "カレンダーを開く" })).toBeDefined();
+    // Empty segments announce the localized placeholder.
+    expect(screen.getByRole("spinbutton", { name: "月" }).getAttribute("aria-valuetext")).toBe(
+      "未入力",
+    );
+  });
+});
+
+// ─── Keyboard: popover focus ─────────────────────────────────────────────────
+
+describe("DatePicker keyboard", () => {
+  it("moves focus into the calendar grid when the popover opens", async () => {
+    const user = userEvent.setup();
+    render(<DatePicker label="Date" />);
+    await user.click(screen.getAllByRole("button")[0]);
+    await waitFor(() => {
+      expect(document.activeElement?.closest('[role="grid"]')).not.toBeNull();
+    });
+  });
+});
diff --git a/packages/core/src/components/date-field/date-field.tsx b/packages/core/src/components/date-field/date-field.tsx
new file mode 100644
index 00000000..82f118d8
--- /dev/null
+++ b/packages/core/src/components/date-field/date-field.tsx
@@ -0,0 +1,318 @@
+import { useCallback, useId, useRef, useState } from "react";
+import type { DateValue } from "@internationalized/date";
+import { cn } from "@/lib/utils";
+import { buildLocaleResolver, type LocalizedString } from "@/lib/i18n";
+import { useResolvedLocale, useTimeZone } from "@/contexts/appshell-context";
+import { useDateFieldState, type Granularity, type HourCycle } from "./use-date-field-state";
+import { useCalendarState, type FirstDayOfWeek } from "../calendar/use-calendar-state";
+import { CalendarView } from "../calendar/calendar-view";
+import {
+  DateInputGroup,
+  DatePopover,
+  DatePickerPopoverTrigger,
+  DatePickerLabel,
+  DatePickerDescription,
+  DatePickerError,
+} from "./date-input-group";
+import { useDateFieldT } from "./i18n";
+
+/**
+ * Public, closed-API date components — the @internationalized/date + Base UI
+ * implementation. Same surface as the react-aria variant; only the internals
+ * differ. Consumers never see Base UI or the date engines.
+ */
+
+// ─── Small controlled-state helper ────────────────────────────────────────────
+function useControlledState<V>(
+  controlled: V | undefined,
+  defaultValue: V,
+  onChange?: (value: V) => void,
+): [V, (value: V) => void] {
+  const isControlled = controlled !== undefined;
+  const [internal, setInternal] = useState<V>(defaultValue);
+  const value = isControlled ? (controlled as V) : internal;
+  const set = useCallback(
+    (next: V) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+  return [value, set];
+}
+
+// ─── Shared prop types (names unchanged from react-aria) ──────────────────────
+
+interface DateFieldMetaProps {
+  label?: LocalizedString;
+  description?: LocalizedString;
+  errorMessage?: LocalizedString;
+  className?: string;
+}
+
+interface DateBehaviorProps<T extends DateValue> {
+  value?: T | null;
+  defaultValue?: T | null;
+  onChange?: (value: T | null) => void;
+  granularity?: Granularity;
+  minValue?: DateValue;
+  maxValue?: DateValue;
+  isDateUnavailable?: (date: DateValue) => boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+  hourCycle?: HourCycle;
+  hideTimeZone?: boolean;
+  placeholderValue?: DateValue;
+  name?: string;
+  /** Accessible name when no visible `label` is provided (e.g. a compact filter input). */
+  "aria-label"?: string;
+  /** BCP-47 locale override; defaults to the AppShell formatting locale. */
+  locale?: string;
+}
+
+export type DateFieldProps<T extends DateValue = DateValue> = DateFieldMetaProps &
+  DateBehaviorProps<T>;
+
+export type DatePickerProps<T extends DateValue = DateValue> = DateFieldProps<T> & {
+  firstDayOfWeek?: FirstDayOfWeek;
+  /** IANA timezone; defaults to the AppShell `timeZone`. */
+  timeZone?: string;
+};
+
+// ─── DateField ────────────────────────────────────────────────────────────────
+
+/**
+ * A segmented date/time input field with no popover.
+ *
+ * @example
+ * ```tsx
+ * import { DateField } from "@tailor-platform/app-shell";
+ *
+ * <DateField label="Invoice date" />
+ * <DateField label="Created at" granularity="minute" />
+ * ```
+ */
+function DateField<T extends DateValue = DateValue>({
+  label,
+  description,
+  errorMessage,
+  className,
+  locale: localeProp,
+  value,
+  defaultValue,
+  onChange,
+  granularity,
+  hourCycle,
+  placeholderValue,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+  isRequired,
+  autoFocus,
+  name,
+  "aria-label": ariaLabel,
+}: DateFieldProps<T>) {
+  const { locale: shellLocale, language } = useResolvedLocale();
+  const resolvedLocale = localeProp ?? shellLocale;
+  const resolve = buildLocaleResolver(language);
+
+  const labelId = useId();
+  const descId = useId();
+  const errId = useId();
+
+  const labelText = label ? resolve(label, "") : undefined;
+  const descText = description ? resolve(description, "") : undefined;
+  const errorText = errorMessage ? resolve(errorMessage, "") : undefined;
+  const derivedInvalid = !!errorText || !!isInvalid;
+
+  const state = useDateFieldState({
+    // Pass `value` through as-is: `null` is a controlled-empty value and must
+    // stay distinct from `undefined` (uncontrolled), or a parent clearing the
+    // field with `value={null}` would be treated as uncontrolled and ignored.
+    value,
+    defaultValue,
+    onChange: onChange as (v: DateValue | null) => void,
+    granularity,
+    locale: resolvedLocale,
+    hourCycle,
+    placeholderValue,
+    isReadOnly,
+  });
+
+  const describedBy = cn(descText && descId, derivedInvalid && errorText && errId) || undefined;
+
+  return (
+    <div data-slot="date-field" className={cn("astw:flex astw:flex-col astw:gap-1", className)}>
+      {labelText && <DatePickerLabel id={labelId}>{labelText}</DatePickerLabel>}
+      <DateInputGroup
+        segments={state.segments}
+        cycle={state.cycle}
+        setDigit={state.setDigit}
+        setDayPeriod={state.setDayPeriod}
+        clearSegment={state.clearSegment}
+        commitOnBlur={state.commitOnBlur}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        isInvalid={derivedInvalid}
+        isRequired={isRequired}
+        autoFocus={autoFocus}
+        labelId={labelText ? labelId : undefined}
+        ariaLabel={ariaLabel}
+        describedById={describedBy}
+      />
+      {descText && <DatePickerDescription id={descId}>{descText}</DatePickerDescription>}
+      {derivedInvalid && errorText && <DatePickerError id={errId}>{errorText}</DatePickerError>}
+      {name && <input type="hidden" name={name} value={state.fieldValue?.toString() ?? ""} />}
+    </div>
+  );
+}
+
+// ─── DatePicker ───────────────────────────────────────────────────────────────
+
+/**
+ * A date/time input with a popover calendar.
+ *
+ * Value type is driven by `granularity`:
+ * - `"day"` (default) → `CalendarDate`
+ * - `"hour" | "minute" | "second"` → `CalendarDateTime` (or `ZonedDateTime` when a `timeZone` is set)
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker, today, getLocalTimeZone, type CalendarDate } from "@tailor-platform/app-shell";
+ *
+ * const [date, setDate] = useState<CalendarDate | null>(null);
+ * <DatePicker label="Ship date" value={date} onChange={setDate} />
+ * ```
+ */
+function DatePicker<T extends DateValue = DateValue>({
+  label,
+  description,
+  errorMessage,
+  className,
+  locale: localeProp,
+  timeZone: timeZoneProp,
+  value,
+  defaultValue,
+  onChange,
+  granularity,
+  hourCycle,
+  placeholderValue,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+  isRequired,
+  autoFocus,
+  firstDayOfWeek,
+  name,
+  "aria-label": ariaLabel,
+}: DatePickerProps<T>) {
+  const { locale: shellLocale, language } = useResolvedLocale();
+  const shellTz = useTimeZone();
+  const resolvedLocale = localeProp ?? shellLocale;
+  const resolvedTz = timeZoneProp ?? shellTz;
+  const resolve = buildLocaleResolver(language);
+  const t = useDateFieldT();
+
+  const labelId = useId();
+  const descId = useId();
+  const errId = useId();
+
+  const labelText = label ? resolve(label, "") : undefined;
+  const descText = description ? resolve(description, "") : undefined;
+  const errorText = errorMessage ? resolve(errorMessage, "") : undefined;
+  const derivedInvalid = !!errorText || !!isInvalid;
+
+  const [open, setOpen] = useState(false);
+  const fieldRef = useRef<HTMLDivElement>(null);
+  const [val, setVal] = useControlledState<DateValue | null>(
+    // `null` is controlled-empty; only `undefined` means uncontrolled (see above).
+    value,
+    defaultValue ?? null,
+    onChange as (v: DateValue | null) => void,
+  );
+
+  const fieldState = useDateFieldState({
+    value: val,
+    onChange: setVal,
+    granularity,
+    locale: resolvedLocale,
+    // Use the resolved timezone (prop → AppShell → local), matching the calendar
+    // below — otherwise the field falls back to UTC for its "today"/anchor while
+    // the calendar uses the AppShell zone, and they disagree on defaults.
+    timeZone: resolvedTz,
+    hourCycle,
+    placeholderValue,
+    isReadOnly,
+  });
+
+  const calState = useCalendarState({
+    value: val,
+    onChange: (d) => {
+      setVal(d);
+      setOpen(false);
+    },
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    isDisabled,
+    isReadOnly,
+    firstDayOfWeek,
+    locale: resolvedLocale,
+    timeZone: resolvedTz,
+  });
+
+  const describedBy = cn(descText && descId, derivedInvalid && errorText && errId) || undefined;
+  const accessibleName = labelText ?? ariaLabel;
+  const popoverAriaLabel = accessibleName
+    ? t("chooseDateFor", { name: accessibleName })
+    : t("chooseDate");
+
+  return (
+    <div data-slot="date-picker" className={cn("astw:flex astw:flex-col astw:gap-1", className)}>
+      {labelText && <DatePickerLabel id={labelId}>{labelText}</DatePickerLabel>}
+      <DatePopover
+        open={open}
+        onOpenChange={setOpen}
+        ariaLabel={popoverAriaLabel}
+        anchor={fieldRef}
+        field={
+          <DateInputGroup
+            segments={fieldState.segments}
+            cycle={fieldState.cycle}
+            setDigit={fieldState.setDigit}
+            setDayPeriod={fieldState.setDayPeriod}
+            clearSegment={fieldState.clearSegment}
+            commitOnBlur={fieldState.commitOnBlur}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isInvalid={derivedInvalid}
+            isRequired={isRequired}
+            autoFocus={autoFocus}
+            labelId={labelText ? labelId : undefined}
+            ariaLabel={ariaLabel}
+            describedById={describedBy}
+            groupRef={fieldRef}
+            trigger={<DatePickerPopoverTrigger disabled={isDisabled} />}
+          />
+        }
+      >
+        <CalendarView
+          state={calState}
+          ariaLabel={labelText ?? ariaLabel ?? t("calendar")}
+          inPopover
+        />
+      </DatePopover>
+      {descText && <DatePickerDescription id={descId}>{descText}</DatePickerDescription>}
+      {derivedInvalid && errorText && <DatePickerError id={errId}>{errorText}</DatePickerError>}
+      {name && <input type="hidden" name={name} value={fieldState.fieldValue?.toString() ?? ""} />}
+    </div>
+  );
+}
+
+export { DateField, DatePicker };
diff --git a/packages/core/src/components/date-field/date-input-group.tsx b/packages/core/src/components/date-field/date-input-group.tsx
new file mode 100644
index 00000000..9357fd48
--- /dev/null
+++ b/packages/core/src/components/date-field/date-input-group.tsx
@@ -0,0 +1,365 @@
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { inputBaseClasses } from "@/lib/input-classes";
+import { useDateFieldT } from "./i18n";
+import type { Segment } from "./use-date-field-state";
+
+/**
+ * Field presentation for the date components — the segmented spinbutton group,
+ * its labels/description/error, and the popover wrapper used by `DatePicker`.
+ * Built on Base UI primitives (`Popover`) + plain accessible markup, driven by
+ * our own `useDateFieldState` engine. Not exported from the package.
+ *
+ * Styling mirrors the rest of the library (`astw:` tokens, dark mode, the same
+ * popover token set as our other Base UI popovers).
+ */
+
+// ─── Field labels / description / error ───────────────────────────────────────
+
+// A composite spinbutton group can't be labelled by a native <label htmlFor>,
+// so the label is a <span> referenced via the group's `aria-labelledby` (the
+// APG date-field pattern).
+export function DatePickerLabel({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="date-picker-label"
+      className={cn("astw:text-sm astw:font-medium astw:text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function DatePickerDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="date-picker-description"
+      className={cn("astw:text-sm astw:text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function DatePickerError({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="date-picker-error"
+      role="alert"
+      className={cn("astw:text-sm astw:font-medium astw:text-destructive", className)}
+      {...props}
+    />
+  );
+}
+
+// ─── Segmented input group ────────────────────────────────────────────────────
+
+const groupClasses = cn(
+  inputBaseClasses,
+  // Floor the width to comfortably fit "dd / mm / yyyy" + the trigger icon plus
+  // padding (142px) so the field doesn't collapse in a narrow/flex container.
+  // Overrides inputBaseClasses' `min-w-0`; wider locales (e.g. ja-JP) still grow.
+  "astw:flex astw:h-9 astw:min-w-[142px] astw:items-center astw:gap-0 astw:py-0",
+  "astw:focus-within:border-ring astw:focus-within:ring-[3px] astw:focus-within:ring-ring/50",
+  "astw:data-[invalid]:border-destructive astw:data-[invalid]:ring-destructive/20",
+  "astw:data-[disabled]:cursor-not-allowed astw:data-[disabled]:opacity-50",
+);
+
+interface DateInputGroupProps {
+  segments: Segment[];
+  cycle: (type: Exclude<Segment["type"], "literal">, delta: number) => void;
+  setDigit: (
+    type: Exclude<Segment["type"], "literal">,
+    digit: number,
+    replace?: boolean,
+    digitCount?: number,
+  ) => { advance: boolean };
+  setDayPeriod: (pm: boolean) => void;
+  clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
+  /**
+   * Normalize the value when focus leaves the group: backfill the current
+   * month/year when only finer fields are set, and clamp an impossible day.
+   */
+  commitOnBlur: () => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  autoFocus?: boolean;
+  labelId?: string;
+  /** Accessible name when there is no visible label (e.g. a compact filter input). */
+  ariaLabel?: string;
+  describedById?: string;
+  className?: string;
+  trigger?: React.ReactNode;
+  /** Ref to the group element — used to anchor the popover to the whole field. */
+  groupRef?: React.Ref<HTMLDivElement>;
+}
+
+export function DateInputGroup({
+  segments,
+  cycle,
+  setDigit,
+  setDayPeriod,
+  clearSegment,
+  commitOnBlur,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+  isRequired,
+  autoFocus,
+  labelId,
+  ariaLabel,
+  describedById,
+  className,
+  trigger,
+  groupRef,
+}: DateInputGroupProps) {
+  const t = useDateFieldT();
+  const editableRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  // Digits typed into the currently-focused segment this session. Reset on
+  // focus; the first digit (count 0) replaces, and the count decides when the
+  // segment is "full" and should auto-advance.
+  const typedCountRef = React.useRef(0);
+
+  React.useEffect(() => {
+    if (autoFocus && !isDisabled) editableRefs.current[0]?.focus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Index editable segments for left/right focus movement.
+  const editableIndexById = React.useMemo(() => {
+    const map = new Map<number, number>();
+    let i = 0;
+    segments.forEach((s, idx) => {
+      if (s.isEditable) map.set(idx, i++);
+    });
+    return map;
+  }, [segments]);
+
+  const focusEditable = (editableIndex: number) => {
+    const el = editableRefs.current[editableIndex];
+    el?.focus();
+  };
+
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLDivElement>,
+    segment: Segment,
+    editableIndex: number,
+  ) => {
+    if (segment.type === "literal") return;
+    const type = segment.type;
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        cycle(type, 1);
+        return;
+      case "ArrowDown":
+        e.preventDefault();
+        cycle(type, -1);
+        return;
+      case "ArrowLeft":
+        e.preventDefault();
+        focusEditable(editableIndex - 1);
+        return;
+      case "ArrowRight":
+        e.preventDefault();
+        focusEditable(editableIndex + 1);
+        return;
+      case "Home":
+        e.preventDefault();
+        focusEditable(0);
+        return;
+      case "End":
+        e.preventDefault();
+        focusEditable(editableRefs.current.length - 1);
+        return;
+      case "Backspace":
+      case "Delete":
+        e.preventDefault();
+        clearSegment(type);
+        return;
+    }
+
+    if (type === "dayPeriod") {
+      if (e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        setDayPeriod(false);
+      } else if (e.key.toLowerCase() === "p") {
+        e.preventDefault();
+        setDayPeriod(true);
+      }
+      return;
+    }
+
+    if (/^\d$/.test(e.key)) {
+      e.preventDefault();
+      const count = typedCountRef.current;
+      typedCountRef.current = count + 1;
+      const { advance } = setDigit(type, Number(e.key), count === 0, count + 1);
+      if (advance) focusEditable(editableIndex + 1);
+    }
+  };
+
+  return (
+    // Deliberate APG date-field pattern: a labelled group wrapping spinbutton segments.
+    <div
+      ref={groupRef}
+      role="group"
+      data-slot="date-picker-group"
+      aria-labelledby={labelId}
+      aria-label={labelId ? undefined : ariaLabel}
+      aria-describedby={describedById}
+      aria-disabled={isDisabled || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={isInvalid || undefined}
+      className={cn(groupClasses, className)}
+      onBlur={(e) => {
+        // Focus left the whole group (not just moved between segments) →
+        // backfill the current month/year for a partial entry and clamp an
+        // impossible day.
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) commitOnBlur();
+      }}
+    >
+      <div data-slot="date-input" className="astw:flex astw:flex-1 astw:items-center astw:gap-px">
+        {segments.map((segment, idx) => {
+          if (segment.type === "literal") {
+            return (
+              <span
+                key={idx}
+                aria-hidden="true"
+                data-slot="date-segment"
+                data-type="literal"
+                className="astw:select-none astw:px-px astw:text-muted-foreground/60"
+              >
+                {segment.text}
+              </span>
+            );
+          }
+          const editableIndex = editableIndexById.get(idx)!;
+          return (
+            // Editable date segment: the APG spinbutton pattern. A <div role="spinbutton">
+            // (not an <input>) so we render locale-formatted text with no caret.
+            <div
+              key={idx}
+              ref={(el) => {
+                editableRefs.current[editableIndex] = el;
+              }}
+              role="spinbutton"
+              data-slot="date-segment"
+              data-type={segment.type}
+              data-placeholder={segment.isPlaceholder || undefined}
+              contentEditable={false}
+              suppressContentEditableWarning
+              tabIndex={isDisabled ? -1 : 0}
+              aria-label={t(segment.type)}
+              aria-disabled={isDisabled || undefined}
+              aria-readonly={isReadOnly || undefined}
+              aria-invalid={isInvalid || undefined}
+              // aria-required lives on the spinbutton segments, not the role="group"
+              // wrapper — ARIA only supports it on widget roles (spinbutton), not group.
+              aria-required={isRequired || undefined}
+              aria-valuemin={segment.minValue}
+              aria-valuemax={segment.maxValue}
+              aria-valuenow={segment.value}
+              aria-valuetext={segment.isPlaceholder ? t("empty") : segment.text}
+              onFocus={() => {
+                typedCountRef.current = 0;
+              }}
+              onKeyDown={(e) => handleKeyDown(e, segment, editableIndex)}
+              className={cn(
+                "astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none",
+                "astw:focus:bg-primary astw:focus:text-primary-foreground",
+                "astw:data-[placeholder]:text-muted-foreground",
+              )}
+            >
+              {segment.text}
+            </div>
+          );
+        })}
+      </div>
+      {trigger}
+    </div>
+  );
+}
+
+const triggerClasses = cn(
+  "astw:ml-1 astw:flex astw:size-7 astw:items-center astw:justify-center astw:rounded-sm astw:outline-none",
+  "astw:text-muted-foreground",
+  "astw:hover:text-foreground",
+  "astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px]",
+  "astw:disabled:pointer-events-none astw:disabled:opacity-50",
+);
+
+/**
+ * The calendar-icon button that opens the popover. Renders a Base UI
+ * `Popover.Trigger` (a real <button>), so it must live inside a `Popover.Root`.
+ */
+export function DatePickerPopoverTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof Popover.Trigger>) {
+  const t = useDateFieldT();
+  return (
+    <Popover.Trigger
+      data-slot="date-picker-button"
+      aria-label={t("openCalendar")}
+      className={cn(triggerClasses, className)}
+      {...props}
+    >
+      <CalendarIcon className="astw:size-4" />
+    </Popover.Trigger>
+  );
+}
+
+// ─── Popover ──────────────────────────────────────────────────────────────────
+// Same token set + animation classes as our other Base UI popovers
+// (see badge-list.tsx): data-open / data-ending-style animation attributes.
+
+interface DatePopoverProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The field group — must contain a `DatePickerPopoverTrigger`. */
+  field: React.ReactNode;
+  children: React.ReactNode;
+  ariaLabel?: string;
+  /**
+   * Element to position the calendar against. Defaults to the trigger; pass the
+   * field group so the calendar aligns to the field's edge (not the icon),
+   * overlapping it horizontally and shifting inward near the viewport edge.
+   */
+  anchor?: React.RefObject<HTMLElement | null>;
+}
+
+export function DatePopover({
+  open,
+  onOpenChange,
+  field,
+  children,
+  ariaLabel,
+  anchor,
+}: DatePopoverProps) {
+  const t = useDateFieldT();
+  return (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      {field}
+      <Popover.Portal>
+        <Popover.Positioner anchor={anchor} sideOffset={4} side="bottom" align="start">
+          {/* APG date-picker dialog pattern — the popup is a labelled dialog. */}
+          <Popover.Popup
+            role="dialog"
+            aria-label={ariaLabel ?? t("chooseDate")}
+            data-slot="date-picker-popover"
+            className={cn(
+              "astw:z-(--z-popup) astw:origin-(--transform-origin) astw:rounded-md astw:border astw:border-border astw:bg-popover astw:p-3 astw:text-popover-foreground astw:shadow-md",
+              "astw:animate-in astw:fade-in-0 astw:zoom-in-95",
+              "astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+            )}
+          >
+            {children}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
diff --git a/packages/core/src/components/date-field/i18n.ts b/packages/core/src/components/date-field/i18n.ts
new file mode 100644
index 00000000..fe024592
--- /dev/null
+++ b/packages/core/src/components/date-field/i18n.ts
@@ -0,0 +1,41 @@
+import { defineI18nLabels } from "@/hooks/i18n";
+
+/**
+ * Built-in strings for the date-field chrome — popover trigger + dialog, the
+ * per-segment accessible names, and the empty-segment announcement. en values
+ * match what screen readers previously read verbatim, so behaviour is unchanged
+ * for English (and tests) while other locales resolve from the AppShell locale.
+ */
+export const dateFieldLabels = defineI18nLabels({
+  en: {
+    openCalendar: "Open calendar",
+    chooseDate: "Choose date",
+    chooseDateFor: (p: { name: string }) => `${p.name}, choose date`,
+    calendar: "Calendar",
+    empty: "Empty",
+    // Per-segment accessible names (keys match the segment `type`).
+    year: "year",
+    month: "month",
+    day: "day",
+    hour: "hour",
+    minute: "minute",
+    second: "second",
+    dayPeriod: "AM/PM",
+  },
+  ja: {
+    openCalendar: "カレンダーを開く",
+    chooseDate: "日付を選択",
+    chooseDateFor: (p: { name: string }) => `${p.name}、日付を選択`,
+    calendar: "カレンダー",
+    empty: "未入力",
+    year: "年",
+    month: "月",
+    day: "日",
+    hour: "時",
+    minute: "分",
+    second: "秒",
+    dayPeriod: "午前/午後",
+  },
+});
+
+export const useDateFieldT = dateFieldLabels.useT;
diff --git a/packages/core/src/components/date-field/index.ts b/packages/core/src/components/date-field/index.ts
new file mode 100644
index 00000000..3c429dd4
--- /dev/null
+++ b/packages/core/src/components/date-field/index.ts
@@ -0,0 +1 @@
+export { DateField, DatePicker, type DateFieldProps, type DatePickerProps } from "./date-field";
diff --git a/packages/core/src/components/date-field/use-date-field-state.ts b/packages/core/src/components/date-field/use-date-field-state.ts
new file mode 100644
index 00000000..a1360f5d
--- /dev/null
+++ b/packages/core/src/components/date-field/use-date-field-state.ts
@@ -0,0 +1,464 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  CalendarDate,
+  CalendarDateTime,
+  ZonedDateTime,
+  DateFormatter,
+  endOfMonth,
+  now,
+  toCalendarDateTime,
+  toZoned,
+  today,
+  type DateValue,
+} from "@internationalized/date";
+
+/**
+ * Hand-rolled segmented-date-field state.
+ *
+ * This is the logic react-aria's `useDateFieldState` would otherwise provide.
+ * We own it here: locale-driven segment ordering (via `DateFormatter`), per-
+ * segment spinbutton semantics (increment/decrement with context-aware limits),
+ * numeric type-to-fill with auto-advance, and value-type discrimination by
+ * `granularity`. No `Date` ever escapes — `onChange` emits `@internationalized/date`
+ * values (or `null`).
+ */
+
+export type Granularity = "day" | "hour" | "minute" | "second";
+export type HourCycle = 12 | 24;
+
+export type EditableSegmentType =
+  | "year"
+  | "month"
+  | "day"
+  | "hour"
+  | "minute"
+  | "second"
+  | "dayPeriod";
+
+const DATE_SEGMENTS: EditableSegmentType[] = ["year", "month", "day"];
+const TIME_BY_GRANULARITY: Record<Granularity, EditableSegmentType[]> = {
+  day: [],
+  hour: ["hour"],
+  minute: ["hour", "minute"],
+  second: ["hour", "minute", "second"],
+};
+
+// Max digits a segment accepts before it's "full" and auto-advances. A leading
+// zero counts, so typing "02" (2 digits) completes the day and advances —
+// while typing "2" then "9" still builds 29.
+const SEGMENT_MAX_DIGITS: Record<EditableSegmentType, number> = {
+  year: 4,
+  month: 2,
+  day: 2,
+  hour: 2,
+  minute: 2,
+  second: 2,
+  dayPeriod: 0,
+};
+
+type Fields = Partial<Record<EditableSegmentType, number>>;
+
+export interface Segment {
+  type: EditableSegmentType | "literal";
+  /** Display text (locale-formatted value, or placeholder when empty). */
+  text: string;
+  isEditable: boolean;
+  isPlaceholder: boolean;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+}
+
+export interface DateFieldStateOptions {
+  value?: DateValue | null;
+  defaultValue?: DateValue | null;
+  onChange?: (value: DateValue | null) => void;
+  granularity?: Granularity;
+  locale: string;
+  /** Used only to construct `ZonedDateTime` values for time granularities. */
+  timeZone?: string;
+  hourCycle?: HourCycle;
+  placeholderValue?: DateValue;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+}
+
+const PLACEHOLDERS: Record<EditableSegmentType, string> = {
+  year: "yyyy",
+  month: "mm",
+  day: "dd",
+  hour: "––",
+  minute: "––",
+  second: "––",
+  dayPeriod: "AM",
+};
+
+/**
+ * Snap an impossible day down to the entered month's real length — but only once
+ * the date is fully specified (a 4-digit year). Mid-typing is left untouched so
+ * the day isn't prematurely shrunk: while a partial year is being typed (e.g. the
+ * `2` → `20` → `202` → `2026` keystrokes for 29 Feb), the leap-ness of the final
+ * year isn't known yet, so we wait until the year is complete. The on-blur
+ * `commitOnBlur` is the backstop for the year-still-empty case.
+ */
+function clampCompleteDay(f: Fields): Fields {
+  const { day, month, year } = f;
+  if (day == null || month == null || month < 1 || month > 12) return f;
+  if (year == null || year < 1000) return f; // year not yet fully typed
+  const maxDay = endOfMonth(new CalendarDate(year, month, 1)).day;
+  return day > maxDay ? { ...f, day: maxDay } : f;
+}
+
+function fieldsFromValue(v: DateValue | null | undefined): Fields {
+  if (!v) return {};
+  const f: Fields = {};
+  if ("year" in v) {
+    f.year = v.year;
+    f.month = v.month;
+    f.day = v.day;
+  }
+  if ("hour" in v) {
+    f.hour = v.hour;
+    f.minute = v.minute;
+    f.second = v.second;
+  }
+  return f;
+}
+
+function use12HourCycle(locale: string, hourCycle?: HourCycle): boolean {
+  if (hourCycle === 12) return true;
+  if (hourCycle === 24) return false;
+  // Derive from the locale's resolved hour cycle.
+  try {
+    const opts = new DateFormatter(locale, { hour: "numeric" }).resolvedOptions();
+    return opts.hour12 ?? false;
+  } catch {
+    return false;
+  }
+}
+
+export function useDateFieldState(options: DateFieldStateOptions) {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    granularity = "day",
+    locale,
+    timeZone,
+    hourCycle,
+    placeholderValue,
+    isReadOnly,
+  } = options;
+
+  const isControlled = controlledValue !== undefined;
+  const hasTime = granularity !== "day";
+  const is12 = use12HourCycle(locale, hourCycle);
+
+  // The editable segment order, before locale reordering.
+  const editableTypes = useMemo<EditableSegmentType[]>(() => {
+    const types = [...DATE_SEGMENTS, ...TIME_BY_GRANULARITY[granularity]];
+    if (hasTime && is12) types.push("dayPeriod");
+    return types;
+  }, [granularity, hasTime, is12]);
+
+  // Per-segment working state. This is the source of truth while editing — even
+  // when controlled — so a half-typed value (and intermediate out-of-range
+  // segments) survive the round-trip through `onChange`. A `controlled` value
+  // that changes *externally* is synced back in via the effect below.
+  const [internalFields, setInternalFields] = useState<Fields>(() =>
+    fieldsFromValue(controlledValue ?? defaultValue),
+  );
+  const fields = internalFields;
+
+  const lastEmitted = useRef<DateValue | null>(controlledValue ?? defaultValue ?? null);
+
+  // Anchor for placeholder formatting + sensible increment starting points.
+  const anchor = useMemo<CalendarDate | CalendarDateTime | ZonedDateTime>(() => {
+    if (placeholderValue) {
+      return hasTime ? toCalendarDateTime(placeholderValue as never) : (placeholderValue as never);
+    }
+    const tz = timeZone ?? "UTC";
+    return hasTime ? now(tz) : today(tz);
+  }, [placeholderValue, hasTime, timeZone]);
+
+  // Anchor as a plain field record — used to seed increments and to populate
+  // unfilled segments for display formatting.
+  const anchorFields = useMemo<Fields>(() => fieldsFromValue(anchor), [anchor]);
+
+  // ── Limits ──────────────────────────────────────────────────────────────────
+  const getLimits = useCallback(
+    (type: EditableSegmentType): { min: number; max: number } => {
+      switch (type) {
+        case "year":
+          return { min: 1, max: 9999 };
+        case "month":
+          return { min: 1, max: 12 };
+        case "day": {
+          // Until a valid month is entered, allow any day up to 31 — don't
+          // constrain to the anchor month, or typing "31" while the current
+          // month has 30 (or 28/29) days would be wrongly rejected. Once the
+          // month is known, cap at that month's real day count.
+          if (fields.month == null || fields.month < 1 || fields.month > 12) {
+            return { min: 1, max: 31 };
+          }
+          const y = fields.year ?? anchor.year;
+          const max = endOfMonth(new CalendarDate(y, fields.month, 1)).day;
+          return { min: 1, max };
+        }
+        case "hour":
+          return is12 ? { min: 1, max: 12 } : { min: 0, max: 23 };
+        case "minute":
+        case "second":
+          return { min: 0, max: 59 };
+        case "dayPeriod":
+          return { min: 0, max: 1 };
+      }
+    },
+    [fields.year, fields.month, anchor, is12],
+  );
+
+  // ── Value composition ─────────────────────────────────────────────────────
+  const composeValue = useCallback(
+    (f: Fields): DateValue | null => {
+      if (f.year == null || f.month == null || f.day == null) return null;
+      // Reject out-of-range segments (possible mid-typing) so we never build an
+      // invalid CalendarDate — the value is simply "incomplete" until valid.
+      if (f.month < 1 || f.month > 12 || f.day < 1) return null;
+      if (f.day > endOfMonth(new CalendarDate(f.year, f.month, 1)).day) return null;
+      if (!hasTime) return new CalendarDate(f.year, f.month, f.day);
+
+      let hour = f.hour ?? 0;
+      if (is12) {
+        // f.hour is 1..12, dayPeriod 0=AM 1=PM → convert to 24h.
+        const pm = (f.dayPeriod ?? 0) === 1;
+        hour = (hour % 12) + (pm ? 12 : 0);
+      }
+      const cdt = new CalendarDateTime(f.year, f.month, f.day, hour, f.minute ?? 0, f.second ?? 0);
+      // ZonedDateTime when the field is timezone-anchored (controlled value or
+      // placeholder is zoned, or an explicit timeZone is provided).
+      const wantsZoned =
+        controlledValue instanceof ZonedDateTime ||
+        defaultValue instanceof ZonedDateTime ||
+        placeholderValue instanceof ZonedDateTime ||
+        timeZone != null;
+      if (wantsZoned && timeZone) return toZoned(cdt, timeZone);
+      return cdt;
+    },
+    [hasTime, is12, controlledValue, defaultValue, placeholderValue, timeZone],
+  );
+
+  const commit = useCallback(
+    (next: Fields, intent: "edit" | "clear" = "edit") => {
+      // Self-correct an impossible day as soon as the date is complete, so an
+      // unreachable date (e.g. 29 Feb in a non-leap year) never persists — no
+      // matter how the field is left. Skipped while clearing a segment.
+      const f = intent === "edit" ? clampCompleteDay(next) : next;
+      setInternalFields(f);
+      const composed = composeValue(f);
+      // While editing, only emit a *complete & valid* value — never `null` for a
+      // half-typed/out-of-range intermediate (that would thrash a controlled
+      // value and lose the in-progress entry). Clearing explicitly emits `null`.
+      let emit: DateValue | null | undefined;
+      if (composed != null) emit = composed;
+      else if (intent === "clear") emit = null;
+      else emit = undefined;
+      if (emit === undefined) return;
+
+      const prev = lastEmitted.current;
+      const changed =
+        (emit == null) !== (prev == null) ||
+        (emit != null && prev != null && emit.compare(prev as never) !== 0);
+      if (changed) {
+        lastEmitted.current = emit;
+        onChange?.(emit);
+      }
+    },
+    [composeValue, onChange],
+  );
+
+  // Sync internal segments when a *controlled* value changes externally (i.e.
+  // to something other than what we last emitted), without clobbering an
+  // in-progress edit or looping on our own onChange.
+  useEffect(() => {
+    if (!isControlled) return;
+    const cv = controlledValue ?? null;
+    const le = lastEmitted.current;
+    const same =
+      (cv == null && le == null) || (cv != null && le != null && cv.compare(le as never) === 0);
+    if (!same) {
+      lastEmitted.current = cv;
+      setInternalFields(fieldsFromValue(cv));
+    }
+  }, [controlledValue, isControlled]);
+
+  // ── Mutations ───────────────────────────────────────────────────────────────
+  const cycle = useCallback(
+    (type: EditableSegmentType, delta: number) => {
+      if (isReadOnly) return;
+      const { min, max } = getLimits(type);
+      const current = fields[type];
+      let next: number;
+      if (current == null) {
+        // Start from the anchor's value for that field, or the min.
+        if (type === "dayPeriod") {
+          next = (anchorFields.hour ?? 0) >= 12 ? 1 : 0;
+        } else {
+          next = anchorFields[type] ?? min;
+        }
+      } else {
+        const span = max - min + 1;
+        next = ((current - min + delta + span * 1000) % span) + min;
+      }
+      commit({ ...fields, [type]: next });
+    },
+    [fields, getLimits, anchorFields, commit, isReadOnly],
+  );
+
+  const setDigit = useCallback(
+    (
+      type: EditableSegmentType,
+      digit: number,
+      replace = false,
+      digitCount = 1,
+    ): { advance: boolean } => {
+      if (isReadOnly || type === "dayPeriod") return { advance: false };
+      const { min, max } = getLimits(type);
+      // `replace` (first digit after the segment gains focus) starts fresh
+      // rather than accumulating onto the existing value.
+      const current = replace ? undefined : fields[type];
+      let next = current != null && current * 10 + digit <= max ? current * 10 + digit : digit;
+      if (next < min) next = digit;
+      // Auto-advance when the segment can't accept another digit (value too
+      // large) OR the field is digit-width-full (so a leading-zero entry like
+      // "02" advances, while "2" still waits for a possible second digit).
+      const advance = next * 10 > max || digitCount >= SEGMENT_MAX_DIGITS[type];
+      commit({ ...fields, [type]: next });
+      return { advance };
+    },
+    [fields, getLimits, commit, isReadOnly],
+  );
+
+  const setDayPeriod = useCallback(
+    (pm: boolean) => {
+      if (isReadOnly) return;
+      commit({ ...fields, dayPeriod: pm ? 1 : 0 });
+    },
+    [fields, commit, isReadOnly],
+  );
+
+  const clearSegment = useCallback(
+    (type: EditableSegmentType) => {
+      if (isReadOnly) return;
+      const next = { ...fields };
+      delete next[type];
+      commit(next, "clear");
+    },
+    [fields, commit, isReadOnly],
+  );
+
+  /**
+   * On-blur normalization — two corrections applied in a single commit when
+   * focus leaves the whole group:
+   *
+   * 1. **Backfill coarser fields from the anchor (today).** If the day is filled
+   *    but the month/year are missing, assume the current month/year — typing
+   *    just "2" ⇒ the 2nd of this month, this year; "2 Aug" ⇒ 2 Aug this year.
+   *    This only ever fills a *coarser* field (month, year) from a provided
+   *    *finer* one, gated on the day being present. The day itself is never
+   *    guessed, so a lone year (or month) is deliberately left untouched.
+   * 2. **Clamp an impossible day** to the resolved month's length (e.g. the
+   *    30/02 → 28 case), leap-year-aware. A complete date already self-corrects
+   *    in `commit` (see {@link clampCompleteDay}); this is the backstop for the
+   *    partial cases handled above.
+   */
+  const commitOnBlur = useCallback(() => {
+    if (isReadOnly) return;
+    const next: Fields = { ...fields };
+
+    // (1) Backfill — the day (finest, un-guessable unit) is the trigger.
+    if (next.day != null) {
+      if (next.month == null) next.month = anchor.month;
+      if (next.year == null) next.year = anchor.year;
+    }
+
+    // (2) Clamp the day to the now-resolved month/year.
+    if (next.day != null && next.month != null && next.month >= 1 && next.month <= 12) {
+      const yearForMax = next.year ?? 2000; // 2000 is a leap year
+      const maxDay = endOfMonth(new CalendarDate(yearForMax, next.month, 1)).day;
+      if (next.day > maxDay) next.day = maxDay;
+    }
+
+    if (next.day !== fields.day || next.month !== fields.month || next.year !== fields.year) {
+      commit(next);
+    }
+  }, [fields, anchor, isReadOnly, commit]);
+
+  // ── Display segments (locale-ordered) ────────────────────────────────────────
+  // The Intl objects + the locale's part order/separators only depend on
+  // locale / granularity / hour-cycle / timezone (via the anchor) — never on
+  // `fields`. Build them once here so a keystroke (which only changes `fields`)
+  // doesn't spin up a fresh DateFormatter + two NumberFormats + formatToParts.
+  const segmentFormat = useMemo(() => {
+    const formatter = new DateFormatter(locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      ...(hasTime
+        ? {
+            hour: "2-digit",
+            ...(granularity !== "hour" ? { minute: "2-digit" } : {}),
+            ...(granularity === "second" ? { second: "2-digit" } : {}),
+            hour12: is12,
+          }
+        : {}),
+      ...(timeZone ? { timeZone } : {}),
+    });
+    const pad2 = new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false });
+    const yearFmt = new Intl.NumberFormat(locale, { useGrouping: false });
+    const formatSegment = (type: EditableSegmentType, value: number): string => {
+      if (type === "dayPeriod") return value === 1 ? "PM" : "AM";
+      if (type === "year") return yearFmt.format(value);
+      return pad2.format(value);
+    };
+    // Format the (always-valid) anchor to get the locale's segment ORDER and the
+    // literal separators. Each editable segment's *text* is then formatted from
+    // its own value, so an in-progress out-of-range value can never build an
+    // invalid date.
+    const parts = formatter.formatToParts(anchor.toDate(timeZone ?? "UTC"));
+    return { parts, formatSegment };
+  }, [locale, hasTime, granularity, is12, timeZone, anchor]);
+
+  const segments = useMemo<Segment[]>(() => {
+    return segmentFormat.parts.map<Segment>((part) => {
+      const rawType = part.type;
+      if (!editableTypes.includes(rawType as EditableSegmentType)) {
+        return { type: "literal", text: part.value, isEditable: false, isPlaceholder: false };
+      }
+      const editable = rawType as EditableSegmentType;
+      const current = fields[editable];
+      const filled = current != null;
+      const { min, max } = getLimits(editable);
+      return {
+        type: editable,
+        text: filled ? segmentFormat.formatSegment(editable, current) : PLACEHOLDERS[editable],
+        isEditable: true,
+        isPlaceholder: !filled,
+        value: current,
+        minValue: min,
+        maxValue: max,
+      };
+    });
+  }, [segmentFormat, fields, editableTypes, getLimits]);
+
+  const fieldValue = composeValue(fields);
+
+  return {
+    segments,
+    fieldValue,
+    cycle,
+    setDigit,
+    setDayPeriod,
+    clearSegment,
+    commitOnBlur,
+  };
+}
diff --git a/packages/core/src/contexts/appshell-context.tsx b/packages/core/src/contexts/appshell-context.tsx
index 6bdd0c84..862d9ae9 100644
--- a/packages/core/src/contexts/appshell-context.tsx
+++ b/packages/core/src/contexts/appshell-context.tsx
@@ -1,7 +1,13 @@
 import { ErrorBoundaryComponent, Modules, Resource } from "@/resource";
 import { createContext, useContext, type ReactNode } from "react";
 import { DefaultErrorBoundary } from "@/components/default-error-boundary";
-import { DEFAULT_LOCALE, detectBrowserLocale } from "@/lib/i18n";
+import {
+  DEFAULT_LOCALE,
+  detectBrowserLocale,
+  detectBrowserFullLocale,
+  toLanguageSubtag,
+} from "@/lib/i18n";
+import { getLocalTimeZone } from "@internationalized/date";
 
 /**
  * Empty interface for module augmentation.
@@ -53,6 +59,10 @@ export type RootConfiguration = {
   basePath?: string;
   errorBoundary: ErrorBoundaryComponent;
   locale: string;
+  /** Full BCP-47 tag (e.g. "en-GB") for Intl / date formatting. Falls back to `locale`. */
+  resolvedLocale?: string;
+  /** IANA timezone (e.g. "America/Los_Angeles"). Used by date/time components. */
+  timeZone?: string;
 };
 
 export type ConfigurationOptions = {
@@ -61,6 +71,7 @@ export type ConfigurationOptions = {
   basePath?: string;
   errorBoundary?: ErrorBoundaryComponent;
   locale?: string;
+  timeZone?: string;
 };
 
 /**
@@ -72,7 +83,12 @@ export const buildConfigurations = (options: ConfigurationOptions): RootConfigur
   settingsResources: options.settingsResources ?? [],
   errorBoundary: options.errorBoundary ?? <DefaultErrorBoundary />,
   basePath: options.basePath,
-  locale: options.locale ?? detectBrowserLocale(),
+  // `locale` is the language subtag used for built-in UI strings (label tables
+  // are keyed by language), so normalize a full tag like "ja-JP" → "ja".
+  // `resolvedLocale` keeps the full tag for Intl / date formatting.
+  locale: options.locale ? toLanguageSubtag(options.locale) : detectBrowserLocale(),
+  resolvedLocale: options.locale ?? detectBrowserFullLocale(),
+  timeZone: options.timeZone,
 });
 
 /**
@@ -143,3 +159,28 @@ export const useAppShell = () => {
     ...data,
   };
 };
+
+/**
+ * Returns the full BCP-47 locale (e.g. "en-GB") for Intl / date formatting.
+ * Also returns the language code (e.g. "en") used for label resolution.
+ *
+ * Falls back to browser detection when used outside an AppShell.
+ */
+export const useResolvedLocale = (): { locale: string; language: string } => {
+  const { configurations } = useContext(AppShellConfigContext);
+  return {
+    locale: configurations.resolvedLocale ?? configurations.locale,
+    language: configurations.locale,
+  };
+};
+
+/**
+ * Returns the configured IANA timezone (e.g. "America/Los_Angeles").
+ * Falls back to the user's local timezone when not configured.
+ *
+ * Used by date/time components to resolve "today" and for ZonedDateTime values.
+ */
+export const useTimeZone = (): string => {
+  const { configurations } = useContext(AppShellConfigContext);
+  return configurations.timeZone ?? getLocalTimeZone();
+};
diff --git a/packages/core/src/hooks/i18n.test.tsx b/packages/core/src/hooks/i18n.test.tsx
index c9d6dc1f..f5d04952 100644
--- a/packages/core/src/hooks/i18n.test.tsx
+++ b/packages/core/src/hooks/i18n.test.tsx
@@ -15,6 +15,22 @@ afterEach(() => {
   cleanup();
 });
 
+describe("buildConfigurations locale normalization", () => {
+  it("keeps a language subtag unchanged (existing usage)", () => {
+    const c = buildConfigurations({ modules: [], locale: "ja" });
+    expect(c.locale).toBe("ja");
+    expect(c.resolvedLocale).toBe("ja");
+  });
+
+  it("splits a full BCP-47 tag: language subtag for UI strings, full tag for formatting", () => {
+    const c = buildConfigurations({ modules: [], locale: "ja-JP" });
+    // Label tables are keyed by language, so `locale` must be the subtag...
+    expect(c.locale).toBe("ja");
+    // ...while `resolvedLocale` keeps the region for Intl/date formatting.
+    expect(c.resolvedLocale).toBe("ja-JP");
+  });
+});
+
 const labels = defineI18nLabels({
   en: {
     hello: "Hello",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 69fecb02..6a81c269 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -22,7 +22,13 @@ export {
 // Guard component for conditional rendering
 export { WithGuard, type WithGuardProps } from "./components/with-guard";
 
-export { useAppShell, useAppShellConfig, useAppShellData } from "./contexts/appshell-context";
+export {
+  useAppShell,
+  useAppShellConfig,
+  useAppShellData,
+  useResolvedLocale,
+  useTimeZone,
+} from "./contexts/appshell-context";
 export { useTheme, type ColorTheme, type ResolvedColorTheme } from "./contexts/theme-context";
 export { AppearanceSwitcher } from "./components/appearance-switcher";
 export { type I18nLabels, defineI18nLabels } from "./hooks/i18n";
@@ -136,6 +142,31 @@ export { Tooltip } from "./components/tooltip";
 export { Select, type SelectAsyncFetcher } from "./components/select-standalone";
 export { Combobox, type ComboboxAsyncFetcher } from "./components/combobox-standalone";
 export { Autocomplete, type AutocompleteAsyncFetcher } from "./components/autocomplete-standalone";
+export {
+  DateField,
+  DatePicker,
+  type DateFieldProps,
+  type DatePickerProps,
+} from "./components/date-field";
+export { Calendar, type CalendarProps } from "./components/calendar";
+
+// @internationalized/date re-exports — consumers import date helpers/types from
+// app-shell and install no extra packages. The long tail is available via direct
+// import of @internationalized/date (dedupes to the same instance).
+export {
+  today,
+  now,
+  getLocalTimeZone,
+  parseDate,
+  parseDateTime,
+  parseAbsolute,
+  parseZonedDateTime,
+  type CalendarDate,
+  type CalendarDateTime,
+  type ZonedDateTime,
+  type Time,
+  type DateValue,
+} from "@internationalized/date";
 export { type MappedItem, type ItemGroup } from "./components/dropdown-items";
 export {
   CsvImporter,
diff --git a/packages/core/src/lib/i18n.ts b/packages/core/src/lib/i18n.ts
index 3142e829..114b68c1 100644
--- a/packages/core/src/lib/i18n.ts
+++ b/packages/core/src/lib/i18n.ts
@@ -32,6 +32,42 @@ export const detectBrowserLocale = (): string => {
   }
 };
 
+/**
+ * Detects the browser's preferred locale, returning the full BCP-47 tag
+ * (e.g. "en-GB", "ja-JP"). Unlike detectBrowserLocale(), the region subtag
+ * is preserved — required by Intl / @internationalized/date formatting APIs
+ * to drive segment order, first-day-of-week, and 12/24h.
+ *
+ * @returns The full BCP-47 locale tag, or DEFAULT_LOCALE for SSR
+ */
+export const detectBrowserFullLocale = (): string => {
+  try {
+    if (typeof navigator === "undefined") {
+      return DEFAULT_LOCALE;
+    }
+    return navigator.languages?.[0] ?? navigator.language ?? DEFAULT_LOCALE;
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+};
+
+/**
+ * Extracts the language subtag from a BCP-47 tag ("ja-JP" → "ja"), used for
+ * built-in UI-string resolution (label tables are keyed by language). Returns
+ * the input unchanged if it can't be parsed.
+ *
+ * @example
+ * toLanguageSubtag("en-GB") // "en"
+ * toLanguageSubtag("ja")    // "ja"
+ */
+export const toLanguageSubtag = (tag: string): string => {
+  try {
+    return new Intl.Locale(tag).language;
+  } catch {
+    return tag;
+  }
+};
+
 export const buildLocaleResolver =
   (locale: string) => (value: LocalizedString | undefined, fallback: string) => {
     if (!value) return fallback;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ed26404..cbdbb0a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,6 +236,9 @@ importers:
       '@base-ui/react':
         specifier: ^1.5.0
         version: 1.5.0(@types/react@19.2.13)(date-fns@4.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@internationalized/date':
+        specifier: 3.12.2
+        version: 3.12.2
       '@standard-schema/spec':
         specifier: ^1.1.0
         version: 1.1.0
@@ -1578,6 +1581,9 @@ packages:
       '@types/node':
         optional: true
 
+  '@internationalized/date@3.12.2':
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
+
   '@isaacs/balanced-match@4.0.1':
     resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
     engines: {node: 20 || >=22}
@@ -5696,6 +5702,7 @@ packages:
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
+    deprecated: unmaintained
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -7107,6 +7114,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 25.9.1
 
+  '@internationalized/date@3.12.2':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@isaacs/balanced-match@4.0.1': {}
 
   '@isaacs/brace-expansion@5.0.0':