@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/AspectRatio/AspectRatio.tsx

@@ -5,13 +5,12 @@
 /**
  * @file AspectRatio.tsx
  * @input Uses React, stylex
- * @output Exports AspectRatio component, AspectRatioProps, AspectRatioShape, AspectRatioFit
+ * @output Exports AspectRatio component and AspectRatioProps
  * @position AspectRatio component; maintains a specific aspect ratio for its children
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
  * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
- * - /packages/core/src/reset.css (AspectRatio fit baseline rules)
  * - /apps/storybook/stories/AspectRatio.stories.tsx
  * - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
@@ -30,16 +29,6 @@ import {themeProps} from '../utils/themeProps';
  */
 export type AspectRatioShape = 'rectangle' | 'ellipse';
 
-/**
- * How the child is sized and positioned inside the ratio box.
- * - `cover`: the child fills the box; media is cropped to preserve its own
- *   aspect ratio (`object-fit: cover`).
- * - `contain`: the child fills the box; media is letterboxed to stay fully
- *   visible (`object-fit: contain`).
- * - `center`: the child keeps its natural size and sits centered in the box.
- */
-export type AspectRatioFit = 'cover' | 'contain' | 'center';
-
 export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLDivElement>;
@@ -52,45 +41,20 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
    * The shape of the container. Both shapes respect the provided `ratio`.
    * - `rectangle` (default): a standard rectangular container.
    * - `ellipse`: clips the container to an ellipse — a circle when `ratio={1}`,
-   *   or an oval at other ratios. Pair with `fit="cover"` so the media fills
-   *   the clipped container.
+   *   or an oval at other ratios. Pair with a child that fills the container
+   *   (e.g. an image with `objectFit: 'cover'`).
    *
    * @default 'rectangle'
    *
    * @example
    * ```
-   * <AspectRatio ratio={1} shape="ellipse" fit="cover">
-   *   <img src="avatar.jpg" alt="" />
+   * <AspectRatio ratio={1} shape="ellipse">
+   *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
    * </AspectRatio>
    * ```
    */
   shape?: AspectRatioShape;
 
-  /**
-   * How the child is laid out inside the ratio box, so the child does not
-   * have to declare `width`/`height`/`objectFit` itself.
-   * - `cover`: child fills the box; media is cropped (`object-fit: cover`).
-   * - `contain`: child fills the box; media is letterboxed
-   *   (`object-fit: contain`).
-   * - `center`: child keeps its natural size, centered in the box.
-   *
-   * `cover`/`contain` child sizing ships as zero-specificity baseline rules
-   * in `reset.css`, keyed on the `data-astryx-aspect-ratio-override`
-   * attribute the component sets on the child's direct parent. Any styles
-   * the child sets itself still win, so children that already size
-   * themselves keep their behavior. When omitted, the child is left
-   * unstyled (the pre-existing contract). `fit` is structural, not visual,
-   * so it is not exposed on the theming surface.
-   *
-   * @example
-   * ```
-   * <AspectRatio ratio={16 / 9} fit="cover">
-   *   <img src="image.jpg" alt="Widescreen image" />
-   * </AspectRatio>
-   * ```
-   */
-  fit?: AspectRatioFit;
-
   /**
    * Content to render inside the aspect ratio container.
    * The child element will be positioned absolutely to fill the container.
@@ -118,16 +82,6 @@ const styles = stylex.create({
     width: '100%',
     height: '100%',
   },
-  // fit="center" centers the child at its natural size from the wrapper —
-  // no styles on the child itself. The `cover`/`contain` child sizing can't
-  // live here (StyleX has no descendant selectors); it ships as baseline
-  // rules in reset.css keyed on the `data-astryx-aspect-ratio-override`
-  // attribute the wrapper carries (see below).
-  childCenter: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
 });
 
 /**
@@ -137,32 +91,27 @@ const styles = stylex.create({
  * is positioned absolutely to fill the container, which is useful for images,
  * videos, embeds, and placeholders.
  *
- * Use `fit` to let the component size the child: `cover`/`contain` stretch
- * the child to fill the box (cropping or letterboxing media), `center` keeps
- * the child at its natural size. Without `fit`, the child styles itself.
- *
  * Use `shape="ellipse"` to clip the container into an ellipse — a circle at
  * `ratio={1}` or an oval at other ratios. Both shapes respect the provided
  * `ratio`.
  *
  * @example
  * ```
- * <AspectRatio ratio={16 / 9} fit="cover">
- *   <img src="image.jpg" alt="Widescreen image" />
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="image.jpg" alt="Widescreen image" style={{objectFit: 'cover'}} />
  * </AspectRatio>
  * ```
  *
  * @example
  * ```
- * <AspectRatio ratio={1} shape="ellipse" fit="cover">
- *   <img src="avatar.jpg" alt="" />
+ * <AspectRatio ratio={1} shape="ellipse">
+ *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
  * </AspectRatio>
  * ```
  */
 export function AspectRatio({
   ratio,
   shape = 'rectangle',
-  fit,
   children,
   xstyle,
   className,
@@ -184,16 +133,7 @@ export function AspectRatio({
         {...style, aspectRatio: ratio},
       )}
       {...props}>
-      {/* The marker attribute carries the fit value so the reset.css child
-          sizing can use direct-child selectors on this wrapper — the child's
-          actual parent — without depending on AspectRatio's internal
-          structure or on the theming surface (fit is structural, not
-          themeable). The name is namespaced to avoid collisions. */}
-      <div
-        data-astryx-aspect-ratio-override={fit}
-        {...stylex.props(styles.child, fit === 'center' && styles.childCenter)}>
-        {children}
-      </div>
+      <div {...stylex.props(styles.child)}>{children}</div>
     </div>
   );
 }

