@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

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

@@ -140,16 +140,6 @@ describe('ProgressBar', () => {
     expect(progressbar).toHaveAttribute('aria-valuemax', '0');
   });
 
-  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)}%`;
 }
 
 /**

package/src/Resizable/ResizeHandle.tsx

@@ -510,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(
@@ -537,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},

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -34,7 +34,7 @@ export const docs = {
   ],
   theming: {
     container: true,
-    targets: [{className: 'astryx-selectable-card', visualProps: ['selected', 'variant']}],
+    targets: [{className: 'astryx-selectable-card', visualProps: ['selected']}],
   },
   playground: {
     defaults: {

package/src/SideNav/SideNav.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
     targets: [
       {className: 'astryx-side-nav', visualProps: ['mode']},
       {className: 'astryx-side-nav-heading'},
-      {className: 'astryx-side-nav-item', visualProps: ['size'], states: ['selected']},
+      {className: 'astryx-side-nav-item'},
       {className: 'astryx-side-nav-section'},
     ],
   },
@@ -102,12 +102,6 @@ export const docs = {
       description: 'Enables collapse behavior. true for uncontrolled with default toggle button, or an object for controlled mode and advanced config (defaultIsCollapsed, isCollapsed + onCollapsedChange, hasButton, buttonLabel).',
       default: 'false',
     },
-    {
-      name: 'resizable',
-      type: 'boolean | { defaultWidth?: number; minWidth?: number; maxWidth?: number; autoSaveId?: string; onWidthChange?: (width: number) => void }',
-      description: 'Enables a resize handle at the inline-end edge. true for defaults (260px initial, 180-480px range), or a ResizableConfig object (defaultWidth, minWidth, maxWidth, autoSaveId for localStorage persistence, onWidthChange). The handle is hidden while collapsed.',
-      default: 'false',
-    },
     {
       name: 'handleRef',
       type: 'Ref<SideNavImperativeCollapseHandle>',

package/src/SideNav/SideNav.test.tsx

@@ -162,26 +162,6 @@ describe('SideNav', () => {
       screen.getByRole('button', {name: 'Expand sidebar'}),
     ).toBeInTheDocument();
   });
-
-  it('does not render an empty footer container when collapsible.hasButton is false', () => {
-    render(
-      <SideNav data-testid="nav" collapsible={{hasButton: false}}>
-        Content
-      </SideNav>,
-    );
-
-    // The built-in collapse button is opted out (consumers render their own
-    // SideNavCollapseButton in the header), so it must not appear...
-    expect(
-      screen.queryByRole('button', {name: 'Collapse sidebar'}),
-    ).not.toBeInTheDocument();
-
-    // ...and no empty sticky-bottom container should be left behind. With no
-    // footer/footerIcons and no built-in button, the scrollable content region
-    // is the nav's only child.
-    const nav = screen.getByTestId('nav');
-    expect(nav.children).toHaveLength(1);
-  });
 });
 
 // =============================================================================

package/src/SideNav/SideNav.tsx

@@ -490,10 +490,6 @@ export function SideNav({
   // =========================================================================
   const hasStickyTop = !!(header || topContent);
   const hasStickyBottom = !!(footer || footerIcons);
-  // The built-in collapse button only renders when collapse is enabled and it
-  // hasn't been opted out via `collapsible.hasButton: false` (e.g. when the
-  // consumer places a SideNavCollapseButton in the header instead).
-  const showCollapseButton = isCollapsible && hasCollapseButton;
 
   // When resizable, override the nav width via inline style
   const resizableNavStyle: React.CSSProperties | undefined = isResizable
@@ -536,7 +532,7 @@ export function SideNav({
         )}>
         {children}
       </div>
-      {(hasStickyBottom || showCollapseButton) && (
+      {(hasStickyBottom || isCollapsible) && (
         <div
           {...stylex.props(
             styles.stickyBottom,
@@ -548,7 +544,7 @@ export function SideNav({
               styles.footerRow,
               collapsed && styles.footerRowCollapsed,
             )}>
-            {showCollapseButton && <SideNavCollapseButton />}
+            {isCollapsible && hasCollapseButton && <SideNavCollapseButton />}
             {footerIcons}
           </div>
         </div>

package/src/TabList/TabList.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TabList} from './TabList';
 import {Tab} from './Tab';
@@ -702,187 +702,3 @@ describe('TabMenu', () => {
     expect(reportsItem).not.toHaveAttribute('aria-current');
   });
 });
-
-describe('TabMenu keyboard navigation (roving tabindex)', () => {
-  const menuOptions = [
-    {value: 'analytics', label: 'Analytics'},
-    {value: 'reports', label: 'Reports'},
-  ];
-
-  it('exposes the overflow menu as a single Tab stop (one item tabbable, rest -1)', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    // Exactly one menu item is in the Tab sequence; arrow keys reach the rest.
-    expect(analytics).toHaveAttribute('tabindex', '0');
-    expect(reports).toHaveAttribute('tabindex', '-1');
-
-    const tabbable = [analytics, reports].filter(
-      el => el.getAttribute('tabindex') === '0',
-    );
-    expect(tabbable).toHaveLength(1);
-  });
-
-  it('moves focus between items with ArrowDown and ArrowUp', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'});
-    expect(analytics).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'});
-    expect(reports).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'ArrowUp'});
-    expect(analytics).toHaveFocus();
-  });
-
-  it('moves the roving tab stop with arrow navigation', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'}); // focus analytics
-    fireEvent.keyDown(menu, {key: 'ArrowDown'}); // focus reports
-
-    // The tab stop follows focus, so it is still a single stop after moving.
-    expect(reports).toHaveAttribute('tabindex', '0');
-    expect(analytics).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('jumps to first and last item with Home and End', async () => {
-    const user = userEvent.setup();
-    const options = [
-      {value: 'analytics', label: 'Analytics'},
-      {value: 'reports', label: 'Reports'},
-      {value: 'exports', label: 'Exports'},
-    ];
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={options} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const exports = screen.getByRole('menuitem', {
-      name: 'Exports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'End'});
-    expect(exports).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'Home'});
-    expect(analytics).toHaveFocus();
-  });
-
-  it('selects an item with Enter and calls onChange', async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    render(
-      <TabList value="home" onChange={handleChange}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    analytics.focus();
-    fireEvent.keyDown(analytics, {key: 'Enter'});
-
-    expect(handleChange).toHaveBeenCalledWith('analytics');
-  });
-
-  it('closes the menu when Tab is pressed inside it (APG menu-button)', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-
-    const hidePopover = vi.mocked(HTMLElement.prototype.hidePopover);
-    hidePopover.mockClear();
-    fireEvent.keyDown(menu, {key: 'Tab'});
-    expect(hidePopover).toHaveBeenCalled();
-  });
-
-  it('closes the menu when Escape is pressed', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-
-    const hidePopover = vi.mocked(HTMLElement.prototype.hidePopover);
-    hidePopover.mockClear();
-    fireEvent.keyDown(menu, {key: 'Escape'});
-    expect(hidePopover).toHaveBeenCalled();
-  });
-});

package/src/TabList/TabMenu.tsx

@@ -16,7 +16,7 @@
  * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
  */
 
-import React, {useCallback, useId, useRef, type ReactNode} from 'react';
+import React, {useCallback, useId, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from '../Icon';
 import {renderIconSlot, type IconType} from '../Icon';
@@ -262,7 +262,6 @@ export function TabMenu({
 }: TabMenuProps) {
   const tabListCtx = useTabListContext();
   const menuId = useId();
-  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const popover = usePopover({
     hasLightDismiss: true,
@@ -271,50 +270,20 @@ export function TabMenu({
     // The popup's own role="menu" is the exposed semantics; a modal dialog
     // wrapper would announce an unnamed dialog around the menu.
     role: 'none',
-    // Return focus to the trigger when the menu closes (Escape, Tab, select,
-    // or light dismiss) so keyboard focus is never dropped to <body>.
-    onHide: useCallback(() => {
-      buttonRef.current?.focus();
-    }, []),
   });
 
-  // The overflow menu is a composite widget: a single roving tab stop with
-  // arrow-key navigation between items, per the APG menu pattern. The hook owns
-  // item tabindex — items render tabIndex={-1} and exactly one is promoted to 0.
-  const {
-    listRef,
-    handleKeyDown: handleListKeyDown,
-    handleFocus,
-    focusFirst,
-  } = useListFocus<HTMLDivElement>({
-    hasRovingTabIndex: true,
-    onEscape: () => popover.hide(),
-  });
+  const {listRef, handleKeyDown: handleListKeyDown} =
+    useListFocus<HTMLDivElement>({
+      onEscape: () => popover.hide(),
+    });
 
   const handleToggle = useCallback(() => {
     if (popover.isOpen) {
       popover.hide();
     } else {
       popover.show();
-      // Move focus into the menu on open so arrow navigation works and the
-      // roving tab stop lands on a real item (APG menu-button focus-on-open).
-      requestAnimationFrame(() => focusFirst());
     }
-  }, [popover, focusFirst]);
-
-  const handleMenuKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      // APG menu-button: Tab leaves the menu rather than walking its items.
-      // Close and let onHide return focus to the trigger, from which the
-      // browser's default Tab continues to the next element.
-      if (e.key === 'Tab') {
-        popover.hide();
-        return;
-      }
-      handleListKeyDown(e);
-    },
-    [handleListKeyDown, popover],
-  );
+  }, [popover]);
 
   const selectedOption = options.find(o => o.value === tabListCtx.value);
   const triggerLabel = selectedOption?.label ?? label;
@@ -330,11 +299,7 @@ export function TabMenu({
     [tabListCtx, popover],
   );
 
-  const setButtonRef = mergeRefs<HTMLButtonElement>(
-    popover.triggerRef,
-    buttonRef,
-    ref,
-  );
+  const setButtonRef = mergeRefs<HTMLButtonElement>(popover.triggerRef, ref);
 
   return (
     <>
@@ -392,8 +357,7 @@ export function TabMenu({
           id={menuId}
           role="menu"
           aria-label={label}
-          onKeyDown={handleMenuKeyDown}
-          onFocus={handleFocus}
+          onKeyDown={handleListKeyDown}
           {...mergeProps(
             themeProps('tab-menu-dropdown'),
             stylex.props(styles.dropdown),
@@ -407,7 +371,7 @@ export function TabMenu({
               <div
                 key={option.value}
                 role="menuitem"
-                tabIndex={-1}
+                tabIndex={0}
                 aria-current={isSelected ? 'true' : undefined}
                 onClick={() => handleSelect(option.value)}
                 onKeyDown={e => {