From f9f5569a821945941518665ca5bde6a8eb5025ec Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 17 Jun 2026 13:51:38 +1000
Subject: [PATCH 01/35] docs(date-picker): add design proposal

Proposes the DatePicker / DateField / Calendar API for AppShell:
react-aria-components + @internationalized/date wrapped in a thin
app-shell layer, with passed-through vs masked props, locale and
timezone wiring, alternatives analysis, and measured bundle costs.

Tracked at tailor-inc/platform-planning#1093.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 387 ++++++++++++++++++++++++++++++++++
 1 file changed, 387 insertions(+)
 create mode 100644 docs/proposals/date-picker.md

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
new file mode 100644
index 00000000..a0e1bd5c
--- /dev/null
+++ b/docs/proposals/date-picker.md
@@ -0,0 +1,387 @@
+# Proposal: DatePicker / DateField (and future DateRangePicker)
+
+> Status: **Draft for review — decided: `react-aria-components` for v1; lighter foundation tracked as a future possibility (§9)**
+> Scope: v1 ships `DateField`, `DatePicker`, and a standalone `Calendar`. `DateRangePicker` / `RangeCalendar` are designed-for but deferred.
+
+## 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:
+
+- **No Radix.** `react-aria-components` pulls in **zero** `@radix-ui/*` packages, and the repo is Radix-free today. This is a _different_ vendor stack from the one we removed, not a reintroduction. (The `aria-hidden` utility in the tree is a standalone dep that both ecosystems happen to share — it is not Radix.)
+- **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, which is the direct answer to the Radix-lock-in anxiety.
+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
+import { DatePicker, DateField, Calendar } from "@tailor-platform/app-shell";
+import { today, getLocalTimeZone, type CalendarDate } from "@internationalized/date";
+
+// 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`).
+- **Zero Radix.** Confirmed against the lockfile.
+
+### 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.
+
+## 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).

From 2aed518b71d9cadf0f3a344bc8ac86e839eaf621 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 17 Jun 2026 16:08:53 +1000
Subject: [PATCH 02/35] docs(date-picker): drop Radix references from proposal

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index a0e1bd5c..035bc867 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -11,7 +11,6 @@ This choice is low-regret: the public API (§3) and the value layer are foundati
 
 Verified facts behind this decision:
 
-- **No Radix.** `react-aria-components` pulls in **zero** `@radix-ui/*` packages, and the repo is Radix-free today. This is a _different_ vendor stack from the one we removed, not a reintroduction. (The `aria-hidden` utility in the tree is a standalone dep that both ecosystems happen to share — it is not Radix.)
 - **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.
 
@@ -44,7 +43,7 @@ What the data changes:
 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, which is the direct answer to the Radix-lock-in anxiety.
+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.
@@ -323,7 +322,6 @@ First-cut design, matching the "global context param" instinct:
 ### 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`).
-- **Zero Radix.** Confirmed against the lockfile.
 
 ### Measured size (esbuild, minified + gzipped, `react`/`react-dom` externalised, tree-shaken to the date slice)
 

From 8fc9cb9beb33b87a6c0387ffd8aa17a6500eec00 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 18 Jun 2026 10:11:20 +1000
Subject: [PATCH 03/35] docs(date-picker): clarify value layer (representation)
 vs Intl formatting

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index 035bc867..1d89b7ac 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -362,6 +362,14 @@ The **+32 KB (Ark)** or **+62 KB (react-aria)** on top buys the _interaction / a
 
 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.
+
 ## 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.

From a62647aff79c6fb2985437a287a6dca238202145 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 19 Jun 2026 09:48:32 +1000
Subject: [PATCH 04/35] docs(date-picker): document @internationalized/date
 packaging (regular dep + re-export)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index 1d89b7ac..9a8a2911 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -124,8 +124,15 @@ Single-date and range are **separate components, not a `mode` prop** — they ha
 ### 4.1 Consumer usage
 
 ```tsx
-import { DatePicker, DateField, Calendar } from "@tailor-platform/app-shell";
-import { today, getLocalTimeZone, type CalendarDate } from "@internationalized/date";
+// 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() {
@@ -370,6 +377,17 @@ What this doc calls the "value layer" is the date **representation**: the immuta
 
 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.

From 0b690e27192f760c965ddac2f6f359dce087754d Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 03:22:15 +1000
Subject: [PATCH 05/35] feat(date-picker): add DateField/DatePicker/Calendar
 (@internationalized/date + Base UI)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements the proposal's §9 lighter-foundation option: DateField, DatePicker,
and Calendar built on @internationalized/date (value layer) + Base UI (Popover),
with the segmented spinbutton input and APG calendar grid hand-rolled. Same public
API and a11y/DOM contract as the react-aria variant; net-new dependency is just
@internationalized/date (~11 KB gz) since Base UI is already bundled.

- Locale-driven segment ordering, first-day-of-week, localized month/weekday names
- Full APG keyboard: arrows, Home/End, PageUp/PageDown, Shift+PageUp/Down, Enter/Space
- Roving tabindex; popover auto-focuses the grid and contains Tab (prev → next → grid)
- Month-change via nav buttons keeps focus on the button (one-shot focus signal)
- Visible focus ring on nav buttons + day cells
- AppShell timeZone prop + useResolvedLocale()/useTimeZone(); @internationalized/date re-exports
- 25 tests (behaviour + DOM a11y contract), docs, changeset, example page, impl comparison

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .changeset/date-picker.md                     |  22 +
 docs/components/date-picker.md                | 144 +++++
 docs/proposals/date-picker-impl-comparison.md |  63 ++
 examples/vite-app/src/App.tsx                 |   1 +
 .../vite-app/src/pages/date-picker/page.tsx   | 189 ++++++
 examples/vite-app/src/routes.generated.ts     |   1 +
 packages/core/.oxlintrc.jsonc                 |  14 +
 packages/core/package.json                    |   1 +
 packages/core/src/components/appshell.tsx     |  18 +-
 .../src/components/date-picker-standalone.tsx | 370 +++++++++++
 .../core/src/components/date-picker.test.tsx  | 277 +++++++++
 packages/core/src/components/date-picker.tsx  | 585 ++++++++++++++++++
 .../core/src/components/use-calendar-state.ts | 304 +++++++++
 .../src/components/use-date-field-state.ts    | 376 +++++++++++
 .../core/src/contexts/appshell-context.tsx    |  35 +-
 packages/core/src/index.ts                    |  34 +-
 packages/core/src/lib/i18n.ts                 |  19 +
 pnpm-lock.yaml                                |  11 +
 18 files changed, 2461 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/date-picker.md
 create mode 100644 docs/components/date-picker.md
 create mode 100644 docs/proposals/date-picker-impl-comparison.md
 create mode 100644 examples/vite-app/src/pages/date-picker/page.tsx
 create mode 100644 packages/core/src/components/date-picker-standalone.tsx
 create mode 100644 packages/core/src/components/date-picker.test.tsx
 create mode 100644 packages/core/src/components/date-picker.tsx
 create mode 100644 packages/core/src/components/use-calendar-state.ts
 create mode 100644 packages/core/src/components/use-date-field-state.ts

diff --git a/.changeset/date-picker.md b/.changeset/date-picker.md
new file mode 100644
index 00000000..b8b5f642
--- /dev/null
+++ b/.changeset/date-picker.md
@@ -0,0 +1,22 @@
+---
+"@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.
diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
new file mode 100644
index 00000000..2fdf6636
--- /dev/null
+++ b/docs/components/date-picker.md
@@ -0,0 +1,144 @@
+---
+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, month/weekday names, and 12/24-hour display 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"`.
+
+## Props
+
+### DateFieldProps
+
+| Prop                                                     | Type                                      | Description                             |
+| -------------------------------------------------------- | ----------------------------------------- | --------------------------------------- |
+| `label`                                                  | `LocalizedString`                         | Field label                             |
+| `description`                                            | `LocalizedString`                         | Helper text                             |
+| `errorMessage`                                           | `LocalizedString`                         | Error text; also sets the invalid state |
+| `value` / `defaultValue`                                 | `DateValue \| null`                       | Controlled / uncontrolled value         |
+| `onChange`                                               | `(v: DateValue \| null) => void`          | Called on change; `null` when cleared   |
+| `granularity`                                            | `"day" \| "hour" \| "minute" \| "second"` | Drives the value type                   |
+| `minValue` / `maxValue`                                  | `DateValue`                               | Bounds                                  |
+| `isDateUnavailable`                                      | `(date: DateValue) => boolean`            | Mark dates unavailable                  |
+| `isDisabled` / `isReadOnly` / `isRequired` / `isInvalid` | `boolean`                                 | State flags                             |
+| `hourCycle`                                              | `12 \| 24`                                | Override AM/PM vs 24-hour               |
+| `placeholderValue`                                       | `DateValue`                               | Seeds unset segments                    |
+| `autoFocus`                                              | `boolean`                                 | Focus first segment on mount            |
+| `locale`                                                 | `string`                                  | BCP-47 locale override                  |
+| `name`                                                   | `string`                                  | Hidden input for form submission        |
+| `className`                                              | `string`                                  | Root element class                      |
+
+### DatePickerProps
+
+All `DateFieldProps` plus `firstDayOfWeek` (`"sun" | "mon" | …`) and `timeZone` (IANA; defaults to AppShell `timeZone`).
+
+### CalendarProps
+
+`value` / `defaultValue` / `onChange` / `minValue` / `maxValue` / `isDateUnavailable` / `isDisabled` / `isReadOnly` / `focusedValue` / `defaultFocusedValue` / `onFocusChange` / `firstDayOfWeek` / `aria-label` / `aria-labelledby` / `timeZone` / `locale` / `className`.
+
+## 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..fc238aea
--- /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 mounts a hidden `<input inputmode="numeric">` per field so mobile virtual keyboards work; our segments are `<div role="spinbutton">`, so on-screen-keyboard typing on touch devices is limited (desktop keyboard + the calendar work fully). The biggest remaining gap.
+- **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/examples/vite-app/src/App.tsx b/examples/vite-app/src/App.tsx
index fa478f54..c0d06470 100644
--- a/examples/vite-app/src/App.tsx
+++ b/examples/vite-app/src/App.tsx
@@ -34,6 +34,7 @@ const App = () => {
               <SidebarItem to="/dashboard" activeMatch="exact" />
               <SidebarItem to="/dashboard/orders" />
             </SidebarGroup>
+            <SidebarItem to="/date-picker" />
             <SidebarItem to="/settings" />
           </DefaultSidebar>
         }
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..276e19bc
--- /dev/null
+++ b/examples/vite-app/src/pages/date-picker/page.tsx
@@ -0,0 +1,189 @@
+import { useState } from "react";
+import {
+  Layout,
+  DateField,
+  DatePicker,
+  Calendar,
+  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);
+
+  const tomorrow = today(tz).add({ days: 1 });
+  const threeMonths = today(tz).add({ months: 3 });
+
+  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>
+
+          {/* ── DatePicker week start ───────────────────────────────── */}
+          <section className="flex flex-col gap-4">
+            <h2 className="text-base font-semibold border-b pb-2">DatePicker — week start</h2>
+            <div className="flex flex-wrap gap-6 items-start">
+              <DatePicker label="Week starts Sunday (default)" />
+              <DatePicker label="Week starts Monday" firstDayOfWeek="mon" />
+            </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 8edef362..90791376 100644
--- a/examples/vite-app/src/routes.generated.ts
+++ b/examples/vite-app/src/routes.generated.ts
@@ -19,6 +19,7 @@ export type GeneratedRouteParams = {
   "/dashboard": {};
   "/dashboard/orders": {};
   "/dashboard/orders/:id": { id: string };
+  "/date-picker": {};
   "/settings": {};
 };
 
diff --git a/packages/core/.oxlintrc.jsonc b/packages/core/.oxlintrc.jsonc
index ef5e146b..14834a72 100644
--- a/packages/core/.oxlintrc.jsonc
+++ b/packages/core/.oxlintrc.jsonc
@@ -10,5 +10,19 @@
     "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-picker.tsx", "src/components/date-picker-standalone.tsx"],
+      "rules": {
+        "jsx-a11y/prefer-tag-over-role": "off",
+        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+        "jsx-a11y/no-autofocus": "off",
+      },
+    },
+  ],
   "ignorePatterns": ["dist", "node_modules"],
 }
