@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/Button/Button.tsx

@@ -21,6 +21,7 @@
 import {useRef, useTransition, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
+import {useTooltip} from '../Tooltip/useTooltip';
 import {
   colorVars,
   sizeVars,
@@ -32,14 +33,13 @@ import {
   fontWeightVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {Tooltip} from '../Tooltip/Tooltip';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
 
 import {EDGE_COMP_ATTR} from '../Layout/edgeCompensation.stylex';
 import {useSize} from '../SizeContext/SizeContext';
 import {useButtonGroup} from '../ButtonGroup/ButtonGroupContext';
-import {mergeProps} from '../utils';
+import {mergeProps, mergeRefs} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {themeProps} from '../utils/themeProps';
@@ -580,6 +580,16 @@ export function Button({
   // for keyboard users to reach the tooltip. Otherwise use native disabled.
   const useAriaDisabled = tooltip != null && buttonDisabled;
 
+  // Attach tooltip behavior via the hook rather than wrapping the button in a
+  // <Tooltip> element. The hook adds hover/focus triggers to the button itself,
+  // so no extra DOM node is inserted — the button stays a direct child of its
+  // container (no layout shift, and edge-compensation markers remain
+  // discoverable through the container's direct-child `:has()` selector).
+  const tooltipHook = useTooltip({
+    placement: 'above',
+    isEnabled: tooltip != null,
+  });
+
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     // The ref guard dedupes fire-once actions. Interruptible callers skip it so
     // a re-click while pending starts a fresh action that interrupts the prior.
@@ -696,18 +706,39 @@ export function Button({
     (children != null && children !== label);
   const ariaLabelProp = needsAriaLabel ? {'aria-label': label} : null;
 
+  // When a tooltip is attached via the hook, point aria-describedby at the
+  // tooltip content (composing with any consumer-provided value).
+  const describedByProp =
+    tooltip != null
+      ? {
+          'aria-describedby':
+            [props['aria-describedby'], tooltipHook.describedBy]
+              .filter(Boolean)
+              .join(' ') || undefined,
+        }
+      : null;
+
+  // Merge the consumer ref with the tooltip hook's trigger ref so both point at
+  // the same element. mergeRefs tolerates undefined, so this is a no-op for the
+  // tooltip side when no tooltip is set.
+  const mergedButtonRef = mergeRefs(
+    ref,
+    tooltip != null ? tooltipHook.ref : undefined,
+  );
+
   let element: ReactNode;
 
   if (renderAsLink) {
     element = (
       <LinkComponent
-        ref={ref as React.Ref<HTMLAnchorElement>}
+        ref={mergedButtonRef as React.Ref<HTMLAnchorElement>}
         href={href}
         target={target}
         rel={rel}
         {...sharedMergedProps}
         {...props}
         {...ariaLabelProp}
+        {...describedByProp}
         {...edgeCompAttr}
         onClick={handleClick}>
         {buttonContent}
@@ -716,12 +747,13 @@ export function Button({
   } else {
     element = (
       <button
-        ref={ref}
+        ref={mergedButtonRef}
         type={type}
         disabled={useAriaDisabled ? undefined : buttonDisabled}
         {...sharedMergedProps}
         {...props}
         {...ariaLabelProp}
+        {...describedByProp}
         {...edgeCompAttr}
         aria-busy={isLoadingState || undefined}
         aria-disabled={useAriaDisabled || undefined}
@@ -734,9 +766,10 @@ export function Button({
 
   if (tooltip) {
     return (
-      <Tooltip content={tooltip} placement="above">
+      <>
         {element}
-      </Tooltip>
+        {tooltipHook.renderTooltip(tooltip)}
+      </>
     );
   }
 

package/src/ButtonGroup/ButtonGroup.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-button-group'},
+      {className: 'astryx-button-group', visualProps: ['size', 'orientation']},
     ],
   },
   components: [

package/src/Calendar/Calendar.doc.mjs

@@ -19,7 +19,7 @@ export const docs = {
       {guidance: false, description: 'Disable large blocks of dates without context. The user should understand why dates are unavailable.'},
     ],
     anatomy: [
-      {name: 'Month header', required: true, description: 'The month name and year with navigation arrows to move between months.'},
+      {name: 'Month header', required: true, description: 'The month name and year with navigation arrows to move between months. The arrows mirror automatically under dir="rtl".'},
       {name: 'Day grid', required: true, description: 'A 7-column grid of days with column headers for the day names.'},
       {name: 'Selected day', required: false, description: 'The currently selected date, highlighted. In range mode, the start and end dates plus the days between them.'},
       {name: 'Today marker', required: false, description: 'A subtle indicator on the current date for orientation.'},

package/src/Calendar/Calendar.test.tsx

@@ -12,8 +12,11 @@
 import {describe, it, expect, vi} from 'vitest';
 import {act, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {getButton} from '../__tests__/fastRoleQueries';
+import * as stylex from '@stylexjs/stylex';
 import {Calendar} from './Calendar';
 import type {CalendarHandle} from './Calendar';
+import {calendarStyles} from './styles';
 
 /**
  * Helper to find a day button by its day number.
@@ -24,7 +27,7 @@ import type {CalendarHandle} from './Calendar';
 function getDayButton(day: number, month = 'January', year = 2026) {
   // Match the full date pattern with the day number
   const pattern = new RegExp(`${month}\\s+${day},\\s+${year}`);
-  return screen.getByRole('button', {name: pattern});
+  return getButton(pattern);
 }
 
 describe('Calendar', () => {
@@ -71,6 +74,24 @@ describe('Calendar', () => {
     expect(screen.getByText(expectedLabel)).toBeInTheDocument();
   });
 
+  it("marks today's cell with aria-current='date'", () => {
+    render(<Calendar />);
+
+    const now = new Date();
+    const iso = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
+    const todayCell = document.querySelector(`button[data-date="${iso}"]`);
+    expect(todayCell).not.toBeNull();
+    expect(todayCell).toHaveAttribute('aria-current', 'date');
+
+    // Only today's cell is marked current.
+    const others = Array.from(
+      document.querySelectorAll('button[data-date]'),
+    ).filter(el => el.getAttribute('data-date') !== iso);
+    expect(others.length).toBeGreaterThan(0);
+    others.forEach(el => expect(el).not.toHaveAttribute('aria-current'));
+  });
+
   it('displays day names', () => {
     render(<Calendar />);
 
@@ -97,7 +118,11 @@ describe('Calendar', () => {
     render(<Calendar value="2026-01-15" focusDate="2026-01-01" />);
 
     const day15 = getDayButton(15);
-    expect(day15).toHaveAttribute('aria-selected', 'true');
+    // In an ARIA grid, selection state lives on the gridcell, not the button
+    // (a plain button role does not permit aria-selected).
+    const gridcell15 = day15.closest('[role="gridcell"]');
+    expect(gridcell15).toHaveAttribute('aria-selected', 'true');
+    expect(day15).not.toHaveAttribute('aria-selected');
   });
 
   it('calls onChange when date is selected', async () => {
@@ -123,7 +148,7 @@ describe('Calendar', () => {
     // Verify we start on February
     expect(screen.getByText('February 2026')).toBeInTheDocument();
 
-    const prevButton = screen.getByRole('button', {name: 'Previous month'});
+    const prevButton = getButton('Previous month');
     await user.click(prevButton);
 
     expect(screen.getByText('January 2026')).toBeInTheDocument();
@@ -137,7 +162,7 @@ describe('Calendar', () => {
     // Verify we start on January
     expect(screen.getByText('January 2026')).toBeInTheDocument();
 
-    const nextButton = screen.getByRole('button', {name: 'Next month'});
+    const nextButton = getButton('Next month');
     await user.click(nextButton);
 
     expect(screen.getByText('February 2026')).toBeInTheDocument();
@@ -151,7 +176,7 @@ describe('Calendar', () => {
       <Calendar focusDate="2026-01-01" onFocusDateChange={handleFocusChange} />,
     );
 
-    const nextButton = screen.getByRole('button', {name: 'Next month'});
+    const nextButton = getButton('Next month');
     await user.click(nextButton);
 
     expect(handleFocusChange).toHaveBeenCalledWith('2026-02-01');
@@ -209,12 +234,39 @@ describe('Calendar', () => {
 
     render(<Calendar numberOfMonths={2} focusDate="2026-01-01" />);
 
-    const nextButton = screen.getByRole('button', {name: 'Next month'});
+    const nextButton = getButton('Next month');
     await user.click(nextButton);
 
     expect(screen.getByText(/February 2026.*March 2026/)).toBeInTheDocument();
   });
 
+  it('clamps out-of-range numberOfMonths to a single month', () => {
+    // 1000 would otherwise try to render 1000 month grids and lock the page up.
+    render(
+      <Calendar
+        numberOfMonths={1000 as unknown as 1 | 2}
+        focusDate="2026-01-01"
+      />,
+    );
+
+    // Only the focused month renders — no second month, no range separator.
+    expect(screen.getByText('January 2026')).toBeInTheDocument();
+    expect(screen.queryByText(/February 2026/)).not.toBeInTheDocument();
+  });
+
+  it('clamps numberOfMonths={0} to a single month', () => {
+    render(
+      <Calendar
+        numberOfMonths={0 as unknown as 1 | 2}
+        focusDate="2026-01-01"
+      />,
+    );
+
+    // 0 previously rendered no months at all; now falls back to one.
+    expect(screen.getByText('January 2026')).toBeInTheDocument();
+    expect(screen.getAllByRole('gridcell').length).toBeGreaterThan(0);
+  });
+
   // ─── Display Options ─────────────────────────────────────────
 
   it('shows week numbers when hasWeekNumbers is true', () => {
@@ -310,9 +362,101 @@ describe('Calendar', () => {
     const day12 = getDayButton(12);
     const day15 = getDayButton(15);
 
-    expect(day10).toHaveAttribute('aria-selected', 'true');
-    expect(day12).toHaveAttribute('aria-selected', 'true');
-    expect(day15).toHaveAttribute('aria-selected', 'true');
+    // Selection state lives on the gridcell wrapper, not the day button.
+    expect(day10.closest('[role="gridcell"]')).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(day12.closest('[role="gridcell"]')).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(day15.closest('[role="gridcell"]')).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(day10).not.toHaveAttribute('aria-selected');
+    expect(day12).not.toHaveAttribute('aria-selected');
+    expect(day15).not.toHaveAttribute('aria-selected');
+  });
+
+  it('caps the range highlight next to a disabled mid-range day (#2715)', () => {
+    // Disable Jan 13. With Jan 10–15 selected, day 12 (immediately before the
+    // disabled day) should get a rounded end cap on its right edge, and day 14
+    // (immediately after) a rounded cap on its left edge — so the highlight
+    // reads as terminating at the disabled gap rather than running square-edged
+    // into it.
+    const disableJan13 = (d: Date) =>
+      !(d.getFullYear() === 2026 && d.getMonth() === 0 && d.getDate() === 13);
+    render(
+      <Calendar
+        mode="range"
+        value={{start: '2026-01-10', end: '2026-01-15'}}
+        focusDate="2026-01-01"
+        dateConstraints={[disableJan13]}
+      />,
+    );
+
+    // The range background is an absolutely-positioned sibling div inside the
+    // same gridcell as the day button.
+    const rangeBgFor = (day: number): HTMLElement => {
+      const button = getDayButton(day);
+      const cell = button.closest('[role="gridcell"]') as HTMLElement;
+      // First child div is the range background (rendered before the button).
+      return cell.firstElementChild as HTMLElement;
+    };
+
+    const day12Bg = rangeBgFor(12);
+    const day14Bg = rangeBgFor(14);
+
+    // Capped edges have a border radius; the un-capped edge stays square.
+    expect(getComputedStyle(day12Bg).borderTopRightRadius).not.toBe('');
+    expect(getComputedStyle(day12Bg).borderTopRightRadius).not.toBe('0px');
+    expect(getComputedStyle(day14Bg).borderTopLeftRadius).not.toBe('');
+    expect(getComputedStyle(day14Bg).borderTopLeftRadius).not.toBe('0px');
+  });
+
+  it('does not range-highlight adjacent-month spillover days in two-month view', () => {
+    // #2715: with July 1–31 selected and July+August visible, July 26–31 also
+    // render as outside days in the August pane. Those spillover copies must
+    // not carry the range-highlight state (data-in-range) even though their
+    // dates fall inside the selected range.
+    render(
+      <Calendar
+        mode="range"
+        numberOfMonths={2}
+        focusDate="2026-07-01"
+        value={{start: '2026-07-01', end: '2026-07-31'}}
+      />,
+    );
+
+    const spillover = [
+      '2026-07-26',
+      '2026-07-27',
+      '2026-07-28',
+      '2026-07-29',
+      '2026-07-30',
+      '2026-07-31',
+    ];
+
+    const allDayButtons = Array.from(
+      document.querySelectorAll<HTMLButtonElement>('button[data-date]'),
+    );
+
+    for (const iso of spillover) {
+      const matches = allDayButtons.filter(
+        b => b.getAttribute('data-date') === iso,
+      );
+      // Renders once in the July pane and once as a spillover in August.
+      expect(matches.length).toBeGreaterThanOrEqual(2);
+      const outsideCopies = matches.filter(
+        b => b.getAttribute('aria-disabled') === 'true',
+      );
+      expect(outsideCopies.length).toBeGreaterThanOrEqual(1);
+      for (const b of outsideCopies) {
+        expect(b).not.toHaveAttribute('data-in-range');
+      }
+    }
   });
 
   // ─── Accessibility ───────────────────────────────────────────
@@ -397,12 +541,8 @@ describe('Calendar', () => {
   it('has navigation buttons with accessible labels', () => {
     render(<Calendar />);
 
-    expect(
-      screen.getByRole('button', {name: 'Previous month'}),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Next month'}),
-    ).toBeInTheDocument();
+    expect(getButton('Previous month')).toBeInTheDocument();
+    expect(getButton('Next month')).toBeInTheDocument();
   });
 
   // ─── Bug Regression Tests ───────────────────────────────────
@@ -510,14 +650,14 @@ describe('Calendar', () => {
   it('prev button is disabled when focusDate month contains min', () => {
     render(<Calendar focusDate="2026-01-01" min="2026-01-15" />);
 
-    const prevButton = screen.getByRole('button', {name: 'Previous month'});
+    const prevButton = getButton('Previous month');
     expect(prevButton).toBeDisabled();
   });
 
   it('next button is disabled when focusDate month contains max', () => {
     render(<Calendar focusDate="2026-01-01" max="2026-01-15" />);
 
-    const nextButton = screen.getByRole('button', {name: 'Next month'});
+    const nextButton = getButton('Next month');
     expect(nextButton).toBeDisabled();
   });
 
@@ -596,4 +736,48 @@ describe('Calendar', () => {
       }
     }
   });
+
+  // ─── RTL (#3388) ─────────────────────────────────────────────
+
+  describe('RTL month navigation', () => {
+    // jsdom does not apply compiled StyleX CSS, so the scaleX(-1) mirror
+    // itself is only observable in a browser (see the dir="rtl" Storybook
+    // story). These tests pin the structure the fix depends on: both nav
+    // chevrons render inside the navIcon wrapper that carries the
+    // ':is([dir="rtl"] *)' conditional transform.
+    it('wraps both nav chevrons in the RTL-mirroring navIcon wrapper', () => {
+      render(<Calendar focusDate="2026-01-01" />);
+
+      const {className: navIconClass} = stylex.props(calendarStyles.navIcon);
+      expect(navIconClass).toBeTruthy();
+
+      for (const name of ['Previous month', 'Next month']) {
+        const button = getButton(name);
+        const wrappers = Array.from(button.querySelectorAll('span')).filter(
+          span => span.className === navIconClass,
+        );
+        expect(wrappers.length).toBe(1);
+      }
+    });
+
+    it('keeps navigation semantics unchanged under dir="rtl"', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <div dir="rtl">
+          <Calendar focusDate="2026-02-01" />
+        </div>,
+      );
+
+      expect(screen.getByText('February 2026')).toBeInTheDocument();
+
+      // DOM order and handlers must not change in RTL: flexbox already
+      // places "Previous month" at the visual right; only the glyph mirrors.
+      await user.click(getButton('Previous month'));
+      expect(screen.getByText('January 2026')).toBeInTheDocument();
+
+      await user.click(getButton('Next month'));
+      expect(screen.getByText('February 2026')).toBeInTheDocument();
+    });
+  });
 });

package/src/Calendar/Calendar.tsx

@@ -61,7 +61,9 @@ import {
   computeDayCellState,
   computeRangeRounding,
   computePreviewRounding,
+  computeDayNeighborContinuity,
   isEndpoint,
+  type DayNeighborContinuity,
 } from './dayCellUtils';
 
 // =============================================================================
@@ -201,7 +203,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     value,
     defaultValue,
     onChange,
-    numberOfMonths = 1,
+    numberOfMonths: numberOfMonthsProp = 1,
     min,
     max,
     dateConstraints,
@@ -221,6 +223,11 @@ export function Calendar({ref, ...props}: CalendarProps) {
   // DayOfWeek so all downstream date math keeps working with an index.
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
 
+  // `numberOfMonths` is typed `1 | 2`; defensively clamp anything else that
+  // slips through at runtime to 1 so `Array.from({length})` can't render an
+  // absurd number of month grids (e.g. `numberOfMonths={1000}`).
+  const numberOfMonths = numberOfMonthsProp === 2 ? 2 : 1;
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -424,7 +431,14 @@ export function Calendar({ref, ...props}: CalendarProps) {
         <Button
           label="Previous month"
           variant="ghost"
-          icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
+          icon={
+            // Wrapper span (not Icon props): Icon's string mode clobbers
+            // caller classNames, so the RTL mirror must live on its own
+            // element.
+            <span {...stylex.props(calendarStyles.navIcon)}>
+              <Icon icon="chevronLeft" size="sm" color="inherit" />
+            </span>
+          }
           onClick={() => navigateMonth(-1)}
           isDisabled={!canNavigatePrevious}
           isIconOnly
@@ -437,7 +451,11 @@ export function Calendar({ref, ...props}: CalendarProps) {
         <Button
           label="Next month"
           variant="ghost"
-          icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
+          icon={
+            <span {...stylex.props(calendarStyles.navIcon)}>
+              <Icon icon="chevronRight" size="sm" color="inherit" />
+            </span>
+          }
           onClick={() => navigateMonth(1)}
           isDisabled={!canNavigateNext}
           isIconOnly
@@ -784,25 +802,42 @@ function MonthGrid({
                   {weekNum}
                 </div>
               )}
-              {week.map((day, dayIndex) => (
-                <DayCell
-                  key={day.iso}
-                  day={day}
-                  dayIndex={dayIndex}
-                  mode={mode}
-                  selectedDate={selectedDate}
-                  rangeStart={rangeStart}
-                  rangeEnd={rangeEnd}
-                  previewStart={previewStart}
-                  previewEnd={previewEnd}
-                  today={today}
-                  hasOutsideDays={hasOutsideDays}
-                  isDisabled={isDateDisabled(day.date)}
-                  isTabbable={day.iso === seedTabbableIso}
-                  onDayClick={onDayClick}
-                  onDayHover={onDayHover}
-                />
-              ))}
+              {week.map((day, dayIndex) => {
+                // Whether the previous/next day in this week row continues the
+                // highlighted run (range and preview). A disabled or
+                // adjacent-month neighbour breaks continuity, so this day gets
+                // an end cap on that side (#2715).
+                const neighbors = computeDayNeighborContinuity({
+                  week,
+                  dayIndex,
+                  mode,
+                  rangeStart,
+                  rangeEnd,
+                  previewStart,
+                  previewEnd,
+                  isDisabled: isDateDisabled,
+                });
+                return (
+                  <DayCell
+                    key={day.iso}
+                    day={day}
+                    dayIndex={dayIndex}
+                    mode={mode}
+                    selectedDate={selectedDate}
+                    rangeStart={rangeStart}
+                    rangeEnd={rangeEnd}
+                    previewStart={previewStart}
+                    previewEnd={previewEnd}
+                    today={today}
+                    hasOutsideDays={hasOutsideDays}
+                    isDisabled={isDateDisabled(day.date)}
+                    neighbors={neighbors}
+                    isTabbable={day.iso === seedTabbableIso}
+                    onDayClick={onDayClick}
+                    onDayHover={onDayHover}
+                  />
+                );
+              })}
             </div>
           );
         })}
@@ -827,6 +862,12 @@ interface DayCellProps {
   today: PlainDate;
   hasOutsideDays: boolean;
   isDisabled: boolean;
+  /**
+   * Whether the previous/next day in the same week continues the highlighted
+   * run (range and preview). When a neighbour is disabled or outside the month
+   * it breaks the run, so this day gets an end cap on that side (#2715).
+   */
+  neighbors: DayNeighborContinuity;
   /**
    * Whether this day seeds the initial roving tab stop. useGridFocus
    * (`hasRovingTabIndex`) owns the live tab stop thereafter — it honors an
@@ -849,6 +890,7 @@ function DayCell({
   today,
   hasOutsideDays,
   isDisabled,
+  neighbors,
   isTabbable: isTabbableDay,
   onDayClick,
   onDayHover,
@@ -876,11 +918,20 @@ function DayCell({
   });
 
   const endpoint = isEndpoint(state);
-  const rangeRounding = computeRangeRounding(state);
-  const previewRounding = computePreviewRounding(state);
+  const rangeRounding = computeRangeRounding(state, {
+    prevInRange: neighbors.prevInRange,
+    nextInRange: neighbors.nextInRange,
+  });
+  const previewRounding = computePreviewRounding(state, {
+    prevInPreview: neighbors.prevInPreview,
+    nextInPreview: neighbors.nextInPreview,
+  });
 
   return (
-    <div role="gridcell" {...stylex.props(dayCellStyles.cell)}>
+    <div
+      role="gridcell"
+      aria-selected={state.isSelected || state.isInRange || undefined}
+      {...stylex.props(dayCellStyles.cell)}>
       {/* Range background */}
       {state.isInRange && (
         <div
@@ -920,8 +971,10 @@ function DayCell({
         type="button"
         data-date={day.iso}
         aria-label={plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)}
-        aria-selected={state.isSelected || state.isInRange || undefined}
         aria-disabled={state.effectivelyDisabled || undefined}
+        // Mark today's cell programmatically (APG date-picker pattern), not just
+        // visually, so screen-reader users can identify the current date.
+        aria-current={state.isToday ? 'date' : undefined}
         disabled={isDisabled}
         // Initial roving tab-stop seed; useGridFocus owns it after mount.
         tabIndex={isTabbableDay ? 0 : -1}