@astryxdesign/core 0.3.0 → 0.4.0-canary.41f53a0

package/src/ComplexSelector/ComplexSelector.test.tsx

@@ -106,6 +106,27 @@ describe('ComplexSelector', () => {
     );
   });
 
+  it('gives the popup clearance on both block edges, not just the leading one (#4803)', async () => {
+    const user = userEvent.setup();
+    render(
+      <FruitComplexSelector
+        value={{fruit: 'Apple', ripeness: 'Ripe'}}
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit blend'}));
+    const popup = document.querySelector('[popover]') as HTMLElement;
+    expect(popup).not.toBeNull();
+    // Both edges, not just the leading one: the trailing edge is what faces
+    // the trigger when the same popup opens upward (placement="above") or is
+    // flipped by position-try-fallbacks. useLayer's `offset` sets both from
+    // the resolved placement; jsdom resolves neither the var indirection nor
+    // logical margins, so read the debug-mode declarations it emits.
+    const blockStart = popup.style.getPropertyValue('--x-marginBlockStart');
+    expect(blockStart).not.toBe('');
+    expect(popup.style.getPropertyValue('--x-marginBlockEnd')).toBe(blockStart);
+  });
+
   it('runs changeAction through the provided onChange helper', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -154,3 +175,55 @@ describe('ComplexSelector', () => {
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 });
+
+describe('ComplexSelector popup theme target', () => {
+  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">
+        {() => <button type="button">Done</button>}
+      </ComplexSelector>,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit blend'}));
+
+    const popup = document.querySelector(
+      '.astryx-complex-selector-popup',
+    ) as HTMLElement;
+    expect(popup).not.toBeNull();
+
+    // 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 () => {
+    const user = userEvent.setup();
+    render(
+      <ComplexSelector
+        label="Fruit blend"
+        value="Apple"
+        triggerLabel="Apple"
+        contentXstyle={{}}>
+        {() => <button type="button">Done</button>}
+      </ComplexSelector>,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit blend'}));
+
+    expect(
+      document.querySelector('.astryx-complex-selector-popup'),
+    ).not.toBeNull();
+  });
+});

package/src/ComplexSelector/ComplexSelector.tsx

@@ -42,6 +42,8 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
+import {composeEventHandlers} from '../utils/composeEventHandlers';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 
@@ -97,25 +99,28 @@ const styles = stylex.create({
   placeholder: {
     color: colorVars['--color-text-secondary'],
   },
+  // Only what Icon does not already provide: `sm` gives the 16px box and
+  // `color="secondary"` the color, but the glyph still must not shrink inside
+  // the flex trigger.
   triggerIcon: {
     flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 16,
-    height: 16,
+  },
+  // Rotation lives on the chevron glyph itself (passed through `xstyle`), not
+  // on the layout wrapper above, so the icon's
+  // `complex-selector-indicator-icon` theme target and the open/closed
+  // transform sit on one element — a theme can restyle the mark and its
+  // rotation through a single selector. The wrapper keeps only layout.
+  triggerIconRotation: {
     transitionProperty: 'transform',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     transformOrigin: 'center',
-    color: colorVars['--color-icon-secondary'],
   },
   triggerIconOpen: {
     transform: 'rotate(180deg)',
   },
   popover: {
     minWidth: 'anchor-size(width)',
-    marginBlockStart: spacingVars['--spacing-1'],
   },
   content: {
     boxSizing: 'border-box',
@@ -135,12 +140,6 @@ const styles = stylex.create({
   disabled: {
     cursor: 'not-allowed',
   },
-  focusRing: {
-    ':focus-within': {
-      outline: `2px solid ${colorVars['--color-accent']}`,
-      outlineOffset: '2px',
-    },
-  },
 });
 
 export type ComplexSelectorSize = 'sm' | 'md' | 'lg';
@@ -266,6 +265,7 @@ export function ComplexSelector<Value>({
   className,
   style,
   'data-testid': testId,
+  onClick: onClickProp,
   ...props
 }: ComplexSelectorProps<Value>) {
   const t = useTranslator();
@@ -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();
     },
@@ -329,11 +334,11 @@ export function ComplexSelector<Value>({
         ref={popover.triggerRef}
         data-testid={testId}
         {...props}
-        onClick={() => {
+        onClick={composeEventHandlers(onClickProp, () => {
           if (!isDisabled) {
             popover.toggle();
           }
-        }}
+        })}
         {...mergeProps(
           themeProps('complex-selector', {
             size,
@@ -343,7 +348,11 @@ export function ComplexSelector<Value>({
             inputWrapperStyles.base,
             styles.triggerContainer,
             styles[size],
-            styles.focusRing,
+            // The ring belongs to the wrapper (the focusable `<button>` sits
+            // inside it), but it must still be a KEYBOARD ring: `:focus-within`
+            // matched a mouse click on the trigger and drew the outline for
+            // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
+            focusOutlineStyles.focusWithin,
             isDisabled && inputWrapperStyles.disabled,
             isDisabled && styles.disabled,
             triggerLabel == null && styles.placeholder,
@@ -374,25 +383,29 @@ export function ComplexSelector<Value>({
           <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>
         </button>
         {isBusy && <Spinner size="sm" />}
-        <span
-          {...stylex.props(
+        <Icon
+          icon="chevronDown"
+          size="sm"
+          color="secondary"
+          // No wrapper: Icon's own span already provides the 16px box (`sm`)
+          // and the secondary icon color the wrapper used to set, so the glyph
+          // IS the trigger's icon element — one node carrying the box, the
+          // color, the rotation, and the theme target.
+          xstyle={[
             styles.triggerIcon,
+            styles.triggerIconRotation,
             popover.isOpen && styles.triggerIconOpen,
-          )}>
-          <Icon
-            icon="chevronDown"
-            size="sm"
-            color="inherit"
-            {...themeProps('complex-selector-indicator-icon', {
-              state: popover.isOpen ? 'expanded' : 'collapsed',
-            })}
-          />
-        </span>
+          ]}
+          {...themeProps('complex-selector-indicator-icon', {
+            state: popover.isOpen ? 'expanded' : 'collapsed',
+          })}
+        />
       </div>
 
       {popover.render(content, {
         placement,
         alignment: 'start',
+        offset: spacingVars['--spacing-1'],
         xstyle: [styles.popover, layerAnimations[placement]],
       })}
     </>

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -32,7 +32,7 @@ export const docs = {
     {
       name: 'items',
       type: 'ContextMenuOption[]',
-      description: 'Array of menu entries. Each entry is one of: an action item `{label, onClick?, icon?, isDisabled?}`, a divider `{type: "divider"}`, or a section `{type: "section", title?, items: [...action items]}`.',
+      description: 'Array of menu entries. Each entry is one of: an action item `{label, onClick?, icon?, isDisabled?, variant?}` (variant `"destructive"` renders it in the error color), a divider `{type: "divider"}`, or a section `{type: "section", title?, items: [...action items]}`.',
       required: true,
     },
     {

package/src/ContextMenu/ContextMenu.test.tsx

@@ -14,6 +14,7 @@ import userEvent from '@testing-library/user-event';
 import {ContextMenu} from './ContextMenu';
 import {
   ContextMenuItem,
+  ContextMenuDivider,
   ContextMenuCheckboxItem,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
@@ -348,6 +349,27 @@ describe('ContextMenu items', () => {
   });
 });
 
+describe('ContextMenu destructive variant', () => {
+  it('forwards a destructive item variant to the shared menu item', () => {
+    render(
+      <ContextMenu
+        items={[
+          {label: 'Delete', variant: 'destructive', onClick: () => {}},
+          {label: 'Rename', onClick: () => {}},
+        ]}>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    expect(
+      screen.getByRole('menuitem', {name: 'Delete', hidden: true}),
+    ).toHaveAttribute('data-variant', 'destructive');
+    expect(
+      screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+    ).not.toHaveAttribute('data-variant');
+  });
+});
+
 describe('ContextMenu sections', () => {
   it('renders section with title', () => {
     render(
@@ -448,6 +470,25 @@ describe('ContextMenu compound mode', () => {
     expect(screen.getByTestId('shortcut')).toHaveTextContent('⌘X');
   });
 
+  it('renders the menu divider surface through the ContextMenu alias', () => {
+    render(
+      <ContextMenu
+        menuContent={
+          <>
+            <ContextMenuItem label="Cut" onClick={() => {}} />
+            <ContextMenuDivider />
+            <ContextMenuItem label="Delete" onClick={() => {}} />
+          </>
+        }>
+        <div>Right-click me</div>
+      </ContextMenu>,
+    );
+
+    expect(screen.getByRole('separator', {hidden: true})).toHaveClass(
+      'astryx-dropdown-menu-divider',
+    );
+  });
+
   it('calls onClick when compound item is clicked', async () => {
     const user = userEvent.setup();
     const handleClick = vi.fn();

package/src/ContextMenu/ContextMenu.tsx

@@ -71,7 +71,7 @@ import {useTranslator} from '../i18n';
 import type {
   DropdownMenuOption,
   DropdownMenuItemData,
-  DropdownMenuDivider,
+  DropdownMenuDividerData,
   DropdownMenuSection,
 } from '../DropdownMenu/DropdownMenu';
 
@@ -128,7 +128,7 @@ const styles = stylex.create({
 
 export type ContextMenuItemData = DropdownMenuItemData;
 
-export type ContextMenuDivider = DropdownMenuDivider;
+export type ContextMenuDividerData = DropdownMenuDividerData;
 
 export type ContextMenuSection = DropdownMenuSection;
 
@@ -466,9 +466,9 @@ export function ContextMenu({
     <>
       <div
         ref={mergeRefs(ref, triggerRef)}
+        {...triggerProps}
         onContextMenu={handleContextMenu}
         {...longPressHandlers}
-        {...triggerProps}
         data-testid={testId}
         {...stylex.props(
           styles.trigger,

package/src/ContextMenu/index.ts

@@ -11,7 +11,7 @@ export {
   ContextMenu,
   type ContextMenuProps,
   type ContextMenuItemData,
-  type ContextMenuDivider,
+  type ContextMenuDividerData,
   type ContextMenuSection,
   type ContextMenuOption,
 } from './ContextMenu';
@@ -20,6 +20,10 @@ export {
   DropdownMenuItem as ContextMenuItem,
   type DropdownMenuItemProps as ContextMenuItemProps,
 } from '../DropdownMenu/DropdownMenuItem';
+export {
+  DropdownMenuDivider as ContextMenuDivider,
+  type DropdownMenuDividerProps as ContextMenuDividerProps,
+} from '../DropdownMenu/DropdownMenuDivider';
 
 // Selectable items work inside a ContextMenu too — re-exported under the
 // ContextMenu name for a coherent API.

package/src/DateInput/DateInput.doc.mjs

@@ -142,6 +142,13 @@ export const docs = {
         'Number of months displayed simultaneously in the calendar popover.',
       default: '1',
     },
+    {
+      name: 'weekStartsOn',
+      type: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'",
+      description:
+        'First day of week in the calendar popover. A number (0 = Sunday to 6 = Saturday) or a three-letter day name.',
+      default: '0',
+    },
     {
       name: 'format',
       type: "'date' | 'date_long' | 'date_weekday' | 'system_date' | ((value: ISODateString) => string)",
@@ -164,9 +171,9 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-input', visualProps: ['size', 'status']},
+      {className: 'astryx-date-input', visualProps: ['size', 'status'], states: ['disabled']},
       {className: 'astryx-date-input-toggle-icon', states: ['state']},
-      {className: 'astryx-date-input-clear-icon'},
+      {className: 'astryx-date-input-clear-icon', deprecatedFor: 'input-clear-icon'},
     ],
   },
   usage: {
@@ -417,6 +424,12 @@ export const docsZh = {
       description: '日历弹出层中同时显示的月份数量。',
       default: '1',
     },
+    {
+      name: 'weekStartsOn',
+      type: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'",
+      description: '日历弹出层中每周的起始日。可为数字（0=周日……6=周六）或三字母星期缩写。',
+      default: '0',
+    },
     {
       name: 'format',
       type: "'date' | 'date_long' | 'date_weekday' | 'system_date' | ((value: ISODateString) => string)",
@@ -436,9 +449,10 @@ export const docsZh = {
       {
         className: 'astryx-date-input',
         visualProps: ['size', 'status'],
+        states: ['disabled'],
       },
       {className: 'astryx-date-input-toggle-icon', states: ['state']},
-      {className: 'astryx-date-input-clear-icon'},
+      {className: 'astryx-date-input-clear-icon', deprecatedFor: 'input-clear-icon'},
     ],
   },
 };
@@ -520,6 +534,7 @@ export const docsDense = {
     labelTooltip: 'tooltip text via info icon at label end',
     hasClear: 'Shows clear button when date is set. Clears value on click.',
     numberOfMonths: 'months shown simultaneously in calendar popover',
+    weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     format:
       "committed-value display: 'date_long' (default, March 21, 2026), 'date' (Mar 21, 2026), 'date_weekday' (Wed, Mar 21, 2026), 'system_date' (2026-03-21), or (iso)=>string; reuses Timestamp vocabulary. Committed value only, not while typing.",
     xstyle: 'StyleX styles for layout; must be stylex.create() value',

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} />);
@@ -949,6 +968,61 @@ describe('DateInput', () => {
       expect(screen.getByDisplayValue('Mar 10, 2026')).toBeInTheDocument();
     });
   });
+  describe('weekStartsOn', () => {
+    // The calendar popover renders in the top layer; jsdom keeps the content in
+    // the DOM but role queries skip it, so read the columnheaders directly.
+    const openAndReadWeekdays = (container: HTMLElement): (string | null)[] => {
+      fireEvent.keyDown(screen.getByRole('combobox'), {key: 'ArrowDown'});
+      return Array.from(container.querySelectorAll('[role="columnheader"]'))
+        .slice(0, 7)
+        .map(h => h.textContent);
+    };
+
+    it('defaults to a Sunday-first week', () => {
+      const {container} = render(
+        <DateInput label="Date" onChange={() => {}} />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+      ]);
+    });
+
+    it('forwards a numeric weekStartsOn to the calendar', () => {
+      const {container} = render(
+        <DateInput label="Date" onChange={() => {}} weekStartsOn={1} />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+
+    it('accepts a three-letter day name', () => {
+      const {container} = render(
+        <DateInput label="Date" onChange={() => {}} weekStartsOn="mon" />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+  });
 });
 
 describe('DateInput statusVariant forwarding', () => {
@@ -994,7 +1068,7 @@ describe('DateInput clear icon theme target', () => {
     return icon as HTMLElement;
   };
 
-  it('renders the astryx-date-input-clear-icon target on the clear glyph', () => {
+  it('renders the astryx-input-clear-icon target (plus the legacy alias) on the clear glyph', () => {
     render(
       <DateInput
         label="Date"
@@ -1003,11 +1077,13 @@ describe('DateInput clear icon theme target', () => {
         hasClear
       />,
     );
-    // The stable theme target lands on the icon element itself (not the
-    // button), so a theme can restyle just this glyph (color, size, hover)
-    // via `defineTheme` — a button-level target could not reach the icon's
-    // own color/size.
+    // The canonical target lands on the icon element itself (not the button),
+    // so a theme can restyle just this glyph (color, size, hover) via
+    // `defineTheme` — a button-level target could not reach the icon's own
+    // color/size. The original per-component name rides along for a
+    // deprecation window.
     const icon = getClearIcon();
+    expect(icon).toHaveClass('astryx-input-clear-icon');
     expect(icon).toHaveClass('astryx-date-input-clear-icon');
     expect(icon).toHaveClass('astryx-icon');
   });
@@ -1028,11 +1104,13 @@ describe('DateInput clear icon theme target', () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
-  it('renders the default icon (secondary color, sm size) byte-identically', () => {
-    // Pixel-identical default guard: the clear glyph must carry the exact same
-    // StyleX color/size classes as a standalone secondary/sm icon. The added
-    // target class is purely additive — it changes nothing until a theme
-    // targets it.
+  it('routes the clear glyph through the shared clear button, keeping the legacy target', () => {
+    // The clear affordance now composes the shared InputClearButton (a ghost
+    // Button with a secondary/sm glyph), so the icon carries the canonical
+    // `astryx-input-clear-icon` target and — for a deprecation window — the
+    // original `astryx-date-input-clear-icon`. Aside from those target classes
+    // it matches the shared button's own `close`/`sm`/`secondary` glyph
+    // exactly, so the default look is defined in one place.
     render(
       <DateInput
         label="Date"
@@ -1042,6 +1120,8 @@ describe('DateInput clear icon theme target', () => {
       />,
     );
     const icon = getClearIcon();
+    expect(icon).toHaveClass('astryx-input-clear-icon');
+    expect(icon).toHaveClass('astryx-date-input-clear-icon');
 
     const {container: refContainer} = render(
       <Icon icon="close" size="sm" color="secondary" />,
@@ -1051,7 +1131,11 @@ describe('DateInput clear icon theme target', () => {
     const styleClasses = (el: HTMLElement) =>
       el.className
         .split(' ')
-        .filter(c => c !== 'astryx-date-input-clear-icon')
+        .filter(
+          c =>
+            c !== 'astryx-input-clear-icon' &&
+            c !== 'astryx-date-input-clear-icon',
+        )
         .sort();
 
     expect(styleClasses(icon)).toEqual(styleClasses(refIcon));
@@ -1177,3 +1261,20 @@ describe('DateInput calendar-toggle icon theme target', () => {
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 });
+
+describe('DateInput disabled theme state', () => {
+  it('reflects disabled on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <DateInput label="Date" onChange={() => {}} isDisabled />,
+    );
+    const root = container.querySelector('.astryx-date-input');
+    expect(root).toHaveAttribute('data-disabled', 'disabled');
+    expect(root).toHaveClass('disabled');
+  });
+
+  it('omits data-disabled when enabled, like status does', () => {
+    const {container} = render(<DateInput label="Date" onChange={() => {}} />);
+    const root = container.querySelector('.astryx-date-input');
+    expect(root).not.toHaveAttribute('data-disabled');
+  });
+});