@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/src/Outline/Outline.test.tsx

@@ -86,7 +86,7 @@ describe('Outline', () => {
     render(<Outline items={items} activeId="install" />);
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
     expect(
       screen.getByRole('link', {name: 'Introduction'}),
@@ -111,7 +111,7 @@ describe('Outline', () => {
     // so it has not moved to the clicked item yet.
     expect(
       screen.getByRole('link', {name: 'Installation'}),
-    ).not.toHaveAttribute('aria-current', 'true');
+    ).not.toHaveAttribute('aria-current', 'location');
 
     // When the scroll settles, the indicator lands on the clicked item.
     act(() => {
@@ -120,7 +120,7 @@ describe('Outline', () => {
     expect(onActiveIdChange).toHaveBeenCalledWith('install');
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     document.body.removeChild(target);
@@ -224,7 +224,7 @@ describe('Outline', () => {
 
     expect(screen.getByRole('link', {name: 'Introduction'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     // Controlled active id is driven entirely by the prop.
@@ -237,7 +237,7 @@ describe('Outline', () => {
     );
     expect(screen.getByRole('link', {name: 'API'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
     expect(
       screen.getByRole('link', {name: 'Introduction'}),
@@ -277,7 +277,7 @@ describe('Outline', () => {
 
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
     expect(onActiveIdChange).toHaveBeenCalledWith('install');
 
@@ -493,7 +493,7 @@ describe('Outline keyboard navigation', () => {
     expect(onNavigateEnd).toHaveBeenCalledTimes(1);
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     cleanup();
@@ -764,7 +764,7 @@ describe('Outline scroll scoping', () => {
     expect(onNavigateEnd).toHaveBeenCalledWith('install');
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     cleanup();
@@ -797,7 +797,7 @@ describe('Outline scroll scoping', () => {
     // has not reached it, so `intro` stays active.
     expect(screen.getByRole('link', {name: 'Introduction'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     rerender(<Outline items={items} offset={64} />);
@@ -806,7 +806,7 @@ describe('Outline scroll scoping', () => {
     });
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     cleanup();
@@ -930,7 +930,7 @@ describe('Outline scroll scoping', () => {
 
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
     expect(screen.getByRole('link', {name: 'API'})).not.toHaveAttribute(
       'aria-current',
@@ -981,7 +981,7 @@ describe('Outline scroll scoping', () => {
 
     expect(screen.getByRole('link', {name: 'Installation'})).toHaveAttribute(
       'aria-current',
-      'true',
+      'location',
     );
 
     pane.remove();

package/src/Outline/Outline.tsx

@@ -372,7 +372,7 @@ export function Outline({
     }
     const links = Array.from(list.querySelectorAll<HTMLElement>('a[href]'));
     const active = links.find(
-      link => link.getAttribute('aria-current') === 'true',
+      link => link.getAttribute('aria-current') === 'location',
     );
     if (active == null) {
       return;
@@ -465,7 +465,7 @@ export function Outline({
             <li key={item.id} {...stylex.props(styles.item)} role="listitem">
               <LinkComponent
                 href={`#${item.id}`}
-                aria-current={isActive ? 'true' : undefined}
+                aria-current={isActive ? 'location' : undefined}
                 onClick={handleClick(item.id)}
                 onKeyDown={handleKeyDown(item.id)}
                 {...mergeProps(

package/src/Pagination/Pagination.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file Pagination.tsx
- * @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button
+ * @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button.
+ *   Reads i18n direction via useDirection() to flip the prev/next chevrons under RTL.
  * @output Exports Pagination component, PaginationProps, PaginationVariant, PaginationSize types
  * @position Core implementation; consumed by index.ts, tested by Pagination.test.tsx
  *
@@ -40,6 +41,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n/useTranslator';
+import {useDirection} from '../i18n/useDirection';
 
 // =============================================================================
 // Types
@@ -360,6 +362,12 @@ export function Pagination({
   const label = labelFromProps ?? t('@astryx.pagination.label');
   const previousLabel = t('@astryx.pagination.previous');
   const nextLabel = t('@astryx.pagination.next');
+
+  // Directional icons: under RTL, the "previous" control points right and the
+  // "next" control points left. aria-labels stay semantic (unchanged).
+  const direction = useDirection();
+  const previousIcon = direction === 'rtl' ? 'chevronRight' : 'chevronLeft';
+  const nextIcon = direction === 'rtl' ? 'chevronLeft' : 'chevronRight';
   const pageIndicatorsLabel = t('@astryx.pagination.pageIndicators');
   const itemsPerPageLabel = t('@astryx.pagination.itemsPerPage');
 
@@ -663,7 +671,7 @@ export function Pagination({
           label={previousLabel}
           variant="ghost"
           size={buttonSize}
-          icon={<Icon icon="chevronLeft" size={isSm ? 'sm' : 'md'} />}
+          icon={<Icon icon={previousIcon} size={isSm ? 'sm' : 'md'} />}
           onClick={handlePrevious}
           isDisabled={isDisabled || !hasPrevious}
           isIconOnly
@@ -675,7 +683,7 @@ export function Pagination({
           label={nextLabel}
           variant="ghost"
           size={buttonSize}
-          icon={<Icon icon="chevronRight" size={isSm ? 'sm' : 'md'} />}
+          icon={<Icon icon={nextIcon} size={isSm ? 'sm' : 'md'} />}
           onClick={handleNext}
           isDisabled={isDisabled || !hasNext}
           isIconOnly

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -90,6 +90,13 @@ export const docs = {
         'Icon to display at the start of the input, before any filter tokens. Forwarded to the internal Tokenizer. Accepts a semantic icon name, an SVG icon component, or a ReactNode directly.',
       slotElements: [{__element: 'Icon', props: {icon: 'search', size: 'sm'}}],
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+      default: "'attached'",
+    },
     {
       name: 'maxTokenLength',
       type: 'number',
@@ -248,6 +255,13 @@ export const docsZh = {
       description:
         '在输入框开头（筛选 token 之前）显示的图标，转发给内部的 Tokenizer。接受语义图标名称、SVG 图标组件或直接传入 ReactNode。',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距。',
+      default: "'attached'",
+    },
     {
       name: 'maxTokenLength',
       type: 'number',
@@ -332,6 +346,7 @@ export const docsDense = {
     isDisabled: 'Disables entire component.',
     status: 'Validation status object w/ type + optional message.',
     startIcon: 'Icon at input start, before filter tokens. Forwarded to internal Tokenizer.',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing.',
     maxTokenLength: 'Max char length for filter value display in tokens.',
     popoverSaveButtonLabel: 'Label for save button in edit popover.',
     timezoneID: 'Timezone ID for date formatting (e.g. "America/New_York").',

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

@@ -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.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

@@ -132,6 +132,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 +208,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/RadioList/RadioList.doc.mjs

@@ -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',

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

@@ -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.tsx

@@ -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/ResizeHandle.test.tsx

@@ -201,6 +201,100 @@ 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;
+    // No physical offset — a plain logical centering class, no biased transform.
+    expect(hitArea.className).toContain('hitAreaCenteredX');
+    expect(hitArea.className).not.toContain('hitAreaOffsetX');
+  });
+
   // --- Prop composition (ordering choice: handler sits after {...props}) ---
 
   it('runs a consumer onKeyDown alongside keyboard resizing', () => {