diff --git a/packages/core/package.json b/packages/core/package.json
index d52eb5b5..cec9c77e 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -51,6 +51,7 @@
   "dependencies": {
     "@base-ui/react": "^1.5.0",
     "@fontsource-variable/inter": "^5.0.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 bf4d8376..df521ad4 100644
--- a/packages/core/src/components/appshell.tsx
+++ b/packages/core/src/components/appshell.tsx
@@ -89,6 +89,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.
    *
@@ -274,9 +282,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/date-picker-standalone.tsx b/packages/core/src/components/date-picker-standalone.tsx
new file mode 100644
index 00000000..c83b674b
--- /dev/null
+++ b/packages/core/src/components/date-picker-standalone.tsx
@@ -0,0 +1,370 @@
+import { useCallback, useId, useState } from "react";
+import type { CalendarDate, 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 "./use-calendar-state";
+import {
+  DateInputGroup,
+  CalendarView,
+  DatePopover,
+  DatePickerPopoverTrigger,
+  DatePickerLabel,
+  DatePickerDescription,
+  DatePickerError,
+} from "./date-picker";
+
+/**
+ * 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;
+  /** 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;
+};
+
+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;
+  locale?: 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,
+  autoFocus,
+  name,
+}: 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({
+    value: value ?? undefined,
+    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}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        isInvalid={derivedInvalid}
+        autoFocus={autoFocus}
+        labelId={labelText ? labelId : undefined}
+        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,
+  autoFocus,
+  firstDayOfWeek,
+  name,
+}: DatePickerProps<T>) {
+  const { locale: shellLocale, language } = useResolvedLocale();
+  const shellTz = useTimeZone();
+  const resolvedLocale = localeProp ?? shellLocale;
+  const resolvedTz = timeZoneProp ?? shellTz;
+  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 [open, setOpen] = useState(false);
+  const [val, setVal] = useControlledState<DateValue | null>(
+    value ?? undefined,
+    defaultValue ?? null,
+    onChange as (v: DateValue | null) => void,
+  );
+
+  const fieldState = useDateFieldState({
+    value: val,
+    onChange: setVal,
+    granularity,
+    locale: resolvedLocale,
+    timeZone: timeZoneProp,
+    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;
+
+  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={labelText ? `${labelText}, choose date` : "Choose date"}
+        field={
+          <DateInputGroup
+            segments={fieldState.segments}
+            cycle={fieldState.cycle}
+            setDigit={fieldState.setDigit}
+            setDayPeriod={fieldState.setDayPeriod}
+            clearSegment={fieldState.clearSegment}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isInvalid={derivedInvalid}
+            autoFocus={autoFocus}
+            labelId={labelText ? labelId : undefined}
+            describedById={describedBy}
+            trigger={<DatePickerPopoverTrigger disabled={isDisabled} />}
+          />
+        }
+      >
+        <CalendarView state={calState} ariaLabel={labelText ?? "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>
+  );
+}
+
+// ─── Calendar ─────────────────────────────────────────────────────────────────
+
+/**
+ * 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 { DateField, DatePicker, Calendar };
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
new file mode 100644
index 00000000..6a470be4
--- /dev/null
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -0,0 +1,277 @@
+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 { DateField, DatePicker, Calendar } from "./date-picker-standalone";
+
+// 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"),
+  );
+}
+
+// ─── 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 when a segment value changes", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    const yearSegment = screen.getByRole("spinbutton", { name: /year/i });
+    await user.click(yearSegment);
+    await user.keyboard("2025");
+
+    await waitFor(
+      () => {
+        expect(onChange).toHaveBeenCalled();
+      },
+      { timeout: 500 },
+    );
+  });
+});
+
+// ─── 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();
+  });
+});
+
+// ─── 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("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("shows a focus ring (inline outline) when a day cell is focused", () => {
+    render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    const cell = getCalendarCells().find((c) => c.getAttribute("tabindex") === "0")!;
+    cell.focus();
+    expect(cell.style.outline).toContain("var(--ring)");
+    cell.blur();
+    expect(cell.style.outline).toBe("");
+  });
+
+  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",
+    );
+  });
+});
+
+// ─── 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-picker.tsx b/packages/core/src/components/date-picker.tsx
new file mode 100644
index 00000000..8bc0233f
--- /dev/null
+++ b/packages/core/src/components/date-picker.tsx
@@ -0,0 +1,585 @@
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+import { cva } from "class-variance-authority";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { inputBaseClasses } from "@/lib/input-classes";
+import type { Segment } from "./use-date-field-state";
+import type { CalendarDay, useCalendarState } from "./use-calendar-state";
+
+/**
+ * Internal presentation layer for the date components — built on Base UI
+ * primitives (`Popover`) + plain accessible markup, driven by our own
+ * `useDateFieldState` / `useCalendarState` engines. Not exported from the
+ * package; the public API lives in `date-picker-standalone.tsx`.
+ *
+ * Styling mirrors the rest of the library (`astw:` tokens, dark mode, the same
+ * popover token set as our other Base UI popovers).
+ */
+
+// ─── 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",
+          // Focus ring is defined unlayered in globals.css (see the date-component
+          // focus block) so it reliably beats the global `* { outline-color }`
+          // base rule. Roving focus moves programmatically during keyboard nav.
+          "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" },
+  },
+);
+
+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:disabled:pointer-events-none astw:disabled:opacity-50",
+);
+
+// Focus ring applied via focus/blur events rather than a CSS `:focus` rule.
+// Rationale: the global `* { outline-color }` base style + Tailwind's @layer
+// ordering make a plain `:focus` outline unreliable to override, and roving
+// focus moves programmatically. Setting the outline inline on the focus event
+// is bulletproof across the cascade.
+const RING_OUTLINE = "2px solid var(--ring)";
+
+function showFocusRing(el: HTMLElement, offset: string) {
+  el.style.outline = RING_OUTLINE;
+  el.style.outlineOffset = offset;
+}
+function hideFocusRing(el: HTMLElement) {
+  el.style.outline = "";
+  el.style.outlineOffset = "";
+}
+/** Chrome buttons (nav, trigger): only show on keyboard focus, not mouse. */
+function chromeFocusProps(offset = "2px") {
+  return {
+    onFocus: (e: React.FocusEvent<HTMLElement>) => {
+      // Skip the focus-visible heuristic when unsupported (older engines).
+      let visible = true;
+      try {
+        visible = e.currentTarget.matches(":focus-visible");
+      } catch {
+        visible = true;
+      }
+      if (visible) showFocusRing(e.currentTarget, offset);
+    },
+    onBlur: (e: React.FocusEvent<HTMLElement>) => hideFocusRing(e.currentTarget),
+  };
+}
+
+// ─── 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,
+  "astw:flex astw:h-9 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) => { advance: boolean };
+  setDayPeriod: (pm: boolean) => void;
+  clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+  labelId?: string;
+  describedById?: string;
+  className?: string;
+  trigger?: React.ReactNode;
+}
+
+export function DateInputGroup({
+  segments,
+  cycle,
+  setDigit,
+  setDayPeriod,
+  clearSegment,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+  autoFocus,
+  labelId,
+  describedById,
+  className,
+  trigger,
+}: DateInputGroupProps) {
+  const editableRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+
+  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 { advance } = setDigit(type, Number(e.key));
+      if (advance) focusEditable(editableIndex + 1);
+    }
+  };
+
+  return (
+    // Deliberate APG date-field pattern: a labelled group wrapping spinbutton segments.
+    <div
+      role="group"
+      data-slot="date-picker-group"
+      aria-labelledby={labelId}
+      aria-describedby={describedById}
+      aria-disabled={isDisabled || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={isInvalid || undefined}
+      className={cn(groupClasses, className)}
+    >
+      <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={segment.label}
+              aria-disabled={isDisabled || undefined}
+              aria-readonly={isReadOnly || undefined}
+              aria-invalid={isInvalid || undefined}
+              aria-valuemin={segment.minValue}
+              aria-valuemax={segment.maxValue}
+              aria-valuenow={segment.value}
+              aria-valuetext={segment.isPlaceholder ? "Empty" : segment.text}
+              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: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>) {
+  return (
+    <Popover.Trigger
+      data-slot="date-picker-button"
+      aria-label="Open calendar"
+      className={cn(triggerClasses, className)}
+      {...chromeFocusProps()}
+      {...props}
+    >
+      <CalendarIcon className="astw:size-4" />
+    </Popover.Trigger>
+  );
+}
+
+// ─── Calendar ─────────────────────────────────────────────────────────────────
+
+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 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;
+    cellRefs.current.get(state.focusedDate.toString())?.focus();
+  }, [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;
+    cellRefs.current.get(state.focusedDate.toString())?.focus();
+    // 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();
+  };
+
+  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="Previous month"
+          disabled={state.prevDisabled}
+          onClick={state.previousMonth}
+          className={navButtonClasses}
+          {...chromeFocusProps()}
+        >
+          <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="Next month"
+          disabled={state.nextDisabled}
+          onClick={state.nextMonth}
+          className={navButtonClasses}
+          {...chromeFocusProps()}
+        >
+          <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) {
+  const interactive = !day.isOutsideMonth && !day.isDisabled && !day.isUnavailable;
+  // `<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={interactive ? onKeyDown : undefined}
+        onFocus={(e) => {
+          onFocus();
+          e.currentTarget.style.zIndex = "10";
+          showFocusRing(e.currentTarget, "-2px");
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.zIndex = "";
+          hideFocusRing(e.currentTarget);
+        }}
+        className={calendarCellVariants()}
+      >
+        {day.date.day}
+      </button>
+    </td>
+  );
+}
+
+// ─── 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;
+}
+
+export function DatePopover({ open, onOpenChange, field, children, ariaLabel }: DatePopoverProps) {
+  return (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      {field}
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={4} side="bottom" align="start">
+          {/* APG date-picker dialog pattern — the popup is a labelled dialog. */}
+          <Popover.Popup
+            role="dialog"
+            aria-label={ariaLabel ?? "Choose date"}
+            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>
+  );
+}
+
+export { calendarCellVariants };
diff --git a/packages/core/src/components/use-calendar-state.ts b/packages/core/src/components/use-calendar-state.ts
new file mode 100644
index 00000000..d785772b
--- /dev/null
+++ b/packages/core/src/components/use-calendar-state.ts
@@ -0,0 +1,304 @@
+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],
+  );
+
+  const cellLabel = useCallback(
+    (date: CalendarDate) =>
+      new DateFormatter(locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        timeZone,
+      }).format(date.toDate(timeZone)),
+    [locale, 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/use-date-field-state.ts b/packages/core/src/components/use-date-field-state.ts
new file mode 100644
index 00000000..237191fc
--- /dev/null
+++ b/packages/core/src/components/use-date-field-state.ts
@@ -0,0 +1,376 @@
+import { useCallback, 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"],
+};
+
+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;
+  /** Accessible label, e.g. "month", "year". */
+  label?: string;
+}
+
+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 SEGMENT_LABELS: Record<EditableSegmentType, string> = {
+  year: "year",
+  month: "month",
+  day: "day",
+  hour: "hour",
+  minute: "minute",
+  second: "second",
+  dayPeriod: "AM/PM",
+};
+
+const PLACEHOLDERS: Record<EditableSegmentType, string> = {
+  year: "yyyy",
+  month: "mm",
+  day: "dd",
+  hour: "––",
+  minute: "––",
+  second: "––",
+  dayPeriod: "AM",
+};
+
+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]);
+
+  // Working fields (uncontrolled) — initialised from value/defaultValue.
+  const [internalFields, setInternalFields] = useState<Fields>(() =>
+    fieldsFromValue(controlledValue ?? defaultValue),
+  );
+
+  // For controlled usage, the source of truth is the prop value.
+  const fields = isControlled ? fieldsFromValue(controlledValue) : internalFields;
+
+  // 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]);
+
+  const lastEmitted = useRef<DateValue | null | undefined>(undefined);
+
+  // ── 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": {
+          const y = fields.year ?? anchor.year;
+          const m = fields.month ?? anchor.month;
+          const max = endOfMonth(new CalendarDate(y, m, 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;
+      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) => {
+      if (!isControlled) setInternalFields(next);
+      const composed = composeValue(next);
+      const prev = lastEmitted.current;
+      const changed =
+        prev === undefined ||
+        (composed == null) !== (prev == null) ||
+        (composed != null && prev != null && composed.compare(prev as never) !== 0);
+      if (changed) {
+        lastEmitted.current = composed;
+        onChange?.(composed);
+      }
+    },
+    [isControlled, composeValue, onChange],
+  );
+
+  // ── 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): { advance: boolean } => {
+      if (isReadOnly || type === "dayPeriod") return { advance: false };
+      const { min, max } = getLimits(type);
+      const current = fields[type];
+      let next = current != null && current * 10 + digit <= max ? current * 10 + digit : digit;
+      if (next < min) next = digit;
+      // Auto-advance once the segment can't accept another digit.
+      const advance = next * 10 > max;
+      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);
+    },
+    [fields, commit, isReadOnly],
+  );
+
+  // ── Display segments (locale-ordered) ────────────────────────────────────────
+  const segments = useMemo<Segment[]>(() => {
+    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 } : {}),
+    });
+
+    // Build a fully-populated date so the formatter yields every part; unfilled
+    // editable parts get overridden with placeholders below.
+    const display: Fields = { ...fields };
+    for (const t of editableTypes) {
+      if (display[t] == null) display[t] = anchorFields[t] ?? getLimits(t).min;
+    }
+    let displayDate: CalendarDate | CalendarDateTime;
+    if (hasTime) {
+      let h = display.hour ?? 0;
+      if (is12) h = (h % 12) + ((display.dayPeriod ?? 0) === 1 ? 12 : 0);
+      displayDate = new CalendarDateTime(
+        display.year!,
+        display.month!,
+        display.day!,
+        h,
+        display.minute ?? 0,
+        display.second ?? 0,
+      );
+    } else {
+      displayDate = new CalendarDate(display.year!, display.month!, display.day!);
+    }
+
+    const parts = formatter.formatToParts(displayDate.toDate(timeZone ?? "UTC"));
+    return 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 filled = fields[editable] != null;
+      const { min, max } = getLimits(editable);
+      return {
+        type: editable,
+        text: filled ? part.value : PLACEHOLDERS[editable],
+        isEditable: true,
+        isPlaceholder: !filled,
+        value: fields[editable],
+        minValue: min,
+        maxValue: max,
+        label: SEGMENT_LABELS[editable],
+      };
+    });
+  }, [
+    locale,
+    hasTime,
+    granularity,
+    is12,
+    timeZone,
+    fields,
+    editableTypes,
+    anchorFields,
+    getLimits,
+  ]);
+
+  const fieldValue = composeValue(fields);
+
+  return {
+    segments,
+    fieldValue,
+    cycle,
+    setDigit,
+    setDayPeriod,
+    clearSegment,
+  };
+}
diff --git a/packages/core/src/contexts/appshell-context.tsx b/packages/core/src/contexts/appshell-context.tsx
index d7bfaba1..49981995 100644
--- a/packages/core/src/contexts/appshell-context.tsx
+++ b/packages/core/src/contexts/appshell-context.tsx
@@ -1,7 +1,8 @@
 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 } from "@/lib/i18n";