package/src/AspectRatio/index.ts

@@ -12,8 +12,4 @@
  */
 
 export {AspectRatio} from './AspectRatio';
-export type {
-  AspectRatioProps,
-  AspectRatioShape,
-  AspectRatioFit,
-} from './AspectRatio';
+export type {AspectRatioProps, AspectRatioShape} from './AspectRatio';

package/src/Avatar/Avatar.doc.mjs

@@ -106,15 +106,4 @@ export const docsDense = {
       {guidance: false, description: 'Force a square or custom shape. Avatars are always circular.'},
     ],
   },
-  propDescriptions: {
-    src: 'primary image source URL',
-    fallbackSrc: 'fallback image when primary fails',
-    name: 'user name for initials and alt text',
-    alt: 'alt text; falls back to name',
-    size: "avatar size. Named ('tiny', 'xsmall', 'small', 'medium', 'large') or numeric px. Short names 'sm'/'md'/'lg' are NOT valid; use full words.",
-    status: 'corner content for status indicators',
-  },
-  components: [
-    {name: 'AvatarStatusDot', description: 'size-aware status indicator rendered in the Avatar corner'},
-  ],
 };

package/src/Avatar/Avatar.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import {Avatar} from './Avatar';
 
 describe('Avatar', () => {
@@ -34,35 +34,4 @@ describe('Avatar', () => {
     // The inner <img> carries an empty alt so it isn't announced separately.
     expect(innerImg).toHaveAttribute('alt', '');
   });
-
-  it('retries a new src after a previous src failed to load', () => {
-    const {rerender} = render(
-      <Avatar name="Ada" src="https://example.com/broken.jpg" />,
-    );
-    const wrapper = screen.getByRole('img', {name: 'Ada'});
-    fireEvent.error(wrapper.querySelector('img')!);
-    // Broken image falls back to initials.
-    expect(wrapper.querySelector('img')).toBeNull();
-    expect(wrapper).toHaveTextContent('A');
-
-    // A different src must get a fresh load attempt, not the stale error.
-    rerender(<Avatar name="Ada" src="https://example.com/ada.jpg" />);
-    const img = wrapper.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img).toHaveAttribute('src', 'https://example.com/ada.jpg');
-  });
-
-  it('retries a new fallbackSrc after a previous fallbackSrc failed to load', () => {
-    const {rerender} = render(
-      <Avatar name="Ada" fallbackSrc="https://example.com/broken.jpg" />,
-    );
-    const wrapper = screen.getByRole('img', {name: 'Ada'});
-    fireEvent.error(wrapper.querySelector('img')!);
-    expect(wrapper.querySelector('img')).toBeNull();
-
-    rerender(<Avatar name="Ada" fallbackSrc="https://example.com/ada.jpg" />);
-    const img = wrapper.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img).toHaveAttribute('src', 'https://example.com/ada.jpg');
-  });
 });

package/src/Avatar/Avatar.tsx

@@ -63,7 +63,20 @@ type AvatarNamedSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large';
  * Numeric size options (in pixels)
  */
 type AvatarNumericSize =
