@jmruthers/pace-core 0.6.6 → 0.6.8

package/src/components/Alert/Alert.test.tsx

@@ -11,7 +11,7 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Alert Component', () => {
     describe('Rendering', () => {
-    it('renders as semantic aside element', () => {
+    it('renders as semantic p element with role="alert"', () => {
       renderWithProviders(
         <Alert>
           <AlertTitle>Test Title</AlertTitle>
@@ -20,8 +20,9 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
       expect(alert).toBeInTheDocument();
+      expect(alert).toHaveAttribute('role', 'alert');
     });
 
     it('renders with default variant', () => {
@@ -34,7 +35,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('relative', 'w-full', 'rounded-lg', 'border', 'p-4');
     });
 
@@ -48,7 +50,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('border-destructive', 'text-destructive');
     });
 
@@ -73,7 +76,8 @@ describe('Alert Component', () => {
       );
       
       const alert = screen.getByRole('alert');
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toHaveClass('custom-alert-class');
     });
 
@@ -88,7 +92,7 @@ describe('Alert Component', () => {
     });
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLElement>();
+      const ref = React.createRef<HTMLParagraphElement>();
       
       renderWithProviders(
         <Alert ref={ref}>
@@ -96,8 +100,8 @@ describe('Alert Component', () => {
         </Alert>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLElement);
-      expect(ref.current?.tagName).toBe('ASIDE');
+      expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+      expect(ref.current?.tagName).toBe('P');
       expect(ref.current).toHaveAttribute('role', 'alert');
     });
   });
@@ -275,7 +279,54 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
+    });
+
+    it('supports role="status" prop for informational messages', () => {
+      renderWithProviders(
+        <Alert role="status" aria-live="polite">
+          <AlertTitle>Status Message</AlertTitle>
+          <AlertDescription>This is a status message</AlertDescription>
+        </Alert>
+      );
+      
+      const status = screen.getByRole('status');
+      expect(status).toBeInTheDocument();
+      expect(status.tagName).toBe('P');
+      expect(status).toHaveAttribute('role', 'status');
+      expect(status).toHaveAttribute('aria-live', 'polite');
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('defaults to role="alert" when role prop not provided', () => {
+      renderWithProviders(
+        <Alert>
+          <AlertTitle>Default Alert</AlertTitle>
+          <AlertDescription>This should default to alert role</AlertDescription>
+        </Alert>
+      );
+      
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveAttribute('role', 'alert');
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    });
+
+    it('allows custom role values', () => {
+      renderWithProviders(
+        <Alert role="region" aria-label="Custom region">
+          <AlertTitle>Custom Role</AlertTitle>
+          <AlertDescription>This uses a custom role</AlertDescription>
+        </Alert>
+      );
+      
+      const region = screen.getByRole('region', { name: 'Custom region' });
+      expect(region).toBeInTheDocument();
+      expect(region.tagName).toBe('P');
+      expect(region).toHaveAttribute('role', 'region');
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
     });
 
     it('does not have role="alert" for inline variant', () => {
@@ -301,7 +352,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       
       // Screen readers will announce the content within the alert
       expect(screen.getByText('Important Notice')).toBeInTheDocument();
@@ -320,7 +372,8 @@ describe('Alert Component', () => {
       const title = screen.getByRole('heading', { level: 5 });
       const description = screen.getByText('Semantic description with proper heading structure');
       
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(title).toBeInTheDocument();
       expect(description.tagName).toBe('P');
     });
@@ -339,7 +392,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('⚠️')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
     });
@@ -355,7 +409,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('First description')).toBeInTheDocument();
       expect(screen.getByText('Second description')).toBeInTheDocument();
     });
@@ -369,7 +424,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('Description without title')).toBeInTheDocument();
     });
 
@@ -382,7 +438,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent('Title without description');
     });
   });
@@ -393,7 +450,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(alert).toBeEmptyDOMElement();
     });
 
@@ -423,7 +481,8 @@ describe('Alert Component', () => {
       // Should fallback to default behavior
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
     });
 
     it('handles rapid variant changes', () => {
@@ -454,7 +513,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
     });
   });
 
@@ -473,7 +533,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByRole('textbox')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
     });
