@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Popover/Popover.test.tsx

@@ -354,69 +354,4 @@ describe('Popover', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'true');
     });
   });
-
-  describe('focus restoration', () => {
-    it('returns focus to the trigger when closed via Escape', () => {
-      render(
-        <Popover
-          content={
-            <button type="button" data-testid="inside-content">
-              Inside
-            </button>
-          }
-          label="Test">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-      const trigger = screen.getByRole('button', {name: 'Open'});
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-
-      fireEvent.click(trigger);
-      expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-      // Move focus into the open popover, as a keyboard user would.
-      const inside = screen.getByTestId('inside-content');
-      inside.focus();
-      expect(inside).toHaveFocus();
-
-      fireEvent.keyDown(document, {key: 'Escape'});
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      expect(trigger).toHaveFocus();
-    });
-
-    it('returns focus to the trigger on light dismiss', () => {
-      render(
-        <Popover
-          content={
-            <button type="button" data-testid="inside-content">
-              Inside
-            </button>
-          }
-          label="Test">
-          <button type="button">Open</button>
-        </Popover>,
-      );
-      const trigger = screen.getByRole('button', {name: 'Open'});
-      trigger.focus();
-
-      fireEvent.click(trigger);
-      expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-      const inside = screen.getByTestId('inside-content');
-      inside.focus();
-      expect(inside).toHaveFocus();
-
-      // Simulate the browser's light dismiss for popover="auto": clicking
-      // outside fires a `toggle` event with newState "closed".
-      const popoverEl = document.querySelector('[popover]');
-      expect(popoverEl).not.toBeNull();
-      const toggleEvent = new Event('toggle');
-      Object.defineProperty(toggleEvent, 'newState', {value: 'closed'});
-      fireEvent(popoverEl as HTMLElement, toggleEvent);
-
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      expect(trigger).toHaveFocus();
-    });
-  });
 });

package/src/Popover/usePopover.doc.mjs

@@ -29,7 +29,7 @@ export const docs = {
     {name: 'toggle', type: '() => void', description: 'Toggle the popover open or closed.'},
     {name: 'isOpen', type: 'boolean', description: 'Whether the popover is currently open.'},
     {name: 'id', type: 'string', description: 'Unique ID for aria-describedby or aria-controls.'},
-    {name: 'render', type: '(children: ReactNode, props?: ContextRenderProps) => ReactNode', description: 'Render function for anchor-positioned popover content. Pass placement and alignment here. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).'},
+    {name: 'render', type: '(children: ReactNode, props?: ContextRenderProps) => ReactNode', description: 'Render function for anchor-positioned popover content. Pass placement and alignment here.'},
     {name: 'triggerProps', type: '{aria-haspopup: "dialog" | "true"; aria-expanded: boolean; aria-controls: string}', description: 'ARIA attributes to spread onto the trigger element. aria-haspopup reflects the popover role.'},
   ],
   usage: {

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -120,7 +120,7 @@ export const docs = {
       name: 'resultCount',
       type: 'number | string',
       description:
-        'Number of results matching the current filters. When a number, formatted as "N results". When a string, displayed as-is. Changes are announced to screen readers via a polite live region.',
+        'Number of results matching the current filters. When a number, formatted as "N results". When a string, displayed as-is.',
     },
     {
       name: 'size',
@@ -261,7 +261,7 @@ export const docsZh = {
       name: 'resultCount',
       type: 'number | string',
       description:
-        '匹配当前过滤器的结果数量。数字类型时格式化为"N results"。字符串类型时按原样显示。数量变化会通过 polite 实时区域向屏幕阅读器播报。',
+        '匹配当前过滤器的结果数量。数字类型时格式化为"N results"。字符串类型时按原样显示。',
     },
     {
       name: 'size',

package/src/PowerSearch/PowerSearch.test.tsx

@@ -10,11 +10,10 @@
  */
 
 import {useState} from 'react';
-import {describe, it, expect, vi, beforeAll, afterAll, afterEach} from 'vitest';
+import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
 import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {PowerSearch} from './PowerSearch';
-import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import type {PowerSearchConfig, PowerSearchFilter} from './types';
 
 // =============================================================================
@@ -60,12 +59,6 @@ afterAll(() => {
   (HTMLElement.prototype as any).matches = originalMatches;
 });
 
-// Reset the singleton live regions between tests so result-count
-// announcements from one test don't leak into the next.
-afterEach(() => {
-  __resetLiveRegionsForTest();
-});
-
 // =============================================================================
 // Fixtures
 // =============================================================================
@@ -302,105 +295,4 @@ describe('PowerSearch', () => {
       expect(screen.getByRole('combobox')).toBeDisabled();
     });
   });
-
-  describe('result count announcements', () => {
-    const politeRegion = () =>
-      document.querySelector('[data-astryx-live-region="polite"]');
-
-    it('announces the result count to a polite live region when it changes', async () => {
-      const {rerender} = render(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount={0}
-        />,
-      );
-      rerender(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount={5}
-        />,
-      );
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('5 results');
-      });
-    });
-
-    it('announces "1 result" (singular) for a single match', async () => {
-      const {rerender} = render(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount={0}
-        />,
-      );
-      rerender(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount={1}
-        />,
-      );
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('1 result');
-      });
-      expect(politeRegion()?.textContent).not.toMatch(/results/);
-    });
-
-    it('announces a string result count verbatim', async () => {
-      const {rerender} = render(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount="0 items"
-        />,
-      );
-      rerender(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount="Showing 1.2k matches"
-        />,
-      );
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Showing 1.2k matches');
-      });
-    });
-
-    it('does not announce the result count present on initial mount', async () => {
-      render(
-        <PowerSearch
-          config={config}
-          filters={[]}
-          onChange={() => {}}
-          resultCount={42}
-        />,
-      );
-      // Flush effects and any pending live-region rAF writes.
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 50));
-      });
-      expect(politeRegion()?.textContent ?? '').not.toContain('42');
-    });
-
-    it('leaves Typeahead dropdown announcements intact and stays silent when no resultCount is set', async () => {
-      const user = userEvent.setup();
-      render(<PowerSearchWrapper config={config} />);
-      const input = screen.getByRole('combobox');
-      await user.click(input);
-      await user.type(input, 'Status');
-      // BaseTypeahead announces the dropdown suggestion count; PowerSearch adds
-      // no result-count announcement because resultCount is unset.
-      await waitFor(() => {
-        expect(politeRegion()?.textContent).toMatch(/\d+ results?/);
-      });
-    });
-  });
 });

