From 093943832edf8502cf7456ad46f4297d50ba4a8f Mon Sep 17 00:00:00 2001
From: Kyle <122591+kyleknighted@users.noreply.github.com>
Date: Wed, 29 Apr 2026 15:17:58 +0000
Subject: [PATCH 1/5] feat(DateRangePicker): add `trigger: 'button' | 'input'`
 prop

Default remains the existing outline-button trigger. The new `trigger="input"` variant renders a full-width <button> visually styled to match Radix `TextField.Root` (surface, size 2) with a leading CalendarIcon slot, so the picker lines up with adjacent form inputs. Applies to both single and range modes.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../DateRangePicker.module.css                |  58 +++++++++
 .../DateRangePicker.stories.tsx               | 110 ++++++++++++++++++
 .../DateRangePicker/DateRangePicker.tsx       |  20 ++--
 .../DateRangePicker/DateRangePicker.types.ts  |  12 ++
 .../DateRangePicker/parts/DateTrigger.tsx     |  78 +++++++++++++
 .../DateRangePicker/parts/SingleCalendar.tsx  |  17 +--
 6 files changed, 279 insertions(+), 16 deletions(-)
 create mode 100644 lib/compound/DateRangePicker/parts/DateTrigger.tsx

diff --git a/lib/compound/DateRangePicker/DateRangePicker.module.css b/lib/compound/DateRangePicker/DateRangePicker.module.css
index f22c679..d1c7bc9 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.module.css
+++ b/lib/compound/DateRangePicker/DateRangePicker.module.css
@@ -88,3 +88,61 @@
   color: var(--accent-11);
   font-weight: 500;
 }
+
+/*
+ * Input-shaped trigger. Mimics @radix-ui/themes `TextField.Root` (surface
+ * variant, size 2) so the picker lines up with adjacent form inputs, while
+ * remaining a single focusable <button> for accessible keyboard interaction.
+ */
+.inputTrigger {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-2);
+  height: var(--space-6);
+  min-width: 0;
+  width: 100%;
+  border: 1px solid var(--gray-a7);
+  border-radius: var(--radius-2);
+  background-color: var(--color-surface);
+  color: var(--gray-12);
+  font-family: var(--default-font-family);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  text-align: left;
+  cursor: pointer;
+}
+
+.inputTrigger:hover:not(:disabled) {
+  border-color: var(--gray-a8);
+}
+
+.inputTrigger:focus-visible {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.inputTrigger:disabled {
+  color: var(--gray-a9);
+  background-color: var(--gray-a2);
+  cursor: not-allowed;
+}
+
+.inputTriggerIcon {
+  color: var(--gray-a11);
+  flex-shrink: 0;
+}
+
+.inputTriggerLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inputTriggerPlaceholder {
+  color: var(--gray-a10);
+}
diff --git a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
index 2d75fe4..f9648aa 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
@@ -189,6 +189,84 @@ export const SinglePlaceholder: Story = {
   },
 };
 
