@astryxdesign/core 0.4.0 → 0.4.1

package/locales/en.json

@@ -639,6 +639,10 @@
     "defaultMessage": "Clear {label}",
     "description": "Aria label for the clear-value button in DateInput / DateRangeInput / DateTimeInput. `{label}` is the field's own label so screen readers announce e.g. 'Clear Start date'."
   },
+  "@astryx.dateInput.invalidDate": {
+    "defaultMessage": "Invalid date",
+    "description": "Screen-reader-only live-region alert in DateInput / DateTimeInput when the typed date cannot be parsed. The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
+  },
   "@astryx.dateTimeInput.timeSuffix": {
     "defaultMessage": "{label} time",
     "description": "Screen-reader-only accessible name for the time-of-day slot in a DateTimeInput. Example: `Start date time`; reorder freely (e.g. \"time of {label}\")."
@@ -711,6 +715,10 @@
     "defaultMessage": "Select a time",
     "description": "\"Time\" = clock time (HH:MM), not duration or era. Grey placeholder inside an empty TimeInput field; imperative verb."
   },
+  "@astryx.timeInput.invalidTime": {
+    "defaultMessage": "Invalid time",
+    "description": "Screen-reader-only live-region alert in TimeInput / DateTimeInput when the typed time cannot be parsed. \"Time\" = clock time (HH:MM). The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
+  },
   "@astryx.topNav.heading.dialogLabel": {
     "defaultMessage": "Navigation menu",
     "description": "Screen-reader-only accessible name for the dropdown dialog opened from a TopNavHeading's overflow menu. Kept separate from the SideNav sibling."
@@ -807,6 +815,38 @@
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that removes the selected file from a FileInput. Example: `Clear Attachment`, `Clear Résumé`."
   },
+  "@astryx.fileInput.dropHint": {
+    "defaultMessage": "Drop files here",
+    "description": "Text shown in the dropzone area when a user is dragging files over the FileInput."
+  },
+  "@astryx.fileInput.errorInvalidType": {
+    "defaultMessage": "\"{fileName}\" is not an accepted file type",
+    "description": "Validation error shown when a selected file does not match the accepted types."
+  },
+  "@astryx.fileInput.errorMaxFiles": {
+    "defaultMessage": "Maximum {maxFiles} files allowed",
+    "description": "Validation error shown when the number of selected files exceeds the maximum."
+  },
+  "@astryx.fileInput.errorMaxSize": {
+    "defaultMessage": "\"{fileName}\" exceeds {maxSize} limit",
+    "description": "Validation error shown when a selected file exceeds the maximum size. {maxSize} is a formatted size string like \"2.0 MB\"."
+  },
+  "@astryx.fileInput.fileSelected": {
+    "defaultMessage": "1 file selected: {fileName}",
+    "description": "Live-region announcement when a single file is successfully selected."
+  },
+  "@astryx.fileInput.filesSelected": {
+    "defaultMessage": "{count} files selected",
+    "description": "Live-region announcement when multiple files are successfully selected."
+  },
+  "@astryx.fileInput.placeholder": {
+    "defaultMessage": "Choose file",
+    "description": "Default placeholder text shown when no file is selected in a single-file FileInput."
+  },
+  "@astryx.fileInput.placeholderMultiple": {
+    "defaultMessage": "Choose files",
+    "description": "Default placeholder text shown when no files are selected in a multi-file FileInput."
+  },
   "@astryx.fileInput.required": {
     "defaultMessage": "Required",
     "description": "Screen-reader-only description on the FileInput trigger indicating the field must be filled in. Mirrors the visible `Required` indicator next to the field label; conveyed via description because aria-required is not supported on role=\"button\"."

package/locales/pseudo.json

@@ -479,6 +479,9 @@
   "@astryx.dateInput.clear": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.dateInput.invalidDate": {
+    "defaultMessage": "⟦Íñṽàłíð ðàţé⟧"
+  },
   "@astryx.dateTimeInput.timeSuffix": {
     "defaultMessage": "⟦{label} ţíɱé⟧"
   },
@@ -533,6 +536,9 @@
   "@astryx.timeInput.placeholder": {
     "defaultMessage": "⟦Šéłéçţ à ţíɱé⟧"
   },
+  "@astryx.timeInput.invalidTime": {
+    "defaultMessage": "⟦Íñṽàłíð ţíɱé⟧"
+  },
   "@astryx.topNav.heading.dialogLabel": {
     "defaultMessage": "⟦Ñàṽíĝàţíóñ ɱéñú⟧"
   },