package/src/PowerSearch/PowerSearch.tsx

@@ -16,7 +16,6 @@
 
 import React, {
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -39,7 +38,6 @@ import type {IconType} from '../Icon';
 import type {IconName} from '../Icon/globalIconRegistry';
 import type {InputStatus} from '../Field';
 import {usePopover} from '../Popover/usePopover';
-import {useAnnounce} from '../hooks/useAnnounce';
 import {
   spacingVars,
   colorVars,
@@ -947,42 +945,23 @@ export function PowerSearch({
     isReadOnly,
   ]);
 
-  // Plain-text form of the result count, shared by the visible label and the
-  // screen-reader announcement so the two never drift.
-  const resultCountText = useMemo((): string | null => {
-    if (resultCount == null) {
-      return null;
-    }
-    if (typeof resultCount === 'number') {
-      const formatted = new Intl.NumberFormat().format(resultCount);
-      return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
-    }
-    return resultCount;
-  }, [resultCount]);
-
-  // Announce result-count changes to screen readers through a polite live
-  // region, mirroring the way Typeahead announces its dropdown result count.
-  // The count is otherwise only shown visually and stays silent to assistive
-  // tech. Skip the first run so the count already present on mount isn't
-  // announced unprompted — only user-driven changes are spoken.
-  const announce = useAnnounce();
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    if (resultCountText != null) {
-      announce(resultCountText);
-    }
-  }, [resultCountText, announce]);
-
   // Build combined endContent from resultCount + endContent props
   const combinedEndContent = useMemo((): React.ReactNode => {
-    const resultCountNode =
-      resultCountText != null ? (
-        <span {...stylex.props(resultCountStyles.text)}>{resultCountText}</span>
-      ) : null;
+    let resultCountNode: React.ReactNode = null;
+    if (resultCount != null) {
+      if (typeof resultCount === 'number') {
+        const formatted = new Intl.NumberFormat().format(resultCount);
+        resultCountNode = (
+          <span {...stylex.props(resultCountStyles.text)}>
+            {formatted} {resultCount === 1 ? 'result' : 'results'}
+          </span>
+        );
+      } else {
+        resultCountNode = (
+          <span {...stylex.props(resultCountStyles.text)}>{resultCount}</span>
+        );
+      }
+    }
 
     if (resultCountNode && endContent) {
       return (
@@ -993,7 +972,7 @@ export function PowerSearch({
       );
     }
     return resultCountNode || endContent || undefined;
-  }, [resultCountText, endContent]);
+  }, [resultCount, endContent]);
 
   return (
     <>

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -73,7 +73,6 @@ export const docs = {
     targets: [
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
     ],
   },
   usage: {
@@ -160,7 +159,6 @@ export const docsZh = {
     targets: [
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
-      {className: 'astryx-progressbar-track'},
     ],
   },
   usage: {

package/src/ProgressBar/ProgressBar.test.tsx

@@ -140,36 +140,6 @@ describe('ProgressBar', () => {
     expect(progressbar).toHaveAttribute('aria-valuemax', '0');
   });
 
-  it('treats a NaN value as empty progress instead of leaking "NaN"', () => {
-    // e.g. an upstream `loaded / total * 100` where total is still 0.
-    render(<ProgressBar value={NaN} label="Upload" hasValueLabel />);
-    const progressbar = screen.getByRole('progressbar');
-    expect(progressbar).toHaveAttribute('aria-valuenow', '0');
-    expect(progressbar.getAttribute('aria-valuetext')).toBe('0%');
-    expect(screen.queryByText(/NaN/)).not.toBeInTheDocument();
-    // The fill width must be a real percentage, not "NaN%".
-    const fill = progressbar.firstElementChild as HTMLElement;
-    expect(fill.style.width).toBe('0%');
-  });
-
-  it('treats a NaN max as an empty range instead of leaking "NaN"', () => {
-    render(<ProgressBar value={5} max={NaN} label="Steps" hasValueLabel />);
-    const progressbar = screen.getByRole('progressbar');
-    expect(progressbar).toHaveAttribute('aria-valuenow', '0');
-    expect(progressbar).toHaveAttribute('aria-valuemax', '0');
-    expect(screen.queryByText(/NaN/)).not.toBeInTheDocument();
-  });
-
-  it('does not render NaN in the value label when max is zero', () => {
-    render(<ProgressBar value={0} max={0} label="Empty" hasValueLabel />);
-    expect(screen.queryByText(/NaN|Infinity/)).not.toBeInTheDocument();
-    const progressbar = screen.getByRole('progressbar');
-    expect(progressbar.getAttribute('aria-valuetext') ?? '').not.toMatch(
-      /NaN|Infinity/,
-    );
-    expect(screen.getByText('0%')).toBeInTheDocument();
-  });
-
   // Disabled state
   describe('disabled state', () => {
     it('renders with isDisabled', () => {

package/src/ProgressBar/ProgressBar.tsx

@@ -228,8 +228,7 @@ const variantStyles = stylex.create({
 });
 
 function defaultFormatValueLabel(value: number, max: number): string {
-  const pct = max > 0 ? Math.round((value / max) * 100) : 0;
-  return `${pct}%`;
+  return `${Math.round((value / max) * 100)}%`;
 }
 
 /**
@@ -273,15 +272,9 @@ export function ProgressBar({
   ...rest
 }: ProgressBarProps) {
   const labelId = useId();
-  // A non-finite value or max (e.g. a NaN from an upstream `loaded / total`
-  // with total 0) would otherwise leak into aria-valuenow, the value label,
-  // and the fill width as the string "NaN". Treat it as empty progress,
-  // matching the max=0 handling below.
-  const safeValue = Number.isFinite(value) ? value : 0;
-  const safeMax = Number.isFinite(max) ? max : 0;
-  const clampedValue = Math.min(Math.max(0, safeValue), safeMax);
-  const percentage = safeMax > 0 ? (clampedValue / safeMax) * 100 : 0;
-  const valueText = formatValueLabel(clampedValue, safeMax);
+  const clampedValue = Math.min(Math.max(0, value), max);
+  const percentage = max > 0 ? (clampedValue / max) * 100 : 0;
+  const valueText = formatValueLabel(clampedValue, max);
 
   const showValueLabel = hasValueLabel && !isIndeterminate;
 
@@ -329,7 +322,7 @@ export function ProgressBar({
         role="progressbar"
         aria-valuenow={isIndeterminate ? undefined : clampedValue}
         aria-valuemin={isIndeterminate ? undefined : 0}
-        aria-valuemax={isIndeterminate ? undefined : safeMax}
+        aria-valuemax={isIndeterminate ? undefined : max}
         aria-labelledby={labelId}
         aria-valuetext={isIndeterminate ? undefined : valueText}
         {...mergeProps(

package/src/RadioList/RadioList.test.tsx

@@ -622,23 +622,4 @@ describe('RadioList', () => {
       expect(input.getAttribute('name')).toBeTruthy();
     });
   });
-
-  describe('RadioListItem rest forwarding', () => {
-    it('forwards data-testid, id, and aria-* to the item root element', () => {
-      render(
-        <RadioList label="Preference" value="" onChange={() => {}}>
-          <RadioListItem
-            label="Option A"
-            value="a"
-            data-testid="item-a"
-            id="item-a-id"
-            aria-label="First option"
-          />
-        </RadioList>,
-      );
-      const item = screen.getByTestId('item-a');
-      expect(item).toHaveAttribute('id', 'item-a-id');
-      expect(item).toHaveAttribute('aria-label', 'First option');
-    });
-  });
 });

package/src/RadioList/RadioListItem.tsx

@@ -220,10 +220,7 @@ export function RadioListItem({
   isDisabled: isItemDisabled = false,
   startContent,
   endContent,
-  xstyle,
-  className,
-  style,
-  ...rest
+  'data-testid': dataTestId,
 }: RadioListItemProps) {
   const context = use(RadioListContext);
   if (!context) {
@@ -316,13 +313,11 @@ export function RadioListItem({
   return (
     <div
       ref={ref}
+      data-testid={dataTestId}
       {...mergeProps(
         themeProps('radio-list-item'),
-        stylex.props(styles.container, !isDisabled && radioScope, xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+        stylex.props(styles.container, !isDisabled && radioScope),
+      )}>
       <Item
         startContent={mediaContent}
         label={

package/src/Resizable/ResizeHandle.tsx

@@ -316,9 +316,6 @@ export function ResizeHandle({
   ...props
 }: ResizeHandleProps) {
   const handleRef = useRef<HTMLDivElement>(null);
-  // Removes the in-flight drag's window listeners (and resets body styles).
-  // Held in a ref so unmount can tear down a drag that never got a pointerup.
-  const dragCleanupRef = useRef<(() => void) | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -378,12 +375,10 @@ export function ResizeHandle({
         window.removeEventListener('pointermove', onMove);
         window.removeEventListener('pointerup', onUp);
         window.removeEventListener('pointercancel', onCancel);
-        dragCleanupRef.current = null;
       }
       window.addEventListener('pointermove', onMove);
       window.addEventListener('pointerup', onUp);
       window.addEventListener('pointercancel', onCancel);
-      dragCleanupRef.current = cleanup;
     },
     [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign],
   );
@@ -459,19 +454,14 @@ export function ResizeHandle({
   }, [isDisabled, resizable]);
 
   // --- Cleanup on unmount ---
-  // A drag in flight when the handle unmounts never gets its pointerup, so
-  // tear down the window listeners here too — otherwise every pointermove
-  // keeps driving the (still-mounted) region's resize state after the handle
-  // is gone, and the body cursor/user-select overrides stick.
   useEffect(() => {
     return () => {
-      if (dragCleanupRef.current) {
-        dragCleanupRef.current();
+      if (isDragging) {
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
       }
     };
-  }, []);
+  }, [isDragging]);
 
   // --- ARIA ---
   const ariaValueNow = resizable ? resizable._size : undefined;
@@ -520,16 +510,7 @@ export function ResizeHandle({
         ),
         className,
       )}
-      {...props}
-      // Keyboard resizing must fire from the focusable separator, not a child:
-      // keydown fires on the focused element and bubbles up, so a handler on a
-      // descendant never runs (per the WAI-ARIA window-splitter pattern).
-      // Placed after {...props} and composed with any consumer onKeyDown so
-      // this accessibility-critical handler can't be clobbered by a passed prop.
-      onKeyDown={e => {
-        props.onKeyDown?.(e);
-        handleKeyDown(e);
-      }}>
+      {...props}>
       {/* Wider invisible hit area for pointer interaction */}
       <div
         {...stylex.props(
@@ -547,6 +528,7 @@ export function ResizeHandle({
             setIsHovered(false);
           }
         }}
+        onKeyDown={handleKeyDown}
       />
       {/* Pill grip indicator — themed via .astryx-resize-handle-pill */}
       {children ?? (

package/src/SegmentedControl/SegmentedControl.doc.mjs

@@ -16,7 +16,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-segmented-control', visualProps: ['size']},
-      {className: 'astryx-segmented-control-item', visualProps: ['size'], states: ['selected', 'disabled']},
+      {className: 'astryx-segmented-control-item'},
     ],
     vars: [
       {name: '--_segmented-control-radius', description: 'Border radius of the segmented control', default: 'var(--radius-element)', private: true},