+// ── Input-trigger variant ───────────────────────────────────────────────────
+
+const WIDE_CONTAINER_WIDTH = 320;
+
+export const InputTrigger: Story = {
+  args: {
+    fromDate: FIXED_FROM_DATE,
+    toDate: FIXED_TO_DATE,
+    trigger: 'input',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const InputTriggerEmpty: Story = {
+  args: {
+    trigger: 'input',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleInputTrigger: Story = {
+  args: {
+    mode: 'single',
+    value: FIXED_FROM_DATE,
+    trigger: 'input',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleInputTriggerEmpty: Story = {
+  args: {
+    mode: 'single',
+    trigger: 'input',
+    placeholder: 'Select due date',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const InputTriggerDisabled: Story = {
+  args: {
+    mode: 'single',
+    value: FIXED_FROM_DATE,
+    trigger: 'input',
+    disabled: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 // ── Chromatic visual regression: popover open states ────────────────────────
 //
 // The Radix popover renders into a portal at document.body, so the opened
@@ -227,3 +305,35 @@ export const SingleOpenPopoverNoSelection: Story = {
   },
   play: openPopoverPlay,
 };
+
+export const InputTriggerOpenPopover: Story = {
+  args: {
+    fromDate: FIXED_FROM_DATE,
+    toDate: FIXED_TO_DATE,
+    trigger: 'input',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: openPopoverPlay,
+};
+
+export const SingleInputTriggerOpenPopover: Story = {
+  args: {
+    mode: 'single',
+    value: FIXED_FROM_DATE,
+    trigger: 'input',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: WIDE_CONTAINER_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: openPopoverPlay,
+};
diff --git a/lib/compound/DateRangePicker/DateRangePicker.tsx b/lib/compound/DateRangePicker/DateRangePicker.tsx
index 4055e98..bdb6465 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.tsx
@@ -2,9 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Flex, Theme } from '@radix-ui/themes';
-import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from '@radix-ui/react-popover';
+import { Popover, PopoverContent, PopoverPortal } from '@radix-ui/react-popover';
 import { addDays, format } from 'date-fns';
-import { CalendarIcon } from '@phosphor-icons/react';
 import { type DateRange, type DayPickerProps, DayPicker } from 'react-day-picker';
 
 import styles from './DateRangePicker.module.css';
@@ -15,6 +14,7 @@ import type {
 
 import { ContentWrapper } from '../../atom';
 import DateSelection from './parts/DateSelection';
+import DateTrigger from './parts/DateTrigger';
 import NextMonthButton from './parts/NextMonthButton';
 import PresetsColumn from './parts/PresetsColumn';
 import SingleCalendar from './parts/SingleCalendar';
@@ -41,12 +41,15 @@ const formatDateRangeLabel = (range: DateRange | undefined) => {
   return `${format(range.from, fromFormat)} - ${format(range.to, 'LLL dd, y')}`;
 };
 
+const RANGE_PLACEHOLDER = 'Pick a date range';
+
 const RangeCalendar = ({
   fromDate: fromDateProp,
   toDate: toDateProp,
   onChange,
   disabled,
   presets = DEFAULT_DATE_RANGE_PRESETS,
+  trigger = 'button',
 }: Omit<IDateRangePickerRangeProps, 'mode'>) => {
   const isControlled = fromDateProp !== undefined || toDateProp !== undefined;
 
@@ -120,12 +123,13 @@ const RangeCalendar = ({
         }
       }}
     >
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" disabled={disabled}>
-          <CalendarIcon />
-          {displayDate?.from ? formatDateRangeLabel(displayDate) : <span>Pick a date range</span>}
-        </Button>
-      </PopoverTrigger>
+      <DateTrigger
+        variant={trigger}
+        label={formatDateRangeLabel(displayDate)}
+        placeholder={RANGE_PLACEHOLDER}
+        disabled={disabled}
+        ariaLabel="Choose a date range"
+      />
       <PopoverPortal>
         <Theme asChild>
         <PopoverContent
diff --git a/lib/compound/DateRangePicker/DateRangePicker.types.ts b/lib/compound/DateRangePicker/DateRangePicker.types.ts
index 3ae5d37..d63a971 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.types.ts
+++ b/lib/compound/DateRangePicker/DateRangePicker.types.ts
@@ -22,6 +22,18 @@ export interface IDatePreset {
 
 interface IDateRangePickerCommonProps {
   readonly disabled?: boolean;
+  /**
+   * Visual variant of the trigger that opens the popover.
+   * - `'button'` (default): a compact outline button with a leading calendar
+   *   icon and the formatted label.
+   * - `'input'`: a readonly text-field with a leading calendar icon slot — use
+   *   this when the picker sits alongside other form inputs so the visual
+   *   rhythm lines up.
+   *
+   * The popover contents and keyboard/selection semantics are identical across
+   * both variants.
+   */
+  readonly trigger?: 'button' | 'input';
 }
 
 /** Props for {@link DateRangePicker} in range mode (the default). */
diff --git a/lib/compound/DateRangePicker/parts/DateTrigger.tsx b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
new file mode 100644
index 0000000..62abd67
--- /dev/null
+++ b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { Button } from '@radix-ui/themes';
+import { PopoverTrigger } from '@radix-ui/react-popover';
+import { CalendarIcon } from '@phosphor-icons/react';
+import { forwardRef } from 'react';
+
+import styles from '../DateRangePicker.module.css';
+
+interface IDateTriggerProps {
+  /** Variant of the trigger. `'button'` renders a compact outline button; `'input'` renders a full-width trigger visually styled like a text input with a leading calendar icon. */
+  readonly variant: 'button' | 'input';
+  /** Formatted label for the selected value — rendered inside the trigger when non-empty. */
+  readonly label: string | null;
+  /** Placeholder shown when `label` is empty. */
+  readonly placeholder: string;
+  /** Whether the trigger is disabled. */
+  readonly disabled?: boolean;
+  /** Accessible name announced when focus lands on the trigger (for screen readers). */
+  readonly ariaLabel: string;
+}
+
+/**
+ * Renders the trigger element that opens the date picker popover. Always used
+ * as a child of a Radix `<Popover>`; `<PopoverTrigger asChild>` attaches the
+ * toggle behaviour to the underlying `<button>`.
+ *
+ * The `'input'` variant is a `<button>` styled to mimic `TextField.Root`
+ * (surface variant, size 2) so the picker lines up with adjacent form inputs
+ * while remaining a single focusable element with full keyboard support.
+ */
+const DateTrigger = forwardRef<HTMLButtonElement, IDateTriggerProps>(
+  ({ variant, label, placeholder, disabled, ariaLabel }, ref) => {
+    if (variant === 'input') {
+      return (
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            className={styles.inputTrigger}
+          >
+            <CalendarIcon className={styles.inputTriggerIcon} aria-hidden />
+            {label ? (
+              <span className={styles.inputTriggerLabel}>{label}</span>
+            ) : (
+              <span
+                className={`${styles.inputTriggerLabel} ${styles.inputTriggerPlaceholder}`}
+              >
+                {placeholder}
+              </span>
+            )}
+          </button>
+        </PopoverTrigger>
+      );
+    }
+
+    return (
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          aria-label={ariaLabel}
+        >
+          <CalendarIcon />
+          {label ? label : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+    );
+  }
+);
+
+DateTrigger.displayName = 'DateTrigger';
+
+export default DateTrigger;
diff --git a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
index 4da3b8e..60242f7 100644
--- a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
+++ b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
@@ -6,10 +6,8 @@ import {
   Popover,
   PopoverContent,
   PopoverPortal,
-  PopoverTrigger,
 } from '@radix-ui/react-popover';
 import { format } from 'date-fns';
-import { CalendarIcon } from '@phosphor-icons/react';
 import { type DayPickerProps, DayPicker } from 'react-day-picker';
 
 import styles from '../DateRangePicker.module.css';
@@ -17,6 +15,7 @@ import type { IDateRangePickerSingleProps } from '../DateRangePicker.types';
 
 import { ContentWrapper } from '../../../atom';
 import DateSelection from './DateSelection';
+import DateTrigger from './DateTrigger';
 import NextMonthButton from './NextMonthButton';
 import SinglePresetsColumn from './SinglePresetsColumn';
 import { DEFAULT_DATE_PRESETS } from './presets';
@@ -41,6 +40,7 @@ const SingleCalendar = ({
   disabled,
   placeholder = DEFAULT_PLACEHOLDER,
   presets = DEFAULT_DATE_PRESETS,
+  trigger = 'button',
 }: Omit<IDateRangePickerSingleProps, 'mode'>) => {
   const isControlled = value !== undefined;
   const controlledDate = value ?? undefined;
@@ -107,12 +107,13 @@ const SingleCalendar = ({
         }
       }}
     >
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" disabled={disabled}>
-          <CalendarIcon />
-          {displayDate ? formatDateLabel(displayDate) : <span>{placeholder}</span>}
-        </Button>
-      </PopoverTrigger>
+      <DateTrigger
+        variant={trigger}
+        label={formatDateLabel(displayDate)}
+        placeholder={placeholder}
+        disabled={disabled}
+        ariaLabel="Choose a date"
+      />
       <PopoverPortal>
         <Theme asChild>
           <PopoverContent

From bb07b544bfc6509eee89f6726ac6f6e9585daaf8 Mon Sep 17 00:00:00 2001
From: Kyle <122591+kyleknighted@users.noreply.github.com>
Date: Wed, 29 Apr 2026 15:34:15 +0000
Subject: [PATCH 2/5] refactor(DateTrigger): use Radix TextField.Root +
 PopoverAnchor for input variant

Per review feedback on #103, use a real Radix `TextField.Root` (readonly) with a leading `TextField.Slot` for the input trigger, so theme/size/variant styling is inherited from Radix instead of re-implemented with custom CSS. Drives the popover via `PopoverAnchor` + manual `onClick` / `onKeyDown` (Enter, Space, ArrowDown) handlers so both the input text area and the slot icon open the popover, and keyboard focus + activation work natively. `aria-expanded` + `aria-haspopup="dialog"` on the input keep AT in sync. Verified in Storybook: click-input, click-slot, and Enter all open; Escape closes; selection + Apply round-trip updates the value.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../DateRangePicker.module.css                | 58 -------------
 .../DateRangePicker.stories.tsx               |  5 +-
 .../DateRangePicker/DateRangePicker.tsx       |  2 +
 .../DateRangePicker/parts/DateTrigger.tsx     | 86 ++++++++++++-------
 .../DateRangePicker/parts/SingleCalendar.tsx  |  2 +
 5 files changed, 61 insertions(+), 92 deletions(-)

diff --git a/lib/compound/DateRangePicker/DateRangePicker.module.css b/lib/compound/DateRangePicker/DateRangePicker.module.css
index d1c7bc9..f22c679 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.module.css
+++ b/lib/compound/DateRangePicker/DateRangePicker.module.css
@@ -88,61 +88,3 @@
   color: var(--accent-11);
   font-weight: 500;
 }
-
-/*
- * Input-shaped trigger. Mimics @radix-ui/themes `TextField.Root` (surface
- * variant, size 2) so the picker lines up with adjacent form inputs, while
- * remaining a single focusable <button> for accessible keyboard interaction.
- */
-.inputTrigger {
-  all: unset;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0 var(--space-2);
-  height: var(--space-6);
-  min-width: 0;
-  width: 100%;
-  border: 1px solid var(--gray-a7);
-  border-radius: var(--radius-2);
-  background-color: var(--color-surface);
-  color: var(--gray-12);
-  font-family: var(--default-font-family);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  text-align: left;
-  cursor: pointer;
-}
-
-.inputTrigger:hover:not(:disabled) {
-  border-color: var(--gray-a8);
-}
-
-.inputTrigger:focus-visible {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-
-.inputTrigger:disabled {
-  color: var(--gray-a9);
-  background-color: var(--gray-a2);
-  cursor: not-allowed;
-}
-
-.inputTriggerIcon {
-  color: var(--gray-a11);
-  flex-shrink: 0;
-}
-
-.inputTriggerLabel {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.inputTriggerPlaceholder {
-  color: var(--gray-a10);
-}
diff --git a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
index f9648aa..ef612e7 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
@@ -274,7 +274,10 @@ export const InputTriggerDisabled: Story = {
 
 const openPopoverPlay = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
-  const trigger = await canvas.findByRole('button');
+  // Button variant renders a <button>; input variant renders a <TextField.Root>
+  // whose accessible role is `textbox`. Pick whichever exists.
+  const trigger =
+    canvas.queryByRole('textbox') ?? (await canvas.findByRole('button'));
   await userEvent.click(trigger);
 
   const body = within(document.body);
diff --git a/lib/compound/DateRangePicker/DateRangePicker.tsx b/lib/compound/DateRangePicker/DateRangePicker.tsx
index bdb6465..2ba8630 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.tsx
@@ -129,6 +129,8 @@ const RangeCalendar = ({
         placeholder={RANGE_PLACEHOLDER}
         disabled={disabled}
         ariaLabel="Choose a date range"
+        isOpen={isPopoverOpen}
+        onOpenRequest={() => setIsPopoverOpen(true)}
       />
       <PopoverPortal>
         <Theme asChild>
diff --git a/lib/compound/DateRangePicker/parts/DateTrigger.tsx b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
index 62abd67..f6e42b0 100644
--- a/lib/compound/DateRangePicker/parts/DateTrigger.tsx
+++ b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
@@ -1,14 +1,12 @@
 'use client';
 
-import { Button } from '@radix-ui/themes';
-import { PopoverTrigger } from '@radix-ui/react-popover';
+import { Button, TextField } from '@radix-ui/themes';
+import { PopoverAnchor, PopoverTrigger } from '@radix-ui/react-popover';
 import { CalendarIcon } from '@phosphor-icons/react';
-import { forwardRef } from 'react';
-
-import styles from '../DateRangePicker.module.css';
+import { forwardRef, type KeyboardEvent } from 'react';
 
 interface IDateTriggerProps {
-  /** Variant of the trigger. `'button'` renders a compact outline button; `'input'` renders a full-width trigger visually styled like a text input with a leading calendar icon. */
+  /** Variant of the trigger. `'button'` renders a compact outline button; `'input'` renders a readonly Radix `TextField.Root` with a leading calendar icon slot. */
   readonly variant: 'button' | 'input';
   /** Formatted label for the selected value — rendered inside the trigger when non-empty. */
   readonly label: string | null;
@@ -16,50 +14,72 @@ interface IDateTriggerProps {
   readonly placeholder: string;
   /** Whether the trigger is disabled. */
   readonly disabled?: boolean;
-  /** Accessible name announced when focus lands on the trigger (for screen readers). */
+  /** Accessible name announced when focus lands on the trigger. */
   readonly ariaLabel: string;
+  /** Current open state of the parent popover (used only by the input variant). */
+  readonly isOpen: boolean;
+  /** Called with `true` when the input variant wants the popover to open (click / Enter / Space / ArrowDown). */
+  readonly onOpenRequest: () => void;
 }
 
 /**
- * Renders the trigger element that opens the date picker popover. Always used
- * as a child of a Radix `<Popover>`; `<PopoverTrigger asChild>` attaches the
- * toggle behaviour to the underlying `<button>`.
+ * Renders the trigger element that opens the date picker popover.
  *
- * The `'input'` variant is a `<button>` styled to mimic `TextField.Root`
- * (surface variant, size 2) so the picker lines up with adjacent form inputs
- * while remaining a single focusable element with full keyboard support.
+ * - **`variant='button'`** — uses `<PopoverTrigger asChild>` with a Radix
+ *   `<Button variant="outline">`; the popover's open state is fully owned by
+ *   the built-in trigger.
+ * - **`variant='input'`** — uses `<PopoverAnchor asChild>` with a readonly
+ *   `<TextField.Root>` + leading calendar icon slot, and manually wires
+ *   click / keyboard handlers to `onOpenRequest` so the popover opens on
+ *   click (including on the slot icon) and on Enter / Space / ArrowDown.
+ *   Closing is handled by Radix's built-in outside-click + Escape behaviour
+ *   on the popover content itself.
  */
-const DateTrigger = forwardRef<HTMLButtonElement, IDateTriggerProps>(
-  ({ variant, label, placeholder, disabled, ariaLabel }, ref) => {
+const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
+  (
+    { variant, label, placeholder, disabled, ariaLabel, isOpen, onOpenRequest },
+    ref
+  ) => {
     if (variant === 'input') {
+      const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (disabled) return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+          event.preventDefault();
+          onOpenRequest();
+        }
+      };
+
+      const handleOpen = () => {
+        if (disabled) return;
+        onOpenRequest();
+      };
+
       return (
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            type="button"
+        <PopoverAnchor asChild>
+          <TextField.Root
+            ref={ref as React.Ref<HTMLInputElement>}
+            readOnly
+            value={label ?? ''}
+            placeholder={placeholder}
             disabled={disabled}
             aria-label={ariaLabel}
-            className={styles.inputTrigger}
+            aria-haspopup="dialog"
+            aria-expanded={isOpen}
+            onClick={handleOpen}
+            onKeyDown={handleKeyDown}
           >
-            <CalendarIcon className={styles.inputTriggerIcon} aria-hidden />
-            {label ? (
-              <span className={styles.inputTriggerLabel}>{label}</span>
-            ) : (
-              <span
-                className={`${styles.inputTriggerLabel} ${styles.inputTriggerPlaceholder}`}
-              >
-                {placeholder}
-              </span>
-            )}
-          </button>
-        </PopoverTrigger>
+            <TextField.Slot side="left" onClick={handleOpen}>
+              <CalendarIcon />
+            </TextField.Slot>
+          </TextField.Root>
+        </PopoverAnchor>
       );
     }
 
     return (
       <PopoverTrigger asChild>
         <Button
-          ref={ref}
+          ref={ref as React.Ref<HTMLButtonElement>}
           type="button"
           variant="outline"
           disabled={disabled}
diff --git a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
index 60242f7..a2ccfa2 100644
--- a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
+++ b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
@@ -113,6 +113,8 @@ const SingleCalendar = ({
         placeholder={placeholder}
         disabled={disabled}
         ariaLabel="Choose a date"
+        isOpen={isPopoverOpen}
+        onOpenRequest={() => setIsPopoverOpen(true)}
       />
       <PopoverPortal>
         <Theme asChild>

From c3d4f1fc19dcfe37e0476b1e45a47ff3f8c7ffc2 Mon Sep 17 00:00:00 2001
From: Kyle <122591+kyleknighted@users.noreply.github.com>
Date: Wed, 29 Apr 2026 15:48:47 +0000
Subject: [PATCH 3/5] fix(DateTrigger): role=combobox + aria-controls for axe
 aria-expanded validity

axe flagged `aria-expanded` as an invalid ARIA attribute on a plain `<input>`. Adding `role="combobox"` makes `aria-expanded` valid (combobox is the correct semantics for a readonly input that opens a popup), and `aria-controls={popoverId}` ties it to the PopoverContent for AT. PopoverContent gains a matching `id` generated with React.useId() in both single and range modes.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../DateRangePicker.stories.tsx               |  5 +++--
 .../DateRangePicker/DateRangePicker.tsx       |  5 ++++-
 .../DateRangePicker/parts/DateTrigger.tsx     | 20 ++++++++++++++++++-
 .../DateRangePicker/parts/SingleCalendar.tsx  |  5 ++++-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
index ef612e7..e2b5add 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.stories.tsx
@@ -275,9 +275,10 @@ export const InputTriggerDisabled: Story = {
 const openPopoverPlay = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   // Button variant renders a <button>; input variant renders a <TextField.Root>
-  // whose accessible role is `textbox`. Pick whichever exists.
+  // with `role="combobox"` (required for `aria-expanded` to be valid on the
+  // underlying <input>). Pick whichever exists.
   const trigger =
-    canvas.queryByRole('textbox') ?? (await canvas.findByRole('button'));
+    canvas.queryByRole('combobox') ?? (await canvas.findByRole('button'));
   await userEvent.click(trigger);
 
   const body = within(document.body);
diff --git a/lib/compound/DateRangePicker/DateRangePicker.tsx b/lib/compound/DateRangePicker/DateRangePicker.tsx
index 2ba8630..8d63d1f 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button, Flex, Theme } from '@radix-ui/themes';
 import { Popover, PopoverContent, PopoverPortal } from '@radix-ui/react-popover';
 import { addDays, format } from 'date-fns';
@@ -65,6 +65,7 @@ const RangeCalendar = ({
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const popoverContentRef = useRef<HTMLDivElement>(null);
+  const popoverId = useId();
 
   const displayDate = isControlled && !isPopoverOpen ? controlledDate : draftDate;
   const [today, setToday] = useState(() => new Date());
@@ -131,11 +132,13 @@ const RangeCalendar = ({
         ariaLabel="Choose a date range"
         isOpen={isPopoverOpen}
         onOpenRequest={() => setIsPopoverOpen(true)}
+        popoverId={popoverId}
       />
       <PopoverPortal>
         <Theme asChild>
         <PopoverContent
           ref={popoverContentRef}
+          id={popoverId}
           align="start"
           sideOffset={4}
           collisionPadding={10}
diff --git a/lib/compound/DateRangePicker/parts/DateTrigger.tsx b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
index f6e42b0..f6b1966 100644
--- a/lib/compound/DateRangePicker/parts/DateTrigger.tsx
+++ b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
@@ -20,6 +20,8 @@ interface IDateTriggerProps {
   readonly isOpen: boolean;
   /** Called with `true` when the input variant wants the popover to open (click / Enter / Space / ArrowDown). */
   readonly onOpenRequest: () => void;
+  /** Id of the `PopoverContent`. Used only by the input variant to wire `role="combobox"` + `aria-controls` so `aria-expanded` is valid for axe. */
+  readonly popoverId: string;
 }
 
 /**
@@ -37,7 +39,16 @@ interface IDateTriggerProps {
  */
 const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
   (
-    { variant, label, placeholder, disabled, ariaLabel, isOpen, onOpenRequest },
+    {
+      variant,
+      label,
+      placeholder,
+      disabled,
+      ariaLabel,
+      isOpen,
+      onOpenRequest,
+      popoverId,
+    },
     ref
   ) => {
     if (variant === 'input') {
@@ -58,6 +69,13 @@ const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
         <PopoverAnchor asChild>
           <TextField.Root
             ref={ref as React.Ref<HTMLInputElement>}
+            /*
+             * `role="combobox"` is required for `aria-expanded` to be valid on
+             * a plain `<input>` (axe flags it otherwise). `aria-controls`
+             * pairs the combobox with the dialog that holds the calendar.
+             */
+            role="combobox"
+            aria-controls={popoverId}
             readOnly
             value={label ?? ''}
             placeholder={placeholder}
diff --git a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
index a2ccfa2..97c07f3 100644
--- a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
+++ b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { Button, Flex, Theme } from '@radix-ui/themes';
 import {
   Popover,
@@ -49,6 +49,7 @@ const SingleCalendar = ({
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const popoverContentRef = useRef<HTMLDivElement>(null);
+  const popoverId = useId();
 
   const displayDate = isControlled && !isPopoverOpen ? controlledDate : draftDate;
   const [today, setToday] = useState(() => new Date());
@@ -115,11 +116,13 @@ const SingleCalendar = ({
         ariaLabel="Choose a date"
         isOpen={isPopoverOpen}
         onOpenRequest={() => setIsPopoverOpen(true)}
+        popoverId={popoverId}
       />
       <PopoverPortal>
         <Theme asChild>
           <PopoverContent
             ref={popoverContentRef}
+            id={popoverId}
             align="start"
             sideOffset={4}
             collisionPadding={10}

From 975a01fb89b0169b01f262f44fa0aac35e47d1c3 Mon Sep 17 00:00:00 2001
From: Kyle <122591+kyleknighted@users.noreply.github.com>
Date: Wed, 29 Apr 2026 16:29:52 +0000
Subject: [PATCH 4/5] fix(DateRangePicker): run popover-open init for input
 trigger path

Radix's controlled Popover does not fire `onOpenChange` when the `open` prop is mutated externally. The input trigger path calls `setIsPopoverOpen(true)` directly (via `PopoverAnchor` + manual event handlers), so the today/draftDate reset logic was never running for that variant \u2014 the popover would show stale `today` and stale draft selection from the previous open.

Extracts a shared `handleOpenPopover` helper and invokes it from both code paths in RangeCalendar and SingleCalendar.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../DateRangePicker/DateRangePicker.tsx       | 19 +++++++++++++++----
 .../DateRangePicker/parts/SingleCalendar.tsx  | 19 +++++++++++++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/lib/compound/DateRangePicker/DateRangePicker.tsx b/lib/compound/DateRangePicker/DateRangePicker.tsx
index 8d63d1f..c768daf 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.tsx
@@ -113,14 +113,25 @@ const RangeCalendar = ({
     setDraftDate(range);
   };
 
+  // Shared popover-open initialization. Called from both `onOpenChange(true)`
+  // (button trigger path — Radix-initiated) and `onOpenRequest` (input trigger
+  // path — externally-initiated via `PopoverAnchor`). Radix does not fire
+  // `onOpenChange` when the controlled `open` prop is changed from outside, so
+  // the input variant needs to run this initialization explicitly.
+  const handleOpenPopover = () => {
+    setIsPopoverOpen(true);
+    setToday(new Date());
+    setDraftDate(isControlled ? controlledDate : draftDate);
+  };
+
   return (
     <Popover
       open={isPopoverOpen}
       onOpenChange={(open) => {
-        setIsPopoverOpen(open);
         if (open) {
-          setToday(new Date());
-          setDraftDate(isControlled ? controlledDate : draftDate);
+          handleOpenPopover();
+        } else {
+          setIsPopoverOpen(false);
         }
       }}
     >
@@ -131,7 +142,7 @@ const RangeCalendar = ({
         disabled={disabled}
         ariaLabel="Choose a date range"
         isOpen={isPopoverOpen}
-        onOpenRequest={() => setIsPopoverOpen(true)}
+        onOpenRequest={handleOpenPopover}
         popoverId={popoverId}
       />
       <PopoverPortal>
diff --git a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
index 97c07f3..d2d931d 100644
--- a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
+++ b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
@@ -97,14 +97,25 @@ const SingleCalendar = ({
     setDraftDate(date);
   };
 
+  // Shared popover-open initialization. Called from both `onOpenChange(true)`
+  // (button trigger path — Radix-initiated) and `onOpenRequest` (input trigger
+  // path — externally-initiated via `PopoverAnchor`). Radix does not fire
+  // `onOpenChange` when the controlled `open` prop is changed from outside, so
+  // the input variant needs to run this initialization explicitly.
+  const handleOpenPopover = () => {
+    setIsPopoverOpen(true);
+    setToday(new Date());
+    setDraftDate(isControlled ? controlledDate : draftDate);
+  };
+
   return (
     <Popover
       open={isPopoverOpen}
       onOpenChange={(open) => {
-        setIsPopoverOpen(open);
         if (open) {
-          setToday(new Date());
-          setDraftDate(isControlled ? controlledDate : draftDate);
+          handleOpenPopover();
+        } else {
+          setIsPopoverOpen(false);
         }
       }}
     >
@@ -115,7 +126,7 @@ const SingleCalendar = ({
         disabled={disabled}
         ariaLabel="Choose a date"
         isOpen={isPopoverOpen}
-        onOpenRequest={() => setIsPopoverOpen(true)}
+        onOpenRequest={handleOpenPopover}
         popoverId={popoverId}
       />
       <PopoverPortal>

From 204c689aa426ab632d4894211f378f5df9ebbddd Mon Sep 17 00:00:00 2001
From: Kyle <122591+kyleknighted@users.noreply.github.com>
Date: Wed, 29 Apr 2026 16:31:11 +0000
Subject: [PATCH 5/5] fix(DateTrigger): toggle behavior + prevent slot/root
 double-fire

Addresses Copilot review feedback on #103:

1. Click/Enter/Space on the input trigger now toggle the popover open/closed (matching PopoverTrigger's behavior on the button variant) rather than always opening. ArrowDown still only opens.

2. Calendar-icon slot click stops propagation so the toggle doesn't fire twice (once from the slot, once bubbling to TextField.Root).

3. Renames the prop from onOpenRequest to onToggleRequest(nextOpen) to match the new contract; doc comment updated.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../DateRangePicker/DateRangePicker.tsx       | 18 +++++---
 .../DateRangePicker/parts/DateTrigger.tsx     | 45 ++++++++++++-------
 .../DateRangePicker/parts/SingleCalendar.tsx  | 18 +++++---
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/lib/compound/DateRangePicker/DateRangePicker.tsx b/lib/compound/DateRangePicker/DateRangePicker.tsx
index c768daf..6c4803e 100644
--- a/lib/compound/DateRangePicker/DateRangePicker.tsx
+++ b/lib/compound/DateRangePicker/DateRangePicker.tsx
@@ -114,16 +114,24 @@ const RangeCalendar = ({
   };
 
   // Shared popover-open initialization. Called from both `onOpenChange(true)`
-  // (button trigger path — Radix-initiated) and `onOpenRequest` (input trigger
-  // path — externally-initiated via `PopoverAnchor`). Radix does not fire
-  // `onOpenChange` when the controlled `open` prop is changed from outside, so
-  // the input variant needs to run this initialization explicitly.
+  // (button trigger path — Radix-initiated) and `onToggleRequest(true)` (input
+  // trigger path — externally-initiated via `PopoverAnchor`). Radix does not
+  // fire `onOpenChange` when the controlled `open` prop is changed from
+  // outside, so the input variant needs to run this initialization explicitly.
   const handleOpenPopover = () => {
     setIsPopoverOpen(true);
     setToday(new Date());
     setDraftDate(isControlled ? controlledDate : draftDate);
   };
 
+  const handleToggleRequest = (nextOpen: boolean) => {
+    if (nextOpen) {
+      handleOpenPopover();
+    } else {
+      setIsPopoverOpen(false);
+    }
+  };
+
   return (
     <Popover
       open={isPopoverOpen}
@@ -142,7 +150,7 @@ const RangeCalendar = ({
         disabled={disabled}
         ariaLabel="Choose a date range"
         isOpen={isPopoverOpen}
-        onOpenRequest={handleOpenPopover}
+        onToggleRequest={handleToggleRequest}
         popoverId={popoverId}
       />
       <PopoverPortal>
diff --git a/lib/compound/DateRangePicker/parts/DateTrigger.tsx b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
index f6b1966..6a28e7f 100644
--- a/lib/compound/DateRangePicker/parts/DateTrigger.tsx
+++ b/lib/compound/DateRangePicker/parts/DateTrigger.tsx
@@ -18,8 +18,8 @@ interface IDateTriggerProps {
   readonly ariaLabel: string;
   /** Current open state of the parent popover (used only by the input variant). */
   readonly isOpen: boolean;
-  /** Called with `true` when the input variant wants the popover to open (click / Enter / Space / ArrowDown). */
-  readonly onOpenRequest: () => void;
+  /** Called when the input variant requests the popover to toggle. Click and Enter/Space toggle; ArrowDown only opens. */
+  readonly onToggleRequest: (nextOpen: boolean) => void;
   /** Id of the `PopoverContent`. Used only by the input variant to wire `role="combobox"` + `aria-controls` so `aria-expanded` is valid for axe. */
   readonly popoverId: string;
 }
@@ -32,10 +32,10 @@ interface IDateTriggerProps {
  *   the built-in trigger.
  * - **`variant='input'`** — uses `<PopoverAnchor asChild>` with a readonly
  *   `<TextField.Root>` + leading calendar icon slot, and manually wires
- *   click / keyboard handlers to `onOpenRequest` so the popover opens on
- *   click (including on the slot icon) and on Enter / Space / ArrowDown.
- *   Closing is handled by Radix's built-in outside-click + Escape behaviour
- *   on the popover content itself.
+ *   click / keyboard handlers to `onToggleRequest`. Click and Enter/Space
+ *   toggle the popover open/closed to match `PopoverTrigger`'s behaviour;
+ *   ArrowDown only opens. Escape and outside-click are still handled
+ *   natively by `PopoverContent`.
  */
 const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
   (
@@ -46,23 +46,36 @@ const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
       disabled,
       ariaLabel,
       isOpen,
-      onOpenRequest,
+      onToggleRequest,
       popoverId,
     },
     ref
   ) => {
     if (variant === 'input') {
-      const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      const handleToggle = () => {
         if (disabled) return;
-        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
-          event.preventDefault();
-          onOpenRequest();
-        }
+        onToggleRequest(!isOpen);
+      };
+
+      // Slot click fires first and also bubbles to `TextField.Root`'s
+      // `onClick`. Stop propagation so we don't double-fire the toggle (and
+      // flip open → closed → open on a single icon click).
+      const handleSlotClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+        handleToggle();
       };
 
-      const handleOpen = () => {
+      const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
         if (disabled) return;
-        onOpenRequest();
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onToggleRequest(!isOpen);
+          return;
+        }
+        if (event.key === 'ArrowDown' && !isOpen) {
+          event.preventDefault();
+          onToggleRequest(true);
+        }
       };
 
       return (
@@ -83,10 +96,10 @@ const DateTrigger = forwardRef<HTMLElement, IDateTriggerProps>(
             aria-label={ariaLabel}
             aria-haspopup="dialog"
             aria-expanded={isOpen}
-            onClick={handleOpen}
+            onClick={handleToggle}
             onKeyDown={handleKeyDown}
           >
-            <TextField.Slot side="left" onClick={handleOpen}>
+            <TextField.Slot side="left" onClick={handleSlotClick}>
               <CalendarIcon />
             </TextField.Slot>
           </TextField.Root>
diff --git a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
index d2d931d..7258977 100644
--- a/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
+++ b/lib/compound/DateRangePicker/parts/SingleCalendar.tsx
@@ -98,16 +98,24 @@ const SingleCalendar = ({
   };
 
   // Shared popover-open initialization. Called from both `onOpenChange(true)`
-  // (button trigger path — Radix-initiated) and `onOpenRequest` (input trigger
-  // path — externally-initiated via `PopoverAnchor`). Radix does not fire
-  // `onOpenChange` when the controlled `open` prop is changed from outside, so
-  // the input variant needs to run this initialization explicitly.
+  // (button trigger path — Radix-initiated) and `onToggleRequest(true)` (input
+  // trigger path — externally-initiated via `PopoverAnchor`). Radix does not
+  // fire `onOpenChange` when the controlled `open` prop is changed from
+  // outside, so the input variant needs to run this initialization explicitly.
   const handleOpenPopover = () => {
     setIsPopoverOpen(true);
     setToday(new Date());
     setDraftDate(isControlled ? controlledDate : draftDate);
   };
 
+  const handleToggleRequest = (nextOpen: boolean) => {
+    if (nextOpen) {
+      handleOpenPopover();
+    } else {
+      setIsPopoverOpen(false);
+    }
+  };
+
   return (
     <Popover
       open={isPopoverOpen}
@@ -126,7 +134,7 @@ const SingleCalendar = ({
         disabled={disabled}
         ariaLabel="Choose a date"
         isOpen={isPopoverOpen}
-        onOpenRequest={handleOpenPopover}
+        onToggleRequest={handleToggleRequest}
         popoverId={popoverId}
       />
       <PopoverPortal>