@@ -605,6 +611,30 @@
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.fileInput.dropHint": {
+    "defaultMessage": "⟦Ðřóþ ƒíłéš ĥéřé⟧"
+  },
+  "@astryx.fileInput.errorInvalidType": {
+    "defaultMessage": "⟦\"{fileName}\" íš ñóţ àñ àççéþţéð ƒíłé ţýþé⟧"
+  },
+  "@astryx.fileInput.errorMaxFiles": {
+    "defaultMessage": "⟦Ṁàẋíɱúɱ {maxFiles} ƒíłéš àłłóŵéð⟧"
+  },
+  "@astryx.fileInput.errorMaxSize": {
+    "defaultMessage": "⟦\"{fileName}\" éẋçééðš {maxSize} łíɱíţ⟧"
+  },
+  "@astryx.fileInput.fileSelected": {
+    "defaultMessage": "⟦1 ƒíłé šéłéçţéð: {fileName}⟧"
+  },
+  "@astryx.fileInput.filesSelected": {
+    "defaultMessage": "⟦{count} ƒíłéš šéłéçţéð⟧"
+  },
+  "@astryx.fileInput.placeholder": {
+    "defaultMessage": "⟦Çĥóóšé ƒíłé⟧"
+  },
+  "@astryx.fileInput.placeholderMultiple": {
+    "defaultMessage": "⟦Çĥóóšé ƒíłéš⟧"
+  },
   "@astryx.fileInput.required": {
     "defaultMessage": "⟦Řéɋúířéð⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -663,7 +663,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "rimraf": "^6.0.1",
-    "@astryxdesign/cli": "0.4.0"
+    "@astryxdesign/cli": "0.4.1"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/AppShell/AppShell.doc.mjs

@@ -203,8 +203,11 @@ export const docsDense = {
     bestPractices: [
       {guidance: true, description: 'Choose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content.'},
       {guidance: true, description: 'Set `contentPadding` based on content type: 4 for forms and settings, 0 for tables and dashboards.'},
+      {guidance: true, description: 'Give every nav slot an accessible name: TopNav and SideNav are separate navigation landmarks, so pass `label` to each.'},
+      {guidance: true, description: 'Start the page heading inside `children`: AppShell owns the skip link, banner, and main landmarks but renders no heading, so the first content heading is the page h1.'},
       {guidance: false, description: "Nest one AppShell inside another; it's the outermost layout frame."},
       {guidance: false, description: 'Use for sub-page layouts; use Layout for content areas within AppShell.'},
+      {guidance: false, description: 'Add your own skip link or <main>; AppShell renders both, and a second main landmark makes the first ambiguous.'},
     ],
   },
   propDescriptions: {

package/src/AspectRatio/AspectRatio.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file AspectRatio.tsx
  * @input Uses React, stylex

package/src/AspectRatio/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from AspectRatio.tsx

package/src/Badge/Badge.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Badge.tsx
  * @input Uses React, HTMLAttributes

package/src/Badge/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Badge component and types from Badge.tsx

package/src/Banner/Banner.test.tsx

@@ -3,7 +3,8 @@
 /**
  * @file Banner.test.tsx
  * @input Uses vitest, @testing-library/react, Banner component
- * @output Unit tests for Banner component behavior
+ * @output Unit tests for Banner component behavior, including the
+ *   'banner-icon' theme target riding on the status icon glyph (#4166)
  * @position Testing; validates Banner.tsx implementation
  *
  * SYNC: When modified, update this header
@@ -337,6 +338,62 @@ describe('Banner', () => {
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
 
+  // =========================================================================
+  // Status icon color theming (#4166)
+  // =========================================================================
+
+  it("carries the 'banner-icon' theme target on the default status icon glyph", () => {
+    // Theme overrides for 'banner-icon' + 'status:X' compile to
+    // '.astryx-banner-icon.<status>' (parseStyleKey). The target must sit on
+    // the <Icon> span itself so those same-element rules in
+    // @layer astryx-theme beat the Icon's own color variant.
+    const statuses = ['info', 'warning', 'error', 'success'] as const;
+    for (const status of statuses) {
+      const {container, unmount} = render(
+        <Banner status={status} title={`${status} banner`} />,
+      );
+      const glyph = container.querySelector(
+        `.astryx-icon.astryx-banner-icon.${status}`,
+      );
+      expect(glyph).not.toBeNull();
+      expect(glyph).toHaveAttribute('data-status', status);
+      // Exactly one element carries the target — the layout wrapper no
+      // longer does.
+      expect(container.querySelectorAll('.astryx-banner-icon')).toHaveLength(1);
+      unmount();
+    }
+  });
+
+  it('keeps the color variant on the theme-target element (regression pin for #4166)', () => {
+    // Pre-fix, '.astryx-banner-icon.info' matched the layout wrapper while
+    // the color variant (data-color="accent") sat on an inner span that a
+    // theme override could never reach. Target and paint now share one
+    // element.
+    const {container} = render(<Banner status="info" title="Info" />);
+    const target = container.querySelector('.astryx-banner-icon.info');
+    expect(target).toHaveAttribute('data-color', 'accent');
+  });
+
+  it("keeps the 'banner-icon' target on the wrapper for a custom icon node", () => {
+    // Core never injects props into consumer elements, so with a custom
+    // `icon` the target stays on the (layout-only) wrapper and overrides
+    // reach the node via inheritance. The node itself is untouched.
+    const {container} = render(
+      <Banner
+        status="info"
+        title="Custom icon"
+        icon={<span data-testid="custom-glyph">i</span>}
+      />,
+    );
+    const targets = container.querySelectorAll('.astryx-banner-icon');
+    expect(targets).toHaveLength(1);
+    expect(targets[0]?.tagName).toBe('DIV');
+    expect(targets[0]).toHaveAttribute('aria-hidden', 'true');
+    const custom = container.querySelector('[data-testid="custom-glyph"]');
+    expect(custom).not.toBeNull();
+    expect(custom?.className).toBe('');
+  });
+
   // =========================================================================
   // Icon registry integration
   // =========================================================================

package/src/Banner/Banner.tsx

@@ -12,6 +12,9 @@
  * - Root container: layout-only wrapper (flex column), no visual styling, no theme target
  * - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
  * - Content area (themeProps 'banner-content'): collapsible card background for additional content (children)
+ * - Status icon (themeProps 'banner-icon'): the target rides on the default
+ *   <Icon> itself — the element that paints — so 'status:X' overrides reach
+ *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
@@ -445,16 +448,32 @@ export function Banner({
                 : styles.headerCardStandalone),
           ),
         )}>
+        {/* The 'banner-icon' target rides on the element that paints: the
+            default <Icon> below, or this wrapper when a custom `icon` node
+            is passed (core never injects props into consumer elements, so
+            overrides reach it via inheritance). The wrapper itself stays
+            layout-only. */}
         <div
-          {...mergeProps(
-            themeProps('banner-icon', {status}),
-            stylex.props(styles.iconWrapper),
-          )}
+          {...(icon != null
+            ? mergeProps(
+                themeProps('banner-icon', {status}),
+                stylex.props(styles.iconWrapper),
+              )
+            : stylex.props(styles.iconWrapper))}
           aria-hidden="true">
           {icon != null ? (
             icon
           ) : (
-            <Icon icon={defaultIconName} size="md" color={iconColor} />
+            // Applied to the status <Icon> itself rather than the wrapper, so
+            // the element that paints the glyph is the element a theme
+            // targets — a 'banner-icon' 'status:X' color override beats the
+            // Icon's own variant from @layer astryx-theme (#4166).
+            <Icon
+              icon={defaultIconName}
+              size="md"
+              color={iconColor}
+              {...themeProps('banner-icon', {status})}
+            />
           )}
         </div>
         <div {...stylex.props(styles.headerContent)}>

package/src/Blockquote/Blockquote.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Blockquote.tsx
  * @input Uses React, stylex, spacing and color tokens

package/src/Blockquote/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Blockquote.tsx

package/src/Button/Button.doc.mjs

@@ -163,7 +163,7 @@ export const docs = {
     ],
     vars: [
       {name: '--_button-radius', description: 'Border radius', default: 'var(--radius-element)', private: true},
-      {name: '--button-focus-offset', description: 'Focus ring outline offset', default: '3px'},
+      {name: '--button-focus-offset', description: 'Focus ring outline offset', default: 'var(--focus-outline-offset)'},
       {name: '--button-icon-only-aspect', description: 'Aspect ratio for icon-only buttons', default: '1 / 1'},
     ],
     derived: [
@@ -245,7 +245,7 @@ export const docsZh = {
     ],
     vars: [
       {name: '--_button-radius', description: '圆角半径', default: 'var(--radius-element)', private: true},
-      {name: '--button-focus-offset', description: '焦点环轮廓偏移', default: '3px'},
+      {name: '--button-focus-offset', description: '焦点环轮廓偏移', default: 'var(--focus-outline-offset)'},
       {name: '--button-icon-only-aspect', description: '纯图标按钮的宽高比', default: '1 / 1'},
     ],
     derived: [

package/src/Button/Button.tsx

@@ -34,6 +34,7 @@ import {
   fontWeightVars,
   typeScaleVars,
   shadowVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -57,10 +58,10 @@ import type {ButtonVariantMap} from './index';
 const styles = stylex.create({
   base: {
     // Kept as a public themeable var (documented in Button.doc.mjs) even though
-    // its default now matches the shared outline: removing it would break any
-    // theme setting it, for no gain. It overrides the shared offset, so a theme
-    // can still tune the ring distance on buttons specifically.
-    '--button-focus-offset': '3px',
+    // it now defaults to the shared token: removing it would break any theme
+    // setting it, for no gain. It overrides the shared offset, so a theme can
+    // still tune the ring distance on buttons specifically.
+    '--button-focus-offset': focusVars['--focus-outline-offset'],
     outlineOffset: {
       default: '0',
       ':focus-visible': 'var(--button-focus-offset)',

package/src/Card/Card.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Card.tsx
  * @input Uses container utility, StyleX

package/src/Card/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Card component

package/src/Center/Center.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Center.tsx
  * @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding

package/src/Center/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Center component

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -17,6 +17,7 @@ import {Theme} from '../theme/Theme';
 import {defineTheme} from '../theme/defineTheme';
 import {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {FOCUS_OUTLINE_PARTS} from '../utils/focusOutline.stylex';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -686,7 +687,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
   });
 
   it('paints it on a replacement that forwards nothing', () => {
@@ -701,7 +704,7 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
     expect(replaced.className).toBe('');
     // ...and it still gets a ring, because the owner drew it.
     focusInput(container);
-    expect(replaced.style.outlineStyle).toBe('solid');
+    expect(replaced.style.outlineStyle).toBe(FOCUS_OUTLINE_PARTS.outlineStyle);
   });
 
   it('clears the ring on blur', () => {
@@ -709,7 +712,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     const input = focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
     fireEvent.blur(input);
     expect(indicatorOf(container).style.outlineStyle).toBe('');
   });

package/src/Code/Code.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Code.tsx
  * @input Uses React, StyleX, theme tokens

package/src/CommandPalette/CommandPalette.test.tsx

@@ -9,6 +9,7 @@
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, waitFor, fireEvent, act} from '@testing-library/react';
+import {useState} from 'react';
 import {CommandPalette} from './CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
 import type {SearchSource, SearchableItem} from '@astryxdesign/core/Typeahead';
@@ -274,6 +275,59 @@ describe('CommandPalette', () => {
     );
   });
 
+  it('discards a search response that resolves after the palette closed', async () => {
+    // A source whose search resolves only when released, and no cancel()
+    // implementation — closing the palette must invalidate the request itself.
+    const resolvers: ((items: SearchableItem[]) => void)[] = [];
+    const source: SearchSource = {
+      bootstrap: () => [],
+      async search(): Promise<SearchableItem[]> {
+        return new Promise<SearchableItem[]>(resolve => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+
+    function Harness() {
+      const [isOpen, setIsOpen] = useState(true);
+      return (
+        <CommandPalette
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          searchSource={source}
+        />
+      );
+    }
+    render(<Harness />);
+
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, {target: {value: 'a'}});
+    await waitFor(() => expect(resolvers).toHaveLength(1));
+
+    // Close while the search is still in flight.
+    const dialog = screen.getByRole('dialog');
+    const escapeEvent = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true,
+    });
+    dialog.dispatchEvent(escapeEvent);
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {hidden: true})).not.toHaveAttribute(
+        'open',
+      ),
+    );
+
+    // The stale response arrives after close — it must not re-commit the
+    // abandoned query/results into the closed palette.
+    await act(async () => {
+      resolvers[0]([{id: 'stale', label: 'Stale item'}]);
+    });
+
+    expect(screen.getByRole('combobox', {hidden: true})).toHaveValue('');
+    expect(screen.queryByText('Stale item')).not.toBeInTheDocument();
+  });
+
   it('does not move the highlight while typing in the search input', async () => {
     // The palette's input already filters; letting the shared combobox
     // typeahead also chase prefixes would drag the highlight — and Enter —

package/src/CommandPalette/CommandPalette.tsx

@@ -319,6 +319,11 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   );
 
   const handleClose = useCallback(() => {
+    // Invalidate any in-flight search. Most sources don't implement cancel(),
+    // and a response that resolves after close would still pass runSearch's
+    // version check and re-commit the stale query/results into the closed
+    // palette (visible as a ghost query on reopen while bootstrap is pending).
+    searchVersionRef.current++;
     // Reset both committed and optimistic search on close
     setSearch('');
     setSearchResults([]);

package/src/ComplexSelector/ComplexSelector.test.tsx

@@ -177,7 +177,7 @@ describe('ComplexSelector', () => {
 });
 
 describe('ComplexSelector popup theme target', () => {
-  it('puts astryx-complex-selector-popup on the content box inside the layer', async () => {
+  it('puts astryx-complex-selector-popup on the surface that paints, not the content box', async () => {
     const user = userEvent.setup();
     render(
       <ComplexSelector label="Fruit blend" value="Apple" triggerLabel="Apple">
@@ -186,18 +186,27 @@ describe('ComplexSelector popup theme target', () => {
     );
     await user.click(screen.getByRole('button', {name: 'Fruit blend'}));
 
-    const layer = document.querySelector('[popover]') as HTMLElement;
     const popup = document.querySelector(
       '.astryx-complex-selector-popup',
     ) as HTMLElement;
     expect(popup).not.toBeNull();
-    // The layer is a bare positioning box; the target must be the content box
-    // it contains, which is what actually paints.
-    expect(popup).not.toBe(layer);
-    expect(layer.contains(popup)).toBe(true);
+
+    // The surface is the element usePopover renders: it carries the dialog
+    // role and the shared surface class, and the component's content box —
+    // the one with the padding and the scroll — sits INSIDE it. A target on
+    // that inner box cannot paint the popup's background or radius, which is
+    // what a theme reaches for this class to do.
+    expect(popup).toHaveAttribute('role', 'dialog');
+    expect(popup).toHaveClass('astryx-popover-surface');
+    expect(popup.querySelector('[id]')).not.toBeNull();
     expect(popup).toContainElement(
       screen.getByRole('button', {name: 'Done', ...h}),
     );
+
+    // And it is not the bare positioning layer either.
+    const layer = document.querySelector('[popover]') as HTMLElement;
+    expect(popup).not.toBe(layer);
+    expect(layer.contains(popup)).toBe(true);
   });
 
   it('keeps the target when the consumer also passes contentXstyle', async () => {

package/src/ComplexSelector/ComplexSelector.tsx

@@ -292,6 +292,11 @@ export function ComplexSelector<Value>({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
+    // The popup's theme target belongs on the SURFACE — the element painting
+    // background, radius and elevation — which `usePopover` owns. Rendered on
+    // the content box below it, a theme's background or radius rule paints the
+    // wrong box.
+    surfaceTarget: 'complex-selector-popup',
     onHide: () => {
       document.getElementById(triggerId)?.focus();
     },
@@ -313,16 +318,7 @@ export function ComplexSelector<Value>({
   const triggerContent = triggerLabel ?? placeholder;
 
   const content = (
-    // The theme target sits here, not on the layer: the layer element is a
-    // bare positioning box (useLayer zeroes its borders, padding and
-    // background), so this content box is the surface a theme has to reach to
-    // paint the popup.
-    <div
-      id={contentId}
-      {...mergeProps(
-        themeProps('complex-selector-popup'),
-        stylex.props(styles.content, contentXstyle),
-      )}>
+    <div id={contentId} {...stylex.props(styles.content, contentXstyle)}>
       {children(optimisticValue, commitValue, popover.hide, {
         isOpen: popover.isOpen,
         isBusy,

package/src/DateInput/DateInput.test.tsx

@@ -25,6 +25,7 @@ import {InputGroup} from '../InputGroup';
 import {InputGroupText} from '../InputGroup/InputGroupText';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {InternationalizationProvider} from '../i18n';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -170,6 +171,24 @@ describe('DateInput', () => {
     expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
   });
 
+  it('resolves the invalid-date announcement from the i18n catalog', () => {
+    const {container} = render(
+      <InternationalizationProvider
+        locale="en"
+        overrides={{en: {'@astryx.dateInput.invalidDate': 'Ungültiges Datum'}}}>
+        <DateInput label="Date" onChange={() => {}} />
+      </InternationalizationProvider>,
+    );
+
+    fireEvent.change(screen.getByRole('combobox'), {
+      target: {value: '13/45/2024'},
+    });
+
+    expect(within(container).getByRole('alert')).toHaveTextContent(
+      'Ungültiges Datum',
+    );
+  });
+
   it('reverts to previous value on blur when input is invalid', async () => {
     const onChange = vi.fn();
     render(<DateInput label="Date" value="2026-01-25" onChange={onChange} />);