@astryxdesign/core 0.4.1 → 0.4.2-canary.356d2f9

package/src/Slider/Slider.tsx

@@ -174,6 +174,15 @@ const styles = stylex.create({
   },
   trackContainerHorizontal: {
     height: THUMB_SIZE,
+    // The whole track is the tap target (a click anywhere on it moves the
+    // slider), but it is only THUMB_SIZE (20px) tall — under the WCAG 2.5.8 AA
+    // 24px minimum. Floor its block size to 24px on touch pointers only. The
+    // rail and thumb center on 50%, so they stay put; only the invisible
+    // tappable area grows. Desktop (fine pointer) is unchanged.
+    minBlockSize: {
+      default: null,
+      '@media (pointer: coarse)': '24px',
+    },
     width: '100%',
     cursor: 'pointer',
   },
@@ -366,6 +375,44 @@ function getPercent(val: number, min: number, max: number): number {
   return ((val - min) / (max - min)) * 100;
 }
 
+/**
+ * Thumb travel is inset by half a thumb at each end — the geometry a native
+ * `input[type=range]` uses — so the thumb stays inside the component box at
+ * min and max instead of overhanging it by half its width (#5050). The fill
+ * and the marks map through the same inset, and `travelFraction` inverts it,
+ * so the thumb tracks the pointer that grabbed it. Both directions read
+ * THUMB_SIZE, so a theme cannot resize the thumb through CSS alone.
+ */
+const THUMB_INSET = THUMB_SIZE / 2;
+
+function insetPosition(percent: number): string {
+  return cssLength(percent, THUMB_INSET - (percent / 100) * THUMB_SIZE);
+}
+
+/** Distance between two inset positions; the inset itself cancels out. */
+function insetSpan(fromPercent: number, toPercent: number): string {
+  const delta = toPercent - fromPercent;
+  return cssLength(delta, -(delta / 100) * THUMB_SIZE);
+}
+
+/** Inverse of `insetPosition`: an offset from the box start back to 0–1. */
+function travelFraction(offset: number, size: number): number {
+  const travel = size - THUMB_SIZE;
+  if (travel > 0) {
+    return (offset - THUMB_INSET) / travel;
+  }
+  // Narrower than the thumb, so there is no travel to map onto: fall back to
+  // the raw fraction rather than dividing by zero.
+  return size > 0 ? offset / size : 0;
+}
+
+function cssLength(percent: number, px: number): string {
+  // Percentages of the box and step arithmetic both carry binary
+  // floating-point error into the DOM (`calc(33% + 3.3999999999999995px)`).
+  const round = (n: number) => Number(n.toFixed(3));
+  return `calc(${round(percent)}% ${px < 0 ? '-' : '+'} ${Math.abs(round(px))}px)`;
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -483,17 +530,21 @@ export function Slider({ref, ...props}: SliderProps) {
       }
       const rect = track.getBoundingClientRect();
 
+      // Inverse of `insetPosition`: the pointer maps onto the thumb's travel
+      // (the box minus half a thumb at each end), so pressing on the thumb
+      // leaves it where it is instead of jumping.
       let percent: number;
       if (isHorizontal) {
         // In RTL the inline-start (value = min) is the right edge, so measure
         // the pointer fraction from the right instead of the left. Detected
         // from the track's computed direction (lazy, only on pointer move).
-        percent = isRtlElement(track)
-          ? (rect.right - clientX) / rect.width
-          : (clientX - rect.left) / rect.width;
+        percent = travelFraction(
+          isRtlElement(track) ? rect.right - clientX : clientX - rect.left,
+          rect.width,
+        );
       } else {
         // Vertical: bottom = min, top = max
-        percent = 1 - (clientY - rect.top) / rect.height;
+        percent = 1 - travelFraction(clientY - rect.top, rect.height);
       }
       percent = clamp(percent, 0, 1);
       const raw = min + percent * (max - min);
@@ -723,8 +774,8 @@ export function Slider({ref, ...props}: SliderProps) {
     const percent = getPercent(val, min, max);
 
     const positionStyle = isHorizontal
-      ? {insetInlineStart: `${percent}%`}
-      : {bottom: `${percent}%`, left: '50%'};
+      ? {insetInlineStart: insetPosition(percent)}
+      : {bottom: insetPosition(percent), left: '50%'};
 
     // In range mode each thumb keeps a short individual name that composes
     // with the group label (announced via the group's aria-labelledby), per
@@ -809,22 +860,23 @@ export function Slider({ref, ...props}: SliderProps) {
     return thumbElement;
   };
 
-  // Filled track position
+  // Filled track position — ends at the thumb centre, so it uses the same
+  // inset mapping as the thumb.
   const filledStyle = (() => {
     if (isRange) {
       const [v0, v1] = values;
       const p0 = getPercent(v0, min, max);
       const p1 = getPercent(v1, min, max);
       if (isHorizontal) {
-        return {insetInlineStart: `${p0}%`, width: `${p1 - p0}%`};
+        return {insetInlineStart: insetPosition(p0), width: insetSpan(p0, p1)};
       }
-      return {bottom: `${p0}%`, height: `${p1 - p0}%`};
+      return {bottom: insetPosition(p0), height: insetSpan(p0, p1)};
     }
     const p = getPercent(values[0], min, max);
     if (isHorizontal) {
-      return {insetInlineStart: '0%', width: `${p}%`};
+      return {insetInlineStart: '0%', width: insetPosition(p)};
     }
-    return {bottom: '0%', height: `${p}%`};
+    return {bottom: '0%', height: insetPosition(p)};
   })();
 
   // Text value display
@@ -949,8 +1001,8 @@ export function Slider({ref, ...props}: SliderProps) {
               {marks.map(mark => {
                 const percent = getPercent(mark.value, min, max);
                 const markPos = isHorizontal
-                  ? {insetInlineStart: `${percent}%`}
-                  : {bottom: `${percent}%`};
+                  ? {insetInlineStart: insetPosition(percent)}
+                  : {bottom: insetPosition(percent)};
                 return (
                   <div key={mark.value}>
                     <div

package/src/Switch/Switch.tsx

@@ -156,6 +156,26 @@ const styles = stylex.create({
     opacity: 0,
     cursor: 'pointer',
     zIndex: 1,
+    minInlineSize: {
+      default: null,
+      '@media (pointer: coarse)': '24px',
+    },
+    minBlockSize: {
+      default: null,
+      '@media (pointer: coarse)': '24px',
+    },
+    insetBlockStart: {
+      default: null,
+      '@media (pointer: coarse)': '50%',
+    },
+    insetInlineStart: {
+      default: null,
+      '@media (pointer: coarse)': '50%',
+    },
+    transform: {
+      default: null,
+      '@media (pointer: coarse)': 'translate(-50%, -50%)',
+    },
   },
   inputDisabled: {
     cursor: 'not-allowed',

package/src/TabList/TabList.doc.mjs

@@ -22,6 +22,9 @@ export const docs = {
       {className: 'astryx-tab-menu-dropdown'},
       {className: 'astryx-tab-menu-item'},
     ],
+    vars: [
+      {name: '--_tab-indicator-bottom', description: 'Vertical offset of the selected-tab indicator from the tab bottom edge. A host that draws its own bottom divider (Toolbar) sets this so the indicator sits on the divider instead of above it.', default: '-1px', private: true},
+    ],
   },
   description: 'Nav wrapper that provides TabListContext (value, onChange, size) to Tab and TabMenu children.',
   props: [

package/src/Text/Text.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-heading', visualProps: ['level', 'color']},
+      {className: 'astryx-heading', visualProps: ['level', 'color', 'type']},
       {className: 'astryx-text', visualProps: ['type', 'size', 'color']},
     ],
   },

package/src/Thumbnail/Thumbnail.doc.mjs

@@ -77,6 +77,9 @@ export const docs = {
     targets: [
       {className: 'astryx-thumbnail'},
     ],
+    vars: [
+      {name: '--_thumbnail-hit-inset', description: 'Outset of the remove button\u2019s invisible hit area, applied to a ::after overlay. 0 on a fine pointer; negative on a coarse one, which grows the 20px button to the 24px touch target without changing what is drawn.', default: '0px', private: true},
+    ],
   },
   usage: {
     description:

package/src/Thumbnail/Thumbnail.tsx

@@ -207,6 +207,7 @@ const styles = stylex.create({
   },
   removeButtonOverrides: {
     '--_button-radius': `calc(${radiusVars['--radius-element']} - ${spacingVars['--spacing-1']})`,
+    position: 'relative',
     height: 20,
     minWidth: 20,
     // Fixed colors instead of luminance-adapting theme: a translucent scrim
@@ -214,6 +215,15 @@ const styles = stylex.create({
     // without sampling pixel brightness.
     backgroundColor: colorVars['--color-overlay'],
     color: colorVars['--color-on-dark'],
+    '--_thumbnail-hit-inset': {
+      default: '0px',
+      '@media (pointer: coarse)': '-2px',
+    },
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 'var(--_thumbnail-hit-inset)',
+    },
   },
   disabled: {
     opacity: 0.5,

package/src/Timestamp/Timestamp.test.tsx

@@ -16,6 +16,24 @@ import {formatTooltipLines} from './tooltipEntries';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {InternationalizationProvider} from '../i18n';
 
+async function openTimestampHoverCard(): Promise<HTMLElement> {
+  const timestamp = document.querySelector('time');
+  if (timestamp == null) {
+    throw new Error('Expected Timestamp to render a <time> element');
+  }
+  const trigger = timestamp.parentElement;
+  if (trigger == null) {
+    throw new Error('Expected Timestamp to render a hover-card trigger');
+  }
+
+  fireEvent.mouseEnter(trigger);
+  await waitFor(() => {
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+  });
+
+  return screen.getByRole('dialog', {hidden: true});
+}
+
 describe('Timestamp', () => {
   // The hover card is loaded lazily (React.lazy + Suspense), so its chunk
   // resolves asynchronously the first time a card renders. Warm the module
@@ -646,14 +664,13 @@ describe('Timestamp', () => {
       );
       const el = screen.getByTestId('ts');
 
-      // The card layer mounts inline and carries the full absolute time in
-      // its visible form (short timezone abbreviation) as its single default
-      // copyable row. The aria-label spells the timezone out in full
-      // (WCAG 3.1.4), so the two strings intentionally differ — compare the
-      // card against an independently formatted short-form string.
+      // The card carries the full absolute time in its visible form (short
+      // timezone abbreviation) as its single default copyable row. The
+      // aria-label spells the timezone out in full (WCAG 3.1.4), so the two
+      // strings intentionally differ — compare the card against an
+      // independently formatted short-form string after opening it.
       // Compare with normalized whitespace: Intl output can contain narrow
       // no-break spaces that jest-dom's matcher normalization would break on.
-      const card = await screen.findByRole('dialog', {hidden: true});
       const normalize = (s: string) => s.replace(/\s+/g, ' ');
       const datetime = new Date(el.getAttribute('datetime') ?? '');
       const expected = new Intl.DateTimeFormat(undefined, {
@@ -665,14 +682,14 @@ describe('Timestamp', () => {
         second: '2-digit',
         timeZoneName: 'short',
       }).format(datetime);
-      expect(normalize(card.textContent ?? '')).toContain(normalize(expected));
-
       // Tab onto the timestamp — the only tab stop in the document.
       await user.tab();
       expect(el).toHaveFocus();
       await waitFor(() => {
         expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
       });
+      const card = screen.getByRole('dialog', {hidden: true});
+      expect(normalize(card.textContent ?? '')).toContain(normalize(expected));
     });
 
     it('does not add a tab stop when the hover card is disabled', () => {
@@ -756,7 +773,7 @@ describe('Timestamp', () => {
           .queryAllByRole('tooltip', {hidden: true})
           .filter(el => !/^(Copy|Copied)$/.test(el.textContent?.trim() ?? '')),
       ).toHaveLength(0);
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       // The default card is the named details card, exactly as the configured
       // one is.
       expect(card).toHaveAttribute('aria-label', 'Timestamp details');
@@ -786,7 +803,7 @@ describe('Timestamp', () => {
 
     it("copies the default absolute row's value", async () => {
       render(<Timestamp value={Date.now() / 1000 - 3600} format="relative" />);
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       const rowValue = card.querySelector('dd')?.textContent ?? '';
       expect(rowValue).toBeTruthy();
       fireEvent.click(card.querySelector('button')!);
@@ -802,10 +819,11 @@ describe('Timestamp', () => {
 
     it("shows a 'Copy' tooltip on the copy button, flipping to 'Copied' after a copy", async () => {
       render(<Timestamp value={Date.now() / 1000 - 3600} format="relative" />);
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       const button = card.querySelector('button')!;
       // The visible tooltip content defaults to the short imperative 'Copy'
       // (the full "Copy <value>" string stays the button's aria-label).
+      fireEvent.mouseEnter(button);
       await waitFor(() =>
         expect(
           screen.getByText('Copy', {
@@ -872,7 +890,7 @@ describe('Timestamp', () => {
           .queryAllByRole('tooltip', {hidden: true})
           .filter(el => !/^(Copy|Copied)$/.test(el.textContent?.trim() ?? '')),
       ).toHaveLength(0);
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       expect(card).toHaveAttribute('aria-label', 'Timestamp details');
     });
 
@@ -888,7 +906,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       expect(card.querySelectorAll('dd')).toHaveLength(3);
       // Entries are read-only unless they opt in, so no copy buttons and no
       // trailing action column are rendered.
@@ -915,7 +933,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       // Three rows, but only the opted-in row carries a copy button.
       expect(card.querySelectorAll('dd')).toHaveLength(3);
       expect(card.querySelectorAll('button')).toHaveLength(1);
@@ -936,7 +954,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       const values = Array.from(card.querySelectorAll('dd')).map(
         el => el.textContent,
       );
@@ -960,7 +978,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       const [rowValue] = Array.from(card.querySelectorAll('dd')).map(
         el => el.textContent ?? '',
       );
@@ -991,7 +1009,7 @@ describe('Timestamp', () => {
           />
         </InternationalizationProvider>,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       fireEvent.click(card.querySelector('button')!);
       await waitFor(() => {
         expect(
@@ -1011,7 +1029,7 @@ describe('Timestamp', () => {
       );
       // Without entries an absolute format has no hover surface at all;
       // configuring entries must not be silently ignored.
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       expect(card.textContent).toContain('UTC');
       // ...and the anchor becomes keyboard-reachable, as it is for relative.
       expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '0');
@@ -1120,7 +1138,7 @@ describe('Timestamp', () => {
         />,
       );
       // autoThreshold={0} forces the absolute branch regardless of the clock.
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       expect(card.textContent).toContain('2026-02-19 17:00:00');
       expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '0');
     });
@@ -1135,7 +1153,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       expect(card.textContent).toContain('2026-02-19 17:00:00');
     });
 
@@ -1151,7 +1169,7 @@ describe('Timestamp', () => {
           ]}
         />,
       );
-      const card = await screen.findByRole('dialog', {hidden: true});
+      const card = await openTimestampHoverCard();
       // An unlabeled entry still emits its label cell, so the grid stays
       // aligned and the <dl> stays valid markup.
       expect(card.querySelectorAll('dt')).toHaveLength(3);
@@ -1189,7 +1207,7 @@ describe('Timestamp', () => {
             ]}
           />,
         );
-        const card = await screen.findByRole('dialog', {hidden: true});
+        const card = await openTimestampHoverCard();
         const values = Array.from(card.querySelectorAll('dd')).map(
           el => el.textContent,
         );

package/src/Toolbar/Toolbar.test.tsx

@@ -72,11 +72,11 @@ describe('Toolbar', () => {
     expect(screen.getByTestId('end')).toBeInTheDocument();
 
     // Three-slot layout produces 3 child divs (plus the aria-hidden
-    // keyboard-hint popover, which is excluded here as an implementation detail)
+    // keyboard-hint layer infrastructure, excluded as an implementation detail)
     const toolbar = screen.getByRole('toolbar');
-    expect(toolbar.querySelectorAll(':scope > :not([popover])')).toHaveLength(
-      3,
-    );
+    expect(
+      toolbar.querySelectorAll(':scope > :not([popover]):not(template)'),
+    ).toHaveLength(3);
   });
 
   it('renders two-slot layout without centerContent', () => {
@@ -91,11 +91,11 @@ describe('Toolbar', () => {
     expect(screen.getByTestId('end')).toBeInTheDocument();
 
     // Two-slot layout produces 2 child divs (plus the aria-hidden
-    // keyboard-hint popover, excluded here)
+    // keyboard-hint layer infrastructure, excluded here)
     const toolbar = screen.getByRole('toolbar');
-    expect(toolbar.querySelectorAll(':scope > :not([popover])')).toHaveLength(
-      2,
-    );
+    expect(
+      toolbar.querySelectorAll(':scope > :not([popover]):not(template)'),
+    ).toHaveLength(2);
   });
 
   it('renders start-only layout', () => {
@@ -107,9 +107,9 @@ describe('Toolbar', () => {
     );
     expect(screen.getByTestId('start')).toBeInTheDocument();
     const toolbar = screen.getByRole('toolbar');
-    expect(toolbar.querySelectorAll(':scope > :not([popover])')).toHaveLength(
-      1,
-    );
+    expect(
+      toolbar.querySelectorAll(':scope > :not([popover]):not(template)'),
+    ).toHaveLength(1);
   });
 
   it('renders end-only layout', () => {
@@ -121,9 +121,9 @@ describe('Toolbar', () => {
     );
     expect(screen.getByTestId('end')).toBeInTheDocument();
     const toolbar = screen.getByRole('toolbar');
-    expect(toolbar.querySelectorAll(':scope > :not([popover])')).toHaveLength(
-      1,
-    );
+    expect(
+      toolbar.querySelectorAll(':scope > :not([popover]):not(template)'),
+    ).toHaveLength(1);
   });
 
   it('sets aria-orientation to horizontal by default', () => {

package/src/TopNav/TopNav.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {fireEvent, render, screen} from '@testing-library/react';
+import {fireEvent, render, screen, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TopNav} from './TopNav';
 import {TopNavRenderContext} from './TopNavRenderContext';
@@ -660,3 +660,88 @@ describe('TopNavItem', () => {
     });
   });
 });
+
+describe('TopNavHeading hover/click guard', () => {
+  // tabIndex={-1} matches real menu items; a bare role=menuitem div is not
+  // focusable.
+  const menuItems = (
+    <>
+      <div role="menuitem" tabIndex={-1}>
+        Alpha
+      </div>
+      <div role="menuitem" tabIndex={-1}>
+        Beta
+      </div>
+    </>
+  );
+
+  it('keeps the menu open when a hover-open is immediately clicked', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    render(<TopNavHeading heading="My App" menu={menuItems} />);
+    const trigger = screen.getByRole('button', {name: 'Open menu'});
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    vi.useRealTimers();
+  });
+
+  it('closes on a click that lands well after the hover-open', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    render(<TopNavHeading heading="My App" menu={menuItems} />);
+    const trigger = screen.getByRole('button', {name: 'Open menu'});
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+    act(() => {
+      vi.advanceTimersByTime(1200);
+    });
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    vi.useRealTimers();
+  });
+
+  it('leaves focus on the trigger for a hover-open, and moves it in on click', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    render(<TopNavHeading heading="My App" menu={menuItems} />);
+    const trigger = screen.getByRole('button', {name: 'Open menu'});
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+    const firstItem = screen.getAllByRole('menuitem', {hidden: true})[0];
+    expect(firstItem).not.toHaveFocus();
+
+    await user.click(trigger);
+    expect(firstItem).toHaveFocus();
+
+    vi.useRealTimers();
+  });
+
+  it('returns focus to the trigger on Escape', async () => {
+    const user = userEvent.setup();
+    render(<TopNavHeading heading="My App" menu={menuItems} />);
+    const trigger = screen.getByRole('button', {name: 'Open menu'});
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/TopNav/TopNavHeading.tsx

@@ -335,23 +335,27 @@ export function TopNavHeading({
     hasCloseButton: false,
   });
 
-  const closeMenuCtx = useMemo(
-    () => ({closeMenu: popover.hide}),
-    [popover.hide],
-  );
+  const {
+    triggerProps,
+    contentProps,
+    menuRef,
+    setTriggerEl,
+    close: closeMenu,
+  } = useMenuHover<HTMLDivElement>({
+    show: popover.show,
+    hide: popover.hide,
+    isOpen: popover.isOpen,
+    isEnabled: !!menu,
+    showDelay: 0,
+  });
 
-  const {triggerProps, contentProps, menuRef, setTriggerEl} =
-    useMenuHover<HTMLDivElement>({
-      show: popover.show,
-      hide: popover.hide,
-      isOpen: popover.isOpen,
-      isEnabled: !!menu,
-      showDelay: 0,
-    });
+  const closeMenuCtx = useMemo(() => ({closeMenu}), [closeMenu]);
 
+  // setTriggerEl belongs on the chevron button, not this root: it is the
+  // focus-restore target and a <div> cannot take focus. triggerRef stays here
+  // because the panel anchors to the whole heading.
   const setRef = mergeRefs<HTMLElement>(
     rootRef,
-    setTriggerEl,
     ref,
     menu ? popover.triggerRef : undefined,
   );
@@ -426,7 +430,8 @@ export function TopNavHeading({
     <button
       type="button"
       {...stylex.props(styles.popoverHeading)}
-      onClick={triggerProps.onClick}>
+      // A close affordance, not the trigger: dismiss only.
+      onClick={closeMenu}>
       {logo && <span {...stylex.props(styles.logo)}>{logo}</span>}
       {renderTextContent(
         <Icon
@@ -505,6 +510,7 @@ export function TopNavHeading({
             // Stays a <button>: this box is the popover trigger, so it carries
             // the accessible name and handlers — only the glyph moves to Icon.
             <button
+              ref={setTriggerEl}
               type="button"
               aria-label={t('@astryx.topNav.heading.openMenu')}
               onClick={e => {
@@ -582,6 +588,7 @@ export function TopNavHeading({
               // carries the accessible name and handlers — only the glyph
               // moves to Icon.
               <button
+                ref={setTriggerEl}
                 type="button"
                 aria-label={t('@astryx.topNav.heading.openMenu')}
                 onClick={e => {