+import { getLocalTimeZone } from "@internationalized/date";
 
 /**
  * Empty interface for module augmentation.
@@ -53,6 +54,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 +66,7 @@ export type ConfigurationOptions = {
   basePath?: string;
   errorBoundary?: ErrorBoundaryComponent;
   locale?: string;
+  timeZone?: string;
 };
 
 /**
@@ -73,6 +79,8 @@ export const buildConfigurations = (options: ConfigurationOptions): RootConfigur
   errorBoundary: options.errorBoundary ?? <DefaultErrorBoundary />,
   basePath: options.basePath,
   locale: options.locale ?? detectBrowserLocale(),
+  resolvedLocale: options.locale ?? detectBrowserFullLocale(),
+  timeZone: options.timeZone,
 });
 
 /**
@@ -142,3 +150,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/index.ts b/packages/core/src/index.ts
index 9da325fa..659fbe30 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -25,7 +25,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 } from "./contexts/theme-context";
 export { type I18nLabels, defineI18nLabels } from "./hooks/i18n";
 export {
@@ -125,6 +131,32 @@ 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,
+  Calendar,
+  type DateFieldProps,
+  type DatePickerProps,
+  type CalendarProps,
+} from "./components/date-picker-standalone";
+
+// @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..24fb8341 100644
--- a/packages/core/src/lib/i18n.ts
+++ b/packages/core/src/lib/i18n.ts
@@ -32,6 +32,25 @@ 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;
+  }
+};
+
 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 6a0a9987..6e52b5fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -239,6 +239,9 @@ importers:
       '@fontsource-variable/inter':
         specifier: ^5.0.0
         version: 5.2.8
+      '@internationalized/date':
+        specifier: 3.12.2
+        version: 3.12.2
       '@standard-schema/spec':
         specifier: ^1.1.0
         version: 1.1.0
@@ -1250,6 +1253,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}
@@ -4912,6 +4918,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
@@ -6060,6 +6067,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':

From 7835500f2e453997b1fe3eed03939032e96bc37b Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 04:05:28 +1000
Subject: [PATCH 06/35] feat(data-table): use DatePicker for date filters +
 example page

Wire the app-shell DatePicker into the DataTable date-filter editor (single
and between ranges), replacing the native date input, and add an example page
demonstrating DataTable + DataTable.Filters driven by useCollectionVariables
and a promise-based async data source (a stub for the GraphQL query).

DatePicker robustness fixes surfaced by controlled filter usage:
- useDateFieldState keeps internal segment state synced from a controlled value
  (no thrash/loss of in-progress entry on every keystroke)
- typing only emits a complete & valid value; clearing emits null
- first digit after a segment is focused replaces rather than accumulates
- composeValue guards reject out-of-range segments (no invalid CalendarDate)
- per-segment display formatting (never constructs a date from partial input)
- DatePicker/DateField gain an `aria-label` prop for compact, label-less inputs

Example page: dummy invoice dataset, async queryInvoices(variables) applying
filter/order/cursor-pagination, date column with `type: "date"` filter.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 examples/vite-app/src/App.tsx                 |   1 +
 .../vite-app/src/pages/data-table/page.tsx    | 270 ++++++++++++++++++
 examples/vite-app/src/routes.generated.ts     |   1 +
 packages/core/.oxlintrc.jsonc                 |   4 +
 .../components/data-table/toolbar.test.tsx    | 104 ++++---
 .../src/components/data-table/toolbar.tsx     | 124 ++++++--
 .../src/components/date-picker-standalone.tsx |  12 +-
 .../core/src/components/date-picker.test.tsx  |  21 +-
 packages/core/src/components/date-picker.tsx  |  20 +-
 .../src/components/use-date-field-state.ts    | 124 ++++----
 10 files changed, 552 insertions(+), 129 deletions(-)
 create mode 100644 examples/vite-app/src/pages/data-table/page.tsx

diff --git a/examples/vite-app/src/App.tsx b/examples/vite-app/src/App.tsx
index c0d06470..cb473fd9 100644
--- a/examples/vite-app/src/App.tsx
+++ b/examples/vite-app/src/App.tsx
@@ -35,6 +35,7 @@ const App = () => {
               <SidebarItem to="/dashboard/orders" />
             </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..60efd625
--- /dev/null
+++ b/examples/vite-app/src/pages/data-table/page.tsx
@@ -0,0 +1,270 @@
+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";
+
+interface 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/routes.generated.ts b/examples/vite-app/src/routes.generated.ts
index 90791376..724ece87 100644
--- a/examples/vite-app/src/routes.generated.ts
+++ b/examples/vite-app/src/routes.generated.ts
@@ -19,6 +19,7 @@ export type GeneratedRouteParams = {
   "/dashboard": {};
   "/dashboard/orders": {};
   "/dashboard/orders/:id": { id: string };
+  "/data-table": {};
   "/date-picker": {};
   "/settings": {};
 };
diff --git a/packages/core/.oxlintrc.jsonc b/packages/core/.oxlintrc.jsonc
index 14834a72..740748b6 100644
--- a/packages/core/.oxlintrc.jsonc
+++ b/packages/core/.oxlintrc.jsonc
@@ -21,6 +21,10 @@
         "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",
       },
     },
   ],
diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
index 4c25fb91..725dd7d9 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,37 @@ 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) {
+  await user.click(within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name: "year" }));
+  await user.keyboard("{Delete}");
+}
+
 // ---------------------------------------------------------------------------
 // DataTable.Filters — rendering
 // ---------------------------------------------------------------------------
@@ -476,41 +507,48 @@ describe("DateFilterEditor", () => {
     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 equals 2025-01-01/ }));
+
+    // 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 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 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");
@@ -807,7 +845,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,9 +856,7 @@ describe("TemporalFilterEditor (between)", () => {
         },
       ],
     });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
     await user.click(
       screen.getByRole("button", {
@@ -828,8 +864,8 @@ describe("TemporalFilterEditor (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 +879,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/,
       }),
     );
+    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 +898,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 +909,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/,
       }),
     );
+    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..a9ffd3c6 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -7,6 +7,8 @@ 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-picker-standalone";
+import { parseDate } from "@internationalized/date";
 import { useDataTableContext } from "./data-table-context";
 import { useDataTableT } from "./i18n";
 import type { CollectionControl, Filter, FilterConfig, FilterOperator } from "@/types/collection";
@@ -166,6 +168,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 +346,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 +377,15 @@ function AddFilterPopover({
           />
         );
       }
+      if (isDate) {
+        return (
+          <DateFilterPicker
+            ariaLabel={fieldLabel}
+            value={typeof value === "string" ? value : ""}
+            onChange={(v) => setValue(v)}
+          />
+        );
+      }
       return (
         <Input
           {...getTemporalInputProps(config.type)}
@@ -1046,6 +1099,52 @@ 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={t("filterBetweenFrom")}
+          value={localValue}
+          onChange={setLocalValue}
+        />
+        <DateFilterPicker
+          ariaLabel={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={config.field} 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}`}
@@ -1060,30 +1159,7 @@ function TemporalFilterEditor({
         mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
         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>
diff --git a/packages/core/src/components/date-picker-standalone.tsx b/packages/core/src/components/date-picker-standalone.tsx
index c83b674b..38f4e9cb 100644
--- a/packages/core/src/components/date-picker-standalone.tsx
+++ b/packages/core/src/components/date-picker-standalone.tsx
@@ -66,6 +66,8 @@ interface DateBehaviorProps<T extends DateValue> {
   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;
 }
@@ -129,6 +131,7 @@ function DateField<T extends DateValue = DateValue>({
   isInvalid,
   autoFocus,
   name,
+  "aria-label": ariaLabel,
 }: DateFieldProps<T>) {
   const { locale: shellLocale, language } = useResolvedLocale();
   const resolvedLocale = localeProp ?? shellLocale;
@@ -170,6 +173,7 @@ function DateField<T extends DateValue = DateValue>({
         isInvalid={derivedInvalid}
         autoFocus={autoFocus}
         labelId={labelText ? labelId : undefined}
+        ariaLabel={ariaLabel}
         describedById={describedBy}
       />
       {descText && <DatePickerDescription id={descId}>{descText}</DatePickerDescription>}
@@ -218,6 +222,7 @@ function DatePicker<T extends DateValue = DateValue>({
   autoFocus,
   firstDayOfWeek,
   name,
+  "aria-label": ariaLabel,
 }: DatePickerProps<T>) {
   const { locale: shellLocale, language } = useResolvedLocale();
   const shellTz = useTimeZone();
@@ -269,6 +274,8 @@ function DatePicker<T extends DateValue = DateValue>({
   });
 
   const describedBy = cn(descText && descId, derivedInvalid && errorText && errId) || undefined;
+  const accessibleName = labelText ?? ariaLabel;
+  const popoverAriaLabel = accessibleName ? `${accessibleName}, choose date` : "Choose date";
 
   return (
     <div data-slot="date-picker" className={cn("astw:flex astw:flex-col astw:gap-1", className)}>
@@ -276,7 +283,7 @@ function DatePicker<T extends DateValue = DateValue>({
       <DatePopover
         open={open}
         onOpenChange={setOpen}
-        ariaLabel={labelText ? `${labelText}, choose date` : "Choose date"}
+        ariaLabel={popoverAriaLabel}
         field={
           <DateInputGroup
             segments={fieldState.segments}
@@ -289,12 +296,13 @@ function DatePicker<T extends DateValue = DateValue>({
             isInvalid={derivedInvalid}
             autoFocus={autoFocus}
             labelId={labelText ? labelId : undefined}
+            ariaLabel={ariaLabel}
             describedById={describedBy}
             trigger={<DatePickerPopoverTrigger disabled={isDisabled} />}
           />
         }
       >
-        <CalendarView state={calState} ariaLabel={labelText ?? "Calendar"} inPopover />
+        <CalendarView state={calState} ariaLabel={labelText ?? ariaLabel ?? "Calendar"} inPopover />
       </DatePopover>
       {descText && <DatePickerDescription id={descId}>{descText}</DatePickerDescription>}
       {derivedInvalid && errorText && <DatePickerError id={errId}>{errorText}</DatePickerError>}
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 6a470be4..168150ce 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -64,21 +64,24 @@ describe("DateField", () => {
     expect(screen.getByText("Date")).toBeDefined();
   });
 
-  it("fires onChange when a segment value changes", async () => {
+  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} />);
 
-    const yearSegment = screen.getByRole("spinbutton", { name: /year/i });
-    await user.click(yearSegment);
+    // 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();
-      },
-      { timeout: 500 },
-    );
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+      const last = onChange.mock.calls.at(-1)?.[0];
+      expect(last?.toString()).toBe("2025-06-15");
+    });
   });
 });
 
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 8bc0233f..7f254f0a 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -137,7 +137,11 @@ const groupClasses = cn(
 interface DateInputGroupProps {
   segments: Segment[];
   cycle: (type: Exclude<Segment["type"], "literal">, delta: number) => void;
-  setDigit: (type: Exclude<Segment["type"], "literal">, digit: number) => { advance: boolean };
+  setDigit: (
+    type: Exclude<Segment["type"], "literal">,
+    digit: number,
+    replace?: boolean,
+  ) => { advance: boolean };
   setDayPeriod: (pm: boolean) => void;
   clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
   isDisabled?: boolean;
@@ -145,6 +149,8 @@ interface DateInputGroupProps {
   isInvalid?: 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;
@@ -161,11 +167,15 @@ export function DateInputGroup({
   isInvalid,
   autoFocus,
   labelId,
+  ariaLabel,
   describedById,
   className,
   trigger,
 }: DateInputGroupProps) {
   const editableRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  // The segment that just gained focus and hasn't received a digit yet. Its
+  // first digit replaces the current value rather than accumulating onto it.
+  const freshSegmentRef = React.useRef<Segment["type"] | null>(null);
 
   React.useEffect(() => {
     if (autoFocus && !isDisabled) editableRefs.current[0]?.focus();
@@ -239,7 +249,9 @@ export function DateInputGroup({
 
     if (/^\d$/.test(e.key)) {
       e.preventDefault();
-      const { advance } = setDigit(type, Number(e.key));
+      const replace = freshSegmentRef.current === type;
+      freshSegmentRef.current = null;
+      const { advance } = setDigit(type, Number(e.key), replace);
       if (advance) focusEditable(editableIndex + 1);
     }
   };
@@ -250,6 +262,7 @@ export function DateInputGroup({
       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}
@@ -295,6 +308,9 @@ export function DateInputGroup({
               aria-valuemax={segment.maxValue}
               aria-valuenow={segment.value}
               aria-valuetext={segment.isPlaceholder ? "Empty" : segment.text}
+              onFocus={() => {
+                freshSegmentRef.current = segment.type;
+              }}
               onKeyDown={(e) => handleKeyDown(e, segment, editableIndex)}
               className={cn(
                 "astw:rounded astw:px-0.5 astw:tabular-nums astw:caret-transparent astw:outline-none",
diff --git a/packages/core/src/components/use-date-field-state.ts b/packages/core/src/components/use-date-field-state.ts
index 237191fc..7f18bed6 100644
--- a/packages/core/src/components/use-date-field-state.ts
+++ b/packages/core/src/components/use-date-field-state.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   CalendarDate,
   CalendarDateTime,
@@ -144,13 +144,16 @@ export function useDateFieldState(options: DateFieldStateOptions) {
     return types;
   }, [granularity, hasTime, is12]);
 
-  // Working fields (uncontrolled) — initialised from value/defaultValue.
+  // 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;
 
-  // For controlled usage, the source of truth is the prop value.
-  const fields = isControlled ? fieldsFromValue(controlledValue) : internalFields;
+  const lastEmitted = useRef<DateValue | null>(controlledValue ?? defaultValue ?? null);
 
   // Anchor for placeholder formatting + sensible increment starting points.
   const anchor = useMemo<CalendarDate | CalendarDateTime | ZonedDateTime>(() => {
@@ -165,8 +168,6 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   // unfilled segments for display formatting.
   const anchorFields = useMemo<Fields>(() => fieldsFromValue(anchor), [anchor]);
 
-  const lastEmitted = useRef<DateValue | null | undefined>(undefined);
-
   // ── Limits ──────────────────────────────────────────────────────────────────
   const getLimits = useCallback(
     (type: EditableSegmentType): { min: number; max: number } => {
@@ -177,7 +178,10 @@ export function useDateFieldState(options: DateFieldStateOptions) {
           return { min: 1, max: 12 };
         case "day": {
           const y = fields.year ?? anchor.year;
-          const m = fields.month ?? anchor.month;
+          const rawM = fields.month ?? anchor.month;
+          // Mid-typing the month can be out of range (e.g. 0); fall back to the
+          // anchor month so the day limit stays computable.
+          const m = rawM >= 1 && rawM <= 12 ? rawM : anchor.month;
           const max = endOfMonth(new CalendarDate(y, m, 1)).day;
           return { min: 1, max };
         }
@@ -197,6 +201,10 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   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;
@@ -220,22 +228,45 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   const commit = useCallback(
-    (next: Fields) => {
-      if (!isControlled) setInternalFields(next);
+    (next: Fields, intent: "edit" | "clear" = "edit") => {
+      setInternalFields(next);
       const composed = composeValue(next);
+      // 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 =
-        prev === undefined ||
-        (composed == null) !== (prev == null) ||
-        (composed != null && prev != null && composed.compare(prev as never) !== 0);
+        (emit == null) !== (prev == null) ||
+        (emit != null && prev != null && emit.compare(prev as never) !== 0);
       if (changed) {
-        lastEmitted.current = composed;
-        onChange?.(composed);
+        lastEmitted.current = emit;
+        onChange?.(emit);
       }
     },
-    [isControlled, composeValue, onChange],
+    [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) => {
@@ -260,10 +291,12 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   const setDigit = useCallback(
-    (type: EditableSegmentType, digit: number): { advance: boolean } => {
+    (type: EditableSegmentType, digit: number, replace = false): { advance: boolean } => {
       if (isReadOnly || type === "dayPeriod") return { advance: false };
       const { min, max } = getLimits(type);
-      const current = fields[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 once the segment can't accept another digit.
@@ -287,7 +320,7 @@ export function useDateFieldState(options: DateFieldStateOptions) {
       if (isReadOnly) return;
       const next = { ...fields };
       delete next[type];
-      commit(next);
+      commit(next, "clear");
     },
     [fields, commit, isReadOnly],
   );
@@ -309,59 +342,40 @@ export function useDateFieldState(options: DateFieldStateOptions) {
       ...(timeZone ? { timeZone } : {}),
     });
 
-    // Build a fully-populated date so the formatter yields every part; unfilled
-    // editable parts get overridden with placeholders below.
-    const display: Fields = { ...fields };
-    for (const t of editableTypes) {
-      if (display[t] == null) display[t] = anchorFields[t] ?? getLimits(t).min;
-    }
-    let displayDate: CalendarDate | CalendarDateTime;
-    if (hasTime) {
-      let h = display.hour ?? 0;
-      if (is12) h = (h % 12) + ((display.dayPeriod ?? 0) === 1 ? 12 : 0);
-      displayDate = new CalendarDateTime(
-        display.year!,
-        display.month!,
-        display.day!,
-        h,
-        display.minute ?? 0,
-        display.second ?? 0,
-      );
-    } else {
-      displayDate = new CalendarDate(display.year!, display.month!, display.day!);
-    }
-
-    const parts = formatter.formatToParts(displayDate.toDate(timeZone ?? "UTC"));
+    // 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 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);
+    };
+
+    const parts = formatter.formatToParts(anchor.toDate(timeZone ?? "UTC"));
     return 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 filled = fields[editable] != null;
+      const current = fields[editable];
+      const filled = current != null;
       const { min, max } = getLimits(editable);
       return {
         type: editable,
-        text: filled ? part.value : PLACEHOLDERS[editable],
+        text: filled ? formatSegment(editable, current) : PLACEHOLDERS[editable],
         isEditable: true,
         isPlaceholder: !filled,
-        value: fields[editable],
+        value: current,
         minValue: min,
         maxValue: max,
         label: SEGMENT_LABELS[editable],
       };
     });
-  }, [
-    locale,
-    hasTime,
-    granularity,
-    is12,
-    timeZone,
-    fields,
-    editableTypes,
-    anchorFields,
-    getLimits,
-  ]);
+  }, [locale, hasTime, granularity, is12, timeZone, fields, editableTypes, anchor, getLimits]);
 
   const fieldValue = composeValue(fields);
 

From 77ea85e03585a7eb1900f7559d20ffd3a4079691 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 11:12:15 +1000
Subject: [PATCH 07/35] fix(date-picker): advance on leading-zero entry + align
 popover to field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Segment auto-advance now also fires when the typed-digit count fills the
  field's width, so typing "02" completes the day and advances — while "2"
  then "9" still builds 29 (a leading zero caps the digit count).
- Anchor the calendar popover to the field group (not the calendar icon) with
  align="start", so its left edge aligns to the field's left edge and Base UI
  collision handling shifts/flips it inward near a viewport edge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/date-picker-standalone.tsx |  5 ++-
 .../core/src/components/date-picker.test.tsx  | 32 ++++++++++++++++
 packages/core/src/components/date-picker.tsx  | 37 ++++++++++++++-----
 .../src/components/use-date-field-state.ts    | 26 +++++++++++--
 4 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/date-picker-standalone.tsx b/packages/core/src/components/date-picker-standalone.tsx
index 38f4e9cb..339dbc7d 100644
--- a/packages/core/src/components/date-picker-standalone.tsx
+++ b/packages/core/src/components/date-picker-standalone.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useId, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import { cn } from "@/lib/utils";
 import { buildLocaleResolver, type LocalizedString } from "@/lib/i18n";
@@ -240,6 +240,7 @@ function DatePicker<T extends DateValue = DateValue>({
   const derivedInvalid = !!errorText || !!isInvalid;
 
   const [open, setOpen] = useState(false);
+  const fieldRef = useRef<HTMLDivElement>(null);
   const [val, setVal] = useControlledState<DateValue | null>(
     value ?? undefined,
     defaultValue ?? null,
@@ -284,6 +285,7 @@ function DatePicker<T extends DateValue = DateValue>({
         open={open}
         onOpenChange={setOpen}
         ariaLabel={popoverAriaLabel}
+        anchor={fieldRef}
         field={
           <DateInputGroup
             segments={fieldState.segments}
@@ -298,6 +300,7 @@ function DatePicker<T extends DateValue = DateValue>({
             labelId={labelText ? labelId : undefined}
             ariaLabel={ariaLabel}
             describedById={describedBy}
+            groupRef={fieldRef}
             trigger={<DatePickerPopoverTrigger disabled={isDisabled} />}
           />
         }
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 168150ce..7134310e 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -83,6 +83,38 @@ describe("DateField", () => {
       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");
+    });
+  });
 });
 
 // ─── DatePicker ───────────────────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 7f254f0a..4fc15ea5 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -141,6 +141,7 @@ interface DateInputGroupProps {
     type: Exclude<Segment["type"], "literal">,
     digit: number,
     replace?: boolean,
+    digitCount?: number,
   ) => { advance: boolean };
   setDayPeriod: (pm: boolean) => void;
   clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
@@ -154,6 +155,8 @@ interface DateInputGroupProps {
   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({
@@ -171,11 +174,13 @@ export function DateInputGroup({
   describedById,
   className,
   trigger,
+  groupRef,
 }: DateInputGroupProps) {
   const editableRefs = React.useRef<(HTMLDivElement | null)[]>([]);
-  // The segment that just gained focus and hasn't received a digit yet. Its
-  // first digit replaces the current value rather than accumulating onto it.
-  const freshSegmentRef = React.useRef<Segment["type"] | null>(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();
@@ -249,9 +254,9 @@ export function DateInputGroup({
 
     if (/^\d$/.test(e.key)) {
       e.preventDefault();
-      const replace = freshSegmentRef.current === type;
-      freshSegmentRef.current = null;
-      const { advance } = setDigit(type, Number(e.key), replace);
+      const count = typedCountRef.current;
+      typedCountRef.current = count + 1;
+      const { advance } = setDigit(type, Number(e.key), count === 0, count + 1);
       if (advance) focusEditable(editableIndex + 1);
     }
   };
@@ -259,6 +264,7 @@ export function DateInputGroup({
   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}
@@ -309,7 +315,7 @@ export function DateInputGroup({
               aria-valuenow={segment.value}
               aria-valuetext={segment.isPlaceholder ? "Empty" : segment.text}
               onFocus={() => {
-                freshSegmentRef.current = segment.type;
+                typedCountRef.current = 0;
               }}
               onKeyDown={(e) => handleKeyDown(e, segment, editableIndex)}
               className={cn(
@@ -571,14 +577,27 @@ interface DatePopoverProps {
   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 }: DatePopoverProps) {
+export function DatePopover({
+  open,
+  onOpenChange,
+  field,
+  children,
+  ariaLabel,
+  anchor,
+}: DatePopoverProps) {
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       {field}
       <Popover.Portal>
-        <Popover.Positioner sideOffset={4} side="bottom" align="start">
+        <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"
diff --git a/packages/core/src/components/use-date-field-state.ts b/packages/core/src/components/use-date-field-state.ts
index 7f18bed6..b6ad270c 100644
--- a/packages/core/src/components/use-date-field-state.ts
+++ b/packages/core/src/components/use-date-field-state.ts
@@ -43,6 +43,19 @@ const TIME_BY_GRANULARITY: Record<Granularity, EditableSegmentType[]> = {
   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 {
@@ -291,7 +304,12 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   const setDigit = useCallback(
-    (type: EditableSegmentType, digit: number, replace = false): { advance: boolean } => {
+    (
+      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
@@ -299,8 +317,10 @@ export function useDateFieldState(options: DateFieldStateOptions) {
       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 once the segment can't accept another digit.
-      const advance = next * 10 > max;
+      // 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 };
     },

From 86213e1c2e110796156536c700d3e38d349554c4 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 14:34:48 +1000
Subject: [PATCH 08/35] feat(data-table): friendlier date filter operators
 (exact date / after / before / between)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Date columns now offer a slimmer, plainer operator set instead of the numeric
comparators:
- eq → "exact date"
- gte → "after"  (inclusive)
- lte → "before" (inclusive)
- between → "between"
- dropped gt, lt, and ne (the inclusive after/before cover the intent)

Scoped to `date` columns only — number/datetime/time keep the full numeric
operator set and labels. Labels added for en + ja; chip labels and both the
add-filter and edit-chip operator selects use them.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../core/src/components/data-table/i18n.ts    |  8 ++++
 .../components/data-table/toolbar.test.tsx    | 45 +++++++++++++++++--
 .../src/components/data-table/toolbar.tsx     | 42 ++++++++++++-----
 3 files changed, 81 insertions(+), 14 deletions(-)

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 725dd7d9..2f488790 100644
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ b/packages/core/src/components/data-table/toolbar.test.tsx
@@ -502,7 +502,7 @@ 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 2025-01-01/ }));
 
     expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
   });
@@ -514,7 +514,7 @@ describe("DateFilterEditor", () => {
     });
     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 2025-01-01/ }));
 
     // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
     expect(
@@ -529,7 +529,7 @@ describe("DateFilterEditor", () => {
     });
     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 2025-01-01/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await typeDateInto(user, 0, "2026-06-15");
@@ -545,7 +545,7 @@ describe("DateFilterEditor", () => {
     });
     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 2025-01-01/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await clearDateIn(user, 0);
@@ -553,6 +553,43 @@ describe("DateFilterEditor", () => {
 
     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 },
+    );
+    expect(screen.getByText(/Created At exact date 2025-01-01/)).toBeDefined();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[1]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At after 2025-02-01/)).toBeDefined();
+    expect(screen.queryByText(/greater than/)).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[2]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At before 2025-03-01/)).toBeDefined();
+  });
 });
 
 // ---------------------------------------------------------------------------
diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index a9ffd3c6..e7541e7b 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -54,6 +54,15 @@ 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;
+}
+
 /** String operators available in the operator selector. */
 const STRING_OPERATORS = ["eq", "ne", "contains", "notContains", "hasPrefix", "hasSuffix"] as const;
 type StringOperator = (typeof STRING_OPERATORS)[number];
