@coinbase/cds-mcp-server 8.53.1 → 8.55.0

package/mcp-docs/mobile/routes.txt

@@ -30,8 +30,9 @@
 - [DotSymbol](mobile/components/DotSymbol.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DotStatusColor](mobile/components/DotStatusColor.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DotCount](mobile/components/DotCount.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
-- [DatePicker](mobile/components/DatePicker.txt): Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs while being adaptable across screen platforms.
+- [DatePicker](mobile/components/DatePicker.txt): Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs.
 - [DateInput](mobile/components/DateInput.txt): DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
+- [Calendar](mobile/components/Calendar.txt): Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.
 - [RollingNumber](mobile/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
 - [Tour](mobile/components/Tour.txt): Creates guided tours of a user interface.
 - [TopNavBar](mobile/components/TopNavBar.txt): A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.
@@ -148,3 +149,7 @@
 - [useMergeRefs](mobile/hooks/useMergeRefs.txt): Combines multiple refs into a single ref callback, allowing a component to work with multiple ref instances simultaneously. Useful when you need to combine refs from different sources, such as forwarded refs and internal component state.
 - [useEventHandler](mobile/hooks/useEventHandler.txt): Creates event handlers for components based on the EventHandlerProvider configuration. It enables centralized event handling and analytics tracking by mapping component actions to configured handlers.
 - [useDimensions](mobile/hooks/useDimensions.txt): Measures the screen dimensions and status bar height.
+
+## Guides
+
+- [v8-migration-guide](mobile/guides/v8-migration-guide.txt)

package/mcp-docs/web/components/Calendar.txt

@@ -10,7 +10,11 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 
 ## Examples
 
-### Basic usage
+Calendar is a date grid for selecting dates and powers the picker in [DatePicker](/components/other/DatePicker). Control the visible month with `selectedDate` or `seedDate`, and use `onPressDate` to handle selection. It supports keyboard navigation, disabled and highlighted dates, and custom styling via `classNames` and `styles`.
+
+### Basics
+
+#### Basic usage
 
 ```tsx live
 () => {
@@ -19,7 +23,7 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 };
 ```
 
-### Disabled Dates
+### Disabled dates
 
 ```tsx live
 () => {
@@ -39,7 +43,7 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 };
 ```
 
-### Highlighted Dates
+### Highlighted dates
 
 ```tsx live
 () => {
@@ -63,6 +67,116 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 };
 ```
 
+### Styling
+
+#### Slot styling
+
+Use the `classNames` and `styles` props to target specific elements: `root`, `header`, `monthLabel`, `navArrows` (container), `navArrow` (each button), `dayHeader`, `content` (day header + date grid), `calendarGrid` (date cells container), and `dayCell`.
+
+```tsx live
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const highlightedDates = useMemo(() => {
+    const d = new Date();
+    d.setDate(d.getDate() - 1);
+    return [d];
+  }, []);
+  const disabledDates = useMemo(() => {
+    const d = new Date();
+    d.setDate(d.getDate() - 2);
+    return [d];
+  }, []);
+  return (
+    <>
+      <style>{`
+        .calendar-slot-demo-nav-arrow [data-icon-name] {
+          color: var(--color-bgNegative);
+        }
+        .calendar-slot-day-header span {
+          color: var(--color-bgNegative);
+        }
+        .calendar-slot-day-cell[aria-pressed="true"] {
+          background-color: var(--color-bgWarning);
+          border-color: var(--color-bgWarning);
+        }
+        .calendar-slot-day-cell[aria-current="date"] {
+          border-color: var(--color-accentBoldYellow);
+        }
+        .calendar-slot-day-cell[aria-disabled="true"] {
+          background-color: var(--color-bgDisabled);
+          border-color: var(--color-bgDisabled);
+        }
+        .calendar-slot-day-cell[aria-disabled="true"] span {
+          color: var(--color-bgPositive);
+        }
+        .calendar-slot-day-cell[data-highlight="true"] {
+          background-color: var(--color-bgPositiveWash);
+          border-color: var(--color-bgPositive);
+        }
+        .calendar-slot-day-cell[data-highlight="true"] span {
+          color: var(--color-fg);
+        }
+      `}</style>
+      <Calendar
+        selectedDate={selectedDate}
+        onPressDate={setSelectedDate}
+        disabledDates={disabledDates}
+        highlightedDates={highlightedDates}
+        classNames={{
+          navArrow: 'calendar-slot-demo-nav-arrow',
+          dayHeader: 'calendar-slot-day-header',
+          dayCell: 'calendar-slot-day-cell',
+        }}
+        styles={{
+          root: {
+            backgroundColor: 'var(--color-bgAlternate)',
+            borderRadius: 16,
+            borderColor: 'var(--color-bgLinePrimary)',
+            borderWidth: 'medium',
+          },
+          header: {
+            paddingBottom: 0,
+            backgroundColor: 'var(--color-bgPositiveWash)',
+            borderRadius: 16,
+          },
+          monthLabel: { color: 'var(--color-fgPrimary)' },
+          navArrows: { border: 'medium dashed var(--color-bgLine)', borderRadius: 8 },
+          navArrow: { backgroundColor: 'transparent', borderColor: 'transparent' },
+          calendarGrid: { paddingBottom: 8, paddingTop: 8 },
+          dayCell: { borderRadius: 8 },
+        }}
+      />
+    </>
+  );
+};
+```
+
+### Accessibility
+
+Use `nextArrowAccessibilityLabel` and `previousArrowAccessibilityLabel` so screen reader users can navigate months. When using `disabledDates`, `minDate`, or `maxDate`, provide `disabledDateError` so users understand why a date cannot be selected.
+
+```tsx live
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const nextMonth = useMemo(() => {
+    const d = new Date();
+    d.setMonth(d.getMonth() + 1);
+    return d;
+  }, []);
+  return (
+    <Calendar
+      selectedDate={selectedDate}
+      onPressDate={setSelectedDate}
+      maxDate={nextMonth}
+      disabledDateError="Date is not available for selection"
+      nextArrowAccessibilityLabel="Go to next month"
+      previousArrowAccessibilityLabel="Go to previous month"
+      highlightedDateAccessibilityHint="Highlighted"
+    />
+  );
+};
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -92,7 +206,7 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
-| `className` | `string` | No | `-` | - |
+| `classNames` | `{ readonly root?: string; readonly header?: string \| undefined; readonly title?: string \| undefined; readonly navigation?: string \| undefined; readonly content?: string \| undefined; readonly day?: string \| undefined; } \| undefined` | No | `-` | - |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
@@ -128,6 +242,7 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
 | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
 | `hideControls` | `boolean` | No | `-` | Hides the Calendar next and previous month arrows, but does not prevent navigating to the next or previous months via keyboard. This probably only makes sense to be used when minDate and maxDate are set to the first and last days of the same month. |
+| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
 | `highlightedDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of highlighted dates, and date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
@@ -167,6 +282,7 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 | `seedDate` | `Date` | No | `-` | Date used to generate the Calendar month when there is no value for the selectedDate prop, defaults to today. |
 | `selectedDate` | `Date \| null` | No | `-` | Currently selected Calendar date. Date used to generate the Calendar month. Will be rendered with active styles. |
 | `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ readonly root?: CSSProperties; readonly header?: CSSProperties \| undefined; readonly title?: CSSProperties \| undefined; readonly navigation?: CSSProperties \| undefined; readonly content?: CSSProperties \| undefined; readonly day?: CSSProperties \| undefined; } \| undefined` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
@@ -179,3 +295,15 @@ import { Calendar } from '@coinbase/cds-web/dates/Calendar'
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `cds-Calendar` | Root element |
+| `header` | `cds-Calendar-header` | Header section |
+| `title` | `cds-Calendar-title` | Month and year title text element |
+| `navigation` | `cds-Calendar-navigation` | Navigation controls element |
+| `content` | `cds-Calendar-content` | Main content area |
+| `day` | `cds-Calendar-day` | Individual date cell in a calendar grid |
+
+

package/mcp-docs/web/components/DatePicker.txt

@@ -28,7 +28,8 @@ function Example() {
       onChangeDate={setDate}
       onErrorDate={setError}
       label="Birthdate"
-      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      openCalendarAccessibilityLabel="Open calendar"
+      closeCalendarAccessibilityLabel="Close calendar"
       nextArrowAccessibilityLabel="Next month"
       previousArrowAccessibilityLabel="Previous month"
       helperTextErrorIconAccessibilityLabel="Error"
@@ -95,8 +96,6 @@ function Example() {
 
 The `disabledDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.
 
-The `disabledDates` prop is only available on web because the mobile DatePicker uses react-native-date-picker instead of a Calendar component.
-
 Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props.
 
 ```jsx live
@@ -196,9 +195,12 @@ function Example() {
       onErrorDate={setError}
       disabledDates={[new Date()]}
       label="Birthdate"
-      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      accessibilityLabel="Birthdate"
+      openCalendarAccessibilityLabel="Open calendar to select birthdate"
+      closeCalendarAccessibilityLabel="Close calendar"
       nextArrowAccessibilityLabel="Next month"
       previousArrowAccessibilityLabel="Previous month"
+      highlightedDateAccessibilityHint="Highlighted"
       helperTextErrorIconAccessibilityLabel="Error"
       invalidDateError="Please enter a valid date"
       disabledDateError="Date unavailable"
@@ -234,7 +236,7 @@ function Example() {
 
 ### Styling
 
-DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/).
+DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/) and [Calendar](/components/other/Calendar/).
 
 #### Compact
 
@@ -326,7 +328,8 @@ function Example() {
     <VStack gap={2}>
       <DatePicker
         accessibilityLabel="Birthdate"
-        calendarIconButtonAccessibilityLabel="Birthdate calendar"
+        openCalendarAccessibilityLabel="Open birthdate calendar"
+        closeCalendarAccessibilityLabel="Close calendar"
         date={date}
         error={error}
         helperTextErrorIconAccessibilityLabel="Error"
@@ -438,9 +441,7 @@ function Example() {
 
 Defaults to today when undefined.
 
-On web the `seedDate` prop is used to generate the Calendar month when there is no selected date value.
-
-On mobile the `seedDate` prop is the default date that the react-native-date-picker keyboard control will open to when there is no selected date value.
+The `seedDate` prop is used to generate the Calendar month when there is no selected date value.
 
 ```jsx live
 function Example() {
@@ -467,8 +468,6 @@ function Example() {
 
 The `highlightedDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.
 
-The `highlightedDates` prop is only available on web because the mobile DatePicker uses react-native-date-picker instead of a Calendar component.
-
 ```jsx live
 function Example() {
   const [date, setDate] = useState(null);
@@ -603,11 +602,11 @@ function Example() {
 
 ### Event Lifecycle
 
-- Selecting a date with the native picker (mobile) or Calendar (web):
+- Selecting a date with the Calendar:
 
   `onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose`
 
-- Closing the native picker (mobile) or Calendar (web) without selecting a date:
+- Closing the Calendar without selecting a date:
 
   `onOpen -> onCancel -> onClose`
 
@@ -663,22 +662,24 @@ function Example() {
 | `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
 | `bordered` | `boolean` | No | `true` | Adds border to input |
-| `calendarClassName` | `string` | No | `-` | - |
-| `calendarIconButtonAccessibilityLabel` | `string` | No | `'Open calendar' / 'Close calendar'` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
-| `calendarStyle` | `CSSProperties` | No | `-` | - |
-| `className` | `string` | No | `-` | - |
+| `calendarClassName` | `string` | No | `-` | Custom class name to apply to the Calendar container. |
+| `calendarIconButtonAccessibilityLabel` | `string` | No | `-` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
+| `calendarStyle` | `CSSProperties` | No | `-` | Custom style to apply to the Calendar container. |
+| `classNames` | `{ dateInput?: string; calendar?: string \| undefined; calendarHeader?: string \| undefined; calendarTitle?: string \| undefined; calendarNavigation?: string \| undefined; calendarContent?: string \| undefined; calendarDay?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the DateInput and Calendar subcomponents. |
+| `closeCalendarAccessibilityLabel` | `string` | No | `'Close calendar'` | Accessibility label for the calendar IconButton when the popover is open (closes the calendar when pressed). |
 | `compact` | `boolean` | No | `false` | Enables compact variation |
-| `dateInputClassName` | `string` | No | `-` | - |
-| `dateInputStyle` | `CSSProperties` | No | `-` | - |
+| `dateInputClassName` | `string` | No | `-` | Custom class name to apply to the DateInput. |
+| `dateInputStyle` | `CSSProperties` | No | `-` | Custom style to apply to the DateInput. |
 | `defaultOpen` | `boolean` | No | `-` | Control the default open state of the Calendar popover. |
 | `disabled` | `boolean` | No | `false` | Disables user interaction. Toggles input interactability and opacity |
-| `disabledDateError` | `string` | No | `'Date unavailable'` | Error text to display when a disabled date is selected with the DateInput, including dates before the minDate or after the maxDate. Also used as the tooltip content shown when hovering or focusing a disabled date on the Calendar. |
+| `disabledDateError` | `string` | No | `'Date unavailable'` | Tooltip content shown when hovering or focusing a disabled date, including dates before the minDate or after the maxDate. |
 | `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
 | `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
+| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
 | `highlightedDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of highlighted dates, and date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `inputBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'bg'` | Background color of the input. |
 | `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
@@ -689,12 +690,13 @@ function Example() {
 | `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |
 | `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |
 | `nextArrowAccessibilityLabel` | `string` | No | `'Go to next month'` | Accessibility label describing the Calendar next month arrow. |
-| `onCancel` | `(() => void)` | No | `-` | Callback function fired when the user closes the Calendar popover without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
-| `onChange` | `(((event: ChangeEvent<HTMLInputElement>) => void) & ChangeEventHandler<HTMLInputElement>)` | No | `-` | Callback function fired when the DateInput text value changes. Prefer to use onChangeDate instead. Will always be called before onChangeDate. This prop should only be used for edge cases, such as custom error handling. |
+| `onCancel` | `(() => void)` | No | `-` | Callback function fired when the user closes the picker without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
+| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
 | `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |
-| `onClose` | `(() => void)` | No | `-` | Callback function fired when the Calendar popover is closed. Will always be called after onCancel, onConfirm, and onChangeDate. |
-| `onConfirm` | `(() => void)` | No | `-` | Callback function fired when the user selects a date using the Calendar popover. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
-| `onOpen` | `(() => void)` | No | `-` | Callback function fired when the Calendar popover is opened. |
+| `onClose` | `(() => void)` | No | `-` | Callback function fired when the picker is closed. Will always be called after onCancel, onConfirm, and onChangeDate. |
+| `onConfirm` | `(() => void)` | No | `-` | Callback function fired when the user selects a date using the picker. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
+| `onOpen` | `(() => void)` | No | `-` | Callback function fired when the picker is opened. |
+| `openCalendarAccessibilityLabel` | `string` | No | `'Open calendar'` | Accessibility label for the calendar IconButton when the popover is closed (opens the calendar when pressed). |
 | `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
 | `previousArrowAccessibilityLabel` | `string` | No | `'Go to previous month'` | Accessibility label describing the Calendar previous month arrow. |
 | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
@@ -704,7 +706,7 @@ function Example() {
 | `seedDate` | `Date` | No | `-` | Date used to generate the Calendar month when there is no value for the selectedDate prop, defaults to today. |
 | `showOverlay` | `boolean` | No | `false` | Display an overlay over all content below the Popover menu |
 | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
-| `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ dateInput?: CSSProperties; calendar?: CSSProperties \| undefined; calendarHeader?: CSSProperties \| undefined; calendarTitle?: CSSProperties \| undefined; calendarNavigation?: CSSProperties \| undefined; calendarContent?: CSSProperties \| undefined; calendarDay?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the DateInput and Calendar subcomponents. |
 | `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |

package/mcp-docs/web/components/Tray.txt

@@ -1261,6 +1261,7 @@ function ResponsiveTrayExample() {
 | `key` | `Key \| null` | No | `-` | - |
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |
 | `onClose` | `(() => void)` | No | `-` | Action that will happen when tray is dismissed |
+| `onOpenComplete` | `(() => void)` | No | `-` | Callback fired when the open animation completes. |
 | `onVisibilityChange` | `((context: hidden \| visible) => void)` | No | `-` | Optional callback that, if provided, will be triggered when the Tray is toggled open/ closed If used for analytics, context (visible \| hidden) can be bundled with the event info to track whether the multiselect was toggled into or out of view |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `'bottom'` | Pin the tray to one side of the screen |
 | `preventDismiss` | `boolean` | No | `-` | Prevents a user from dismissing the tray by pressing the overlay or swiping |