-  16 | 20 | 24 | 32 | 36 | 40 | 48 | 60 | 64 | 72 | 96 | 128 | 144 | 180;
+  | 16
+  | 20
+  | 24
+  | 32
+  | 36
+  | 40
+  | 48
+  | 60
+  | 64
+  | 72
+  | 96
+  | 128
+  | 144
+  | 180;
 
 /**
  * Avatar size - can be a named size or a specific pixel value
@@ -276,16 +289,11 @@ export function Avatar({
   ref,
   ...props
 }: AvatarProps) {
-  // Track the exact src that failed (rather than a boolean) so a changed
-  // src/fallbackSrc gets a fresh load attempt instead of the stale error.
-  const [erroredSrc, setErroredSrc] = useState<string | undefined>(undefined);
-  const [erroredFallbackSrc, setErroredFallbackSrc] = useState<
-    string | undefined
-  >(undefined);
+  const [imageError, setImageError] = useState(false);
+  const [fallbackError, setFallbackError] = useState(false);
 
-  const showImage = src && erroredSrc !== src;
-  const showFallbackImage =
-    !showImage && fallbackSrc && erroredFallbackSrc !== fallbackSrc;
+  const showImage = src && !imageError;
+  const showFallbackImage = !showImage && fallbackSrc && !fallbackError;
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
 
@@ -324,7 +332,7 @@ export function Avatar({
             <img
               src={src}
               alt=""
-              onError={() => setErroredSrc(src)}
+              onError={() => setImageError(true)}
               {...stylex.props(styles.image)}
             />
           )}
@@ -332,7 +340,7 @@ export function Avatar({
             <img
               src={fallbackSrc}
               alt=""
-              onError={() => setErroredFallbackSrc(fallbackSrc)}
+              onError={() => setFallbackError(true)}
               {...stylex.props(styles.image)}
             />
           )}

package/src/Banner/Banner.doc.mjs

@@ -113,7 +113,6 @@ export const docs = {
     targets: [
       {className: 'astryx-banner', visualProps: ['container', 'status']},
       {className: 'astryx-banner-icon', visualProps: ['status']},
-      {className: 'astryx-banner-content', visualProps: ['container', 'status']},
     ],
     vars: [
       {name: '--_banner-radius', description: 'Border radius (card container only)', default: 'var(--radius-container)', private: true},
@@ -181,13 +180,6 @@ export const docsZh = {
           'status',
         ],
       },
-      {
-        className: 'astryx-banner-content',
-        visualProps: [
-          'container',
-          'status',
-        ],
-      },
     ],
     vars: [
       {name: '--_banner-radius', description: 'Border radius (card container only)', default: 'var(--radius-container)', private: true},

package/src/Banner/Banner.test.tsx

@@ -270,44 +270,6 @@ describe('Banner', () => {
     expect(expandIndex).toBeLessThan(dismissIndex);
   });
 
-  it('links the expand toggle to its content region via aria-controls', () => {
-    render(
-      <Banner status="info" title="Controls Test" defaultIsExpanded>
-        <div data-testid="region-content">Region content</div>
-      </Banner>,
-    );
-
-    const toggle = screen.getByRole('button', {name: 'Collapse'});
-    const controlsId = toggle.getAttribute('aria-controls');
-    // aria-controls must be present and point at the real content region.
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByTestId('region-content'));
-  });
-
-  it('sets aria-controls only while the content region is mounted', async () => {
-    const user = userEvent.setup();
-    render(
-      <Banner status="info" title="Controls Toggle">
-        <div data-testid="region-content">Region content</div>
-      </Banner>,
-    );
-
-    // Collapsed: the region is unmounted, so no dangling aria-controls target.
-    const collapsedToggle = screen.getByRole('button', {name: 'Expand'});
-    expect(collapsedToggle).not.toHaveAttribute('aria-controls');
-
-    // Expanded: aria-controls resolves to the mounted region with the children.
-    await user.click(collapsedToggle);
-    const expandedToggle = screen.getByRole('button', {name: 'Collapse'});
-    const controlsId = expandedToggle.getAttribute('aria-controls');
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByTestId('region-content'));
-  });
-
   it('does not render content area when no children', () => {
     const {container} = render(<Banner status="info" title="No Children" />);
     const root = container.firstElementChild;

package/src/Banner/Banner.tsx

@@ -31,7 +31,7 @@
  * - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
  */
 
