@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -2,8 +2,10 @@
 
 /**
  * @file ButtonGroup.test.tsx
- * @input Uses vitest, @testing-library/react, ButtonGroup and Button components
- * @output Unit tests for ButtonGroup
+ * @input Uses vitest, @testing-library/react, @babel/core + @stylexjs/babel-plugin,
+ *   ButtonGroup and Button components
+ * @output Unit tests for ButtonGroup, incl. the compiled-CSS contract for the
+ *   trailing radius (#2508)
  * @position Testing; validates ButtonGroup component implementation
  *
  * SYNC: When ButtonGroup component changes, update tests to match new behavior
@@ -11,9 +13,16 @@
 
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
+import {transformSync} from '@babel/core';
+import stylexBabelPlugin from '@stylexjs/babel-plugin';
+import {readFileSync} from 'node:fs';
+import path from 'node:path';
 import {ButtonGroup} from './ButtonGroup';
 import {Button} from '../Button';
 import {IconButton} from '../IconButton';
+import {DropdownMenu} from '../DropdownMenu';
+import {Tooltip} from '../Tooltip';
+import {HoverCard} from '../HoverCard';
 
 describe('ButtonGroup', () => {
   it('renders a group with aria-label', () => {
@@ -188,4 +197,379 @@ describe('ButtonGroup', () => {
       screen.getByRole('button', {name: 'More options'}),
     ).toBeInTheDocument();
   });
+
+  // ===========================================================================
+  // Trailing radius (issue #2508)
+  //
+  // The trailing end cap cannot be keyed off `:last-child`: members render an
+  // invisible layer AFTER their button (tooltip'd Button, DropdownMenu), and
+  // useLayer renders it inline rather than portaling it, so the layer steals the
+  // slot. See IS_LAST_ITEM in Button.tsx.
+  //
+  // HOW THESE TESTS CATCH THE BUG
+  // jsdom applies no StyleX CSS, so a DOM-only test cannot prove which rule
+  // wins — and a test that hand-copies the selector is a tautology (revert
+  // groupStyles to `:last-child` and it still passes). So the predicate is NOT
+  // hand-copied here: `compileButtonRules()` runs the REAL StyleX babel plugin
+  // over Button.tsx (same config as scripts/build-css.mjs) and reads the
+  // trailing-radius rule's selector straight out of the emitted CSS, then
+  // matches it against the real rendered DOM. Revert groupStyles to
+  // `:last-child` and these go red.
+  // ===========================================================================
+  describe('trailing radius (#2508)', () => {
+    /** The group members, in DOM order (excludes invisible layer siblings). */
+    const items = (group: HTMLElement): Element[] =>
+      Array.from(group.querySelectorAll(':scope > *:not([popover])'));
+
+    // -- Compiled CSS, read from the source -----------------------------------
+
+    /** One atomic StyleX rule, parsed out of the plugin's emitted CSS. */
+    type CompiledRule = {
+      /** Atomic class name, e.g. `xp0wexf`. */
+      className: string;
+      /** Selector text after the class, e.g. `:first-child`. '' if unconditional. */
+      condition: string;
+      /** CSS property, e.g. `border-start-end-radius`. */
+      property: string;
+      /** CSS value, e.g. `var(--radius-element)`. */
+      value: string;
+      /** The full compiled selector, e.g. `.xp0wexf:not(:has(~ [data-...]))`. */
+      selector: string;
+    };
+
+    /**
+     * Compiles Button.tsx with the real StyleX babel plugin and returns its
+     * atomic rules. This is the CSS the browser actually gets — the whole point
+     * is that the trailing-radius predicate comes from the SOURCE, never from a
+     * string retyped in this file.
+     */
+    function compileButtonRules(): CompiledRule[] {
+      const repoRoot = path.resolve(__dirname, '../../../..');
+      const buttonSrc = path.resolve(__dirname, '../Button/Button.tsx');
+
+      const result = transformSync(readFileSync(buttonSrc, 'utf8'), {
+        babelrc: false,
+        configFile: false,
+        filename: buttonSrc,
+        presets: [
+          ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+          ['@babel/preset-react', {runtime: 'automatic'}],
+        ],
+        plugins: [
+          [
+            stylexBabelPlugin,
+            {
+              dev: false,
+              runtimeInjection: false,
+              genConditionalClasses: true,
+              treeshakeCompensation: true,
+              unstable_moduleResolution: {type: 'commonJS', rootDir: repoRoot},
+            },
+          ],
+        ],
+      });
+
+      const rules =
+        (result?.metadata as {stylex?: [string, {ltr: string}, number][]})
+          ?.stylex ?? [];
+
+      return rules.flatMap(([, {ltr}]) => {
+        // Plain atomic rules only: `.cls<condition>{prop:value}`. @media-wrapped
+        // rules are irrelevant to the radius contract.
+        const parsed = /^\.([\w-]+)([^{]*)\{([\w-]+):(.+)\}$/.exec(ltr);
+        if (!parsed) {
+          return [];
+        }
+        const [, className, condition, property, value] = parsed;
+        return [
+          {
+            className,
+            condition,
+            property,
+            value,
+            selector: `.${className}${condition}`,
+          },
+        ];
+      });
+    }
+
+    const COMPILED = compileButtonRules();
+
+    /** A rounded (non-zero) corner is exactly this value in the compiled CSS. */
+    const ROUNDED = 'var(--radius-element)';
+
+    /** The two corners on the group's trailing edge — pure geometry. */
+    const TRAILING_CORNERS = {
+      horizontal: ['border-end-end-radius', 'border-start-end-radius'],
+      vertical: ['border-end-end-radius', 'border-end-start-radius'],
+    } as const;
+
+    /** The two corners on the group's leading edge — pure geometry. */
+    const LEADING_CORNERS = {
+      horizontal: ['border-end-start-radius', 'border-start-start-radius'],
+      vertical: ['border-start-end-radius', 'border-start-start-radius'],
+    } as const;
+
+    type Orientation = keyof typeof TRAILING_CORNERS;
+
+    /**
+     * The compiled rules that ROUND `corners` and are actually applied to `el`
+     * (its class list carries them). StyleX emits the `default: 0` class and the
+     * conditional class on every member, so this returns the same rules for any
+     * member of the group — which rule *wins* is decided by the selector, and
+     * that is what the tests below assert against the DOM.
+     */
+    const roundingRules = (
+      el: Element,
+      corners: ReadonlyArray<string>,
+    ): CompiledRule[] =>
+      COMPILED.filter(
+        rule =>
+          corners.includes(rule.property) &&
+          rule.value === ROUNDED &&
+          el.classList.contains(rule.className),
+      );
+
+    /** The compiled selectors that round `el`'s trailing corners. */
+    const trailingRoundingSelectors = (
+      el: Element,
+      orientation: Orientation,
+    ): string[] => {
+      const rules = roundingRules(el, TRAILING_CORNERS[orientation]);
+      // Guard against a vacuous pass: both trailing corners must be accounted
+      // for, or the assertions below would be quantifying over an empty set.
+      expect(rules.map(rule => rule.property).sort()).toEqual([
+        ...TRAILING_CORNERS[orientation],
+      ]);
+      return rules.map(rule => rule.selector);
+    };
+
+    /** Does the compiled CSS actually round `el`'s trailing corners? */
+    const hasRoundedTrailingCorners = (
+      el: Element,
+      orientation: Orientation = 'horizontal',
+    ): boolean =>
+      trailingRoundingSelectors(el, orientation).every(selector =>
+        el.matches(selector),
+      );
+
+    // -- The compiled CSS contract --------------------------------------------
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'keys the trailing radius off layer-skipping, not :last-child (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+          </ButtonGroup>,
+        );
+
+        const save = screen.getByRole('button', {name: 'Save'});
+        const selectors = trailingRoundingSelectors(save, orientation);
+
+        for (const selector of selectors) {
+          // `:last-child` is the bug: an inline layer element steals the slot.
+          expect(selector).not.toContain(':last-child');
+          // `[popover]` must survive compilation *verbatim*. StyleX only
+          // statically evaluates a selector key from a same-file const; from a
+          // .stylex.ts file it compiles to a mangled selector like `[x13pbwiz]`
+          // that matches nothing in the DOM.
+          expect(selector).toContain('[popover]');
+        }
+      },
+    );
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'still rounds the leading corners off :first-child (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+            <Button label="More" tooltip="More options" />
+          </ButtonGroup>,
+        );
+
+        const save = screen.getByRole('button', {name: 'Save'});
+        const more = screen.getByRole('button', {name: 'More'});
+        const rules = roundingRules(save, LEADING_CORNERS[orientation]);
+
+        expect(rules.map(rule => rule.property).sort()).toEqual([
+          ...LEADING_CORNERS[orientation],
+        ]);
+        for (const {condition, selector} of rules) {
+          // The leading edge is genuinely safe on :first-child — a member's
+          // button always precedes its own layer.
+          expect(condition).toBe(':first-child');
+          expect(save.matches(selector)).toBe(true);
+          expect(more.matches(selector)).toBe(false);
+        }
+      },
+    );
+
+    // -- The compiled CSS, matched against the real DOM ------------------------
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'rounds a tooltip’d trailing Button, whose layer follows it in the DOM (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+            <Button label="More" tooltip="More options" />
+          </ButtonGroup>,
+        );
+
+        const group = screen.getByRole('group');
+        const save = screen.getByRole('button', {name: 'Save'});
+        const more = screen.getByRole('button', {name: 'More'});
+
+        // Precondition: the tooltip layer really is an inline DOM sibling that
+        // follows the button — this is exactly what broke `:last-child`.
+        expect(more).not.toBe(group.lastElementChild);
+        expect(items(group).at(-1)).toBe(more);
+
+        expect(hasRoundedTrailingCorners(more, orientation)).toBe(true);
+        expect(hasRoundedTrailingCorners(save, orientation)).toBe(false);
+      },
+    );
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'rounds a trailing DropdownMenu trigger, whose popover follows it (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Approve action" orientation={orientation}>
+            <Button label="Allow once" variant="primary" />
+            <DropdownMenu
+              button={{label: 'Allow options', variant: 'primary'}}
+              items={[{label: 'Always allow'}]}
+            />
+          </ButtonGroup>,
+        );
+
+        const group = screen.getByRole('group');
+        const allow = screen.getByRole('button', {name: 'Allow once'});
+        const trigger = screen.getByRole('button', {name: 'Allow options'});
+
+        // The popover surface is an inline sibling after the trigger.
+        expect(trigger).not.toBe(group.lastElementChild);
+        expect(items(group).at(-1)).toBe(trigger);
+
+        expect(hasRoundedTrailingCorners(trigger, orientation)).toBe(true);
+        expect(hasRoundedTrailingCorners(allow, orientation)).toBe(false);
+      },
+    );
+
+    it('rounds a trailing link (<a>) member with a tooltip', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <Button label="Docs" href="https://example.com" tooltip="Open docs" />
+        </ButtonGroup>,
+      );
+
+      const group = screen.getByRole('group');
+      const link = screen.getByRole('link', {name: 'Docs'});
+
+      expect(link.tagName).toBe('A');
+      expect(link).not.toBe(group.lastElementChild);
+      expect(items(group).at(-1)).toBe(link);
+
+      expect(hasRoundedTrailingCorners(link)).toBe(true);
+    });
+
+    it('rounds only the last member (first/middle/last)', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="First" />
+          <Button label="Middle" tooltip="Middle tip" />
+          <DropdownMenu
+            button={{label: 'Last'}}
+            items={[{label: 'An option'}]}
+          />
+        </ButtonGroup>,
+      );
+
+      const group = screen.getByRole('group');
+      const [first, middle, last] = items(group);
+
+      expect([first, middle, last].map(el => el.textContent)).toEqual([
+        'First',
+        'Middle',
+        'Last',
+      ]);
+
+      // Middle has a tooltip layer after it, but a *marked* sibling follows too,
+      // so it must NOT take the trailing radius.
+      expect(hasRoundedTrailingCorners(first)).toBe(false);
+      expect(hasRoundedTrailingCorners(middle)).toBe(false);
+      expect(hasRoundedTrailingCorners(last)).toBe(true);
+    });
+
+    it('rounds both edges of a lone tooltip’d member', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Only" tooltip="The only one" />
+        </ButtonGroup>,
+      );
+
+      const only = screen.getByRole('button', {name: 'Only'});
+
+      // Leading edge is unaffected: a member's button always precedes its layer.
+      expect(only.matches(':first-child')).toBe(true);
+      expect(hasRoundedTrailingCorners(only)).toBe(true);
+    });
+
+    // -- Members the group does not recognise ---------------------------------
+    //
+    // The trailing predicate must stay CONSERVATIVE: a sibling the group does
+    // not understand is still a member. Otherwise the button BEFORE it wrongly
+    // takes the trailing radius and renders as a rounded notch mid-group —
+    // worse than the bug being fixed, because it is silent and visual.
+
+    it('does not round the preceding button when a Tooltip-wrapped member follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <Tooltip content="Rich tip">
+            <Button label="More" />
+          </Tooltip>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      // Tooltip wraps element children in a `display: contents` <div>, so the
+      // inner Button is a DESCENDANT of the wrapper, not a DOM sibling of Save.
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+
+    it('does not round the preceding button when a HoverCard-wrapped member follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <HoverCard content="Preview">
+            <Button label="More" />
+          </HoverCard>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      // Button has no `hoverCard` prop, so wrapping is the ONLY way to put a
+      // HoverCard on a group button — this composition has no alternative.
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+
+    it('does not round the preceding button when a raw <button> follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <button type="button">Custom</button>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+  });
 });

package/src/ButtonGroup/ButtonGroup.tsx

@@ -8,9 +8,10 @@
  * @output Exports ButtonGroup component, context, and types
  * @position Groups buttons with connected styling; consumed by index.ts
  *
- * Children (Button, IconButton) consume the ButtonGroup context to
- * apply position-aware styles using CSS :first-child / :last-child
- * pseudo-classes — no cloneElement or wrapper divs needed.
+ * Children (Button, IconButton) consume the ButtonGroup context to apply
+ * position-aware styles in pure CSS — no cloneElement or wrapper divs needed.
+ * The end-cap radius rules live in Button.tsx; see IS_LAST_ITEM there for why
+ * the trailing edge cannot use :last-child (#2508).
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ButtonGroup/ButtonGroup.doc.mjs (props table, features)
@@ -25,7 +26,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {ButtonSize} from '../Button';
 import {SizeProvider, useSize} from '../SizeContext/SizeContext';
 import {useListFocus} from '../hooks/useListFocus';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {ButtonGroupContext} from './ButtonGroupContext';
 import type {ButtonGroupOrientation} from './ButtonGroupContext';
@@ -97,7 +98,10 @@ const styles = stylex.create({
  * handling (only on outer edges), and horizontal or vertical orientation.
  *
  * Children automatically detect the group via context and apply position-aware
- * styles using CSS :first-child / :last-child pseudo-classes.
+ * styles in pure CSS.
+ *
+ * Members that render their own layer — a Button with a `tooltip`, or a
+ * DropdownMenu — compose correctly, including as the trailing member.
  *
  * @example
  * ```
@@ -107,6 +111,17 @@ const styles = stylex.create({
  *   <Button label="Paste" />
  * </ButtonGroup>
  * ```
+ *
+ * @example
+ * ```
+ * <ButtonGroup label="Approve action">
+ *   <Button label="Allow once" variant="primary" />
+ *   <DropdownMenu
+ *     button={{label: 'Allow options', variant: 'primary', isIconOnly: true, icon: <Icon icon="chevronDown" />}}
+ *     items={[{label: 'Allow for 30 minutes'}, {label: 'Always allow'}]}
+ *   />
+ * </ButtonGroup>
+ * ```
  */
 export function ButtonGroup({
   children,
@@ -119,6 +134,7 @@ export function ButtonGroup({
   style,
   ref,
   'data-testid': testId,
+  onKeyDown,
   ...props
 }: ButtonGroupProps): ReactNode {
   const size = useSize(sizeProp, 'md');
@@ -138,11 +154,7 @@ export function ButtonGroup({
       <SizeProvider value={size}>
         <div
           ref={mergeRefs(ref, listRef)}
-          role="group"
-          aria-label={label}
-          onKeyDown={handleKeyDown}
-          aria-disabled={isDisabled || undefined}
-          data-testid={testId}
+          {...props}
           {...mergeProps(
             themeProps('button-group', {size, orientation}),
             stylex.props(
@@ -153,7 +165,11 @@ export function ButtonGroup({
             className,
             style,
           )}
-          {...props}>
+          role="group"
+          aria-label={label}
+          onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
+          aria-disabled={isDisabled || undefined}
+          data-testid={testId}>
           {children}
         </div>
       </SizeProvider>

package/src/Calendar/Calendar.test.tsx

@@ -9,14 +9,23 @@
  * SYNC: When Calendar.tsx changes, update tests accordingly
  */
 
-import {describe, it, expect, vi} from 'vitest';
-import {act, render, screen, within} from '@testing-library/react';
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {act, render, screen, within, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton} from '../__tests__/fastRoleQueries';
 import * as stylex from '@stylexjs/stylex';
 import {Calendar} from './Calendar';
 import type {CalendarHandle} from './Calendar';
 import {calendarStyles} from './styles';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
 
 /**
  * Helper to find a day button by its day number.
@@ -545,6 +554,98 @@ describe('Calendar', () => {
     expect(getButton('Next month')).toBeInTheDocument();
   });
 
+  // ─── Month Change Announcements ──────────────────────────────
+
+  describe('month change announcements', () => {
+    it('does not announce on initial render', () => {
+      render(<Calendar focusDate="2026-01-01" />);
+      // The live region is only created lazily on first announce; mounting the
+      // calendar must not speak the initial month.
+      expect(politeRegion()).toBeNull();
+    });
+
+    it('announces the new month politely when clicking next', async () => {
+      const user = userEvent.setup();
+      render(<Calendar focusDate="2026-01-01" />);
+
+      await user.click(screen.getByRole('button', {name: 'Next month'}));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('February 2026');
+      });
+    });
+
+    it('announces the new month politely when clicking previous', async () => {
+      const user = userEvent.setup();
+      render(<Calendar focusDate="2026-02-01" />);
+
+      await user.click(screen.getByRole('button', {name: 'Previous month'}));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('January 2026');
+      });
+    });
+
+    it('announces the next month when paging the grid with PageDown', async () => {
+      const user = userEvent.setup();
+      render(<Calendar focusDate="2026-01-01" />);
+
+      // PageDown from a focused day pages the visible grid to the next month.
+      getDayButton(15).focus();
+      await user.keyboard('{PageDown}');
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('February 2026');
+      });
+    });
+
+    it('announces the newly visible month when navigated via the handle', async () => {
+      let handle: CalendarHandle | null = null;
+      render(
+        <Calendar
+          focusDate="2026-01-01"
+          handleRef={h => {
+            handle = h;
+          }}
+        />,
+      );
+
+      act(() => {
+        handle?.navigateTo('2026-03-01');
+      });
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('March 2026');
+      });
+    });
+
+    it('announces both months in a two-month view', async () => {
+      const user = userEvent.setup();
+      render(<Calendar numberOfMonths={2} focusDate="2026-01-01" />);
+
+      await user.click(screen.getByRole('button', {name: 'Next month'}));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('February 2026 – March 2026');
+      });
+    });
+
+    it('does not announce when selecting a date leaves the visible month unchanged', async () => {
+      const user = userEvent.setup();
+      render(<Calendar focusDate="2026-01-01" />);
+
+      // Selecting an in-month day does not move the grid, so nothing should be
+      // announced (the live region stays uncreated).
+      await user.click(getDayButton(15));
+
+      // Allow the announce rAF a chance to run before asserting silence.
+      await act(async () => {
+        await new Promise(resolve => requestAnimationFrame(resolve));
+      });
+      expect(politeRegion()).toBeNull();
+    });
+  });
+
   // ─── Bug Regression Tests ───────────────────────────────────
 
   it('day buttons have data-date attribute with ISO string', () => {