From 94f06685f9c781766acf08f7893c1b99f01a0bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Vila=C3=A7a=20de=20Jesus?=
 <matheus@codeatlas.com.br>
Date: Sun, 25 Oct 2026 16:27:06 -0300
Subject: [PATCH 1/2] chore: start #623


From 84489c199054e84b5d230fadc75af3d460bcc4fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Vila=C3=A7a=20de=20Jesus?=
 <matheus@codeatlas.com.br>
Date: Sun, 25 Oct 2026 18:26:03 -0300
Subject: [PATCH 2/2] refactor: share the Date field shell and calendar frame
 (#623)

---
 .../src/lib/components/Date/Calendar.svelte   |  16 +-
 .../lib/components/Date/CalendarFrame.svelte  |  35 ++++
 .../src/lib/components/Date/DateField.svelte  |  63 ++------
 .../lib/components/Date/DateFieldShell.svelte | 151 ++++++++++++++++++
 .../src/lib/components/Date/DatePicker.svelte | 115 +++----------
 .../components/Date/DateRangePicker.svelte    | 134 ++++++----------
 .../lib/components/Date/RangeCalendar.svelte  |  16 +-
 .../src/lib/components/Date/TimeField.svelte  |  63 ++------
 .../ui/src/lib/components/Date/date-utils.ts  |  13 ++
 9 files changed, 306 insertions(+), 300 deletions(-)
 create mode 100644 packages/ui/src/lib/components/Date/CalendarFrame.svelte
 create mode 100644 packages/ui/src/lib/components/Date/DateFieldShell.svelte

diff --git a/packages/ui/src/lib/components/Date/Calendar.svelte b/packages/ui/src/lib/components/Date/Calendar.svelte
index 2227bf8a..76cd793a 100644
--- a/packages/ui/src/lib/components/Date/Calendar.svelte
+++ b/packages/ui/src/lib/components/Date/Calendar.svelte
@@ -3,7 +3,7 @@
   import { calendar } from '../../i18n/groups/calendar.js';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
-  import CalendarBody from './CalendarBody.svelte';
+  import CalendarFrame from './CalendarFrame.svelte';
   import { CalendarState } from './calendar-state.svelte.js';
   import type { WeekStart } from './date-utils.js';
   import './date.css';
@@ -80,16 +80,4 @@
   });
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  bind:this={cal.root}
-  class="ca-cal ca-cal--standalone {className}"
-  role="application"
-  aria-label={cal.fullLabel}
-  data-disabled={disabled ? '' : undefined}
-  data-readonly={readonly ? '' : undefined}
-  onkeydown={cal.onkeydown}
->
-  <div class="ca-sr-only"><div role="heading" aria-level="2">{cal.fullLabel}</div></div>
-  <CalendarBody state={cal} {disabled} {readonly} />
-</div>
+<CalendarFrame state={cal} {disabled} {readonly} standalone class={className} />
diff --git a/packages/ui/src/lib/components/Date/CalendarFrame.svelte b/packages/ui/src/lib/components/Date/CalendarFrame.svelte
new file mode 100644
index 00000000..dc301cfc
--- /dev/null
+++ b/packages/ui/src/lib/components/Date/CalendarFrame.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  /**
+   * Internal: the `role="application"` root of a calendar, its screen-reader heading and the grid
+   * (CalendarBody). Shared by Calendar, RangeCalendar and the popovers of DatePicker and
+   * DateRangePicker. Not exported from the package.
+   */
+  import CalendarBody from './CalendarBody.svelte';
+  import type { CalendarState } from './calendar-state.svelte.js';
+
+  interface Props {
+    state: CalendarState;
+    disabled: boolean;
+    readonly: boolean;
+    range?: boolean;
+    /** A calendar on its own page (not inside a popover): adds the standalone class and state hooks. */
+    standalone?: boolean;
+    class?: string;
+  }
+
+  let { state: cal, disabled, readonly, range = false, standalone = false, class: className = '' }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  bind:this={cal.root}
+  class="ca-cal {standalone ? 'ca-cal--standalone' : ''} {className}"
+  role="application"
+  aria-label={cal.fullLabel}
+  data-disabled={standalone && disabled ? '' : undefined}
+  data-readonly={standalone && readonly ? '' : undefined}
+  onkeydown={cal.onkeydown}
+>
+  <div class="ca-sr-only"><div role="heading" aria-level="2">{cal.fullLabel}</div></div>
+  <CalendarBody state={cal} {disabled} {readonly} {range} />
+</div>
diff --git a/packages/ui/src/lib/components/Date/DateField.svelte b/packages/ui/src/lib/components/Date/DateField.svelte
index d03f081f..94a46f22 100644
--- a/packages/ui/src/lib/components/Date/DateField.svelte
+++ b/packages/ui/src/lib/components/Date/DateField.svelte
@@ -2,7 +2,7 @@
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import { uid } from '../../utils/index.js';
-  import DateSegments from './DateSegments.svelte';
+  import DateFieldShell from './DateFieldShell.svelte';
   import { defaultDate } from './date-utils.js';
   import { FieldState } from './field-state.svelte.js';
   import './date.css';