-import {useId, useState, type ReactNode} from 'react';
+import {useState, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {Button} from '../Button';
@@ -387,11 +387,6 @@ export function Banner({
 }: BannerProps) {
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
-  // Links the expand/collapse toggle to the content region it shows/hides so
-  // assistive tech can move from the button to its controlled content
-  // (disclosure pattern). The region is conditionally rendered, so aria-controls
-  // below is set only while it's mounted to avoid a dangling reference.
-  const contentId = useId();
   const defaultIconName = defaultIconNames[status];
   const role = statusRole[status];
   const iconColor = statusIconColor[status];
@@ -482,7 +477,6 @@ export function Banner({
                 }
                 onClick={handleToggleExpand}
                 aria-expanded={isExpanded}
-                aria-controls={showContent ? contentId : undefined}
                 isIconOnly
               />
             )}
@@ -503,7 +497,6 @@ export function Banner({
       {/* Content area: collapsible card background — theme target ('banner-content') */}
       {showContent && (
         <div
-          id={contentId}
           {...mergeProps(
             themeProps('banner-content', {container, status}),
             stylex.props(styles.contentArea, isCard && styles.contentAreaCard),

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. The arrows mirror automatically under dir="rtl".'},
+      {name: 'Month header', required: true, description: 'The month name and year with navigation arrows to move between months.'},
       {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,11 +12,8 @@
 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.
@@ -27,7 +24,7 @@ import {calendarStyles} from './styles';
 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 getButton(pattern);
+  return screen.getByRole('button', {name: pattern});
 }
 
 describe('Calendar', () => {
@@ -74,24 +71,6 @@ 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 />);
 
@@ -118,11 +97,7 @@ describe('Calendar', () => {
     render(<Calendar value="2026-01-15" focusDate="2026-01-01" />);
 
     const day15 = getDayButton(15);
-    // 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');
+    expect(day15).toHaveAttribute('aria-selected', 'true');
   });
 
   it('calls onChange when date is selected', async () => {
@@ -148,7 +123,7 @@ describe('Calendar', () => {
     // Verify we start on February
     expect(screen.getByText('February 2026')).toBeInTheDocument();
 
-    const prevButton = getButton('Previous month');
+    const prevButton = screen.getByRole('button', {name: 'Previous month'});
     await user.click(prevButton);
 
     expect(screen.getByText('January 2026')).toBeInTheDocument();
@@ -162,7 +137,7 @@ describe('Calendar', () => {
     // Verify we start on January
     expect(screen.getByText('January 2026')).toBeInTheDocument();
 
-    const nextButton = getButton('Next month');
+    const nextButton = screen.getByRole('button', {name: 'Next month'});
     await user.click(nextButton);
 
     expect(screen.getByText('February 2026')).toBeInTheDocument();
@@ -176,7 +151,7 @@ describe('Calendar', () => {
       <Calendar focusDate="2026-01-01" onFocusDateChange={handleFocusChange} />,
     );
 
-    const nextButton = getButton('Next month');
+    const nextButton = screen.getByRole('button', {name: 'Next month'});
     await user.click(nextButton);
 
     expect(handleFocusChange).toHaveBeenCalledWith('2026-02-01');
@@ -234,39 +209,12 @@ describe('Calendar', () => {
 
     render(<Calendar numberOfMonths={2} focusDate="2026-01-01" />);
 
-    const nextButton = getButton('Next month');
+    const nextButton = screen.getByRole('button', {name: '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', () => {
@@ -362,22 +310,9 @@ describe('Calendar', () => {
     const day12 = getDayButton(12);
     const day15 = getDayButton(15);
 
-    // 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');
+    expect(day10).toHaveAttribute('aria-selected', 'true');
+    expect(day12).toHaveAttribute('aria-selected', 'true');
+    expect(day15).toHaveAttribute('aria-selected', 'true');
   });
 
   it('caps the range highlight next to a disabled mid-range day (#2715)', () => {
@@ -541,8 +476,12 @@ describe('Calendar', () => {
   it('has navigation buttons with accessible labels', () => {
     render(<Calendar />);
 
-    expect(getButton('Previous month')).toBeInTheDocument();
-    expect(getButton('Next month')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Previous month'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Next month'}),
+    ).toBeInTheDocument();
   });
 
   // ─── Bug Regression Tests ───────────────────────────────────
@@ -650,14 +589,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 = getButton('Previous month');
+    const prevButton = screen.getByRole('button', {name: '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 = getButton('Next month');
+    const nextButton = screen.getByRole('button', {name: 'Next month'});
     expect(nextButton).toBeDisabled();
   });
 
@@ -736,48 +675,4 @@ 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();
-    });
-  });
 });