@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/src/AppShell/AppShell.doc.mjs

@@ -45,9 +45,15 @@ export const docs = {
     },
     {
       name: 'mobileNav',
+      // Kept as the bare `ReactNode`, not widened to the true
+      // `false | MobileNavConfig | ReactNode`: the docsite playground hides a
+      // prop by exact-matching the type string against UNSUPPORTED_PROP_TYPES,
+      // and widening drops that match. This prop's slotElements happen to hide
+      // it a second way today, but the hide should not rest on that
+      // coincidence. The legal values live in the description instead (#1645).
       type: 'ReactNode',
       description:
-        'Mobile navigation configuration. Accepts false (disable), config object (tune auto behavior), or ReactNode (full custom drawer).',
+        "Mobile navigation configuration. Accepts false (disable), a config object (tune auto behavior), or ReactNode (full custom drawer). The config object is {hasToggle?: boolean, isOpen?: boolean, onOpenChange?: (isOpen: boolean) => void, content?: ReactNode, breakpoint?: 'sm' | 'md' | 'lg' | 'none', defaultIsMobile?: boolean}; breakpoint defaults to 'md'.",
       slotElements: [{__element: 'MobileNav', props: {}}],
     },
     {
@@ -139,7 +145,7 @@ export const docsZh = {
     },
     {name: 'topNav', type: 'ReactNode', description: '顶部导航插槽，通常为 TopNav。'},
     {name: 'sideNav', type: 'ReactNode', description: '侧边导航插槽，通常为 SideNav。'},
-    {name: 'mobileNav', type: 'ReactNode', description: '移动端导航配置。接受 false（禁用）、配置对象（调整自动行为）或 ReactNode（完全自定义抽屉）。'},
+    {name: 'mobileNav', type: 'ReactNode', description: "移动端导航配置。接受 false（禁用）、配置对象（调整自动行为）或 ReactNode（完全自定义抽屉）。配置对象为 {hasToggle?, isOpen?, onOpenChange?, content?, breakpoint?: 'sm' | 'md' | 'lg' | 'none', defaultIsMobile?}；breakpoint 默认为 'md'。"},
     {name: 'banner', type: 'ReactNode', description: '横幅插槽，用于全局公告，放置在 topNav 上方。'},
     {
       name: 'height',

package/src/AppShell/AppShell.tsx

@@ -53,6 +53,7 @@ import {mergeProps, mergeRefs, isRenderable} from '../utils';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {observeResize, unobserveResize} from '../utils/sharedResizeObserver';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity
@@ -472,6 +473,7 @@ export function AppShell({
   ref,
   ...rest
 }: AppShellProps) {
+  const t = useTranslator();
   // =========================================================================
   // Parse mobileNav prop — normalize to config, custom element, or disabled
   // =========================================================================
@@ -756,7 +758,7 @@ export function AppShell({
           <div
             {...stylex.props(styles.autoMobileTopBar)}
             role="navigation"
-            aria-label="Mobile navigation">
+            aria-label={t('@astryx.appShell.mobileNavigation')}>
             <SideNavRenderContext value="topbar">
               {sideNav}
             </SideNavRenderContext>

package/src/AvatarGroup/AvatarGroup.tsx

@@ -25,6 +25,7 @@ import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {AvatarGroupContext} from './AvatarGroupContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const OVERLAP_RATIO = 0.25;
 
@@ -76,13 +77,15 @@ export function AvatarGroup({
   children,
   size = 'small',
   'data-testid': testId,
-  'aria-label': ariaLabel = 'Avatars',
+  'aria-label': ariaLabelFromProps,
   xstyle,
   className,
   style,
   ref,
   ...props
 }: AvatarGroupProps): ReactNode {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.avatarGroup.label');
   const numericSize = resolveSize(size);
   const overlap = Math.round(numericSize * OVERLAP_RATIO);
 

package/src/Banner/Banner.tsx

@@ -50,6 +50,7 @@ import {
 import {mergeProps} from '../utils';
 import {edgeCompSlot} from '../Layout/edgeCompensation.stylex';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -296,7 +297,10 @@ const styles = stylex.create({
   chevron: {
     display: 'inline-flex',
     transitionProperty: 'transform',
-    transitionDuration: durationVars['--duration-fast'],
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   chevronExpanded: {
@@ -385,6 +389,7 @@ export function Banner({
   ref,
   ...rest
 }: BannerProps) {
+  const t = useTranslator();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
   // Links the expand/collapse toggle to the content region it shows/hides so
@@ -469,8 +474,8 @@ export function Banner({
               <Button
                 variant="ghost"
                 size="sm"
-                label={isExpanded ? 'Collapse' : 'Expand'}
-                tooltip={isExpanded ? 'Collapse' : 'Expand'}
+                label={isExpanded ? t('@astryx.banner.collapse') : t('@astryx.banner.expand')}
+                tooltip={isExpanded ? t('@astryx.banner.collapse') : t('@astryx.banner.expand')}
                 icon={
                   <span
                     {...stylex.props(
@@ -490,8 +495,8 @@ export function Banner({
               <Button
                 variant="ghost"
                 size="sm"
-                label="Dismiss"
-                tooltip="Dismiss"
+                label={t('@astryx.banner.dismiss')}
+                tooltip={t('@astryx.banner.dismiss')}
                 icon={<Icon icon="close" size="sm" color="inherit" />}
                 onClick={handleDismiss}
                 isIconOnly

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -22,6 +22,7 @@ import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Variant type
@@ -150,10 +151,12 @@ export function Breadcrumbs({
   xstyle,
   className,
   style,
-  label = 'Breadcrumb',
+  label: labelFromProps,
   ref,
   ...rest
 }: BreadcrumbsProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.breadcrumbs.label');
   const ctxValue = useMemo<BreadcrumbContextValue>(
     () => ({variant, separator}),
     [variant, separator],

package/src/Button/Button.tsx

@@ -434,6 +434,36 @@ const loadingStyles = stylex.create({
   },
 });
 
+/**
+ * "I am the last member of the group" — the trailing end cap.
+ *
+ * NOT `:last-child`: several members render an invisible layer element AFTER
+ * their button (a tooltip'd Button returns button + layer; DropdownMenu returns
+ * trigger + popover). `useLayer` renders those inline rather than portaling
+ * them, so the layer — not the button — took the `:last-child` slot and the real
+ * trailing button silently kept square corners (#2508).
+ *
+ * Layers always carry the native `popover` attribute (useLayer.tsx), and a
+ * popover is never an in-flow member — it is `display: none` until shown, then
+ * promoted to the top layer. So "last member" is: no following element sibling
+ * that isn't a popover.
+ *
+ * Reading it the other way round — marking the *buttons* and testing for a
+ * marked sibling — is the trap: it silently reclassifies anything it doesn't
+ * recognise as "not a member", so a member wrapped in a `display: contents`
+ * wrapper (Tooltip, HoverCard) or a raw child would make the button BEFORE it
+ * round mid-group. Ignoring known layers keeps the predicate conservative: an
+ * unrecognised sibling still counts, exactly as `:last-child` did, so the worst
+ * case degrades to the old behaviour instead of a wrong corner.
+ *
+ * Kept as a same-file const: StyleX only statically evaluates a selector key
+ * from a const in the same file.
+ *
+ * The leading edge still uses `:first-child` — a member's button always precedes
+ * its own layer, so the first button is genuinely `:first-child`.
+ */
+const IS_LAST_ITEM = ':not(:has(~ *:not([popover])))';
+
 const groupStyles = stylex.create({
   horizontal: {
     borderStartStartRadius: {
@@ -446,11 +476,11 @@ const groupStyles = stylex.create({
     },
     borderStartEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderEndEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderInlineStartWidth: {
       default: borderVars['--border-width'],
@@ -473,11 +503,11 @@ const groupStyles = stylex.create({
     },
     borderEndStartRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderEndEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderBlockStartWidth: {
       default: borderVars['--border-width'],

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);
+    });
+  });
 });