@@ -489,7 +498,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"
                 />
@@ -920,8 +929,9 @@ function NumericFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
+  const operatorItems = temporalOperatorsFor(config.type);
   const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
+    operatorItems.includes(filter.operator as NumericTemporalOperator)
       ? (filter.operator as NumericTemporalOperator)
       : "eq",
   );
@@ -985,12 +995,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" ? (
@@ -1036,8 +1046,9 @@ function TemporalFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
+  const operatorItems = temporalOperatorsFor(config.type);
   const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
+    operatorItems.includes(filter.operator as NumericTemporalOperator)
       ? (filter.operator as NumericTemporalOperator)
       : "eq",
   );
@@ -1151,12 +1162,12 @@ function TemporalFilterEditor({
       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"
       />
       {valueInput}
@@ -1175,9 +1186,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":
@@ -1311,7 +1323,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");
@@ -1397,7 +1419,7 @@ function getChipDisplayLabel(
   const valueLabel = formatFilterValue(filter, config, t);
   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") {

From dc0f4bb5b706aa2dbef941340e4e6495ca09d2be Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 15:04:28 +1000
Subject: [PATCH 09/35] feat(data-table): locale-format the date value in
 filter chips

Date filter chips now render the value as a locale-appropriate medium date
(e.g. "15 Jun 2026" / "Jun 15, 2026") via @internationalized/date's
DateFormatter with the resolved AppShell locale, instead of the raw ISO
"2026-06-15". Formatted in UTC so the calendar date never shifts across zones.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/data-table/toolbar.test.tsx    | 22 ++++++-----
 .../src/components/data-table/toolbar.tsx     | 39 +++++++++++++++++--
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
index 2f488790..c789627a 100644
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ b/packages/core/src/components/data-table/toolbar.test.tsx
@@ -502,7 +502,7 @@ describe("DateFilterEditor", () => {
       wrapper,
     });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
 
     expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
   });
@@ -514,7 +514,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
 
     // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
     expect(
@@ -529,7 +529,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await typeDateInto(user, 0, "2026-06-15");
@@ -545,7 +545,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await clearDateIn(user, 0);
@@ -571,7 +571,9 @@ describe("DateFilterEditor", () => {
       />,
       { wrapper },
     );
-    expect(screen.getByText(/Created At exact date 2025-01-01/)).toBeDefined();
+    // 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
@@ -579,7 +581,7 @@ describe("DateFilterEditor", () => {
         columns={[dateColumn]}
       />,
     );
-    expect(screen.getByText(/Created At after 2025-02-01/)).toBeDefined();
+    expect(screen.getByText(/Created At after Feb 1, 2025/)).toBeDefined();
     expect(screen.queryByText(/greater than/)).toBeNull();
 
     rerender(
@@ -588,7 +590,7 @@ describe("DateFilterEditor", () => {
         columns={[dateColumn]}
       />,
     );
-    expect(screen.getByText(/Created At before 2025-03-01/)).toBeDefined();
+    expect(screen.getByText(/Created At before Mar 1, 2025/)).toBeDefined();
   });
 });
 
@@ -897,7 +899,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
 
@@ -920,7 +922,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     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" });
@@ -950,7 +952,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     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" });
diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index e7541e7b..1c547d86 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -8,7 +8,8 @@ import { Button } from "@/components/button";
 import { Input } from "@/components/input";
 import { Select } from "@/components/select-standalone";
 import { DatePicker } from "@/components/date-picker-standalone";
-import { parseDate } from "@internationalized/date";
+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";
@@ -548,6 +549,7 @@ function FilterChip({
   control: CollectionControl;
 }) {
   const t = useDataTableT();
+  const { locale } = useResolvedLocale();
   const config = column.filter;
   const label = column.label ?? config.field;
 
@@ -565,7 +567,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">
@@ -1370,10 +1372,28 @@ function getOperatorLabel(
   }
 }
 
+/** 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
@@ -1394,6 +1414,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 "";
@@ -1415,8 +1447,9 @@ 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, config.type);

From 5b1b7a1adbb21fe96b9073b62ea13ed45bd6b3b5 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 16:07:25 +1000
Subject: [PATCH 10/35] refactor(date-picker): idiomatic Tailwind focus ring +
 snapshot tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Align with the add-component skill:
- Replace the inline JS focus-ring handlers (el.style.outline / chromeFocusProps)
  with the same `ring` utility Button/inputs use — focus-visible:ring on the nav
  buttons + trigger, and :focus:ring (with relative/z-10 so it sits above
  adjacent cells) on calendar day cells. No more CSS-in-JS.
- Add structural snapshot tests for DateField, DatePicker (closed), and
  Calendar, per the skill's testing convention.

The earlier "no visible focus" was a wrong-attribute bug (data-[focus-visible],
a react-aria attr our cells never emit), not a failure of `ring`; the compiled
utilities are present in dist and identical to Button's.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ...src__components__date-picker.test.tsx.snap |  9 +++
 .../core/src/components/date-picker.test.tsx  | 38 +++++++++++--
 packages/core/src/components/date-picker.tsx  | 55 +++----------------
 3 files changed, 50 insertions(+), 52 deletions(-)
 create mode 100644 packages/core/__snapshots__/src__components__date-picker.test.tsx.snap

diff --git a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
new file mode 100644
index 00000000..db4e95af
--- /dev/null
+++ b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
@@ -0,0 +1,9 @@
+// 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_b_" 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>"`;
+
+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:min-w-0 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: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="30" 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:min-w-0 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: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="30" 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:min-w-0 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: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="30" 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/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 7134310e..0624f156 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -26,6 +26,36 @@ function getEnabledCalendarCells() {
   );
 }
 
+// ─── 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();
+  });
+
+  it("Calendar — pre-selected", () => {
+    const { container } = render(
+      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
+    );
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+});
+
 // ─── DateField ─────────────────────────────────────────────────────────────────
 
 describe("DateField", () => {
@@ -254,15 +284,13 @@ describe("Calendar", () => {
     expect(tabbable[0].textContent).toBe("15");
   });
 
-  it("shows a focus ring (inline outline) when a day cell is focused", () => {
+  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")!;
-    cell.focus();
-    expect(cell.style.outline).toContain("var(--ring)");
-    cell.blur();
-    expect(cell.style.outline).toBe("");
+    // 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 () => {
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 4fc15ea5..256590ae 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -30,9 +30,10 @@ const calendarCellVariants = cva(
           // 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",
-          // Focus ring is defined unlayered in globals.css (see the date-component
-          // focus block) so it reliably beats the global `* { outline-color }`
-          // base rule. Roving focus moves programmatically during keyboard nav.
+          // 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",
@@ -49,45 +50,15 @@ const calendarCellVariants = cva(
   },
 );
 
+// 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",
 );
 
-// Focus ring applied via focus/blur events rather than a CSS `:focus` rule.
-// Rationale: the global `* { outline-color }` base style + Tailwind's @layer
-// ordering make a plain `:focus` outline unreliable to override, and roving
-// focus moves programmatically. Setting the outline inline on the focus event
-// is bulletproof across the cascade.
-const RING_OUTLINE = "2px solid var(--ring)";
-
-function showFocusRing(el: HTMLElement, offset: string) {
-  el.style.outline = RING_OUTLINE;
-  el.style.outlineOffset = offset;
-}
-function hideFocusRing(el: HTMLElement) {
-  el.style.outline = "";
-  el.style.outlineOffset = "";
-}
-/** Chrome buttons (nav, trigger): only show on keyboard focus, not mouse. */
-function chromeFocusProps(offset = "2px") {
-  return {
-    onFocus: (e: React.FocusEvent<HTMLElement>) => {
-      // Skip the focus-visible heuristic when unsupported (older engines).
-      let visible = true;
-      try {
-        visible = e.currentTarget.matches(":focus-visible");
-      } catch {
-        visible = true;
-      }
-      if (visible) showFocusRing(e.currentTarget, offset);
-    },
-    onBlur: (e: React.FocusEvent<HTMLElement>) => hideFocusRing(e.currentTarget),
-  };
-}
-
 // ─── Field labels / description / error ───────────────────────────────────────
 
 // A composite spinbutton group can't be labelled by a native <label htmlFor>,
@@ -338,6 +309,7 @@ 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",
 );
 
@@ -354,7 +326,6 @@ export function DatePickerPopoverTrigger({
       data-slot="date-picker-button"
       aria-label="Open calendar"
       className={cn(triggerClasses, className)}
-      {...chromeFocusProps()}
       {...props}
     >
       <CalendarIcon className="astw:size-4" />
@@ -445,7 +416,6 @@ export function CalendarView({
           disabled={state.prevDisabled}
           onClick={state.previousMonth}
           className={navButtonClasses}
-          {...chromeFocusProps()}
         >
           <ChevronLeftIcon className="astw:size-4" />
         </button>
@@ -464,7 +434,6 @@ export function CalendarView({
           disabled={state.nextDisabled}
           onClick={state.nextMonth}
           className={navButtonClasses}
-          {...chromeFocusProps()}
         >
           <ChevronRightIcon className="astw:size-4" />
         </button>
@@ -549,15 +518,7 @@ function CalendarCell({
         data-today={day.isToday || undefined}
         onClick={interactive ? onSelect : undefined}
         onKeyDown={interactive ? onKeyDown : undefined}
-        onFocus={(e) => {
-          onFocus();
-          e.currentTarget.style.zIndex = "10";
-          showFocusRing(e.currentTarget, "-2px");
-        }}
-        onBlur={(e) => {
-          e.currentTarget.style.zIndex = "";
-          hideFocusRing(e.currentTarget);
-        }}
+        onFocus={onFocus}
         className={calendarCellVariants()}
       >
         {day.date.day}

From 8a1adb0f369584b57988ed6df06bdb8355b572dd Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 16:15:51 +1000
Subject: [PATCH 11/35] docs: document DatePicker-backed date filters +
 aria-label prop

- data-table.md: date filters use the DatePicker input and the friendlier
  operator set (exact date / after / before / between); note locale-formatted
  chips and that datetime/time are unchanged.
- date-picker.md: add the `aria-label` prop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/components/data-table.md  | 15 ++++++++++++++-
 docs/components/date-picker.md | 35 +++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/docs/components/data-table.md b/docs/components/data-table.md
index ff1c9dd3..38f006ff 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
index 2fdf6636..b812dcf8 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -112,23 +112,24 @@ Segment order, first-day-of-week, month/weekday names, and 12/24-hour display al
 
 ### DateFieldProps
 
-| Prop                                                     | Type                                      | Description                             |
-| -------------------------------------------------------- | ----------------------------------------- | --------------------------------------- |
-| `label`                                                  | `LocalizedString`                         | Field label                             |
-| `description`                                            | `LocalizedString`                         | Helper text                             |
-| `errorMessage`                                           | `LocalizedString`                         | Error text; also sets the invalid state |
-| `value` / `defaultValue`                                 | `DateValue \| null`                       | Controlled / uncontrolled value         |
-| `onChange`                                               | `(v: DateValue \| null) => void`          | Called on change; `null` when cleared   |
-| `granularity`                                            | `"day" \| "hour" \| "minute" \| "second"` | Drives the value type                   |
-| `minValue` / `maxValue`                                  | `DateValue`                               | Bounds                                  |
-| `isDateUnavailable`                                      | `(date: DateValue) => boolean`            | Mark dates unavailable                  |
-| `isDisabled` / `isReadOnly` / `isRequired` / `isInvalid` | `boolean`                                 | State flags                             |
-| `hourCycle`                                              | `12 \| 24`                                | Override AM/PM vs 24-hour               |
-| `placeholderValue`                                       | `DateValue`                               | Seeds unset segments                    |
-| `autoFocus`                                              | `boolean`                                 | Focus first segment on mount            |
-| `locale`                                                 | `string`                                  | BCP-47 locale override                  |
-| `name`                                                   | `string`                                  | Hidden input for form submission        |
-| `className`                                              | `string`                                  | Root element class                      |
+| Prop                                                     | Type                                      | Description                                                          |
+| -------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------------- |
+| `label`                                                  | `LocalizedString`                         | Field label                                                          |
+| `description`                                            | `LocalizedString`                         | Helper text                                                          |
+| `errorMessage`                                           | `LocalizedString`                         | Error text; also sets the invalid state                              |
+| `value` / `defaultValue`                                 | `DateValue \| null`                       | Controlled / uncontrolled value                                      |
+| `onChange`                                               | `(v: DateValue \| null) => void`          | Called on change; `null` when cleared                                |
+| `granularity`                                            | `"day" \| "hour" \| "minute" \| "second"` | Drives the value type                                                |
+| `minValue` / `maxValue`                                  | `DateValue`                               | Bounds                                                               |
+| `isDateUnavailable`                                      | `(date: DateValue) => boolean`            | Mark dates unavailable                                               |
+| `isDisabled` / `isReadOnly` / `isRequired` / `isInvalid` | `boolean`                                 | State flags                                                          |
+| `hourCycle`                                              | `12 \| 24`                                | Override AM/PM vs 24-hour                                            |
+| `placeholderValue`                                       | `DateValue`                               | Seeds unset segments                                                 |
+| `autoFocus`                                              | `boolean`                                 | Focus first segment on mount                                         |
+| `locale`                                                 | `string`                                  | BCP-47 locale override                                               |
+| `name`                                                   | `string`                                  | Hidden input for form submission                                     |
+| `aria-label`                                             | `string`                                  | Accessible name when no visible `label` (e.g. compact filter inputs) |
+| `className`                                              | `string`                                  | Root element class                                                   |
 
 ### DatePickerProps
 

From 57c816ce8dadd2b235ffae588dcf25240aaf2c34 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 24 Jun 2026 16:32:15 +1000
Subject: [PATCH 12/35] fix(example): make Invoice a type so it satisfies the
 DataTable row constraint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The vite-app type-check (run by CI, not by esbuild) failed: an `interface`
doesn't satisfy `Record<string, unknown>` — createColumnHelper / useDataTable's
row constraint — because interfaces lack the implicit index signature that
object-literal `type` aliases have. Switch `interface Invoice` to `type`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 examples/vite-app/src/pages/data-table/page.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/examples/vite-app/src/pages/data-table/page.tsx b/examples/vite-app/src/pages/data-table/page.tsx
index 60efd625..1febf870 100644
--- a/examples/vite-app/src/pages/data-table/page.tsx
+++ b/examples/vite-app/src/pages/data-table/page.tsx
@@ -17,14 +17,17 @@ import { Table2 } from "lucide-react";
 
 type InvoiceStatus = "draft" | "sent" | "paid" | "overdue";
 
-interface Invoice {
+// 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",

From b44fe85469b48a0bdada11de5b2a06cf725bab99 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 25 Jun 2026 08:57:51 +1000
Subject: [PATCH 13/35] fix(date-picker): allow day 31 before a month, clamp
 impossible dates on blur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related date-validity fixes:

- Day segment max is 31 until a valid month is entered (was tied to the anchor
  month, so "31" collapsed to "1" in a 30-day current month — and the snapshot
  was month-dependent). Snapshots updated to the now-stable max.
- On blur, an impossible day for the entered month/year is clamped to that
  month's real length (e.g. 30/02/2026 → 28; 31/04 → 30). Leap years resolve
  correctly since the year is complete by blur — 29/02/2024 is kept, 29/02/2026
  becomes 28. composeValue still never emits an invalid CalendarDate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ...src__components__date-picker.test.tsx.snap |  6 +-
 .../src/components/date-picker-standalone.tsx |  2 +
 .../core/src/components/date-picker.test.tsx  | 67 +++++++++++++++++++
 packages/core/src/components/date-picker.tsx  |  8 +++
 .../src/components/use-date-field-state.ts    | 30 +++++++--
 5 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
index db4e95af..fbd728a1 100644
--- a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
+++ b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
@@ -2,8 +2,8 @@
 
 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_b_" 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>"`;
 
-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:min-w-0 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: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="30" 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 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:min-w-0 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: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:min-w-0 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: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="30" 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 > 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:min-w-0 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: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:min-w-0 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: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="30" 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>"`;
+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:min-w-0 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: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/src/components/date-picker-standalone.tsx b/packages/core/src/components/date-picker-standalone.tsx
index 339dbc7d..a69a908f 100644
--- a/packages/core/src/components/date-picker-standalone.tsx
+++ b/packages/core/src/components/date-picker-standalone.tsx
@@ -168,6 +168,7 @@ function DateField<T extends DateValue = DateValue>({
         setDigit={state.setDigit}
         setDayPeriod={state.setDayPeriod}
         clearSegment={state.clearSegment}
+        clampDate={state.clampDate}
         isDisabled={isDisabled}
         isReadOnly={isReadOnly}
         isInvalid={derivedInvalid}
@@ -293,6 +294,7 @@ function DatePicker<T extends DateValue = DateValue>({
             setDigit={fieldState.setDigit}
             setDayPeriod={fieldState.setDayPeriod}
             clearSegment={fieldState.clearSegment}
+            clampDate={fieldState.clampDate}
             isDisabled={isDisabled}
             isReadOnly={isReadOnly}
             isInvalid={derivedInvalid}
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 0624f156..c7ae9498 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -145,6 +145,73 @@ describe("DateField", () => {
       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");
+    });
+  });
 });
 
 // ─── DatePicker ───────────────────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 256590ae..1a96a666 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -116,6 +116,8 @@ interface DateInputGroupProps {
   ) => { advance: boolean };
   setDayPeriod: (pm: boolean) => void;
   clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
+  /** Correct an impossible day (e.g. 30 Feb) — called when focus leaves the group. */
+  clampDate: () => void;
   isDisabled?: boolean;
   isReadOnly?: boolean;
   isInvalid?: boolean;
@@ -136,6 +138,7 @@ export function DateInputGroup({
   setDigit,
   setDayPeriod,
   clearSegment,
+  clampDate,
   isDisabled,
   isReadOnly,
   isInvalid,
@@ -245,6 +248,11 @@ export function DateInputGroup({
       data-disabled={isDisabled || undefined}
       data-invalid={isInvalid || undefined}
       className={cn(groupClasses, className)}
+      onBlur={(e) => {
+        // Focus left the whole group (not just moved between segments) → correct
+        // an impossible day for the entered month/year.
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) clampDate();
+      }}
     >
       <div data-slot="date-input" className="astw:flex astw:flex-1 astw:items-center astw:gap-px">
         {segments.map((segment, idx) => {
diff --git a/packages/core/src/components/use-date-field-state.ts b/packages/core/src/components/use-date-field-state.ts
index b6ad270c..287b9de7 100644
--- a/packages/core/src/components/use-date-field-state.ts
+++ b/packages/core/src/components/use-date-field-state.ts
@@ -190,12 +190,15 @@ export function useDateFieldState(options: DateFieldStateOptions) {
         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 rawM = fields.month ?? anchor.month;
-          // Mid-typing the month can be out of range (e.g. 0); fall back to the
-          // anchor month so the day limit stays computable.
-          const m = rawM >= 1 && rawM <= 12 ? rawM : anchor.month;
-          const max = endOfMonth(new CalendarDate(y, m, 1)).day;
+          const max = endOfMonth(new CalendarDate(y, fields.month, 1)).day;
           return { min: 1, max };
         }
         case "hour":
@@ -345,6 +348,22 @@ export function useDateFieldState(options: DateFieldStateOptions) {
     [fields, commit, isReadOnly],
   );
 
+  /**
+   * Correct an impossible day for the entered month/year (e.g. typing the day
+   * before the month leaves "30/02"). Called on blur — by then the year is
+   * usually complete, so leap years resolve correctly (29 Feb is kept in 2024,
+   * clamped to 28 in 2026). When the year is still empty we use a leap year so a
+   * valid 29 survives until the year is typed.
+   */
+  const clampDate = useCallback(() => {
+    if (isReadOnly) return;
+    const { day, month } = fields;
+    if (day == null || month == null || month < 1 || month > 12) return;
+    const yearForMax = fields.year ?? 2000; // 2000 is a leap year
+    const maxDay = endOfMonth(new CalendarDate(yearForMax, month, 1)).day;
+    if (day > maxDay) commit({ ...fields, day: maxDay });
+  }, [fields, isReadOnly, commit]);
+
   // ── Display segments (locale-ordered) ────────────────────────────────────────
   const segments = useMemo<Segment[]>(() => {
     const formatter = new DateFormatter(locale, {
@@ -406,5 +425,6 @@ export function useDateFieldState(options: DateFieldStateOptions) {
     setDigit,
     setDayPeriod,
     clearSegment,
+    clampDate,
   };
 }

From 1f2b11bbcc35d86aff835048cf89ae43c6767e75 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 25 Jun 2026 10:30:46 +1000
Subject: [PATCH 14/35] fix(date-picker): let keyboard focus traverse
 disabled/unavailable days
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Roving focus could land on a disabled or unavailable calendar day, but the
arrow-key handler was only attached to selectable cells — so once focus
reached such a day there was no way to navigate off it.

Per APG, arrow keys traverse *through* disabled dates; they just can't be
selected. Attach onKeyDown to every in-month cell (gated on `focusable`,
not `interactive`) while keeping click + Enter/Space selection gated on
`interactive`. selectDate already rejects out-of-range/unavailable dates.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../core/src/components/date-picker.test.tsx  | 38 ++++++++++++++++++-
 packages/core/src/components/date-picker.tsx  |  8 +++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index c7ae9498..50f09eee 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -1,7 +1,13 @@
 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 {
+  CalendarDate,
+  parseDate,
+  today,
+  getLocalTimeZone,
+  isSameDay,
+} from "@internationalized/date";
 import { DateField, DatePicker, Calendar } from "./date-picker-standalone";
 
 // This suite is the parity contract shared with the react-aria implementation:
@@ -391,6 +397,36 @@ describe("Calendar", () => {
       "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");
+  });
 });
 
 // ─── Keyboard: popover focus ─────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 1a96a666..5c9c59ac 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -509,7 +509,13 @@ function CalendarCell({
   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">
@@ -525,7 +531,7 @@ function CalendarCell({
         data-outside-month={day.isOutsideMonth || undefined}
         data-today={day.isToday || undefined}
         onClick={interactive ? onSelect : undefined}
-        onKeyDown={interactive ? onKeyDown : undefined}
+        onKeyDown={focusable ? onKeyDown : undefined}
         onFocus={onFocus}
         className={calendarCellVariants()}
       >

From a375999e0bfe32f8d9c55348a39401bf4e6734fa Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 25 Jun 2026 12:42:49 +1000
Subject: [PATCH 15/35] fix(date-picker): self-correct impossible day on date
 completion, not just blur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An impossible day (e.g. 29 Feb in a non-leap year) could persist when the
field was left in ways that didn't fire the group's blur clamp — including
editing a previously-valid leap date's year (29/02/2024 → 2026).

Clamp the day to the month's real length inside `commit`, the moment the date
is fully specified (a 4-digit year). Partial years are left untouched so the
day isn't shrunk mid-typing before the final year's leap-ness is known. The
on-blur `clampDate` remains the backstop for the year-still-empty case.

This makes the correction blur-independent: typing 29/02/2026 self-corrects
to 28 as soon as the year lands, and re-typing the year of a valid leap date
re-validates immediately.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../core/src/components/date-picker.test.tsx  | 107 ++++++++++++++++++
 .../src/components/use-date-field-state.ts    |  34 ++++--
 2 files changed, 134 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 50f09eee..812420d6 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -1,3 +1,4 @@
+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";
@@ -218,6 +219,112 @@ describe("DateField", () => {
       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");
+    });
+  });
 });
 
 // ─── DatePicker ───────────────────────────────────────────────────────────────
diff --git a/packages/core/src/components/use-date-field-state.ts b/packages/core/src/components/use-date-field-state.ts
index 287b9de7..45b51b8b 100644
--- a/packages/core/src/components/use-date-field-state.ts
+++ b/packages/core/src/components/use-date-field-state.ts
@@ -105,6 +105,22 @@ const PLACEHOLDERS: Record<EditableSegmentType, string> = {
   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
+ * `clampDate` 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 = {};
@@ -245,8 +261,12 @@ export function useDateFieldState(options: DateFieldStateOptions) {
 
   const commit = useCallback(
     (next: Fields, intent: "edit" | "clear" = "edit") => {
-      setInternalFields(next);
-      const composed = composeValue(next);
+      // 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`.
@@ -349,11 +369,11 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   /**
-   * Correct an impossible day for the entered month/year (e.g. typing the day
-   * before the month leaves "30/02"). Called on blur — by then the year is
-   * usually complete, so leap years resolve correctly (29 Feb is kept in 2024,
-   * clamped to 28 in 2026). When the year is still empty we use a leap year so a
-   * valid 29 survives until the year is typed.
+   * On-blur backstop for an impossible day. A *complete* date already self-
+   * corrects in `commit` (see {@link clampCompleteDay}), so this only matters
+   * when the field is left with the year still empty (e.g. "30/02" typed day-
+   * first): we clamp against a leap year so a valid 29 Feb survives until the
+   * year is typed, while an impossible 30/31 is still corrected.
    */
   const clampDate = useCallback(() => {
     if (isReadOnly) return;

From 8f125b48fac03901d765f0964cadea43b667f46a Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 15:54:23 +1000
Subject: [PATCH 16/35] docs(example): demonstrate DatePicker validation in a
 Form

Add an "In a form (submit validation)" section to the date-picker demo page:
a standard Form + submit Button, with the DatePicker's required/past-date
checks run on submit. The DatePicker isn't a Base UI Field control, so the
error is surfaced through its own errorMessage/isInvalid props and clears as
soon as a valid date is picked.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../vite-app/src/pages/date-picker/page.tsx   | 63 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/examples/vite-app/src/pages/date-picker/page.tsx b/examples/vite-app/src/pages/date-picker/page.tsx
index 276e19bc..ad0fc845 100644
--- a/examples/vite-app/src/pages/date-picker/page.tsx
+++ b/examples/vite-app/src/pages/date-picker/page.tsx
@@ -1,9 +1,11 @@
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 import {
   Layout,
   DateField,
   DatePicker,
   Calendar,
+  Form,
+  Button,
   today,
   getLocalTimeZone,
   parseDate,
@@ -21,9 +23,32 @@ const DatePickerPage = () => {
   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" />
@@ -109,6 +134,42 @@ const DatePickerPage = () => {
             )}
           </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>

From b63134c99ffb613bea229239552d3e88b8bf5e47 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:05:30 +1000
Subject: [PATCH 17/35] fix(date-picker): don't scroll the page when opening
 the calendar popover

Opening the popover moves focus into the grid (and roving nav moves it between
cells). Those programmatic `.focus()` calls let the browser scroll the focused
cell into view, jumping the page even when the field was already visible.

Pass `{ preventScroll: true }` to every programmatic focus in the calendar
(popover-open auto-focus, roving-focus effect, Tab containment).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/src/components/date-picker.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 5c9c59ac..e4063392 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -377,7 +377,10 @@ export function CalendarView({
   React.useEffect(() => {
     if (!state.moveFocusRef.current) return;
     state.moveFocusRef.current = false;
-    cellRefs.current.get(state.focusedDate.toString())?.focus();
+    // 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
@@ -385,7 +388,8 @@ export function CalendarView({
   React.useEffect(() => {
     if (!inPopover) return;
     state.isFocusedRef.current = true;
-    cellRefs.current.get(state.focusedDate.toString())?.focus();
+    // preventScroll — see the roving-focus effect above.
+    cellRefs.current.get(state.focusedDate.toString())?.focus({ preventScroll: true });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -406,7 +410,7 @@ export function CalendarView({
     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();
+    next.focus({ preventScroll: true });
   };
 
   return (

From e0ac87727b45a53a3b9c73d895050b8101540f96 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:05:30 +1000
Subject: [PATCH 18/35] docs(example): clarify locale-dependent week start in
 date-picker demo

The "Week starts Sunday (default)" label was misleading: omitting
`firstDayOfWeek` follows the active locale (Sunday for en-US, Monday for
en-GB), so on a Monday-first locale it never showed Sunday. Replace with
explicit "Forced Sunday" / "Forced Monday" examples plus a "Locale default"
one, and a note explaining the behaviour.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 examples/vite-app/src/pages/date-picker/page.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/examples/vite-app/src/pages/date-picker/page.tsx b/examples/vite-app/src/pages/date-picker/page.tsx
index ad0fc845..910981c2 100644
--- a/examples/vite-app/src/pages/date-picker/page.tsx
+++ b/examples/vite-app/src/pages/date-picker/page.tsx
@@ -173,9 +173,15 @@ const DatePickerPage = () => {
           {/* ── 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="Week starts Sunday (default)" />
-              <DatePicker label="Week starts Monday" firstDayOfWeek="mon" />
+              <DatePicker label="Forced Sunday" firstDayOfWeek="sun" />
+              <DatePicker label="Forced Monday" firstDayOfWeek="mon" />
+              <DatePicker label="Locale default" />
             </div>
           </section>
 

From 36863ae2964e1629c33c20031051578aff4fcff0 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:17:41 +1000
Subject: [PATCH 19/35] fix(date-picker): give the field a default min-width so
 it can't collapse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The group inherits `w-full min-w-0` from the shared input classes, so in a
narrow or flex container it could shrink to nothing. Floor it at 142px —
enough for "dd / mm / yyyy" + the trigger icon plus padding. Content can still
exceed it, so wider locales (e.g. ja-JP) grow past the floor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src__components__date-picker.test.tsx.snap              | 6 +++---
 packages/core/src/components/date-picker.tsx                | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
index fbd728a1..dafddb1b 100644
--- a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
+++ b/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
@@ -2,8 +2,8 @@
 
 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_b_" 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>"`;
 
-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:min-w-0 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: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 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:min-w-0 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: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 > 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:min-w-0 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: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>"`;
+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/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index e4063392..389f636e 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -99,7 +99,10 @@ export function DatePickerError({ className, ...props }: React.ComponentProps<"p
 
 const groupClasses = cn(
   inputBaseClasses,
-  "astw:flex astw:h-9 astw:items-center astw:gap-0 astw:py-0",
+  // 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",

From b8c30622814360aecdf310bffb6b9a66d59288cd Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:53:50 +1000
Subject: [PATCH 20/35] fix(data-table): preserve legacy date-filter operators
 instead of coercing to eq
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Date columns narrowed their operator set to eq/gte/lte/between (dropping
gt/lt/ne). But a saved view or `useCollectionVariables` config can still hold a
date filter on a dropped operator — the chip rendered fine, yet opening the
editor preselected `eq` and omitted the original operator, so hitting Apply
silently rewrote the filter's semantics (e.g. "after X" → "on X").

`resolveTemporalOperator` now keeps an incoming operator that's outside the
standard set as a selectable, preselected option (for that one filter), so
opening + re-applying never changes it. Applies to both the temporal and
numeric editors; truly unknown operators still fall back to eq.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/data-table/toolbar.test.tsx    | 20 +++++++++
 .../src/components/data-table/toolbar.tsx     | 45 ++++++++++++++-----
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
index c789627a..bf251f1e 100644
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ b/packages/core/src/components/data-table/toolbar.test.tsx
@@ -592,6 +592,26 @@ describe("DateFilterEditor", () => {
     );
     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());
+  });
 });
 
 // ---------------------------------------------------------------------------
diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index 1c547d86..175e4076 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -64,6 +64,33 @@ function temporalOperatorsFor(type: FilterConfig["type"]): readonly NumericTempo
   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];
@@ -931,12 +958,11 @@ function NumericFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
-  const operatorItems = temporalOperatorsFor(config.type);
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    operatorItems.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 };
@@ -1048,12 +1074,11 @@ function TemporalFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
-  const operatorItems = temporalOperatorsFor(config.type);
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    operatorItems.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 };

From da0ac67d465a14af142d503aaa848a773199574f Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:53:51 +1000
Subject: [PATCH 21/35] docs(date-picker): reconcile proposal with shipped
 variant; document mobile gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The proposal still recorded react-aria-components as the v1 decision while this
PR ships the §9 Base UI + @internationalized/date variant — a self-contradiction.
Add a dated Revision note: the foundation swap is proposed for v1 and *pending
sign-off*, with the original 2026-06-17 decision kept verbatim for the record.

Also surface the mobile/touch-typing limitation (spinbutton segments, no hidden
numeric input) and the not-yet-SR-audited caveat in the component docs and the
changeset — previously only in the comparison proposal.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .changeset/date-picker.md      |  2 ++
 docs/components/date-picker.md |  2 ++
 docs/proposals/date-picker.md  | 11 ++++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/.changeset/date-picker.md b/.changeset/date-picker.md
index b8b5f642..f3c6bfbe 100644
--- a/.changeset/date-picker.md
+++ b/.changeset/date-picker.md
@@ -20,3 +20,5 @@ New AppShell context hooks:
 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 with no hidden numeric `<input>`, 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/date-picker.md b/docs/components/date-picker.md
index b812dcf8..077f0cf6 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -108,6 +108,8 @@ Segment order, first-day-of-week, month/weekday names, and 12/24-hour display al
 - 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">` with **no hidden numeric `<input>`**, so on-screen-keyboard typing on touch devices is limited — 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
 
 ### DateFieldProps
diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index 9a8a2911..d7fa346c 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -1,8 +1,17 @@
 # Proposal: DatePicker / DateField (and future DateRangePicker)
 
-> Status: **Draft for review — decided: `react-aria-components` for v1; lighter foundation tracked as a future possibility (§9)**
+> Status: **v1 implemented on the lighter §9 foundation (`@internationalized/date` + Base UI). This reverses the original `react-aria-components` decision below and is _pending sign-off_ — 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 reconsidered)
+
+The v1 foundation decision recorded below (`react-aria-components`, 2026-06-17) has been **revisited**, and the shipped implementation 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)).
+
+- **Proposed for v1 — pending sign-off.** Adopting this in place of `react-aria-components` reverses the recorded decision; that swap needs explicit approval before merge. This note records the change of direction, not a finalised re-decision.
+- **Trade-off (accepted only if signed off):** we own ~670 LOC of APG behaviour instead of Adobe-audited primitives. Documented gaps: **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**.
+
+Everything below is the **original 2026-06-17 decision and analysis**, kept verbatim for the record.
+
 ## 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)**.

From 65336cd7a7a7450b438245a9cd7b00cf0f2e2494 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 16:57:07 +1000
Subject: [PATCH 22/35] docs(date-picker): record the Base UI foundation as the
 approved v1 decision
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Foundation swap approved 2026-06-26. Update the proposal's Status and Revision
note from "pending sign-off" to a finalised decision: v1 builds on the §9
@internationalized/date + Base UI variant, superseding the original 2026-06-17
react-aria-components decision (kept verbatim below for the record).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index d7fa346c..2c45b8e9 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -1,16 +1,16 @@
 # Proposal: DatePicker / DateField (and future DateRangePicker)
 
-> Status: **v1 implemented on the lighter §9 foundation (`@internationalized/date` + Base UI). This reverses the original `react-aria-components` decision below and is _pending sign-off_ — see the Revision note.**
+> 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 reconsidered)
+## Revision — 2026-06-26 (foundation swap approved)
 
-The v1 foundation decision recorded below (`react-aria-components`, 2026-06-17) has been **revisited**, and the shipped implementation 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 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**.
 
-- **Proposed for v1 — pending sign-off.** Adopting this in place of `react-aria-components` reverses the recorded decision; that swap needs explicit approval before merge. This note records the change of direction, not a finalised re-decision.
-- **Trade-off (accepted only if signed off):** we own ~670 LOC of APG behaviour instead of Adobe-audited primitives. Documented gaps: **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**.
+- **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**.
 
-Everything below is the **original 2026-06-17 decision and analysis**, kept verbatim for the record.
+Everything below is the **original 2026-06-17 decision and analysis**, kept verbatim for the record (now superseded by this note).
 
 ## 1. Summary & decision
 

From 16a4934f4ec75713762df540d8c6982684a82d1e Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 17:14:55 +1000
Subject: [PATCH 23/35] docs(date-picker): correct mobile-typing mechanism
 (contentEditable, not a hidden input)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The comparison doc claimed react-aria enables mobile typing via a hidden
`<input inputmode="numeric">`. That's wrong: react-aria's segments are
`contentEditable` spans with `inputmode="numeric"` — the soft keyboard surfaces
because the focused element is editable. Ours are non-editable spinbutton divs
driven by keydown (which soft keyboards don't emit), hence no touch typing.

Correct the comparison, component doc, and changeset, and note the gap is
addressable by matching react-aria's contentEditable + beforeinput approach.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .changeset/date-picker.md                     | 2 +-
 docs/components/date-picker.md                | 2 +-
 docs/proposals/date-picker-impl-comparison.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/date-picker.md b/.changeset/date-picker.md
index f3c6bfbe..f6c990ea 100644
--- a/.changeset/date-picker.md
+++ b/.changeset/date-picker.md
@@ -21,4 +21,4 @@ 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 with no hidden numeric `<input>`, 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.
+> **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/date-picker.md b/docs/components/date-picker.md
index 077f0cf6..88f6f9b9 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -108,7 +108,7 @@ Segment order, first-day-of-week, month/weekday names, and 12/24-hour display al
 - 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">` with **no hidden numeric `<input>`**, so on-screen-keyboard typing on touch devices is limited — 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.
+> **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
 
diff --git a/docs/proposals/date-picker-impl-comparison.md b/docs/proposals/date-picker-impl-comparison.md
index fc238aea..4e2e89f5 100644
--- a/docs/proposals/date-picker-impl-comparison.md
+++ b/docs/proposals/date-picker-impl-comparison.md
@@ -51,7 +51,7 @@ The decisive point: **Base UI is already in the app-shell bundle** (Dialog, Sele
 
 ## Known gaps vs react-aria (the price of owning it)
 
-- **Mobile/touch text entry:** react-aria mounts a hidden `<input inputmode="numeric">` per field so mobile virtual keyboards work; our segments are `<div role="spinbutton">`, so on-screen-keyboard typing on touch devices is limited (desktop keyboard + the calendar work fully). The biggest remaining gap.
+- **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.

From e78c05b38713189f7a50b29572167f1b4878d37c Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Fri, 26 Jun 2026 17:24:46 +1000
Subject: [PATCH 24/35] docs(date-picker): capture the mobile-typing
 fast-follow approach in the proposal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a "Post-v1 fast-follows" section detailing the contentEditable + inputmode +
beforeinput approach for touch typing (mirroring react-aria), plus a pointer to
the comparison doc's full gap inventory — so the implementation thinking is
recorded rather than living only in a PR thread.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/proposals/date-picker.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/proposals/date-picker.md b/docs/proposals/date-picker.md
index 2c45b8e9..d95e3106 100644
--- a/docs/proposals/date-picker.md
+++ b/docs/proposals/date-picker.md
@@ -10,7 +10,36 @@ The original v1 foundation decision (`react-aria-components`, 2026-06-17, §1 be
 - **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**.
 
-Everything below is the **original 2026-06-17 decision and analysis**, kept verbatim for the record (now superseded by this note).
+## 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
 

From 76d4069e95e0dcf825547a0b3677032bf3f60082 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 1 Jul 2026 15:08:50 +1000
Subject: [PATCH 25/35] docs(date-picker): split implemented vs proposed props;
 proper tables for all three

DateField/DatePicker/CalendarProps are now honest per-component tables reflecting
what this variant actually wires up. Move props that are accepted (for react-aria
parity) but not yet acted on into a "Proposed / not yet implemented" table:
- granularity beyond "day" + hourCycle (DateTime is the tracked fast-follow)
- hideTimeZone and isRequired (accepted but unused)

Also: DateField ignores minValue/maxValue/isDateUnavailable (no calendar), so
those now live under DatePicker/Calendar; drop the stale "12/24-hour display"
localization claim (time granularity isn't supported yet).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/components/date-picker.md | 77 ++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 21 deletions(-)

diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
index 88f6f9b9..edbdcce5 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -95,7 +95,7 @@ Locale and timezone come from AppShell automatically. Override per field with `l
 <DatePicker label="Date" locale="ja-JP" />
 ```
 
-Segment order, first-day-of-week, month/weekday names, and 12/24-hour display all follow the resolved locale.
+Segment order, first-day-of-week, and month/weekday names all follow the resolved locale.
 
 ## Keyboard
 
@@ -112,34 +112,69 @@ Segment order, first-day-of-week, month/weekday names, and 12/24-hour display al
 
 ## 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                                                          |
-| `errorMessage`                                           | `LocalizedString`                         | Error text; also sets the invalid state                              |
-| `value` / `defaultValue`                                 | `DateValue \| null`                       | Controlled / uncontrolled value                                      |
-| `onChange`                                               | `(v: DateValue \| null) => void`          | Called on change; `null` when cleared                                |
-| `granularity`                                            | `"day" \| "hour" \| "minute" \| "second"` | Drives the value type                                                |
-| `minValue` / `maxValue`                                  | `DateValue`                               | Bounds                                                               |
-| `isDateUnavailable`                                      | `(date: DateValue) => boolean`            | Mark dates unavailable                                               |
-| `isDisabled` / `isReadOnly` / `isRequired` / `isInvalid` | `boolean`                                 | State flags                                                          |
-| `hourCycle`                                              | `12 \| 24`                                | Override AM/PM vs 24-hour                                            |
-| `placeholderValue`                                       | `DateValue`                               | Seeds unset segments                                                 |
-| `autoFocus`                                              | `boolean`                                 | Focus first segment on mount                                         |
-| `locale`                                                 | `string`                                  | BCP-47 locale override                                               |
-| `name`                                                   | `string`                                  | Hidden input for form submission                                     |
-| `aria-label`                                             | `string`                                  | Accessible name when no visible `label` (e.g. compact filter inputs) |
-| `className`                                              | `string`                                  | Root element class                                                   |
+| 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                                                            |
+| `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 `firstDayOfWeek` (`"sun" | "mon" | …`) and `timeZone` (IANA; defaults to AppShell `timeZone`).
+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
 
-`value` / `defaultValue` / `onChange` / `minValue` / `maxValue` / `isDateUnavailable` / `isDisabled` / `isReadOnly` / `focusedValue` / `defaultFocusedValue` / `onFocusChange` / `firstDayOfWeek` / `aria-label` / `aria-labelledby` / `timeZone` / `locale` / `className`.
+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).                                                                                                                                               |
+| `isRequired`   | `boolean`                                 | Unused — no required affordance is rendered and it isn't wired to validation. Surface required-field errors via `errorMessage` / `isInvalid` (see the [Form example](./form.md)).                                  |
+
+See the proposal's [Post-v1 fast-follows](../proposals/date-picker.md) for the DateTime plan.
 
 ## Related
 

From 4686bfb9214d8e5199e9f41d10b77dad75ea08fe Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 1 Jul 2026 15:22:54 +1000
Subject: [PATCH 26/35] refactor(date-picker): rename
 date-picker-standalone.tsx to date-field.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Name the public API file after its base component (DateField) rather than the
generic -standalone suffix — and avoid colliding with the internal
date-picker.tsx presentation layer. Pure rename + import-path updates; no API
or behaviour change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/src/components/data-table/toolbar.tsx             | 2 +-
 .../components/{date-picker-standalone.tsx => date-field.tsx}   | 0
 packages/core/src/components/date-picker.test.tsx               | 2 +-
 packages/core/src/components/date-picker.tsx                    | 2 +-
 packages/core/src/index.ts                                      | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/core/src/components/{date-picker-standalone.tsx => date-field.tsx} (100%)

diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index 175e4076..3e3f86aa 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -7,7 +7,7 @@ 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-picker-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";
diff --git a/packages/core/src/components/date-picker-standalone.tsx b/packages/core/src/components/date-field.tsx
similarity index 100%
rename from packages/core/src/components/date-picker-standalone.tsx
rename to packages/core/src/components/date-field.tsx
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-picker.test.tsx
index 812420d6..d06bdd19 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-picker.test.tsx
@@ -9,7 +9,7 @@ import {
   getLocalTimeZone,
   isSameDay,
 } from "@internationalized/date";
-import { DateField, DatePicker, Calendar } from "./date-picker-standalone";
+import { DateField, DatePicker, Calendar } from "./date-field";
 
 // This suite is the parity contract shared with the react-aria implementation:
 // it asserts public behaviour + the DOM accessibility contract (spinbutton
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-picker.tsx
index 389f636e..729a1219 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-picker.tsx
@@ -11,7 +11,7 @@ import type { CalendarDay, useCalendarState } from "./use-calendar-state";
  * Internal presentation layer for the date components — built on Base UI
  * primitives (`Popover`) + plain accessible markup, driven by our own
  * `useDateFieldState` / `useCalendarState` engines. Not exported from the
- * package; the public API lives in `date-picker-standalone.tsx`.
+ * package; the public API lives in `date-field.tsx`.
  *
  * Styling mirrors the rest of the library (`astw:` tokens, dark mode, the same
  * popover token set as our other Base UI popovers).
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 8041a0af..47fac401 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -139,7 +139,7 @@ export {
   type DateFieldProps,
   type DatePickerProps,
   type CalendarProps,
-} from "./components/date-picker-standalone";
+} from "./components/date-field";
 
 // @internationalized/date re-exports — consumers import date helpers/types from
 // app-shell and install no extra packages. The long tail is available via direct

From e694a00bbe306b2a6c67a06265cb0bff6bc48f5d Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Wed, 1 Jul 2026 15:57:57 +1000
Subject: [PATCH 27/35] refactor(date-picker): split into date-field/ and
 calendar/ component folders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Components with supporting files (external hooks) now live in a folder named
after the component, each with {component, presentation, hook(s), test, index}:

  components/date-field/   DateField + DatePicker, date-input-group (field
                           presentation + popover), use-date-field-state, tests
  components/calendar/     Calendar, calendar-view (grid presentation),
                           use-calendar-state, tests

Calendar is now its own component/file for clarity (was bundled in the public
API file). The old shared presentation (date-picker.tsx) is split into each
folder's presentation file; DatePicker composes the calendar via ../calendar.
Pure reorg — no public API or behaviour change; barrels keep import paths
(`@/components/date-field`) working. oxlint a11y overrides re-globbed to the
new folders; test snapshots regenerated under the new paths.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/.oxlintrc.jsonc                 |   2 +-
 ...ponents__calendar__calendar.test.tsx.snap} |   8 +-
 ...ents__date-field__date-field.test.tsx.snap |   7 +
 .../src/components/calendar/calendar-view.tsx | 259 +++++++++++++++++
 .../src/components/calendar/calendar.test.tsx | 163 +++++++++++
 .../core/src/components/calendar/calendar.tsx |  95 +++++++
 .../core/src/components/calendar/index.ts     |   1 +
 .../{ => calendar}/use-calendar-state.ts      |   0
 .../date-field.test.tsx}                      | 142 +---------
 .../{ => date-field}/date-field.tsx           |  94 +------
 .../date-input-group.tsx}                     | 260 +-----------------
 .../core/src/components/date-field/index.ts   |   1 +
 .../{ => date-field}/use-date-field-state.ts  |   0
 packages/core/src/index.ts                    |   3 +-
 14 files changed, 541 insertions(+), 494 deletions(-)
 rename packages/core/__snapshots__/{src__components__date-picker.test.tsx.snap => src__components__calendar__calendar.test.tsx.snap} (79%)
 create mode 100644 packages/core/__snapshots__/src__components__date-field__date-field.test.tsx.snap
 create mode 100644 packages/core/src/components/calendar/calendar-view.tsx
 create mode 100644 packages/core/src/components/calendar/calendar.test.tsx
 create mode 100644 packages/core/src/components/calendar/calendar.tsx
 create mode 100644 packages/core/src/components/calendar/index.ts
 rename packages/core/src/components/{ => calendar}/use-calendar-state.ts (100%)
 rename packages/core/src/components/{date-picker.test.tsx => date-field/date-field.test.tsx} (74%)
 rename packages/core/src/components/{ => date-field}/date-field.tsx (79%)
 rename packages/core/src/components/{date-picker.tsx => date-field/date-input-group.tsx} (52%)
 create mode 100644 packages/core/src/components/date-field/index.ts
 rename packages/core/src/components/{ => date-field}/use-date-field-state.ts (100%)

diff --git a/packages/core/.oxlintrc.jsonc b/packages/core/.oxlintrc.jsonc
index 740748b6..28b22169 100644
--- a/packages/core/.oxlintrc.jsonc
+++ b/packages/core/.oxlintrc.jsonc
@@ -16,7 +16,7 @@
       // 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-picker.tsx", "src/components/date-picker-standalone.tsx"],
+      "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",
diff --git a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap
similarity index 79%
rename from packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
rename to packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap
index dafddb1b..99bd521b 100644
--- a/packages/core/__snapshots__/src__components__date-picker.test.tsx.snap
+++ b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap
@@ -1,9 +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_b_" 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>"`;
-
-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>"`;
+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/src/components/calendar/calendar-view.tsx b/packages/core/src/components/calendar/calendar-view.tsx
new file mode 100644
index 00000000..cf422474
--- /dev/null
+++ b/packages/core/src/components/calendar/calendar-view.tsx
@@ -0,0 +1,259 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+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 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="Previous month"
+          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="Next month"
+          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..c497c238
--- /dev/null
+++ b/packages/core/src/components/calendar/calendar.test.tsx
@@ -0,0 +1,163 @@
+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 { 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("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/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/use-calendar-state.ts b/packages/core/src/components/calendar/use-calendar-state.ts
similarity index 100%
rename from packages/core/src/components/use-calendar-state.ts
rename to packages/core/src/components/calendar/use-calendar-state.ts
diff --git a/packages/core/src/components/date-picker.test.tsx b/packages/core/src/components/date-field/date-field.test.tsx
similarity index 74%
rename from packages/core/src/components/date-picker.test.tsx
rename to packages/core/src/components/date-field/date-field.test.tsx
index d06bdd19..c79687b4 100644
--- a/packages/core/src/components/date-picker.test.tsx
+++ b/packages/core/src/components/date-field/date-field.test.tsx
@@ -2,14 +2,8 @@ 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,
-  isSameDay,
-} from "@internationalized/date";
-import { DateField, DatePicker, Calendar } from "./date-field";
+import { CalendarDate, today, getLocalTimeZone } from "@internationalized/date";
+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
@@ -54,13 +48,6 @@ describe("snapshots", () => {
     const { container } = render(<DatePicker label="Ship date" />);
     expect(container.innerHTML).toMatchSnapshot();
   });
-
-  it("Calendar — pre-selected", () => {
-    const { container } = render(
-      <Calendar aria-label="Select date" defaultValue={parseDate("2025-06-15") as CalendarDate} />,
-    );
-    expect(container.innerHTML).toMatchSnapshot();
-  });
 });
 
 // ─── DateField ─────────────────────────────────────────────────────────────────
@@ -411,131 +398,6 @@ describe("DatePicker", () => {
   });
 });
 
-// ─── 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("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");
-  });
-});
-
 // ─── Keyboard: popover focus ─────────────────────────────────────────────────
 
 describe("DatePicker keyboard", () => {
diff --git a/packages/core/src/components/date-field.tsx b/packages/core/src/components/date-field/date-field.tsx
similarity index 79%
rename from packages/core/src/components/date-field.tsx
rename to packages/core/src/components/date-field/date-field.tsx
index a69a908f..daa42b26 100644
--- a/packages/core/src/components/date-field.tsx
+++ b/packages/core/src/components/date-field/date-field.tsx
@@ -1,19 +1,19 @@
 import { useCallback, useId, useRef, useState } from "react";
-import type { CalendarDate, DateValue } from "@internationalized/date";
+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 "./use-calendar-state";
+import { useCalendarState, type FirstDayOfWeek } from "../calendar/use-calendar-state";
+import { CalendarView } from "../calendar/calendar-view";
 import {
   DateInputGroup,
-  CalendarView,
   DatePopover,
   DatePickerPopoverTrigger,
   DatePickerLabel,
   DatePickerDescription,
   DatePickerError,
-} from "./date-picker";
+} from "./date-input-group";
 
 /**
  * Public, closed-API date components — the @internationalized/date + Base UI
@@ -81,26 +81,6 @@ export type DatePickerProps<T extends DateValue = DateValue> = DateFieldProps<T>
   timeZone?: string;
 };
 
-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;
-  locale?: string;
-}
-
 // ─── DateField ────────────────────────────────────────────────────────────────
 
 /**
@@ -316,68 +296,4 @@ function DatePicker<T extends DateValue = DateValue>({
   );
 }
 
-// ─── Calendar ─────────────────────────────────────────────────────────────────
-
-/**
- * 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 { DateField, DatePicker, Calendar };
+export { DateField, DatePicker };
diff --git a/packages/core/src/components/date-picker.tsx b/packages/core/src/components/date-field/date-input-group.tsx
similarity index 52%
rename from packages/core/src/components/date-picker.tsx
rename to packages/core/src/components/date-field/date-input-group.tsx
index 729a1219..a314e4f0 100644
--- a/packages/core/src/components/date-picker.tsx
+++ b/packages/core/src/components/date-field/date-input-group.tsx
@@ -1,64 +1,20 @@
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
-import { cva } from "class-variance-authority";
-import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { CalendarIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { inputBaseClasses } from "@/lib/input-classes";
 import type { Segment } from "./use-date-field-state";
-import type { CalendarDay, useCalendarState } from "./use-calendar-state";
 
 /**
- * Internal presentation layer for the date components — built on Base UI
- * primitives (`Popover`) + plain accessible markup, driven by our own
- * `useDateFieldState` / `useCalendarState` engines. Not exported from the
- * package; the public API lives in `date-field.tsx`.
+ * 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).
  */
 
-// ─── 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",
-);
-
 // ─── Field labels / description / error ───────────────────────────────────────
 
 // A composite spinbutton group can't be labelled by a native <label htmlFor>,
@@ -344,210 +300,6 @@ export function DatePickerPopoverTrigger({
   );
 }
 
-// ─── Calendar ─────────────────────────────────────────────────────────────────
-
-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 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="Previous month"
-          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="Next month"
-          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>
-  );
-}
-
 // ─── Popover ──────────────────────────────────────────────────────────────────
 // Same token set + animation classes as our other Base UI popovers
 // (see badge-list.tsx): data-open / data-ending-style animation attributes.
@@ -598,5 +350,3 @@ export function DatePopover({
     </Popover.Root>
   );
 }
-
-export { calendarCellVariants };
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/use-date-field-state.ts b/packages/core/src/components/date-field/use-date-field-state.ts
similarity index 100%
rename from packages/core/src/components/use-date-field-state.ts
rename to packages/core/src/components/date-field/use-date-field-state.ts
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 47fac401..f00aef50 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -135,11 +135,10 @@ export { Autocomplete, type AutocompleteAsyncFetcher } from "./components/autoco
 export {
   DateField,
   DatePicker,
-  Calendar,
   type DateFieldProps,
   type DatePickerProps,
-  type CalendarProps,
 } 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

From 4ac225a857ce2cec9845bee35d0404bc90977c53 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 10:38:23 +1000
Subject: [PATCH 28/35] feat(date-field): backfill current month/year from a
 partial entry on blur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When focus leaves the field, assume the current month/year for a partial date —
typing just "2" ⇒ the 2nd of this month/year; "2 Aug" ⇒ 2 Aug this year. The
day is the trigger: backfill only ever fills COARSER fields (month, year) from a
provided finer one, never guesses the day, so a lone year (or month) is left
untouched. Renames the on-blur `clampDate` handler to `commitOnBlur`, which now
backfills then clamps in a single commit.

Also updates the DataTable filter test helper: clearing a date must now remove
the day (the backfill trigger), so `clearDateIn` clears all segments — otherwise
the on-blur backfill re-completes the date.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/data-table/toolbar.test.tsx    |  9 ++-
 .../components/date-field/date-field.test.tsx | 63 +++++++++++++++++++
 .../src/components/date-field/date-field.tsx  |  4 +-
 .../date-field/date-input-group.tsx           | 16 +++--
 .../date-field/use-date-field-state.ts        | 49 ++++++++++-----
 5 files changed, 117 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
index bf251f1e..9ac83509 100644
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ b/packages/core/src/components/data-table/toolbar.test.tsx
@@ -154,8 +154,13 @@ async function typeDateInto(
 }
 
 async function clearDateIn(user: ReturnType<typeof userEvent.setup>, groupIndex: number) {
-  await user.click(within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name: "year" }));
-  await user.keyboard("{Delete}");
+  // 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}");
+  }
 }
 
 // ---------------------------------------------------------------------------
diff --git a/packages/core/src/components/date-field/date-field.test.tsx b/packages/core/src/components/date-field/date-field.test.tsx
index c79687b4..fa5d0bcd 100644
--- a/packages/core/src/components/date-field/date-field.test.tsx
+++ b/packages/core/src/components/date-field/date-field.test.tsx
@@ -312,6 +312,69 @@ describe("DateField", () => {
       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);
+  });
 });
 
 // ─── DatePicker ───────────────────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-field/date-field.tsx b/packages/core/src/components/date-field/date-field.tsx
index daa42b26..dbd51cc9 100644
--- a/packages/core/src/components/date-field/date-field.tsx
+++ b/packages/core/src/components/date-field/date-field.tsx
@@ -148,7 +148,7 @@ function DateField<T extends DateValue = DateValue>({
         setDigit={state.setDigit}
         setDayPeriod={state.setDayPeriod}
         clearSegment={state.clearSegment}
-        clampDate={state.clampDate}
+        commitOnBlur={state.commitOnBlur}
         isDisabled={isDisabled}
         isReadOnly={isReadOnly}
         isInvalid={derivedInvalid}
@@ -274,7 +274,7 @@ function DatePicker<T extends DateValue = DateValue>({
             setDigit={fieldState.setDigit}
             setDayPeriod={fieldState.setDayPeriod}
             clearSegment={fieldState.clearSegment}
-            clampDate={fieldState.clampDate}
+            commitOnBlur={fieldState.commitOnBlur}
             isDisabled={isDisabled}
             isReadOnly={isReadOnly}
             isInvalid={derivedInvalid}
diff --git a/packages/core/src/components/date-field/date-input-group.tsx b/packages/core/src/components/date-field/date-input-group.tsx
index a314e4f0..e9295736 100644
--- a/packages/core/src/components/date-field/date-input-group.tsx
+++ b/packages/core/src/components/date-field/date-input-group.tsx
@@ -75,8 +75,11 @@ interface DateInputGroupProps {
   ) => { advance: boolean };
   setDayPeriod: (pm: boolean) => void;
   clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
-  /** Correct an impossible day (e.g. 30 Feb) — called when focus leaves the group. */
-  clampDate: () => 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;
@@ -97,7 +100,7 @@ export function DateInputGroup({
   setDigit,
   setDayPeriod,
   clearSegment,
-  clampDate,
+  commitOnBlur,
   isDisabled,
   isReadOnly,
   isInvalid,
@@ -208,9 +211,10 @@ export function DateInputGroup({
       data-invalid={isInvalid || undefined}
       className={cn(groupClasses, className)}
       onBlur={(e) => {
-        // Focus left the whole group (not just moved between segments) → correct
-        // an impossible day for the entered month/year.
-        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) clampDate();
+        // 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">
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
index 45b51b8b..706662d6 100644
--- a/packages/core/src/components/date-field/use-date-field-state.ts
+++ b/packages/core/src/components/date-field/use-date-field-state.ts
@@ -111,7 +111,7 @@ const PLACEHOLDERS: Record<EditableSegmentType, string> = {
  * 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
- * `clampDate` is the backstop for the year-still-empty case.
+ * `commitOnBlur` is the backstop for the year-still-empty case.
  */
 function clampCompleteDay(f: Fields): Fields {
   const { day, month, year } = f;
@@ -369,20 +369,41 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   /**
-   * On-blur backstop for an impossible day. A *complete* date already self-
-   * corrects in `commit` (see {@link clampCompleteDay}), so this only matters
-   * when the field is left with the year still empty (e.g. "30/02" typed day-
-   * first): we clamp against a leap year so a valid 29 Feb survives until the
-   * year is typed, while an impossible 30/31 is still corrected.
+   * 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 clampDate = useCallback(() => {
+  const commitOnBlur = useCallback(() => {
     if (isReadOnly) return;
-    const { day, month } = fields;
-    if (day == null || month == null || month < 1 || month > 12) return;
-    const yearForMax = fields.year ?? 2000; // 2000 is a leap year
-    const maxDay = endOfMonth(new CalendarDate(yearForMax, month, 1)).day;
-    if (day > maxDay) commit({ ...fields, day: maxDay });
-  }, [fields, isReadOnly, commit]);
+    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) ────────────────────────────────────────
   const segments = useMemo<Segment[]>(() => {
@@ -445,6 +466,6 @@ export function useDateFieldState(options: DateFieldStateOptions) {
     setDigit,
     setDayPeriod,
     clearSegment,
-    clampDate,
+    commitOnBlur,
   };
 }

From 40a570a0f336e21ee0286c14dec6a25bb2d0df54 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 10:38:58 +1000
Subject: [PATCH 29/35] chore(vite-app): normalize routes.generated.ts ordering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Regenerated by the app-shell vite plugin — sorts /dashboard/products into place
(the merge left it out of order). No routes added or removed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 examples/vite-app/src/routes.generated.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vite-app/src/routes.generated.ts b/examples/vite-app/src/routes.generated.ts
index 4fbe4bd7..b893a252 100644
--- a/examples/vite-app/src/routes.generated.ts
+++ b/examples/vite-app/src/routes.generated.ts
@@ -19,9 +19,9 @@ export type GeneratedRouteParams = {
   "/dashboard": {};
   "/dashboard/orders": {};
   "/dashboard/orders/:id": { id: string };
+  "/dashboard/products": {};
   "/data-table": {};
   "/date-picker": {};
-  "/dashboard/products": {};
   "/settings": {};
 };
 

From 51aa166b30e3b02b395a5389b4729592e1997226 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 11:03:05 +1000
Subject: [PATCH 30/35] fix(date-field): use the resolved timezone for
 DatePicker's field state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DatePicker passed the raw `timeZone` prop to useDateFieldState while the
calendar used the resolved zone (prop → AppShell → local). With no `timeZone`
prop the field fell back to UTC for its "today"/anchor (and would emit
UTC-zoned values for time granularities) while the calendar used the AppShell
zone — so the two disagreed. Pass `resolvedTz` to the field too.

Addresses a GitHub Copilot review comment on #332.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/src/components/date-field/date-field.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/date-field/date-field.tsx b/packages/core/src/components/date-field/date-field.tsx
index dbd51cc9..d3152bc5 100644
--- a/packages/core/src/components/date-field/date-field.tsx
+++ b/packages/core/src/components/date-field/date-field.tsx
@@ -233,7 +233,10 @@ function DatePicker<T extends DateValue = DateValue>({
     onChange: setVal,
     granularity,
     locale: resolvedLocale,
-    timeZone: timeZoneProp,
+    // 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,

From 7483bfa0872c2b9a4abb24ca1c9fe29fd2a3544e Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 11:22:49 +1000
Subject: [PATCH 31/35] fix(appshell): normalize a full-tag locale to its
 language subtag for UI strings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`buildConfigurations` put `options.locale` verbatim into both `locale` (used to
key i18n label tables) and `resolvedLocale` (formatting). A consumer passing a
full BCP-47 tag like "ja-JP" made `labels["ja-JP"]` miss → English fallback.

Normalize `locale` to its language subtag (`toLanguageSubtag`, e.g. "ja-JP" →
"ja") while keeping the full tag in `resolvedLocale` for Intl/date formatting.
Back-compatible: a subtag ("en"/"ja") — the documented, existing usage — is
unchanged; only off-doc full tags are corrected.

Addresses a GitHub Copilot review comment on #332.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/core/src/contexts/appshell-context.tsx | 12 ++++++++++--
 packages/core/src/hooks/i18n.test.tsx           | 16 ++++++++++++++++
 packages/core/src/lib/i18n.ts                   | 17 +++++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/contexts/appshell-context.tsx b/packages/core/src/contexts/appshell-context.tsx
index 8d5cdd40..862d9ae9 100644
--- a/packages/core/src/contexts/appshell-context.tsx
+++ b/packages/core/src/contexts/appshell-context.tsx
@@ -1,7 +1,12 @@
 import { ErrorBoundaryComponent, Modules, Resource } from "@/resource";
 import { createContext, useContext, type ReactNode } from "react";
 import { DefaultErrorBoundary } from "@/components/default-error-boundary";
-import { DEFAULT_LOCALE, detectBrowserLocale, detectBrowserFullLocale } from "@/lib/i18n";
+import {
+  DEFAULT_LOCALE,
+  detectBrowserLocale,
+  detectBrowserFullLocale,
+  toLanguageSubtag,
+} from "@/lib/i18n";
 import { getLocalTimeZone } from "@internationalized/date";
 
 /**
@@ -78,7 +83,10 @@ 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,
 });
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/lib/i18n.ts b/packages/core/src/lib/i18n.ts
index 24fb8341..114b68c1 100644
--- a/packages/core/src/lib/i18n.ts
+++ b/packages/core/src/lib/i18n.ts
@@ -51,6 +51,23 @@ export const detectBrowserFullLocale = (): string => {
   }
 };
 
+/**
+ * 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;

From b0f05e1c818ede465fdbb25a8b025772962a29c0 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 13:22:24 +1000
Subject: [PATCH 32/35] perf(date): memoize Intl formatters out of the
 per-keystroke/per-cell path

- calendar: build the cell-label DateFormatter once per locale/timezone instead
  of a fresh one per rendered cell (~42 per grid render, per frame on held arrows).
- date-field: hoist the DateFormatter + two NumberFormats + formatToParts into a
  memo keyed on locale/granularity/hour-cycle/timezone, so a keystroke (which only
  changes `fields`) reuses them instead of rebuilding all four.

Addresses two GitHub review comments (erickteowarang) on #332.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/calendar/use-calendar-state.ts | 13 +++++++---
 .../date-field/use-date-field-state.ts        | 26 ++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/calendar/use-calendar-state.ts b/packages/core/src/components/calendar/use-calendar-state.ts
index d785772b..31ea9f87 100644
--- a/packages/core/src/components/calendar/use-calendar-state.ts
+++ b/packages/core/src/components/calendar/use-calendar-state.ts
@@ -193,17 +193,24 @@ export function useCalendarState(options: CalendarStateOptions) {
     [locale, timeZone, visibleMonth],
   );
 
-  const cellLabel = useCallback(
-    (date: CalendarDate) =>
+  // 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,
-      }).format(date.toDate(timeZone)),
+      }),
     [locale, timeZone],
   );
+  const cellLabel = useCallback(
+    (date: CalendarDate) => cellLabelFmt.format(date.toDate(timeZone)),
+    [cellLabelFmt, timeZone],
+  );
 
   // ── Month paging ────────────────────────────────────────────────────────────
   const previousMonth = useCallback(
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
index 706662d6..3b43a5a1 100644
--- a/packages/core/src/components/date-field/use-date-field-state.ts
+++ b/packages/core/src/components/date-field/use-date-field-state.ts
@@ -406,7 +406,11 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   }, [fields, anchor, isReadOnly, commit]);
 
   // ── Display segments (locale-ordered) ────────────────────────────────────────
-  const segments = useMemo<Segment[]>(() => {
+  // 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",
@@ -421,11 +425,6 @@ export function useDateFieldState(options: DateFieldStateOptions) {
         : {}),
       ...(timeZone ? { timeZone } : {}),
     });
-
-    // 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 pad2 = new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false });
     const yearFmt = new Intl.NumberFormat(locale, { useGrouping: false });
     const formatSegment = (type: EditableSegmentType, value: number): string => {
@@ -433,9 +432,16 @@ export function useDateFieldState(options: DateFieldStateOptions) {
       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.map<Segment>((part) => {
+    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 };
@@ -446,7 +452,7 @@ export function useDateFieldState(options: DateFieldStateOptions) {
       const { min, max } = getLimits(editable);
       return {
         type: editable,
-        text: filled ? formatSegment(editable, current) : PLACEHOLDERS[editable],
+        text: filled ? segmentFormat.formatSegment(editable, current) : PLACEHOLDERS[editable],
         isEditable: true,
         isPlaceholder: !filled,
         value: current,
@@ -455,7 +461,7 @@ export function useDateFieldState(options: DateFieldStateOptions) {
         label: SEGMENT_LABELS[editable],
       };
     });
-  }, [locale, hasTime, granularity, is12, timeZone, fields, editableTypes, anchor, getLimits]);
+  }, [segmentFormat, fields, editableTypes, getLimits]);
 
   const fieldValue = composeValue(fields);
 

From cff2ab99033822349b37827c5a449a090dcabcd2 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 13:22:25 +1000
Subject: [PATCH 33/35] fix(data-table): date-filter picker uses the column's
 visible label

`DateFilterPicker`'s aria-label was the raw field id (e.g. "created_at"); thread
the column's visible label (`column.label ?? field`) through TemporalFilterEditor
so the accessible name matches what sighted users see, including the between
"from"/"to" pickers.

Addresses a GitHub review comment (github-actions bot, 3/3) on #332.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../core/src/components/data-table/toolbar.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index 3e3f86aa..711902cb 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -659,6 +659,7 @@ function FilterPopoverContent({
   onClose: () => void;
 }) {
   const config = column.filter;
+  const label = column.label ?? config.field;
 
   switch (config.type) {
     case "enum":
@@ -683,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}
+        />
       );
   }
 }
@@ -1064,11 +1071,14 @@ 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;
@@ -1143,12 +1153,12 @@ function TemporalFilterEditor({
     valueInput = isDate ? (
       <div className="astw:flex astw:flex-col astw:gap-1.5">
         <DateFilterPicker
-          ariaLabel={t("filterBetweenFrom")}
+          ariaLabel={`${label} — ${t("filterBetweenFrom")}`}
           value={localValue}
           onChange={setLocalValue}
         />
         <DateFilterPicker
-          ariaLabel={t("filterBetweenTo")}
+          ariaLabel={`${label} — ${t("filterBetweenTo")}`}
           value={localValueMax}
           onChange={setLocalValueMax}
         />
@@ -1165,7 +1175,7 @@ function TemporalFilterEditor({
     );
   } else {
     valueInput = isDate ? (
-      <DateFilterPicker ariaLabel={config.field} value={localValue} onChange={setLocalValue} />
+      <DateFilterPicker ariaLabel={label} value={localValue} onChange={setLocalValue} />
     ) : (
       <Input
         {...getTemporalInputProps(config.type)}

From e9415838151eb9aaf4a40d382ed04afdaba25fb2 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 13:22:41 +1000
Subject: [PATCH 34/35] fix(date-field): controlled null, aria-required, and
 localized aria strings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses the PR review round on #332:

- **Controlled `value={null}`** (High): pass `value` through to
  useDateFieldState / useControlledState instead of `value ?? undefined`, so
  `null` (controlled-empty) stays distinct from `undefined` (uncontrolled) —
  a parent clearing the field with `value={null}` now actually clears it.
- **isRequired**: wire it to `aria-required` on the spinbutton segments (ARIA
  doesn't allow aria-required on the role="group" wrapper), for both DateField
  and DatePicker. Docs move it from "proposed" to implemented.
- **Localized chrome**: the built-in aria-labels (Previous/Next month, Open
  calendar, Choose date, calendar dialog) now resolve via folder-local
  `defineI18nLabels` tables (en/ja), matching data-table's i18n pattern.

Adds tests for controlled-null clearing (DateField + DatePicker) and
aria-required.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/components/date-picker.md                | 30 +++++++-------
 .../src/components/calendar/calendar-view.tsx |  6 ++-
 packages/core/src/components/calendar/i18n.ts | 15 +++++++
 .../components/date-field/date-field.test.tsx | 41 ++++++++++++++++++-
 .../src/components/date-field/date-field.tsx  | 24 +++++++++--
 .../date-field/date-input-group.tsx           |  9 +++-
 .../core/src/components/date-field/i18n.ts    | 19 +++++++++
 7 files changed, 121 insertions(+), 23 deletions(-)
 create mode 100644 packages/core/src/components/calendar/i18n.ts
 create mode 100644 packages/core/src/components/date-field/i18n.ts

diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
index edbdcce5..8f0a9dec 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -116,20 +116,21 @@ The tables below list props this variant **actually implements** for v1 (date gr
 
 ### 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                                                            |
-| `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                                                     |
+| 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.
 
@@ -172,7 +173,6 @@ Accepted by the prop types (for parity with the react-aria variant) but **not ac
 | `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).                                                                                                                                               |
-| `isRequired`   | `boolean`                                 | Unused — no required affordance is rendered and it isn't wired to validation. Surface required-field errors via `errorMessage` / `isInvalid` (see the [Form example](./form.md)).                                  |
 
 See the proposal's [Post-v1 fast-follows](../proposals/date-picker.md) for the DateTime plan.
 
diff --git a/packages/core/src/components/calendar/calendar-view.tsx b/packages/core/src/components/calendar/calendar-view.tsx
index cf422474..b7800c72 100644
--- a/packages/core/src/components/calendar/calendar-view.tsx
+++ b/packages/core/src/components/calendar/calendar-view.tsx
@@ -2,6 +2,7 @@ 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";
 
 /**
@@ -77,6 +78,7 @@ export function CalendarView({
   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);
@@ -135,7 +137,7 @@ export function CalendarView({
           ref={prevBtnRef}
           type="button"
           data-slot="calendar-nav"
-          aria-label="Previous month"
+          aria-label={t("previousMonth")}
           disabled={state.prevDisabled}
           onClick={state.previousMonth}
           className={navButtonClasses}
@@ -153,7 +155,7 @@ export function CalendarView({
           ref={nextBtnRef}
           type="button"
           data-slot="calendar-nav"
-          aria-label="Next month"
+          aria-label={t("nextMonth")}
           disabled={state.nextDisabled}
           onClick={state.nextMonth}
           className={navButtonClasses}
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/date-field/date-field.test.tsx b/packages/core/src/components/date-field/date-field.test.tsx
index fa5d0bcd..c0ca5639 100644
--- a/packages/core/src/components/date-field/date-field.test.tsx
+++ b/packages/core/src/components/date-field/date-field.test.tsx
@@ -2,7 +2,7 @@ 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, today, getLocalTimeZone } from "@internationalized/date";
+import { CalendarDate, parseDate, today, getLocalTimeZone } from "@internationalized/date";
 import { DateField, DatePicker } from "./date-field";
 
 // This suite is the parity contract shared with the react-aria implementation:
@@ -375,6 +375,29 @@ describe("DateField", () => {
     // 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 ───────────────────────────────────────────────────────────────
@@ -459,6 +482,22 @@ describe("DatePicker", () => {
     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",
+    );
+  });
 });
 
 // ─── Keyboard: popover focus ─────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-field/date-field.tsx b/packages/core/src/components/date-field/date-field.tsx
index d3152bc5..82f118d8 100644
--- a/packages/core/src/components/date-field/date-field.tsx
+++ b/packages/core/src/components/date-field/date-field.tsx
@@ -14,6 +14,7 @@ import {
   DatePickerDescription,
   DatePickerError,
 } from "./date-input-group";
+import { useDateFieldT } from "./i18n";
 
 /**
  * Public, closed-API date components — the @internationalized/date + Base UI
@@ -109,6 +110,7 @@ function DateField<T extends DateValue = DateValue>({
   isDisabled,
   isReadOnly,
   isInvalid,
+  isRequired,
   autoFocus,
   name,
   "aria-label": ariaLabel,
@@ -127,7 +129,10 @@ function DateField<T extends DateValue = DateValue>({
   const derivedInvalid = !!errorText || !!isInvalid;
 
   const state = useDateFieldState({
-    value: value ?? undefined,
+    // 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,
@@ -152,6 +157,7 @@ function DateField<T extends DateValue = DateValue>({
         isDisabled={isDisabled}
         isReadOnly={isReadOnly}
         isInvalid={derivedInvalid}
+        isRequired={isRequired}
         autoFocus={autoFocus}
         labelId={labelText ? labelId : undefined}
         ariaLabel={ariaLabel}
@@ -200,6 +206,7 @@ function DatePicker<T extends DateValue = DateValue>({
   isDisabled,
   isReadOnly,
   isInvalid,
+  isRequired,
   autoFocus,
   firstDayOfWeek,
   name,
@@ -210,6 +217,7 @@ function DatePicker<T extends DateValue = DateValue>({
   const resolvedLocale = localeProp ?? shellLocale;
   const resolvedTz = timeZoneProp ?? shellTz;
   const resolve = buildLocaleResolver(language);
+  const t = useDateFieldT();
 
   const labelId = useId();
   const descId = useId();
@@ -223,7 +231,8 @@ function DatePicker<T extends DateValue = DateValue>({
   const [open, setOpen] = useState(false);
   const fieldRef = useRef<HTMLDivElement>(null);
   const [val, setVal] = useControlledState<DateValue | null>(
-    value ?? undefined,
+    // `null` is controlled-empty; only `undefined` means uncontrolled (see above).
+    value,
     defaultValue ?? null,
     onChange as (v: DateValue | null) => void,
   );
@@ -260,7 +269,9 @@ function DatePicker<T extends DateValue = DateValue>({
 
   const describedBy = cn(descText && descId, derivedInvalid && errorText && errId) || undefined;
   const accessibleName = labelText ?? ariaLabel;
-  const popoverAriaLabel = accessibleName ? `${accessibleName}, choose date` : "Choose date";
+  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)}>
@@ -281,6 +292,7 @@ function DatePicker<T extends DateValue = DateValue>({
             isDisabled={isDisabled}
             isReadOnly={isReadOnly}
             isInvalid={derivedInvalid}
+            isRequired={isRequired}
             autoFocus={autoFocus}
             labelId={labelText ? labelId : undefined}
             ariaLabel={ariaLabel}
@@ -290,7 +302,11 @@ function DatePicker<T extends DateValue = DateValue>({
           />
         }
       >
-        <CalendarView state={calState} ariaLabel={labelText ?? ariaLabel ?? "Calendar"} inPopover />
+        <CalendarView
+          state={calState}
+          ariaLabel={labelText ?? ariaLabel ?? t("calendar")}
+          inPopover
+        />
       </DatePopover>
       {descText && <DatePickerDescription id={descId}>{descText}</DatePickerDescription>}
       {derivedInvalid && errorText && <DatePickerError id={errId}>{errorText}</DatePickerError>}
diff --git a/packages/core/src/components/date-field/date-input-group.tsx b/packages/core/src/components/date-field/date-input-group.tsx
index e9295736..7a27b15c 100644
--- a/packages/core/src/components/date-field/date-input-group.tsx
+++ b/packages/core/src/components/date-field/date-input-group.tsx
@@ -3,6 +3,7 @@ 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";
 
 /**
@@ -83,6 +84,7 @@ interface DateInputGroupProps {
   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). */
@@ -104,6 +106,7 @@ export function DateInputGroup({
   isDisabled,
   isReadOnly,
   isInvalid,
+  isRequired,
   autoFocus,
   labelId,
   ariaLabel,
@@ -252,6 +255,9 @@ export function DateInputGroup({
               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}
@@ -292,10 +298,11 @@ export function DatePickerPopoverTrigger({
   className,
   ...props
 }: React.ComponentProps<typeof Popover.Trigger>) {
+  const t = useDateFieldT();
   return (
     <Popover.Trigger
       data-slot="date-picker-button"
-      aria-label="Open calendar"
+      aria-label={t("openCalendar")}
       className={cn(triggerClasses, className)}
       {...props}
     >
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..7ebf1f51
--- /dev/null
+++ b/packages/core/src/components/date-field/i18n.ts
@@ -0,0 +1,19 @@
+import { defineI18nLabels } from "@/hooks/i18n";
+
+/** Built-in aria-label strings for the date-field chrome (popover trigger + dialog). */
+export const dateFieldLabels = defineI18nLabels({
+  en: {
+    openCalendar: "Open calendar",
+    chooseDate: "Choose date",
+    chooseDateFor: (p: { name: string }) => `${p.name}, choose date`,
+    calendar: "Calendar",
+  },
+  ja: {
+    openCalendar: "カレンダーを開く",
+    chooseDate: "日付を選択",
+    chooseDateFor: (p: { name: string }) => `${p.name}、日付を選択`,
+    calendar: "カレンダー",
+  },
+});
+
+export const useDateFieldT = dateFieldLabels.useT;

From be04e5e5a8cdd894e9792d99780ebaf87bc36a33 Mon Sep 17 00:00:00 2001
From: interacsean <seanhasselback@gmail.com>
Date: Thu, 2 Jul 2026 14:06:58 +1000
Subject: [PATCH 35/35] feat(date-field): localize the remaining built-in aria
 strings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sweep for hardcoded English beyond the strings already flagged in review:

- Segment accessible names (month/day/year/hour/minute/second/AM-PM) — moved
  out of the engine's `SEGMENT_LABELS` constant into the i18n table, resolved at
  the presentation layer (drops the now-unused `Segment.label`).
- The empty-segment `aria-valuetext` ("Empty").
- The `DatePopover` "Choose date" aria-label fallback.

en values are unchanged (so tests/snapshots are stable); ja added. Tests assert
ja resolution for the segment names, popover trigger, empty placeholder, and
calendar month-nav labels.

Deliberately left: the visual segment placeholders (yyyy/mm/dd — format tokens,
a separate design choice) and the AM/PM display (time granularity, unsupported).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/calendar/calendar.test.tsx |  7 ++++++
 .../components/date-field/date-field.test.tsx | 13 ++++++++++
 .../date-field/date-input-group.tsx           |  8 ++++---
 .../core/src/components/date-field/i18n.ts    | 24 ++++++++++++++++++-
 .../date-field/use-date-field-state.ts        | 13 ----------
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/components/calendar/calendar.test.tsx b/packages/core/src/components/calendar/calendar.test.tsx
index c497c238..047d46e5 100644
--- a/packages/core/src/components/calendar/calendar.test.tsx
+++ b/packages/core/src/components/calendar/calendar.test.tsx
@@ -2,6 +2,7 @@ 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,
@@ -51,6 +52,12 @@ describe("Calendar", () => {
     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();
diff --git a/packages/core/src/components/date-field/date-field.test.tsx b/packages/core/src/components/date-field/date-field.test.tsx
index c0ca5639..95b8fac9 100644
--- a/packages/core/src/components/date-field/date-field.test.tsx
+++ b/packages/core/src/components/date-field/date-field.test.tsx
@@ -3,6 +3,7 @@ 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:
@@ -498,6 +499,18 @@ describe("DatePicker", () => {
       "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 ─────────────────────────────────────────────────
diff --git a/packages/core/src/components/date-field/date-input-group.tsx b/packages/core/src/components/date-field/date-input-group.tsx
index 7a27b15c..9357fd48 100644
--- a/packages/core/src/components/date-field/date-input-group.tsx
+++ b/packages/core/src/components/date-field/date-input-group.tsx
@@ -115,6 +115,7 @@ export function DateInputGroup({
   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
@@ -251,7 +252,7 @@ export function DateInputGroup({
               contentEditable={false}
               suppressContentEditableWarning
               tabIndex={isDisabled ? -1 : 0}
-              aria-label={segment.label}
+              aria-label={t(segment.type)}
               aria-disabled={isDisabled || undefined}
               aria-readonly={isReadOnly || undefined}
               aria-invalid={isInvalid || undefined}
@@ -261,7 +262,7 @@ export function DateInputGroup({
               aria-valuemin={segment.minValue}
               aria-valuemax={segment.maxValue}
               aria-valuenow={segment.value}
-              aria-valuetext={segment.isPlaceholder ? "Empty" : segment.text}
+              aria-valuetext={segment.isPlaceholder ? t("empty") : segment.text}
               onFocus={() => {
                 typedCountRef.current = 0;
               }}
@@ -338,6 +339,7 @@ export function DatePopover({
   ariaLabel,
   anchor,
 }: DatePopoverProps) {
+  const t = useDateFieldT();
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       {field}
@@ -346,7 +348,7 @@ export function DatePopover({
           {/* APG date-picker dialog pattern — the popup is a labelled dialog. */}
           <Popover.Popup
             role="dialog"
-            aria-label={ariaLabel ?? "Choose date"}
+            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",
diff --git a/packages/core/src/components/date-field/i18n.ts b/packages/core/src/components/date-field/i18n.ts
index 7ebf1f51..fe024592 100644
--- a/packages/core/src/components/date-field/i18n.ts
+++ b/packages/core/src/components/date-field/i18n.ts
@@ -1,18 +1,40 @@
 import { defineI18nLabels } from "@/hooks/i18n";
 
-/** Built-in aria-label strings for the date-field chrome (popover trigger + dialog). */
+/**
+ * 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: "午前/午後",
   },
 });
 
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
index 3b43a5a1..a1360f5d 100644
--- a/packages/core/src/components/date-field/use-date-field-state.ts
+++ b/packages/core/src/components/date-field/use-date-field-state.ts
@@ -67,8 +67,6 @@ export interface Segment {
   value?: number;
   minValue?: number;
   maxValue?: number;
-  /** Accessible label, e.g. "month", "year". */
-  label?: string;
 }
 
 export interface DateFieldStateOptions {
@@ -85,16 +83,6 @@ export interface DateFieldStateOptions {
   isReadOnly?: boolean;
 }
 
-const SEGMENT_LABELS: Record<EditableSegmentType, string> = {
-  year: "year",
-  month: "month",
-  day: "day",
-  hour: "hour",
-  minute: "minute",
-  second: "second",
-  dayPeriod: "AM/PM",
-};
-
 const PLACEHOLDERS: Record<EditableSegmentType, string> = {
   year: "yyyy",
   month: "mm",
@@ -458,7 +446,6 @@ export function useDateFieldState(options: DateFieldStateOptions) {
         value: current,
         minValue: min,
         maxValue: max,
-        label: SEGMENT_LABELS[editable],
       };
     });
   }, [segmentFormat, fields, editableTypes, getLimits]);