@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/Dialog/Dialog.test.tsx

@@ -12,8 +12,87 @@
 import {readFileSync} from 'node:fs';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {Dialog, resolveDialogPositionOffsets} from './Dialog';
+import {
+  Dialog,
+  dialogFullscreenSafeAreaPaddingContract,
+  resolveDialogPositionOffsets,
+} from './Dialog';
 import {DialogHeader} from './DialogHeader';
+import {defineTheme, generateThemeCSS} from '../theme';
+
+function generateThemeTestCSS(
+  theme: Parameters<typeof generateThemeCSS>[0],
+): string {
+  return Object.values(generateThemeCSS(theme)).join('\n');
+}
+
+function extractConstDeclaration(source: string, name: string): string {
+  const start = source.indexOf(`const ${name} = stylex.keyframes({`);
+  if (start === -1) {
+    throw new Error(`Missing ${name} keyframes`);
+  }
+
+  const bodyStart = source.indexOf('{', start);
+  let depth = 0;
+  for (let index = bodyStart; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === '{') {
+      depth += 1;
+    } else if (char === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        return source.slice(start, index + 3);
+      }
+    }
+  }
+
+  throw new Error(`Unterminated ${name} keyframes`);
+}
+
+function extractThemeVars(css: string): Map<string, string> {
+  const vars = new Map<string, string>();
+  for (const match of css.matchAll(/(--astryx-dialog-[\w-]+):\s*([^;]+);/g)) {
+    vars.set(match[1], match[2].trim());
+  }
+  return vars;
+}
+
+function resolveCSSVarFallback(
+  value: string,
+  vars: ReadonlyMap<string, string>,
+): string {
+  const trimmed = value.trim();
+  if (!trimmed.startsWith('var(') || !trimmed.endsWith(')')) {
+    return trimmed;
+  }
+
+  const inner = trimmed.slice(4, -1);
+  let depth = 0;
+  let commaIndex = -1;
+  for (let index = 0; index < inner.length; index += 1) {
+    const char = inner[index];
+    if (char === '(') {
+      depth += 1;
+    } else if (char === ')') {
+      depth -= 1;
+    } else if (char === ',' && depth === 0) {
+      commaIndex = index;
+      break;
+    }
+  }
+
+  const varName = (
+    commaIndex === -1 ? inner : inner.slice(0, commaIndex)
+  ).trim();
+  const fallback = commaIndex === -1 ? '' : inner.slice(commaIndex + 1).trim();
+  return vars.has(varName)
+    ? vars.get(varName)!
+    : resolveCSSVarFallback(fallback, vars);
+}
+
+function normalizeCSSValue(value: string): string {
+  return value.replace(/\s+/g, '');
+}
 
 // Mock showModal and close methods since they're not fully implemented in jsdom
 beforeEach(() => {
@@ -396,36 +475,57 @@ describe('Dialog', () => {
       expect(inlineStyle).toContain('--x-maxHeight: 70dvh');
     });
 
-    it('uses a fullscreen-specific fade animation instead of centered dialog movement', () => {
+    it('uses opacity-only fullscreen keyframes while standard dialogs keep directional movement', () => {
       const source = readFileSync(
         'packages/core/src/Dialog/Dialog.tsx',
         'utf8',
       );
-      const standardOpen = source.slice(
-        source.indexOf('  open: {'),
-        source.indexOf('  // Backdrop using ::backdrop'),
+      const enterDirectional = extractConstDeclaration(
+        source,
+        'enterDirectional',
+      );
+      const enterFullscreen = extractConstDeclaration(
+        source,
+        'enterFullscreen',
       );
       const fullscreenOpen = source.slice(
         source.indexOf('  fullscreenOpen: {'),
         source.indexOf('  fullscreenSafeArea: {'),
       );
-      const modalStyleOrder = source.slice(
-        source.indexOf('focusOutlineProps.focusVisible('),
-        source.indexOf(
-          '          xstyle,',
-          source.indexOf('focusOutlineProps.focusVisible('),
-        ),
-      );
 
-      expect(standardOpen).toContain('enterDirectional');
+      expect(enterDirectional).toContain('transform');
+      expect(enterDirectional).toContain('translate(var(--dialog-dir-x');
+      expect(enterDirectional).toContain('scale(0.95)');
+      expect(enterFullscreen).toContain('opacity');
+      expect(enterFullscreen).not.toContain('transform');
+      expect(enterFullscreen).not.toContain('translate');
+      expect(enterFullscreen).not.toContain('scale(');
       expect(fullscreenOpen).toContain('enterFullscreen');
       expect(fullscreenOpen).not.toContain('enterDirectional');
-      expect(modalStyleOrder.indexOf('styles.open')).toBeLessThan(
-        modalStyleOrder.indexOf('styles.fullscreenOpen'),
+    });
+
+    it('maps fullscreen safe-area insets to logical sides in LTR and RTL', () => {
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineStart.ltr).toContain(
+        'safe-area-inset-left',
+      );
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineEnd.ltr).toContain(
+        'safe-area-inset-right',
+      );
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineStart.rtl).toContain(
+        'safe-area-inset-right',
+      );
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineEnd.rtl).toContain(
+        'safe-area-inset-left',
+      );
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineStart.rtl).not.toBe(
+        dialogFullscreenSafeAreaPaddingContract.inlineStart.ltr,
+      );
+      expect(dialogFullscreenSafeAreaPaddingContract.inlineEnd.rtl).not.toBe(
+        dialogFullscreenSafeAreaPaddingContract.inlineEnd.ltr,
       );
     });
 
-    it('protects fullscreen content with safe-area padding', () => {
+    it('protects default fullscreen content with safe-area padding', () => {
       render(
         <Dialog
           isOpen={true}
@@ -438,10 +538,77 @@ describe('Dialog', () => {
 
       const wrapper = screen.getByTestId('child').parentElement!;
       const computed = window.getComputedStyle(wrapper);
-      expect(computed.paddingInlineStart).toContain('safe-area-inset-left');
-      expect(computed.paddingInlineEnd).toContain('safe-area-inset-right');
+      expect(normalizeCSSValue(computed.paddingInlineStart)).toBe(
+        normalizeCSSValue(
+          dialogFullscreenSafeAreaPaddingContract.inlineStart.ltr,
+        ),
+      );
+      expect(normalizeCSSValue(computed.paddingInlineEnd)).toBe(
+        normalizeCSSValue(
+          dialogFullscreenSafeAreaPaddingContract.inlineEnd.ltr,
+        ),
+      );
       expect(wrapper.parentElement!.tagName).toBe('DIALOG');
     });
+
+    it('applies RTL fullscreen safe-area padding to the opposite logical edges', () => {
+      render(
+        <div dir="rtl">
+          <Dialog
+            isOpen={true}
+            onOpenChange={() => {}}
+            variant="fullscreen"
+            aria-label="Fullscreen RTL dialog">
+            <div data-testid="rtl-child">Content</div>
+          </Dialog>
+        </div>,
+      );
+
+      const wrapper = screen.getByTestId('rtl-child').parentElement!;
+      const computed = window.getComputedStyle(wrapper);
+      expect(normalizeCSSValue(computed.paddingInlineStart)).toBe(
+        normalizeCSSValue(
+          dialogFullscreenSafeAreaPaddingContract.inlineStart.rtl,
+        ),
+      );
+      expect(normalizeCSSValue(computed.paddingInlineEnd)).toBe(
+        normalizeCSSValue(
+          dialogFullscreenSafeAreaPaddingContract.inlineEnd.rtl,
+        ),
+      );
+    });
+
+    it('resolves theme zero padding before the default fullscreen safe-area fallback', () => {
+      const zeroPaddingTheme = defineTheme({
+        name: 'dialog-zero-padding-test',
+        components: {
+          dialog: {
+            base: {padding: '0'},
+          },
+        },
+      });
+
+      const vars = extractThemeVars(generateThemeTestCSS(zeroPaddingTheme));
+      expect(vars.get('--astryx-dialog-padding')).toBe('0');
+      expect(
+        resolveCSSVarFallback(
+          dialogFullscreenSafeAreaPaddingContract.blockStart,
+          vars,
+        ),
+      ).toBe('0');
+      expect(
+        resolveCSSVarFallback(
+          dialogFullscreenSafeAreaPaddingContract.inlineStart.ltr,
+          vars,
+        ),
+      ).toBe('0');
+      expect(
+        resolveCSSVarFallback(
+          dialogFullscreenSafeAreaPaddingContract.inlineEnd.rtl,
+          vars,
+        ),
+      ).toBe('0');
+    });
   });
 
   describe('position prop', () => {

package/src/Dialog/Dialog.tsx

@@ -11,8 +11,9 @@
  * The standard variant treats `width` as the preferred surface width, then
  * clamps it to the dynamic viewport with spacing-token gutters so narrow
  * viewports keep content and controls on screen without changing the public API.
- * Fullscreen dialogs preserve the same padding floor while honoring safe-area
- * insets, and fade in without the centered-dialog translate/scale motion.
+ * Fullscreen dialogs add safe-area protection to the default padding fallback
+ * while preserving explicit prop/theme padding overrides, and fade in without
+ * the centered-dialog translate/scale motion.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
@@ -131,6 +132,27 @@ const enterFullscreen = stylex.keyframes({
   to: {opacity: 1},
 });
 
+const dialogFullscreenSafeAreaBlockStartPadding = `var(--astryx-dialog-padding-block-start, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-top, 0px))))`;
+const dialogFullscreenSafeAreaBlockEndPadding = `var(--astryx-dialog-padding-block-end, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-bottom, 0px))))`;
+const dialogFullscreenSafeAreaInlineStartPaddingLtr = `var(--astryx-dialog-padding-inline-start, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px)))))`;
+const dialogFullscreenSafeAreaInlineStartPaddingRtl = `var(--astryx-dialog-padding-inline-start, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px)))))`;
+const dialogFullscreenSafeAreaInlineEndPaddingLtr = `var(--astryx-dialog-padding-inline-end, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-right, 0px)))))`;
+const dialogFullscreenSafeAreaInlineEndPaddingRtl = `var(--astryx-dialog-padding-inline-end, var(--astryx-dialog-padding-inline, var(--astryx-dialog-padding, max(${spacingVars['--spacing-4']}, env(safe-area-inset-left, 0px)))))`;
+
+/** @internal Verified by Dialog.test.tsx; not re-exported from the package entry point. */
+export const dialogFullscreenSafeAreaPaddingContract = {
+  blockStart: dialogFullscreenSafeAreaBlockStartPadding,
+  blockEnd: dialogFullscreenSafeAreaBlockEndPadding,
+  inlineStart: {
+    ltr: dialogFullscreenSafeAreaInlineStartPaddingLtr,
+    rtl: dialogFullscreenSafeAreaInlineStartPaddingRtl,
+  },
+  inlineEnd: {
+    ltr: dialogFullscreenSafeAreaInlineEndPaddingLtr,
+    rtl: dialogFullscreenSafeAreaInlineEndPaddingRtl,
+  },
+} as const;
+
 /**
  * Dialog styles using native <dialog> element
  * Uses ::backdrop pseudo-element for overlay
@@ -191,14 +213,16 @@ const styles = stylex.create({
     },
   },
   fullscreenSafeArea: {
-    paddingBlockStart:
-      'max(var(--container-padding-block-start), env(safe-area-inset-top, 0px))',
-    paddingBlockEnd:
-      'max(var(--container-padding-block-end), env(safe-area-inset-bottom, 0px))',
-    paddingInlineStart:
-      'max(var(--container-padding-inline-start), env(safe-area-inset-left, 0px))',
-    paddingInlineEnd:
-      'max(var(--container-padding-inline-end), env(safe-area-inset-right, 0px))',
+    paddingBlockStart: dialogFullscreenSafeAreaBlockStartPadding,
+    paddingBlockEnd: dialogFullscreenSafeAreaBlockEndPadding,
+    paddingInlineStart: {
+      default: dialogFullscreenSafeAreaInlineStartPaddingLtr,
+      ':is([dir="rtl"] *)': dialogFullscreenSafeAreaInlineStartPaddingRtl,
+    },
+    paddingInlineEnd: {
+      default: dialogFullscreenSafeAreaInlineEndPaddingLtr,
+      ':is([dir="rtl"] *)': dialogFullscreenSafeAreaInlineEndPaddingRtl,
+    },
   },
   inner: {
     display: 'flex',
@@ -628,7 +652,7 @@ export function Dialog({
         !useThemeDefault &&
           effectivePadding !== 4 &&
           containerPaddingBlockEndVarStyles[effectivePadding],
-        isFullscreen && styles.fullscreenSafeArea,
+        isFullscreen && useThemeDefault && styles.fullscreenSafeArea,
       )}>
       <DialogContext value={dialogContextValue}>{children}</DialogContext>
     </div>

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useState} from 'react';
 import {DropdownMenu} from './DropdownMenu';
@@ -315,10 +315,7 @@ describe('DropdownMenu', () => {
 });
 
 describe('DropdownMenu light-dismiss race', () => {
-  it('does not re-open the menu when a click follows a hide within the guard window', () => {
-    // Reproduces the iOS Safari race: pointerdown fires light-dismiss before
-    // the subsequent click on the trigger; without the guard, the click would
-    // immediately re-open the menu in the same tap.
+  function openMenu() {
     render(
       <DropdownMenu
         button={{label: 'Actions'}}
@@ -326,13 +323,50 @@ describe('DropdownMenu light-dismiss race', () => {
         data-testid="astryx-dropdown-menu"
       />,
     );
-
     const trigger = screen.getByTestId('astryx-dropdown-menu');
-    fireEvent.click(trigger); // open
-    fireEvent.click(trigger); // close (stamps guard)
-    fireEvent.click(trigger); // would re-open without guard
+    fireEvent.pointerDown(trigger);
+    fireEvent.click(trigger);
     expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
-    expect(HTMLElement.prototype.hidePopover).toHaveBeenCalledTimes(1);
+    return trigger;
+  }
+
+  /**
+   * The browser dismisses the menu on pointerup and queues the `toggle` event;
+   * on the engines that lose the race it reaches React before the trigger's
+   * own click, which then reads a closed menu.
+   */
+  function lightDismiss() {
+    const popover = document.querySelector('[popover]') as HTMLElement;
+    act(() => {
+      popover.dispatchEvent(
+        Object.assign(new Event('toggle'), {
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+  }
+
+  it('does not re-open when the trigger click follows its own light dismiss', () => {
+    const trigger = openMenu();
+
+    fireEvent.pointerDown(trigger);
+    lightDismiss();
+    fireEvent.click(trigger);
+
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-opens on a press of its own after a light dismiss', () => {
+    const trigger = openMenu();
+
+    fireEvent.pointerDown(trigger);
+    lightDismiss();
+    fireEvent.click(trigger);
+    fireEvent.pointerDown(trigger);
+    fireEvent.click(trigger);
+
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledTimes(2);
   });
 });
 

package/src/DropdownMenu/DropdownMenu.tsx

@@ -37,7 +37,7 @@ import React, {
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {usePopover} from '../Popover/usePopover';
+import {usePopoverInternal} from '../Popover/usePopover';
 import {Button, type ButtonProps} from '../Button';
 import {Icon} from '../Icon';
 
@@ -261,14 +261,8 @@ export function DropdownMenu({
   const isControlled = controlledIsOpen !== undefined;
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
 
-  // Track when the menu was last hidden so a near-simultaneous trigger
-  // click — e.g. on iOS Safari where pointerdown fires light-dismiss
-  // before the trigger's click event — can't immediately re-open it.
-  const lastHideTimeRef = useRef(0);
-
   // Close menu + return focus to trigger
   const handleLayerHide = useCallback(() => {
-    lastHideTimeRef.current = Date.now();
     onOpenChange?.(false);
     if (!isControlled) {
       setInternalIsOpen(false);
@@ -294,7 +288,7 @@ export function DropdownMenu({
     }
   }, [isControlled, onOpenChange]);
 
-  const popover = usePopover({
+  const popover = usePopoverInternal({
     onHide: handleLayerHide,
     onShow: handleLayerShow,
     hasLightDismiss: true,
@@ -422,11 +416,8 @@ export function DropdownMenu({
 
   const handleButtonClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
-      // If the menu was just closed by light dismiss (e.g. iOS Safari fires
-      // pointerdown → hide before the trigger's click), the click would
-      // otherwise immediately re-open it. Short-circuit within the guard
-      // window.
-      if (Date.now() - lastHideTimeRef.current < 50) {
+      // The click that light-dismissed the menu is not a request to reopen it.
+      if (popover.wasJustDismissed()) {
         return;
       }
       onClick?.();

package/src/Field/FieldLabel.test.tsx

@@ -15,6 +15,7 @@ import userEvent from '@testing-library/user-event';
 import {TestIcon} from '../__tests__/TestIcon';
 import {InternationalizationProvider} from '../i18n';
 import {FieldLabel} from './FieldLabel';
+import {themeProps} from '../utils/themeProps';
 
 describe('FieldLabel', () => {
   it('renders label text', () => {
@@ -197,4 +198,32 @@ describe('FieldLabel', () => {
       expect(description.closest('label')).toBeNull();
     });
   });
+
+  describe('a control can name its own label target', () => {
+    it('composes a passed target onto the field-label one', () => {
+      // How CheckboxInput and Switch reach their label: the control spreads
+      // its own themeProps in, and both classes end up on the same element,
+      // so a theme can style every label or just this kind.
+      render(
+        <FieldLabel
+          {...themeProps('checkbox-label')}
+          label="Notify me"
+          inputID="notify-input"
+        />,
+      );
+      const label = screen.getByText('Notify me').closest('label');
+      expect(label).toHaveClass('astryx-field-label');
+      expect(label).toHaveClass('astryx-checkbox-label');
+    });
+
+    it('describes no placement of its own', () => {
+      // The label cannot know how its caller arranged it, so it says nothing:
+      // a `data-layout` here would be a claim that is wrong for at least one
+      // caller (Field's horizontal-labels puts a label beside its control),
+      // and a consumer could set it untruthfully.
+      render(<FieldLabel label="Email" inputID="email-input" />);
+      const label = screen.getByText('Email').closest('label');
+      expect(label).not.toHaveAttribute('data-layout');
+    });
+  });
 });

package/src/Field/FieldLabel.tsx

@@ -285,6 +285,13 @@ export function FieldLabel({
         htmlFor={isGroupLabel ? undefined : inputID}
         {...rest}
         {...mergeProps(
+          // A control that knows what kind of label this is passes its own
+          // target down (CheckboxInput's `checkbox-label`, Switch's
+          // `switch-label`); it arrives as `className` and composes onto this
+          // one. The label itself does not describe its own placement — it
+          // cannot know it, and any encoding it guessed would be wrong for a
+          // caller that arranges labels differently (Field's
+          // `horizontal-labels`).
           themeProps('field-label'),
           stylex.props(
             styles.label,

package/src/Field/InputClearButton.test.tsx

@@ -15,7 +15,7 @@ import {readFileSync} from 'node:fs';
 import path from 'node:path';
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {InputClearButton} from './InputClearButton';
+import {InputClearButton, type InputClearButtonProps} from './InputClearButton';
 import {Icon} from '../Icon';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
@@ -67,6 +67,20 @@ const getGlyph = (): HTMLElement => {
   return icon as HTMLElement;
 };
 
+describe('InputClearButton public props', () => {
+  it('keep popup invoker handlers internal', () => {
+    const hasPointerDown: 'onPointerDown' extends keyof InputClearButtonProps
+      ? true
+      : false = false;
+    const hasClickCapture: 'onClickCapture' extends keyof InputClearButtonProps
+      ? true
+      : false = false;
+
+    expect(hasPointerDown).toBe(false);
+    expect(hasClickCapture).toBe(false);
+  });
+});
+
 describe('InputClearButton', () => {
   it('renders a real button with the given accessible label', () => {
     render(<InputClearButton label="Clear" onClick={() => {}} />);

package/src/Field/InputClearButton.tsx

@@ -5,8 +5,7 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton, the shared clear (✕) button rendered by
- *   every clearable input in the family.
+ * @output Exports the public InputClearButton and an internal popup-aware variant.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -80,12 +79,24 @@ export interface InputClearButtonProps {
   iconClassName?: string;
 }
 
-export function InputClearButton({
+interface InternalInputClearButtonProps extends InputClearButtonProps {
+  onPointerDown: React.PointerEventHandler<HTMLElement>;
+  onClickCapture: React.MouseEventHandler<HTMLElement>;
+}
+
+type InputClearButtonRenderProps = InputClearButtonProps &
+  Partial<
+    Pick<InternalInputClearButtonProps, 'onPointerDown' | 'onClickCapture'>
+  >;
+
+function renderInputClearButton({
   label,
   onClick,
+  onPointerDown,
+  onClickCapture,
   xstyle,
   iconClassName,
-}: InputClearButtonProps): ReactNode {
+}: InputClearButtonRenderProps): ReactNode {
   const {className: iconTargetClassName} = themeProps('input-clear-icon');
   const {className: buttonTargetClassName} = themeProps('input-clear-button');
   return (
@@ -107,10 +118,23 @@ export function InputClearButton({
         />
       }
       onClick={onClick}
+      onPointerDown={onPointerDown}
+      onClickCapture={onClickCapture}
       isIconOnly
       xstyle={[styles.button, xstyle]}
     />
   );
 }
 
+export function InputClearButton(props: InputClearButtonProps): ReactNode {
+  return renderInputClearButton(props);
+}
+
+/** Internal variant used while popup-aware clear behavior is rolled out. */
+export function InternalInputClearButton(
+  props: InternalInputClearButtonProps,
+): ReactNode {
+  return renderInputClearButton(props);
+}
+
 InputClearButton.displayName = 'InputClearButton';

package/src/Heading/Heading.tsx

@@ -281,7 +281,6 @@ export function Heading({
           className,
           {...style, ...inlineStyle},
         )}
-        title={tooltipEnabled ? truncation.fullText : undefined}
         {...ariaProps}
         {...props}>
         {children}

package/src/HoverCard/HoverCard.doc.mjs

@@ -16,7 +16,10 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-hovercard'},
+      {className: 'astryx-hover-card'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-hovercard', deprecatedFor: 'hover-card'},
     ],
     vars: [
       {name: '--_hovercard-radius', description: 'Border radius of the hover card', default: 'var(--radius-container)', private: true},
@@ -144,7 +147,10 @@ export const docsZh = {
   displayName: 'Hover Card',
   theming: {
     targets: [
-      {className: 'astryx-hovercard'},
+      {className: 'astryx-hover-card'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-hovercard', deprecatedFor: 'hover-card'},
     ],
     vars: [
       {name: '--_hovercard-radius', description: 'Border radius of the hover card', default: 'var(--radius-container)', private: true},