@@ -494,8 +555,10 @@ describe('Alert Component', () => {
       
       const alerts = screen.getAllByRole('alert');
       expect(alerts).toHaveLength(2);
-      expect(alerts[0].tagName).toBe('ASIDE');
-      expect(alerts[1].tagName).toBe('ASIDE');
+      expect(alerts[0].tagName).toBe('P');
+      expect(alerts[1].tagName).toBe('P');
+      expect(alerts[0]).toHaveAttribute('role', 'alert');
+      expect(alerts[1]).toHaveAttribute('role', 'alert');
       expect(alerts[0]).toHaveClass('bg-background', 'text-foreground');
       expect(alerts[1]).toHaveClass('border-destructive', 'text-destructive');
     });
@@ -516,7 +579,8 @@ describe('Alert Component', () => {
       
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
-      expect(alert.tagName).toBe('ASIDE');
+      expect(alert.tagName).toBe('P');
+      expect(alert).toHaveAttribute('role', 'alert');
       expect(screen.getByText('Complex Alert')).toBeInTheDocument();
       expect(screen.getByText('This is a complex description with')).toBeInTheDocument();
       expect(screen.getByText('Multiple elements')).toBeInTheDocument();

package/src/components/Alert/Alert.tsx

@@ -10,27 +10,32 @@
  * Features:
  * - Multiple visual variants (default, destructive, inline)
  * - Title and description support
- * - Semantic HTML: renders as `<aside>` element
- * - ARIA role="alert" for accessibility
+ * - Semantic HTML: renders as `<p>` element with `role="alert"` (default) or custom role
  * - Keyboard and screen reader accessible
  * - Composable with icons and actions
  * - Inline variant for lightweight text formatting
  *
  * @example
  * ```tsx
- * // Basic alert (renders as <aside> with <h5> title and <p> description)
+ * // Basic alert (renders as <p role="alert"> with <h5> title and <p> description)
  * <Alert>
  *   <AlertTitle>Success</AlertTitle>
  *   <AlertDescription>Your changes have been saved.</AlertDescription>
  * </Alert>
  *
- * // Destructive alert with icon (renders as <aside> with <h5> title and <p> description)
+ * // Destructive alert with icon (renders as <p role="alert"> with <h5> title and <p> description)
  * <Alert variant="destructive">
  *   <ErrorIcon />
  *   <AlertTitle>Error</AlertTitle>
  *   <AlertDescription>Something went wrong.</AlertDescription>
  * </Alert>
  *
+ * // Status message (renders as <p role="status"> for informational messages)
+ * <Alert role="status" aria-live="polite">
+ *   <AlertTitle>No data available</AlertTitle>
+ *   <AlertDescription>Get started by adding your first entry.</AlertDescription>
+ * </Alert>
+ *
  * // Inline alert (renders as React.Fragment with <strong> title and <span> description)
  * <Alert variant="inline">
  *   <AlertTitle>Note:</AlertTitle>
@@ -39,8 +44,8 @@
  * ```
  *
  * @accessibility
- * - Uses semantic HTML: `<aside>` element for better semantic meaning
- * - Uses role="alert" for screen reader announcement
+ * - Uses semantic HTML: `<p>` element with `role="alert"` (default) for screen reader announcements
+ * - Can be customized with `role="status"` for informational messages
  * - Title and description are semantically structured
  * - Supports keyboard navigation and focus
  */
@@ -65,9 +70,12 @@ const getAlertClasses = (variant: "default" | "destructive" | "inline" = "defaul
 };
 
 const Alert = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & { variant?: "default" | "destructive" | "inline" }
->(({ className, variant = "default", ...props }, ref) => {
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement> & { 
+    variant?: "default" | "destructive" | "inline";
+    role?: string;
+  }
+>(({ className, variant = "default", role = "alert", ...props }, ref) => {
   const contextValue = React.useMemo(() => ({ variant }), [variant])
   
   if (variant === "inline") {
@@ -80,10 +88,10 @@ const Alert = React.forwardRef<
   
   return (
     <AlertContext.Provider value={contextValue}>
-      <aside
+      <p
         ref={ref}
         className={cn(getAlertClasses(variant), className)}
-        role="alert"
+        role={role}
         {...props}
       />
     </AlertContext.Provider>

package/src/components/Badge/Badge.tsx

@@ -163,7 +163,7 @@ function buildVariantClasses(style: Style, color: Color, shade: Shade): string {
  * Classes used: shadow-badge-soft shadow-main-200 shadow-main-500 shadow-main-700
  * shadow-sec-200 shadow-sec-500 shadow-sec-700 shadow-acc-200 shadow-acc-500 shadow-acc-700
  */
-const tailwindClassScan = [
+const _tailwindClassScan = [
   // Solid background classes
   'bg-main-100', 'bg-main-600', 'bg-main-900',
   'bg-sec-100', 'bg-sec-600', 'bg-sec-900',

package/src/components/Calendar/Calendar.tsx

@@ -65,7 +65,9 @@ import {
   type DateRange,
 } from 'react-day-picker';
 import { enAU } from 'date-fns/locale';
+import { format } from 'date-fns';
 import { cn } from '../../utils/core/cn';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select';
 
 // Define custom types for components that don't have exported types
 type MonthGridProps = React.TableHTMLAttributes<HTMLTableElement>;
@@ -77,6 +79,9 @@ type MonthProps = {
   displayIndex: number;
   className?: string;
   children?: React.ReactNode;
+  captionLayout?: DayPickerProps['captionLayout'];
+  startMonth?: Date;
+  endMonth?: Date;
 };
 type RootProps = {
   children?: React.ReactNode;
@@ -190,7 +195,7 @@ const assignToRef = <T,>(ref: React.Ref<T | null> | undefined, value: T | null)
  * ```
  */
 const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
-  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, ...props }, ref) => {
+  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, captionLayout, startMonth, endMonth, ...props }, ref) => {
     const tableRef = React.useRef<HTMLTableElement | null>(null);
     const setForwardedRef = React.useCallback(
       (node: HTMLTableElement | null) => {
@@ -267,9 +272,42 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
     });
     CustomRoot.displayName = 'CustomRoot';
     
-    // Custom Months: Remove wrapper div, return children directly
+    // Custom Months: Remove wrapper div, filter out MonthCaption and Dropdown when dropdown layout is used
     const CustomMonths = React.memo(({ children }: MonthsProps) => {
-      return <>{children}</>;
+      // When captionLayout="dropdown", react-day-picker may render MonthCaption or Dropdown components
+      // Filter them out since we render our own dropdowns inside the table's <caption> element
+      const childrenArray = React.Children.toArray(children);
+      const filteredChildren = childrenArray.filter((child: any) => {
+        if (!React.isValidElement(child)) return true;
+        const childType = child.type as any;
+        const displayName = childType?.displayName || childType?.name;
+        // Filter out MonthCaption and any Dropdown-related components
+        if (displayName === 'MonthCaption' || 
+            displayName === 'Dropdown' || 
+            displayName === 'DropdownMonth' ||
+            displayName === 'DropdownYear' ||
+            (typeof childType === 'string' && childType.includes('dropdown'))) {
+          return false;
+        }
+        // Also check for the div wrapper that react-day-picker might render
+        if (childType === 'div') {
+          const childProps = child.props as { children?: React.ReactNode; [key: string]: unknown };
+          if (childProps?.children) {
+            const childChildren = React.Children.toArray(childProps.children);
+            // If it contains a span with role="status" and aria-live="polite", it's likely the default caption
+            const hasCaptionSpan = childChildren.some((cc: any) => {
+              if (!React.isValidElement(cc) || cc.type !== 'span') return false;
+              const spanProps = cc.props as { role?: string; 'aria-live'?: string; [key: string]: unknown };
+              return spanProps?.role === 'status' && spanProps?.['aria-live'] === 'polite';
+            });
+            if (hasCaptionSpan) {
+              return false;
+            }
+          }
+        }
+        return true;
+      });
+      return <>{filteredChildren}</>;
     });
     CustomMonths.displayName = 'CustomMonths';
     
@@ -277,9 +315,93 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
       return <table ref={forwardedRef} {...props} />;
     });
     CustomMonthGrid.displayName = 'CustomMonthGrid';
-    
+
+    // Custom MonthCaption: renders dropdowns for month/year selection
+    type MonthCaptionProps = {
+      displayMonth: Date;
+      startMonth?: Date;
+      endMonth?: Date;
+      locale?: DayPickerProps['locale'];
+    };
+    const CustomMonthCaption = React.memo(({ displayMonth, startMonth: captionStartMonth, endMonth: captionEndMonth, locale: captionLocale }: MonthCaptionProps) => {
+      const { goToMonth } = useDayPicker();
+      // Get locale from props (defaults to enAU)
+      const calendarLocale = (captionLocale || enAU) as typeof enAU;
+      
+      // Get start and end months from props (passed via Calendar)
+      const fromDate = captionStartMonth || new Date(1900, 0);
+      const toDate = captionEndMonth || new Date(2100, 11);
+      
+      // Generate month options using date-fns format
+      const monthOptions = React.useMemo(() => {
+        const months: { value: string; label: string }[] = [];
+        for (let i = 0; i < 12; i++) {
+          const monthDate = new Date(displayMonth.getFullYear(), i, 1);
+          const label = format(monthDate, 'MMMM', { locale: calendarLocale });
+          months.push({ value: i.toString(), label });
+        }
+        return months;
+      }, [calendarLocale, displayMonth]);
+      
+      // Generate year options based on startMonth and endMonth
+      const yearOptions = React.useMemo(() => {
+        const years: { value: string; label: string }[] = [];
+        const startYear = fromDate.getFullYear();
+        const endYear = toDate.getFullYear();
+        for (let year = startYear; year <= endYear; year++) {
+          years.push({ value: year.toString(), label: year.toString() });
+        }
+        return years;
+      }, [fromDate, toDate]);
+      
+      const currentMonth = displayMonth.getMonth();
+      const currentYear = displayMonth.getFullYear();
+      
+      const handleMonthChange = React.useCallback((value: string) => {
+        const newMonth = parseInt(value, 10);
+        const newDate = new Date(currentYear, newMonth, 1);
+        goToMonth(newDate);
+      }, [currentYear, goToMonth]);
+      
+      const handleYearChange = React.useCallback((value: string) => {
+        const newYear = parseInt(value, 10);
+        const newDate = new Date(newYear, currentMonth, 1);
+        goToMonth(newDate);
+      }, [currentMonth, goToMonth]);
+      
+      return (
+        <nav className="relative flex items-center justify-center gap-2">
+          <Select value={currentMonth.toString()} onValueChange={handleMonthChange}>
+            <SelectTrigger className="w-auto min-w-[120px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {monthOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={currentYear.toString()} onValueChange={handleYearChange}>
+            <SelectTrigger className="w-auto min-w-[100px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {yearOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </nav>
+      );
+    });
+    CustomMonthCaption.displayName = 'CustomMonthCaption';
+
     // Custom Month: inject caption + navigation directly inside the <table>
-    const CustomMonth = React.memo(({ calendarMonth, displayIndex, className, children }: MonthProps) => {
+    const CustomMonth = React.memo(({ calendarMonth, displayIndex, className, children, captionLayout: monthCaptionLayout, startMonth: monthStartMonth, endMonth: monthEndMonth }: MonthProps) => {
       const { formatters, components, labels, classNames, previousMonth, nextMonth, goToMonth } = useDayPicker();
       const caption = formatters.formatCaption(calendarMonth.date, {});
       const Chevron = components?.Chevron;
@@ -367,6 +489,9 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
                     }
                   : undefined;
               
+              // Determine if we should render dropdowns or buttons
+              const isDropdownLayout = monthCaptionLayout === 'dropdown';
+              
               return React.cloneElement(
                 monthGridElement,
                 {
@@ -376,45 +501,54 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
                 },
                 <>
                   <caption className="relative">
-                    <nav className="relative flex items-center justify-center gap-1">
-                      <button
-                        type="button"
-                        className={cn(
-                          'h-7 w-7 bg-transparent p-0',
-                          'inline-flex items-center justify-center rounded-md',
-                          'hover:bg-acc-100',
-                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
-                          'disabled:opacity-50 disabled:pointer-events-none',
-                          classNames?.button_previous
-                        )}
-                        tabIndex={previousMonth ? undefined : -1}
-                        aria-disabled={previousMonth ? undefined : true}
-                        aria-label={previousMonth ? labels.labelPrevious(previousMonth) : undefined}
-                        onClick={handlePreviousClick}
-                        disabled={!previousMonth}
-                      >
-                        {Chevron ? <Chevron orientation="left" className="size-4" disabled={!previousMonth} /> : <span>‹</span>}
-                      </button>
-                      <span className="text-sm font-medium">{caption}</span>
-                      <button
-                        type="button"
-                        className={cn(
-                          'h-7 w-7 bg-transparent p-0',
-                          'inline-flex items-center justify-center rounded-md',
-                          'hover:bg-acc-100',
-                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
-                          'disabled:opacity-50 disabled:pointer-events-none',
-                          classNames?.button_next
-                        )}
-                        tabIndex={nextMonth ? undefined : -1}
-                        aria-disabled={nextMonth ? undefined : true}
-                        aria-label={nextMonth ? labels.labelNext(nextMonth) : undefined}
-                        onClick={handleNextClick}
-                        disabled={!nextMonth}
-                      >
-                        {Chevron ? <Chevron orientation="right" className="size-4" disabled={!nextMonth} /> : <span>›</span>}
-                      </button>
-                    </nav>
+                    {isDropdownLayout ? (
+                      <CustomMonthCaption 
+                        displayMonth={calendarMonth.date}
+                        startMonth={monthStartMonth}
+                        endMonth={monthEndMonth}
+                        locale={locale}
+                      />
+                    ) : (
+                      <nav className="relative flex items-center justify-center gap-1">
+                        <button
+                          type="button"
+                          className={cn(
+                            'h-7 w-7 bg-transparent p-0',
+                            'inline-flex items-center justify-center rounded-md',
+                            'hover:bg-acc-100',
+                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
+                            'disabled:opacity-50 disabled:pointer-events-none',
+                            classNames?.button_previous
+                          )}
+                          tabIndex={previousMonth ? undefined : -1}
+                          aria-disabled={previousMonth ? undefined : true}
+                          aria-label={previousMonth ? labels.labelPrevious(previousMonth) : undefined}
+                          onClick={handlePreviousClick}
+                          disabled={!previousMonth}
+                        >
+                          {Chevron ? <Chevron orientation="left" className="size-4" disabled={!previousMonth} /> : <span>‹</span>}
+                        </button>
+                        <span className="text-sm font-medium">{caption}</span>
+                        <button
+                          type="button"
+                          className={cn(
+                            'h-7 w-7 bg-transparent p-0',
+                            'inline-flex items-center justify-center rounded-md',
+                            'hover:bg-acc-100',
+                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
+                            'disabled:opacity-50 disabled:pointer-events-none',
+                            classNames?.button_next
+                          )}
+                          tabIndex={nextMonth ? undefined : -1}
+                          aria-disabled={nextMonth ? undefined : true}
+                          aria-label={nextMonth ? labels.labelNext(nextMonth) : undefined}
+                          onClick={handleNextClick}
+                          disabled={!nextMonth}
+                        >
+                          {Chevron ? <Chevron orientation="right" className="size-4" disabled={!nextMonth} /> : <span>›</span>}
+                        </button>
+                      </nav>
+                    )}
                   </caption>
                   {monthGridChildren}
                 </>
@@ -442,17 +576,37 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
     });
     CustomWeekdays.displayName = 'CustomWeekdays';
 
+    // Create a wrapper for CustomMonth that passes the required props
+    const CustomMonthWithProps = React.useCallback((props: MonthProps) => {
+      return (
+        <CustomMonth
+          {...props}
+          captionLayout={captionLayout}
+          startMonth={startMonth}
+          endMonth={endMonth}
+        />
+      );
+    }, [captionLayout, startMonth, endMonth]);
+
+    // Custom MonthCaption wrapper: returns null to prevent default rendering
+    // The actual caption is rendered inside CustomMonth within the table's <caption> element
+    const CustomMonthCaptionWrapper = React.memo((_props: any) => {
+      return null;
+    });
+    CustomMonthCaptionWrapper.displayName = 'CustomMonthCaptionWrapper';
+
     // Memoize components to ensure stable references
     const defaultComponents = React.useMemo(() => ({
       Root: CustomRoot,
       Months: CustomMonths,
-      Month: CustomMonth,
+      Month: CustomMonthWithProps,
       MonthGrid: CustomMonthGrid,
-      // MonthCaption is now handled inside CustomMonth (injected into table)
+      // MonthCaption returns null - actual caption is rendered in CustomMonth inside <caption>
+      MonthCaption: CustomMonthCaptionWrapper,
       Weekdays: CustomWeekdays,
       // Spread user components AFTER ours so ours take precedence
       ...(components || {}),
-    }), [components, CustomRoot, CustomMonths, CustomMonth, CustomWeekdays]);
+    }), [components, CustomRoot, CustomMonths, CustomMonthWithProps, CustomMonthCaptionWrapper, CustomWeekdays]);
 
     return (
       <DayPicker

package/src/components/Checkbox/Checkbox.test.tsx

@@ -474,8 +474,9 @@ describe('Checkbox Component', () => {
       const endTime = performance.now();
       
       // Performance test: verify rendering completes in reasonable time
+      // Note: Performance can vary based on system load, so we use a more lenient threshold
       expect(screen.getAllByRole('checkbox')).toHaveLength(100);
-      expect(endTime - startTime).toBeLessThan(1000);
+      expect(endTime - startTime).toBeLessThan(3000);
     });
   });
 });