@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/AspectRatio/AspectRatio.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When AspectRatio.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeAll} from 'vitest';
+import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {AspectRatio} from './AspectRatio';
 
@@ -176,145 +176,4 @@ describe('AspectRatio', () => {
     const video = screen.getByTestId('video');
     expect(video).toBeInTheDocument();
   });
-
-  describe('fit', () => {
-    it('marks the child\'s direct parent with data-astryx-aspect-ratio-override for fit="cover"', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="cover">
-          <img src="test.jpg" alt="Test" data-testid="image" />
-        </AspectRatio>,
-      );
-      // The marker sits on the child's actual parent, so the reset.css
-      // sizing rules are direct-child selectors with no dependence on
-      // AspectRatio's internal structure.
-      const wrapper = screen.getByTestId('image').parentElement;
-      expect(wrapper).toHaveAttribute(
-        'data-astryx-aspect-ratio-override',
-        'cover',
-      );
-    });
-
-    it('marks the child\'s direct parent with data-astryx-aspect-ratio-override for fit="contain"', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="contain">
-          <img src="test.jpg" alt="Test" data-testid="image" />
-        </AspectRatio>,
-      );
-      const wrapper = screen.getByTestId('image').parentElement;
-      expect(wrapper).toHaveAttribute(
-        'data-astryx-aspect-ratio-override',
-        'contain',
-      );
-    });
-
-    it('does not expose fit on the theming surface', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="cover" data-testid="aspect-ratio">
-          <img src="test.jpg" alt="Test" />
-        </AspectRatio>,
-      );
-      const element = screen.getByTestId('aspect-ratio');
-      // fit is structural, not visual — no data-fit attribute or class
-      // token on the themeable root (only shape is a theming target).
-      expect(element).not.toHaveAttribute('data-fit');
-      expect(element.className).not.toContain('cover');
-    });
-
-    it('emits no marker when fit is omitted (back-compat)', () => {
-      render(
-        <AspectRatio ratio={16 / 9} data-testid="aspect-ratio">
-          <img src="test.jpg" alt="Test" data-testid="image" />
-        </AspectRatio>,
-      );
-      const wrapper = screen.getByTestId('image').parentElement;
-      expect(wrapper).not.toHaveAttribute('data-astryx-aspect-ratio-override');
-      // Without the marker, none of the reset.css fit rules can match, so
-      // existing self-styled children render exactly as before.
-      expect(screen.getByTestId('image')).not.toHaveAttribute('class');
-    });
-
-    it('never touches the child element props', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="cover">
-          <img
-            src="test.jpg"
-            alt="Test"
-            data-testid="image"
-            className="consumer-class"
-            style={{objectFit: 'contain'}}
-          />
-        </AspectRatio>,
-      );
-      const image = screen.getByTestId('image');
-      // Fit styling is pure CSS (zero-specificity reset rules); the child's
-      // own className/style pass through untouched and always win, so
-      // children that already size themselves keep their behavior.
-      expect(image.className).toBe('consumer-class');
-      expect(image.style.objectFit).toBe('contain');
-    });
-
-    it('centers the child via the wrapper with fit="center"', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="center">
-          <img src="test.jpg" alt="Test" data-testid="image" />
-        </AspectRatio>,
-      );
-      const image = screen.getByTestId('image');
-      expect(image).not.toHaveAttribute('class');
-      const wrapper = image.parentElement;
-      expect(wrapper?.className).toContain('childCenter');
-    });
-
-    it('does not center the wrapper for other fit values', () => {
-      render(
-        <AspectRatio ratio={16 / 9} fit="cover">
-          <img src="test.jpg" alt="Test" data-testid="image" />
-        </AspectRatio>,
-      );
-      const wrapper = screen.getByTestId('image').parentElement;
-      expect(wrapper?.className).not.toContain('childCenter');
-    });
-  });
-
-  describe('reset.css fit baseline rules', () => {
-    // The cover/contain child sizing ships as zero-specificity baseline
-    // rules in reset.css keyed on the data-astryx-aspect-ratio-override
-    // marker the component sets on the child's direct parent. These
-    // assertions keep the stylesheet in sync with the component contract.
-    let resetCSS: string;
-
-    beforeAll(async () => {
-      const fs = await import('fs');
-      const path = await import('path');
-      resetCSS = fs.readFileSync(
-        path.resolve(__dirname, '../reset.css'),
-        'utf-8',
-      );
-    });
-
-    it('sizes the child to fill the box for cover and contain', () => {
-      const fillMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\], \[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(\*\)\s*\{([^}]+)\}/,
-      );
-      expect(fillMatch).not.toBeNull();
-      expect(fillMatch![1]).toContain('width: 100%');
-      expect(fillMatch![1]).toContain('height: 100%');
-    });
-
-    it('crops media with object-fit: cover for fit="cover"', () => {
-      const coverMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="cover"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(coverMatch).not.toBeNull();
-      expect(coverMatch![1]).toContain('object-fit: cover');
-    });
-
-    it('letterboxes media with object-fit: contain for fit="contain"', () => {
-      const containMatch = resetCSS.match(
-        /:where\(\[data-astryx-aspect-ratio-override="contain"\]\)\s*>\s*:where\(img, video\)\s*\{([^}]+)\}/,
-      );
-      expect(containMatch).not.toBeNull();
-      expect(containMatch![1]).toContain('object-fit: contain');
-    });
-  });
 });

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/AvatarGroup/AvatarGroup.doc.mjs

@@ -24,7 +24,6 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-avatar-group', visualProps: ['size']},
-      {className: 'astryx-avatar-group-overflow'},
     ],
   },
   description: 'Stacked avatar display with overlapping layout and optional overflow indicator. Children are Avatar elements.',

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.'},