@@ -53,7 +53,6 @@
 
   const id = uid('df');
 
-  const describedBy = $derived(error ? `${id}-err` : description ? `${id}-hint` : undefined);
   let wrap = $state<HTMLElement | null>(null);
 
   // Empty field: the placeholder decides the segment format and the base for typed values.
@@ -84,48 +83,18 @@
   $effect(() => field.sync(value));
 </script>
 
-<div class="ca-date {className}" class:ca-date--sm={size === 'sm'} class:ca-date--error={!!error} class:ca-date--disabled={disabled}>
-  {#if label}
-    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="ca-date__label" id="{id}-label" onclick={() => !disabled && field.focusFirst()}>
-      {label}{#if required}<span class="ca-date__req" aria-hidden="true"> *</span>{/if}
-    </div>
-  {/if}
-
-  <div
-    class="ca-date__wrap"
-    role="group"
-    bind:this={wrap}
-    aria-labelledby={label ? `${id}-label` : undefined}
-    aria-describedby={describedBy}
-    aria-disabled={disabled}
-    data-invalid={error || field.invalid ? '' : undefined}
-    data-disabled={disabled ? '' : undefined}
-  >
-    <DateSegments
-      {field}
-      base={id}
-      labelId={label ? `${id}-label` : undefined}
-      {disabled}
-      {readonly}
-      invalid={!!error || field.invalid}
-    />
-  </div>
-  {#if name}
-    <input
-      {name}
-      value={value?.toString() ?? ''}
-      {required}
-      tabindex="-1"
-      aria-hidden="true"
-      class="ca-sr-only"
-      style="transform:translateX(-100%)"
-    />
-  {/if}
-
-  {#if error}
-    <p id="{id}-err" class="ca-date__hint ca-date__hint--error" role="alert">{error}</p>
-  {:else if description}
-    <p id="{id}-hint" class="ca-date__hint">{description}</p>
-  {/if}
-</div>
+<DateFieldShell
+  {id}
+  {field}
+  {label}
+  {description}
+  {error}
+  {disabled}
+  {readonly}
+  {required}
+  {size}
+  class={className}
+  {name}
+  formValue={value?.toString()}
+  bind:wrap
+/>
diff --git a/packages/ui/src/lib/components/Date/DateFieldShell.svelte b/packages/ui/src/lib/components/Date/DateFieldShell.svelte
new file mode 100644
index 00000000..7219504c
--- /dev/null
+++ b/packages/ui/src/lib/components/Date/DateFieldShell.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  /**
+   * Internal: the chrome shared by DateField, TimeField, DatePicker and DateRangePicker: label,
+   * the bordered group around the segments, the hidden native-form input, and the error or
+   * description line. The segments and the trigger button are passed in as snippets. Not exported
+   * from the package.
+   */
+  import type { Component, Snippet } from 'svelte';
+  import DateSegments from './DateSegments.svelte';
+  import type { FieldState } from './field-state.svelte.js';
+
+  interface Props {
+    /** Base id; ids derived from it: `-label`, `-err`, `-hint`. */
+    id: string;
+    /** Its segments are rendered (unless `segments` is given); it receives the focus when the label is clicked. */
+    field: FieldState;
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    size: 'sm' | 'md';
+    class: string;
+    /** Popover state of a picker: marks the group `data-state="open"`. */
+    open?: boolean;
+    /** A picker: renders the calendar button with this icon after the segments. */
+    triggerIcon?: Component<{ size?: number; strokeWidth?: number; 'aria-hidden'?: 'true' }>;
+    triggerLabel?: string;
+    /** Bound to the calendar button (the popover anchors to it and focus returns to it). */
+    triggerEl?: HTMLElement | null;
+    onToggle?: () => void;
+    /**
+     * A range wraps everything in `<div role="group" id>`, labels with a `<span>` and names the
+     * group with `aria-label` (it holds two fields, each with its own segments).
+     */
+    range?: boolean;
+    /** Hidden input for native forms (ISO string); omitted when there is no `name`. */
+    name?: string;
+    formValue?: string;
+    /** Bound to the group element (FieldState reads its segments from it). */
+    wrap: HTMLElement | null;
+    /** Replaces the default segments of `field` (a range renders two fields). */
+    segments?: Snippet;
+  }
+
+  let {
+    id,
+    field,
+    label,
+    description,
+    error,
+    disabled,
+    readonly,
+    required,
+    size,
+    class: className,
+    open,
+    triggerIcon: TriggerIcon,
+    triggerLabel,
+    triggerEl = $bindable(),
+    onToggle,
+    range = false,
+    name,
+    formValue,
+    wrap = $bindable(),
+    segments,
+  }: Props = $props();
+
+  const describedBy = $derived(error ? `${id}-err` : description ? `${id}-hint` : undefined);
+  const focusFirst = () => !disabled && field.focusFirst();
+</script>
+
+{#snippet body()}
+  <div class="ca-date {className}" class:ca-date--sm={size === 'sm'} class:ca-date--error={!!error} class:ca-date--disabled={disabled}>
+    {#if label}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+      <svelte:element this={range ? 'span' : 'div'} class="ca-date__label" id="{id}-label" onclick={focusFirst}>
+        {label}{#if required}<span class="ca-date__req" aria-hidden="true"> *</span>{/if}
+      </svelte:element>
+    {/if}
+
+    <div
+      class="ca-date__wrap"
+      role="group"
+      bind:this={wrap}
+      aria-label={range ? label : undefined}
+      aria-labelledby={!range && label ? `${id}-label` : undefined}
+      aria-describedby={describedBy}
+      aria-disabled={range ? undefined : disabled}
+      data-invalid={!range && (error || field.invalid) ? '' : undefined}
+      data-disabled={!range && disabled ? '' : undefined}
+      data-state={!range && open ? 'open' : undefined}
+    >
+      {#if segments}
+        {@render segments()}
+      {:else}
+        <DateSegments
+          {field}
+          base={id}
+          labelId={label ? `${id}-label` : undefined}
+          {disabled}
+          {readonly}
+          invalid={!!error || field.invalid}
+        />
+      {/if}
+      {#if TriggerIcon}
+        <button
+          type="button"
+          class="ca-date__trigger"
+          bind:this={triggerEl}
+          aria-label={triggerLabel}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-controls={open ? `${id}-content` : undefined}
+          data-segment="trigger"
+          data-state={open ? 'open' : 'closed'}
+          {disabled}
+          onclick={() => {
+            if (!readonly) onToggle?.();
+          }}
+        >
+          <TriggerIcon size={16} strokeWidth={2} aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+    {#if name}
+      <input
+        {name}
+        value={formValue ?? ''}
+        {required}
+        tabindex="-1"
+        aria-hidden="true"
+        class="ca-sr-only"
+        style="transform:translateX(-100%)"
+      />
+    {/if}
+
+    {#if error}
+      <p id="{id}-err" class="ca-date__hint ca-date__hint--error" role="alert">{error}</p>
+    {:else if description}
+      <p id="{id}-hint" class="ca-date__hint">{description}</p>
+    {/if}
+  </div>
+{/snippet}
+
+{#if range}
+  <div role="group" {id}>{@render body()}</div>
+{:else}
+  {@render body()}
+{/if}
diff --git a/packages/ui/src/lib/components/Date/DatePicker.svelte b/packages/ui/src/lib/components/Date/DatePicker.svelte
index f8b0f760..49e12f10 100644
--- a/packages/ui/src/lib/components/Date/DatePicker.svelte
+++ b/packages/ui/src/lib/components/Date/DatePicker.svelte
@@ -5,10 +5,10 @@
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import { uid } from '../../utils/index.js';
-  import CalendarBody from './CalendarBody.svelte';
+  import CalendarFrame from './CalendarFrame.svelte';
   import { CalendarState } from './calendar-state.svelte.js';
-  import DateSegments from './DateSegments.svelte';
-  import { defaultDate, type WeekStart } from './date-utils.js';
+  import DateFieldShell from './DateFieldShell.svelte';
+  import { defaultDate, focusOwnDay, type WeekStart } from './date-utils.js';
   import { FieldState } from './field-state.svelte.js';
   import PickerPopover from './PickerPopover.svelte';
   import './date.css';
@@ -74,7 +74,6 @@
   }: Props = $props();
 
   const id = uid('dp');
-  const describedBy = $derived(error ? `${id}-err` : description ? `${id}-hint` : undefined);
 
   let wrap = $state<HTMLElement | null>(null);
   let triggerEl = $state<HTMLElement | null>(null);
@@ -134,84 +133,28 @@
     open = false;
     if (restoreFocus) triggerEl?.focus();
   }
-
-  /**
-   * Focus goes to this popover's own active day, without scrolling the page (other calendars may
-   * sit further down).
-   */
-  function focusOwnDay(content: HTMLElement) {
-    queueMicrotask(() => {
-      const day =
-        content.querySelector<HTMLElement>('[data-ca-day][data-focused]') ??
-        content.querySelector<HTMLElement>('[data-ca-day]:not([data-disabled])');
-      day?.focus({ preventScroll: true });
-    });
-  }
 </script>
 
-<div class="ca-date {className}" class:ca-date--sm={size === 'sm'} class:ca-date--error={!!error} class:ca-date--disabled={disabled}>
-  {#if label}
-    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="ca-date__label" id="{id}-label" onclick={() => !disabled && field.focusFirst()}>
-      {label}{#if required}<span class="ca-date__req" aria-hidden="true"> *</span>{/if}
-    </div>
-  {/if}
-
-  <div
-    class="ca-date__wrap"
-    role="group"
-    bind:this={wrap}
-    aria-labelledby={label ? `${id}-label` : undefined}
-    aria-describedby={describedBy}
-    aria-disabled={disabled}
-    data-invalid={error || field.invalid ? '' : undefined}
-    data-disabled={disabled ? '' : undefined}
-    data-state={open ? 'open' : undefined}
-  >
-    <DateSegments
-      {field}
-      base={id}
-      labelId={label ? `${id}-label` : undefined}
-      {disabled}
-      {readonly}
-      invalid={!!error || field.invalid}
-    />
-    <button
-      type="button"
-      class="ca-date__trigger"
-      bind:this={triggerEl}
-      aria-label={triggerLabel ?? t().calendar.openCalendar}
-      aria-haspopup="dialog"
-      aria-expanded={open}
-      aria-controls={open ? `${id}-content` : undefined}
-      data-segment="trigger"
-      data-state={open ? 'open' : 'closed'}
-      {disabled}
-      onclick={() => {
-        if (!readonly) open = !open;
-      }}
-    >
-      <CalendarDays size={16} strokeWidth={2} aria-hidden="true" />
-    </button>
-  </div>
-  {#if name}
-    <input
-      {name}
-      value={value?.toString() ?? ''}
-      {required}
-      tabindex="-1"
-      aria-hidden="true"
-      class="ca-sr-only"
-      style="transform:translateX(-100%)"
-    />
-  {/if}
-
-  {#if error}
-    <p id="{id}-err" class="ca-date__hint ca-date__hint--error" role="alert">{error}</p>
-  {:else if description}
-    <p id="{id}-hint" class="ca-date__hint">{description}</p>
-  {/if}
-</div>
+<DateFieldShell
+  {id}
+  {field}
+  {label}
+  {description}
+  {error}
+  {disabled}
+  {readonly}
+  {required}
+  {size}
+  class={className}
+  {open}
+  triggerIcon={CalendarDays}
+  triggerLabel={triggerLabel ?? t().calendar.openCalendar}
+  bind:triggerEl
+  onToggle={() => (open = !open)}
+  {name}
+  formValue={value?.toString()}
+  bind:wrap
+/>
 
 <PickerPopover
   {open}
@@ -222,15 +165,5 @@
   onclose={() => close()}
   onopen={focusOwnDay}
 >
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-    bind:this={cal.root}
-    class="ca-cal"
-    role="application"
-    aria-label={cal.fullLabel}
-    onkeydown={cal.onkeydown}
-  >
-    <div class="ca-sr-only"><div role="heading" aria-level="2">{cal.fullLabel}</div></div>
-    <CalendarBody state={cal} {disabled} {readonly} />
-  </div>
+  <CalendarFrame state={cal} {disabled} {readonly} />
 </PickerPopover>
diff --git a/packages/ui/src/lib/components/Date/DateRangePicker.svelte b/packages/ui/src/lib/components/Date/DateRangePicker.svelte
index 4a65c0a8..a5bf1c2e 100644
--- a/packages/ui/src/lib/components/Date/DateRangePicker.svelte
+++ b/packages/ui/src/lib/components/Date/DateRangePicker.svelte
@@ -5,10 +5,11 @@
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import { uid } from '../../utils/index.js';
-  import CalendarBody from './CalendarBody.svelte';
+  import CalendarFrame from './CalendarFrame.svelte';
   import { CalendarState } from './calendar-state.svelte.js';
   import DateSegments from './DateSegments.svelte';
-  import { defaultDate, type WeekStart } from './date-utils.js';
+  import DateFieldShell from './DateFieldShell.svelte';
+  import { defaultDate, focusOwnDay, type WeekStart } from './date-utils.js';
   import { FieldState } from './field-state.svelte.js';
   import PickerPopover from './PickerPopover.svelte';
   import type { DateRange } from './types.js';
@@ -69,7 +70,6 @@
   }: Props = $props();
 
   const id = uid('drp');
-  const describedBy = $derived(error ? `${id}-err` : description ? `${id}-hint` : undefined);
 
   let wrap = $state<HTMLElement | null>(null);
   let triggerEl = $state<HTMLElement | null>(null);
@@ -146,81 +146,51 @@
     open = false;
     if (restoreFocus) triggerEl?.focus();
   }
-
-  /** See DatePicker: focus this popover's own day without scrolling the page. */
-  function focusOwnDay(content: HTMLElement) {
-    queueMicrotask(() => {
-      const day =
-        content.querySelector<HTMLElement>('[data-ca-day][data-focused]') ??
-        content.querySelector<HTMLElement>('[data-ca-day]:not([data-disabled])');
-      day?.focus({ preventScroll: true });
-    });
-  }
 </script>
 
-<div role="group" id={id}>
-  <div class="ca-date {className}" class:ca-date--sm={size === 'sm'} class:ca-date--error={!!error} class:ca-date--disabled={disabled}>
-    {#if label}
-      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-      <span class="ca-date__label" id="{id}-label" onclick={() => !disabled && startField.focusFirst()}>
-        {label}{#if required}<span class="ca-date__req" aria-hidden="true"> *</span>{/if}
-      </span>
-    {/if}
-
-    <div
-      class="ca-date__wrap"
-      role="group"
-      aria-label={label}
-      aria-describedby={describedBy}
-      bind:this={wrap}
-    >
-      <DateSegments
-        field={startField}
-        base="{id}-s"
-        tag="div"
-        role="presentation"
-        labelId={label ? `${id}-label` : undefined}
-        {disabled}
-        {readonly}
-        invalid={!!error}
-      />
-      <span class="ca-date__range-sep" aria-hidden="true">–</span>
-      <DateSegments
-        field={endFieldState}
-        base="{id}-e"
-        tag="div"
-        role="presentation"
-        labelId={label ? `${id}-label` : undefined}
-        {disabled}
-        {readonly}
-        invalid={!!error}
-      />
-      <button
-        type="button"
-        class="ca-date__trigger"
-        bind:this={triggerEl}
-        aria-label={triggerLabel ?? t().calendar.openCalendar}
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        aria-controls={open ? `${id}-content` : undefined}
-        data-segment="trigger"
-        data-state={open ? 'open' : 'closed'}
-        {disabled}
-        onclick={() => {
-          if (!readonly) open = !open;
-        }}
-      >
-        <CalendarRange size={16} strokeWidth={2} aria-hidden="true" />
-      </button>
-    </div>
-
-    {#if error}
-      <p id="{id}-err" class="ca-date__hint ca-date__hint--error" role="alert">{error}</p>
-    {:else if description}
-      <p id="{id}-hint" class="ca-date__hint">{description}</p>
-    {/if}
-  </div>
-</div>
+<DateFieldShell
+  range
+  {id}
+  field={startField}
+  {label}
+  {description}
+  {error}
+  {disabled}
+  {readonly}
+  {required}
+  {size}
+  class={className}
+  {open}
+  triggerIcon={CalendarRange}
+  triggerLabel={triggerLabel ?? t().calendar.openCalendar}
+  bind:triggerEl
+  onToggle={() => (open = !open)}
+  bind:wrap
+>
+  {#snippet segments()}
+    <DateSegments
+      field={startField}
+      base="{id}-s"
+      tag="div"
+      role="presentation"
+      labelId={label ? `${id}-label` : undefined}
+      {disabled}
+      {readonly}
+      invalid={!!error}
+    />
+    <span class="ca-date__range-sep" aria-hidden="true">–</span>
+    <DateSegments
+      field={endFieldState}
+      base="{id}-e"
+      tag="div"
+      role="presentation"
+      labelId={label ? `${id}-label` : undefined}
+      {disabled}
+      {readonly}
+      invalid={!!error}
+    />
+  {/snippet}
+</DateFieldShell>
 
 <PickerPopover
   {open}
@@ -231,15 +201,5 @@
   onclose={() => close()}
   onopen={focusOwnDay}
 >
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-    bind:this={cal.root}
-    class="ca-cal"
-    role="application"
-    aria-label={cal.fullLabel}
-    onkeydown={cal.onkeydown}
-  >
-    <div class="ca-sr-only"><div role="heading" aria-level="2">{cal.fullLabel}</div></div>
-    <CalendarBody state={cal} {disabled} {readonly} range />
-  </div>
+  <CalendarFrame state={cal} {disabled} {readonly} range />
 </PickerPopover>
diff --git a/packages/ui/src/lib/components/Date/RangeCalendar.svelte b/packages/ui/src/lib/components/Date/RangeCalendar.svelte
index c5997dc6..56647204 100644
--- a/packages/ui/src/lib/components/Date/RangeCalendar.svelte
+++ b/packages/ui/src/lib/components/Date/RangeCalendar.svelte
@@ -3,7 +3,7 @@
   import { calendar } from '../../i18n/groups/calendar.js';
   import type { DateValue } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
-  import CalendarBody from './CalendarBody.svelte';
+  import CalendarFrame from './CalendarFrame.svelte';
   import { CalendarState } from './calendar-state.svelte.js';
   import type { WeekStart } from './date-utils.js';
   import type { DateRange } from './types.js';
@@ -76,16 +76,4 @@
   });
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  bind:this={cal.root}
-  class="ca-cal ca-cal--standalone {className}"
-  role="application"
-  aria-label={cal.fullLabel}
-  data-disabled={disabled ? '' : undefined}
-  data-readonly={readonly ? '' : undefined}
-  onkeydown={cal.onkeydown}
->
-  <div class="ca-sr-only"><div role="heading" aria-level="2">{cal.fullLabel}</div></div>
-  <CalendarBody state={cal} {disabled} {readonly} range />
-</div>
+<CalendarFrame state={cal} {disabled} {readonly} range standalone class={className} />
diff --git a/packages/ui/src/lib/components/Date/TimeField.svelte b/packages/ui/src/lib/components/Date/TimeField.svelte
index 9f827b2e..2d05ac49 100644
--- a/packages/ui/src/lib/components/Date/TimeField.svelte
+++ b/packages/ui/src/lib/components/Date/TimeField.svelte
@@ -2,7 +2,7 @@
   import { Time } from '@internationalized/date';
   import { announce } from '../../utils/announce.js';
   import { uid } from '../../utils/index.js';
-  import DateSegments from './DateSegments.svelte';
+  import DateFieldShell from './DateFieldShell.svelte';
   import { FieldState } from './field-state.svelte.js';
   import type { TimeValue } from './types.js';
   import './date.css';
@@ -54,7 +54,6 @@
 
   const id = uid('tmf');
 
-  const describedBy = $derived(error ? `${id}-err` : description ? `${id}-hint` : undefined);
   let wrap = $state<HTMLElement | null>(null);
 
   const basePlaceholder = $derived(placeholder ?? new Time(0, 0, 0));
@@ -82,48 +81,18 @@
   $effect(() => field.sync(value));
 </script>
 
-<div class="ca-date {className}" class:ca-date--sm={size === 'sm'} class:ca-date--error={!!error} class:ca-date--disabled={disabled}>
-  {#if label}
-    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="ca-date__label" id="{id}-label" onclick={() => !disabled && field.focusFirst()}>
-      {label}{#if required}<span class="ca-date__req" aria-hidden="true"> *</span>{/if}
-    </div>
-  {/if}
-
-  <div
-    class="ca-date__wrap"
-    role="group"
-    bind:this={wrap}
-    aria-labelledby={label ? `${id}-label` : undefined}
-    aria-describedby={describedBy}
-    aria-disabled={disabled}
-    data-invalid={error || field.invalid ? '' : undefined}
-    data-disabled={disabled ? '' : undefined}
-  >
-    <DateSegments
-      {field}
-      base={id}
-      labelId={label ? `${id}-label` : undefined}
-      {disabled}
-      {readonly}
-      invalid={!!error || field.invalid}
-    />
-  </div>
-  {#if name}
-    <input
-      {name}
-      value={value?.toString() ?? ''}
-      {required}
-      tabindex="-1"
-      aria-hidden="true"
-      class="ca-sr-only"
-      style="transform:translateX(-100%)"
-    />
-  {/if}
-
-  {#if error}
-    <p id="{id}-err" class="ca-date__hint ca-date__hint--error" role="alert">{error}</p>
-  {:else if description}
-    <p id="{id}-hint" class="ca-date__hint">{description}</p>
-  {/if}
-</div>
+<DateFieldShell
+  {id}
+  {field}
+  {label}
+  {description}
+  {error}
+  {disabled}
+  {readonly}
+  {required}
+  {size}
+  class={className}
+  {name}
+  formValue={value?.toString()}
+  bind:wrap
+/>
diff --git a/packages/ui/src/lib/components/Date/date-utils.ts b/packages/ui/src/lib/components/Date/date-utils.ts
index 6dd9dd70..14d58b90 100644
--- a/packages/ui/src/lib/components/Date/date-utils.ts
+++ b/packages/ui/src/lib/components/Date/date-utils.ts
@@ -216,3 +216,16 @@ export function placeholderFor(part: string, locale: string): string {
 	if (part === "hour" || part === "minute" || part === "second") return "––";
 	return "";
 }
+
+/**
+ * Moves focus to a picker popover's own active day, without scrolling the page (other calendars
+ * may sit further down).
+ */
+export function focusOwnDay(content: HTMLElement): void {
+	queueMicrotask(() => {
+		const day =
+			content.querySelector<HTMLElement>("[data-ca-day][data-focused]") ??
+			content.querySelector<HTMLElement>("[data-ca-day]:not([data-disabled])");
+		day?.focus({ preventScroll: true });
+	});
+}