@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/PowerSearch/PowerSearch.test.tsx

@@ -424,3 +424,26 @@ describe('PowerSearch', () => {
     });
   });
 });
+
+
+describe('PowerSearch statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});

package/src/PowerSearch/PowerSearch.tsx

@@ -11,7 +11,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
- * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
 
 import React, {
@@ -37,7 +37,7 @@ import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 import type {IconName} from '../Icon/globalIconRegistry';
-import type {InputStatus} from '../Field';
+import type {InputStatus, FieldStatusVariant} from '../Field';
 import {usePopover} from '../Popover/usePopover';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {
@@ -383,6 +383,13 @@ export interface PowerSearchProps extends Omit<
   onBlur?: (e: React.FocusEvent) => void;
   /** Validation status. */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
   /** Max width for dropdown menu. */
   menuWidth?: number;
   /** Max display length for filter token values. @default 40 */
@@ -527,6 +534,7 @@ export function PowerSearch({
   onFocus,
   onBlur,
   status,
+  statusVariant = 'attached',
   maxTokenLength = 40,
   popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
   timezoneID,
@@ -1033,6 +1041,7 @@ export function PowerSearch({
           hasEntriesOnFocus
           debounceMs={0}
           status={status}
+          statusVariant={statusVariant}
           onFocus={onFocus}
           onBlur={onBlur}
           xstyle={xstyle}

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'ProgressBar',
@@ -90,7 +90,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'ProgressBar',
   displayName: 'Progress Bar',
@@ -177,7 +177,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Progress bar for displaying determinate or indeterminate progress.',

package/src/ProgressBar/ProgressBar.test.tsx

@@ -242,5 +242,39 @@ describe('ProgressBar', () => {
         unmount();
       }
     });
+
+    it('drives a direction-aware indeterminate slide (mirrored keyframe under RTL)', () => {
+      // StyleX injects the keyframes + the atomic rule that swaps the
+      // animation-name under `[dir="rtl"]`. Scan the injected CSS so we can
+      // assert the RTL branch exists without relying on jsdom animation.
+      function injectedCss(): string {
+        let out = '';
+        for (const sheet of Array.from(document.styleSheets)) {
+          try {
+            for (const rule of Array.from(sheet.cssRules)) {
+              out += rule.cssText + '\n';
+            }
+          } catch {
+            // ignore cross-origin sheets
+          }
+        }
+        out += Array.from(document.querySelectorAll('style'))
+          .map(s => s.textContent || '')
+          .join('\n');
+        return out;
+      }
+
+      render(<ProgressBar isIndeterminate label="Loading" />);
+      const css = injectedCss();
+      // LTR keyframe slides physically left → right (−100% → 250%).
+      expect(css).toMatch(/translateX\(-100%\)/);
+      expect(css).toMatch(/translateX\(250%\)/);
+      // RTL keyframe mirrors it (100% → −250%) so the bar travels along the
+      // reading flow (inline-start → inline-end, i.e. right → left).
+      expect(css).toMatch(/translateX\(100%\)/);
+      expect(css).toMatch(/translateX\(-250%\)/);
+      // The animation-name is swapped specifically under `[dir="rtl"]`.
+      expect(css).toMatch(/:is\(\[dir="rtl"\][^)]*\)[^{]*\{\s*animation-name:/);
+    });
   });
 });

package/src/ProgressBar/ProgressBar.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/ProgressBar/ProgressBar.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/ProgressBar/index.ts (exports if types change)
  * - /apps/storybook/stories/ProgressBar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ProgressBar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
 
 import {useId} from 'react';
@@ -32,27 +32,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
-
-/**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
- */
-export interface ProgressBarVariantMap {
-  accent: true;
-  success: true;
-  warning: true;
-  neutral: true;
-  error: true;
-}
+import type {ProgressBarVariantMap} from './index';
 
 /**
  * Progress bar variant type — maps to semantic color tokens.
@@ -132,6 +112,18 @@ const indeterminateSlide = stylex.keyframes({
   },
 });
 
+// RTL: mirror the slide so the indeterminate bar travels along the reading
+// flow (inline-start → inline-end, i.e. right → left) instead of always
+// physically left → right. The magnitudes mirror the LTR keyframe.
+const indeterminateSlideRtl = stylex.keyframes({
+  '0%': {
+    transform: 'translateX(100%)',
+  },
+  '100%': {
+    transform: 'translateX(-250%)',
+  },
+});
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -196,7 +188,10 @@ const styles = stylex.create({
     height: '100%',
     width: '40%',
     borderRadius: radiusVars['--radius-full'],
-    animationName: indeterminateSlide,
+    animationName: {
+      default: indeterminateSlide,
+      ':is([dir="rtl"] *)': indeterminateSlideRtl,
+    },
     animationDuration: {
       default: '1.5s',
       '@media (prefers-reduced-motion: reduce)': '3s',

package/src/ProgressBar/index.ts

@@ -6,9 +6,26 @@
  * @file ProgressBar component barrel export
  */
 
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ProgressBarVariantMap {
+  accent: true;
+  success: true;
+  warning: true;
+  neutral: true;
+  error: true;
+}
+
 export {ProgressBar} from './ProgressBar';
-export type {
-  ProgressBarProps,
-  ProgressBarVariant,
-  ProgressBarVariantMap,
-} from './ProgressBar';
+export type {ProgressBarProps, ProgressBarVariant} from './ProgressBar';

package/src/RadioList/RadioList.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'RadioList',
@@ -114,6 +114,12 @@ export const docs = {
       type: 'string',
       description: 'Tooltip text for an info icon next to the label.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -143,7 +149,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -165,7 +171,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Radio group component for single-value selection from list of options.',

package/src/RadioList/RadioList.test.tsx

@@ -14,6 +14,7 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {RadioList} from './RadioList';
 import {RadioListItem} from './RadioListItem';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -580,7 +581,11 @@ describe('RadioList', () => {
     it('submits the selected value under htmlName', () => {
       const {container} = render(
         <form>
-          <RadioList label="Preference" htmlName="pref" value="b" onChange={() => {}}>
+          <RadioList
+            label="Preference"
+            htmlName="pref"
+            value="b"
+            onChange={() => {}}>
             <RadioListItem label="Option A" value="a" />
             <RadioListItem label="Option B" value="b" />
           </RadioList>
@@ -599,13 +604,14 @@ describe('RadioList', () => {
             value="a"
             onChange={() => {}}
             isDisabled
-            disabledMessage="Locked"
-          >
+            disabledMessage="Locked">
             <RadioListItem label="Option A" value="a" />
           </RadioList>
         </form>,
       );
-      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
     });
 
     it('keeps working as an isolated group when htmlName is omitted', () => {
@@ -642,3 +648,19 @@ describe('RadioList', () => {
     });
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so this asserts that the
+// compiled output includes the forced-colors rule; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles a forced-colors fill so the selected dot survives Windows High Contrast', () => {
+    render(
+      <RadioList label="Preference" value="a" onChange={() => {}}>
+        <RadioListItem label="Option A" value="a" />
+      </RadioList>,
+    );
+    // The painted inner dot would be stripped to Canvas (invisible), making
+    // checked and unchecked radios identical; CanvasText keeps it perceivable.
+    expect(getForcedColorsRules()).toContain('background-color: canvastext;');
+  });
+});

package/src/RadioList/RadioList.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
 import React, {
@@ -146,8 +146,8 @@ export interface RadioListProps extends Omit<
   status?: InputStatus;
   /**
    * The size of the radio controls.
-   * - 'sm': Compact size (18px radio, 20px wrapper)
-   * - 'md': Default size (22px radio, 24px wrapper)
+   * - 'sm': Compact size (20px radio)
+   * - 'md': Default size (24px radio)
    * @default 'md'
    */
   size?: RadioListSize;

package/src/RadioList/RadioListItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'RadioListItem',

package/src/RadioList/RadioListItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
 import React, {use, useId, type ReactNode} from 'react';
@@ -119,7 +119,14 @@ const styles = stylex.create({
   },
   innerDot: {
     borderRadius: '50%',
-    backgroundColor: colorVars['--color-on-accent'],
+    backgroundColor: {
+      default: colorVars['--color-on-accent'],
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the selected dot invisible — checked and unchecked
+      // radios would look identical. CanvasText keeps the dot perceivable on
+      // the Canvas circle fill (WCAG 1.4.11).
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],
@@ -140,12 +147,12 @@ const wrapperSizeStyles = stylex.create({
 
 const radioSizeStyles = stylex.create({
   sm: {
-    width: 18,
-    height: 18,
+    width: 20,
+    height: 20,
   },
   md: {
-    width: 22,
-    height: 22,
+    width: 24,
+    height: 24,
   },
 });
 

package/src/Resizable/Resizable.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'Resizable',
   displayName: 'Resizable',
@@ -188,7 +188,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator.',
   usage: {

package/src/Resizable/ResizeHandle.test.tsx

@@ -201,6 +201,101 @@ describe('ResizeHandle', () => {
     expect(document.body.style.userSelect).toBe('');
   });
 
+  // --- RTL pointer-drag direction ---
+
+  it('drives the region with the raw pointer delta under LTR', () => {
+    const resizable: ResizableProps = {
+      _size: 200,
+      _isCollapsed: false,
+      _onResizeStart: vi.fn(),
+      _onResizeMove: vi.fn(),
+      _onResizeEnd: vi.fn(),
+      _minSizePx: 100,
+      _maxSizePx: 400,
+      _snaps: [],
+      _collapsedSize: 40,
+      _collapsible: false,
+      _isResizableProps: true,
+    };
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = screen.getByRole('separator')
+      .firstElementChild as HTMLElement;
+
+    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    // Pointer moves +40px to the right → panel grows by +40 under LTR.
+    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenLastCalledWith(40);
+  });
+
+  it('inverts the pointer delta under RTL so dragging resizes intuitively', () => {
+    const resizable: ResizableProps = {
+      _size: 200,
+      _isCollapsed: false,
+      _onResizeStart: vi.fn(),
+      _onResizeMove: vi.fn(),
+      _onResizeEnd: vi.fn(),
+      _minSizePx: 100,
+      _maxSizePx: 400,
+      _snaps: [],
+      _collapsedSize: 40,
+      _collapsible: false,
+      _isResizableProps: true,
+    };
+    // Under RTL the start panel sits on the RIGHT, so a pointer move to the
+    // right (+clientX) must SHRINK it — the delta is inverted. The handle reads
+    // its own computed `direction` via getRTLMultiplier(); jsdom doesn't resolve
+    // inherited `direction`, so force it on the separator (the handle element),
+    // mirroring the Slider RTL pointer-mapping test precedent.
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const separator = screen.getByRole('separator');
+    const hitArea = separator.firstElementChild as HTMLElement;
+
+    const realGetComputedStyle = window.getComputedStyle;
+    const gcsSpy = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockImplementation((el: Element, pseudo?: string | null) => {
+        if (el === separator) {
+          return {direction: 'rtl'} as CSSStyleDeclaration;
+        }
+        return realGetComputedStyle(el, pseudo ?? undefined);
+      });
+
+    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    // Same +40px physical move as LTR, but mirrored → −40 delta under RTL.
+    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenLastCalledWith(-40);
+
+    gcsSpy.mockRestore();
+  });
+
+  // --- Hit-area geometry (grab zone tracks the visible pill) ---
+
+  it('anchors the biased grab zone with the pill offset and a dir-flipped centering shift', () => {
+    // For an off-center pill the hit area must reuse the pill's physical offset
+    // construction (anchored at insetInlineStart:0) rather than a divider-
+    // relative 50% anchor + percentage bias, so the two stay aligned in LTR and
+    // RTL. The half-width-difference centering shift (6.5px) is inline, so it
+    // flips physical sign under RTL: `- 6.5px` (LTR) vs `+ 6.5px` (RTL). See the
+    // Playwright measurement (hitArea.center === pill.center, 0px offset in both
+    // directions) for the geometric proof; here we lock the transform shape.
+    render(<Harness handleProps={{pillPlacement: 'start'}} />);
+    const hitArea = getSeparator().firstElementChild as HTMLElement;
+    expect(hitArea.className).toContain('hitAreaOffsetX');
+    const style = hitArea.getAttribute('style') ?? '';
+    // LTR (default) branch subtracts the centering shift; RTL branch adds it.
+    expect(style).toContain('- 6.5px');
+    expect(style).toContain('+ 6.5px');
+  });
+
+  it('centers the grab zone on the divider when the pill is centered (no bias)', () => {
+    render(<Harness handleProps={{pillPlacement: 'center'}} />);
+    const hitArea = getSeparator().firstElementChild as HTMLElement;
+    // Centered via the shared rtlStyles.centerInline helper (direction-symmetric
+    // left+translateX), not a biased offset.
+    expect(hitArea.className).toContain('centerInline');
+    expect(hitArea.className).not.toContain('hitAreaOffsetX');
+  });
+
   // --- Prop composition (ordering choice: handler sits after {...props}) ---
 
   it('runs a consumer onKeyDown alongside keyboard resizing', () => {