@astryxdesign/core 0.3.0 → 0.4.0

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -511,6 +511,72 @@ describe('DateRangeInput statusVariant forwarding', () => {
       'detached',
     );
   });
+
+  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.click(getButton('Open calendar'));
+      return Array.from(container.querySelectorAll('[role="columnheader"]'))
+        .slice(0, 7)
+        .map(h => h.textContent);
+    };
+
+    it('defaults to a Sunday-first week', () => {
+      const {container} = render(
+        <DateRangeInput label="Range" value={null} onChange={() => {}} />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+      ]);
+    });
+
+    it('forwards a numeric weekStartsOn to the calendar', () => {
+      const {container} = render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={() => {}}
+          weekStartsOn={1}
+        />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+
+    it('accepts a three-letter day name', () => {
+      const {container} = render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={() => {}}
+          weekStartsOn="mon"
+        />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+  });
 });
 
 describe('DateRangeInput icon theme targets', () => {
@@ -526,7 +592,7 @@ describe('DateRangeInput icon theme targets', () => {
     return icon as HTMLElement;
   };
 
-  it('renders astryx-date-range-input-clear-icon on the clear glyph', () => {
+  it('renders astryx-input-clear-icon (plus the legacy alias) on the clear glyph', () => {
     render(
       <DateRangeInput
         label="Range"
@@ -535,10 +601,13 @@ describe('DateRangeInput icon theme targets', () => {
         hasClear
       />,
     );
-    // The stable 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 = iconIn(getButton('Clear Range'));
+    expect(icon).toHaveClass('astryx-input-clear-icon');
     expect(icon).toHaveClass('astryx-date-range-input-clear-icon');
     expect(icon).toHaveClass('astryx-icon');
   });
@@ -552,11 +621,12 @@ describe('DateRangeInput icon theme targets', () => {
     expect(icon).toHaveAttribute('data-state', 'collapsed');
   });
 
-  it('renders the default icons (secondary color, sm size) byte-identically', () => {
-    // Pixel-identical default guard: the glyphs 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 (default look unchanged)', () => {
+    // Default-look guard for the clear affordance. It now composes the shared
+    // InputClearButton (a ghost Button with a secondary/sm glyph), so aside
+    // from its target classes the glyph matches a standalone `secondary`/`sm`
+    // close icon — the default clear look is defined once, in InputClearButton.
+    // (The calendar-toggle glyph is covered separately.)
     render(
       <DateRangeInput
         label="Range"
@@ -567,22 +637,24 @@ describe('DateRangeInput icon theme targets', () => {
     );
     const clearIcon = iconIn(getButton('Clear Range'));
 
-    const {container: refContainer} = render(
+    const {container: clearRefContainer} = render(
       <Icon icon="close" size="sm" color="secondary" />,
     );
-    const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+    const clearRefIcon = clearRefContainer.querySelector(
+      '.astryx-icon',
+    ) as HTMLElement;
 
     const styleClasses = (el: HTMLElement) =>
       el.className
         .split(' ')
         .filter(
           c =>
-            c !== 'astryx-date-range-input-clear-icon' &&
-            c !== 'astryx-date-range-input-toggle-icon',
+            c !== 'astryx-input-clear-icon' &&
+            c !== 'astryx-date-range-input-clear-icon',
         )
         .sort();
 
-    expect(styleClasses(clearIcon)).toEqual(styleClasses(refIcon));
+    expect(styleClasses(clearIcon)).toEqual(styleClasses(clearRefIcon));
   });
 
   it('exposes the icon targets so a theme reaches icon color, size, and hover', () => {
@@ -616,3 +688,27 @@ describe('DateRangeInput icon theme targets', () => {
     expect(css).toContain('14px');
   });
 });
+
+describe('DateRangeInput disabled theme state', () => {
+  it('reflects disabled on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <DateRangeInput
+        label="Range"
+        value={null}
+        onChange={() => {}}
+        isDisabled
+      />,
+    );
+    const root = container.querySelector('.astryx-date-range-input');
+    expect(root).toHaveAttribute('data-disabled', 'disabled');
+    expect(root).toHaveClass('disabled');
+  });
+
+  it('omits data-disabled when enabled, like status does', () => {
+    const {container} = render(
+      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-date-range-input');
+    expect(root).not.toHaveAttribute('data-disabled');
+  });
+});

package/src/DateRangeInput/DateRangeInput.tsx

@@ -36,6 +36,7 @@ import {
 } from '../theme/tokens.stylex';
 import {
   Field,
+  InputClearButton,
   type InputStatus,
   inputWrapperStyles,
   inputStatusBorderStyles,
@@ -45,7 +46,13 @@ import {
 } from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
-import {Calendar, type ISODateString, type DateRange} from '../Calendar';
+import {
+  Calendar,
+  type ISODateString,
+  type DateRange,
+  type DayOfWeek,
+  type DayOfWeekName,
+} from '../Calendar';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
@@ -54,6 +61,7 @@ import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {themeProps} from '../utils/themeProps';
+import {stableClassName} from '../naming';
 import {useTranslator} from '../i18n';
 
 export type {DateRange} from '../Calendar';
@@ -355,6 +363,14 @@ export interface DateRangeInputProps extends Omit<
    * @default 2
    */
   numberOfMonths?: 1 | 2;
+
+  /**
+   * First day of week in the calendar. Accepts a number
+   * (0 = Sunday … 6 = Saturday) or a three-letter day name ('sun'–'sat',
+   * case-insensitive).
+   * @default 0
+   */
+  weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 
 /**
@@ -396,6 +412,7 @@ export function DateRangeInput({
   statusVariant = 'attached',
   labelTooltip,
   numberOfMonths = 2,
+  weekStartsOn,
   width,
   xstyle,
   className,
@@ -548,6 +565,7 @@ export function DateRangeInput({
           themeProps('date-range-input', {
             size,
             status: status?.type ?? null,
+            disabled: isDisabled ? 'disabled' : null,
           }),
           stylex.props(
             inputWrapperStyles.base,
@@ -612,18 +630,11 @@ export function DateRangeInput({
           {displayValue || placeholder}
         </button>
         {hasClear && value !== null && !isEffectivelyDisabled && (
-          <button
-            type="button"
+          <InputClearButton
+            label={t('@astryx.dateInput.clear', {label})}
             onClick={handleClear}
-            aria-label={t('@astryx.dateInput.clear', {label})}
-            {...stylex.props(styles.iconButton)}>
-            <Icon
-              icon="close"
-              size="sm"
-              color="secondary"
-              {...themeProps('date-range-input-clear-icon')}
-            />
-          </button>
+            iconClassName={stableClassName('date-range-input-clear-icon')}
+          />
         )}
         {isBusy && <Spinner size="sm" />}
         {statusIcon}
@@ -667,6 +678,7 @@ export function DateRangeInput({
             max={max}
             dateConstraints={dateConstraints}
             numberOfMonths={numberOfMonths}
+            weekStartsOn={weekStartsOn}
           />
         </div>,
         {placement: 'below', alignment: 'start'},

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -173,6 +173,13 @@ export const docs = {
       description: 'Number of months displayed simultaneously in the calendar.',
       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. A number (0 = Sunday to 6 = Saturday) or a three-letter day name.',
+      default: '0',
+    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -188,7 +195,7 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {className: 'astryx-date-time-input', visualProps: ['size', 'status'], states: ['disabled']},
       {
         className: 'astryx-date-time-input-date-segment',
         visualProps: ['size', 'status'],
@@ -477,6 +484,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: 'xstyle',
       type: 'StyleXStyles',
@@ -486,7 +499,7 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {className: 'astryx-date-time-input', visualProps: ['size', 'status'], states: ['disabled']},
       {
         className: 'astryx-date-time-input-date-segment',
         visualProps: ['size', 'status'],
@@ -577,6 +590,7 @@ export const docsDense = {
     status: 'error/warning/success status w/ message',
     labelTooltip: 'tooltip text via info icon at label end',
     numberOfMonths: 'months shown simultaneously in calendar',
+    weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     xstyle: 'StyleX styles for layout; must be stylex.create() value',
   },
 };

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -820,6 +820,62 @@ describe('DateTimeInput', () => {
       expect(onChange.mock.calls[0][0]).toContain('14:31');
     });
   });
+
+  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.getAllByRole('combobox')[0], {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(
+        <DateTimeInput label="When" onChange={() => {}} />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+      ]);
+    });
+
+    it('forwards a numeric weekStartsOn to the calendar', () => {
+      const {container} = render(
+        <DateTimeInput label="When" onChange={() => {}} weekStartsOn={1} />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+
+    it('accepts a three-letter day name', () => {
+      const {container} = render(
+        <DateTimeInput label="When" onChange={() => {}} weekStartsOn="mon" />,
+      );
+      expect(openAndReadWeekdays(container)).toEqual([
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]);
+    });
+  });
   // ===========================================================================
   // Segment theme targets (#4075)
   // ===========================================================================
@@ -931,3 +987,22 @@ describe('DateTimeInput', () => {
     });
   });
 });
+
+describe('DateTimeInput disabled theme state', () => {
+  it('reflects disabled on the root target so themes can gate paint on it', () => {
+    const {container} = render(
+      <DateTimeInput label="Meeting" onChange={() => {}} isDisabled />,
+    );
+    const root = container.querySelector('.astryx-date-time-input');
+    expect(root).toHaveAttribute('data-disabled', 'disabled');
+    expect(root).toHaveClass('disabled');
+  });
+
+  it('omits data-disabled when enabled, like status does', () => {
+    const {container} = render(
+      <DateTimeInput label="Meeting" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-date-time-input');
+    expect(root).not.toHaveAttribute('data-disabled');
+  });
+});

package/src/DateTimeInput/DateTimeInput.tsx

@@ -38,6 +38,7 @@ import {
 } from '../theme/tokens.stylex';
 import {
   Field,
+  InputClearButton,
   type InputStatus,
   inputWrapperStyles,
   inputStatusBorderStyles,
@@ -47,7 +48,13 @@ import {
 import {Icon} from '../Icon';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {Spinner} from '../Spinner';
-import {Calendar, type ISODateString, type CalendarHandle} from '../Calendar';
+import {
+  Calendar,
+  type ISODateString,
+  type CalendarHandle,
+  type DayOfWeek,
+  type DayOfWeekName,
+} from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
@@ -64,6 +71,7 @@ import {
   adjustTime,
   mergeProps,
   mergeRefs,
+  isFocusDetached,
 } from '../utils';
 import {
   plainDateFromISO,
@@ -348,6 +356,14 @@ export interface DateTimeInputProps extends Omit<
    * @default 1
    */
   numberOfMonths?: 1 | 2;
+
+  /**
+   * First day of week in the calendar. Accepts a number
+   * (0 = Sunday … 6 = Saturday) or a three-letter day name ('sun'–'sat',
+   * case-insensitive).
+   * @default 0
+   */
+  weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 
 function splitDateTime(dt: ISODateTimeString | undefined): {
@@ -425,6 +441,7 @@ export function DateTimeInput({
   status,
   labelTooltip,
   numberOfMonths = 1,
+  weekStartsOn,
   width,
   xstyle,
   className,
@@ -602,7 +619,18 @@ export function DateTimeInput({
   const popover = usePopover({
     dialogLabel: t('@astryx.dateTimeInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
-    onHide: () => dateInputRef.current?.focus(),
+    // Return focus to the date input when the calendar closes — but only when
+    // the dismiss left focus detached (Escape, or a click on non-focusable
+    // empty space), which the focus trap can't restore on its own. A native
+    // popover="auto" light-dismiss fires synchronously with the pointer event
+    // that moved focus, so if the user clicked another control — the time
+    // input, the clear button, another field, anywhere — focus has already
+    // landed there; reclaiming it would fight their click.
+    onHide: () => {
+      if (isFocusDetached()) {
+        dateInputRef.current?.focus();
+      }
+    },
   });
 
   const handleCalendarToggle = useCallback(() => {
@@ -877,6 +905,7 @@ export function DateTimeInput({
           themeProps('date-time-input', {
             size,
             status: status?.type ?? null,
+            disabled: isDisabled ? 'disabled' : null,
           }),
           stylex.props(styles.row, xstyle),
           className,
@@ -962,13 +991,10 @@ export function DateTimeInput({
             {!isDateInputValid ? 'Invalid date' : ''}
           </VisuallyHidden>
           {hasClear && value !== undefined && !isEffectivelyDisabled && (
-            <button
-              type="button"
+            <InputClearButton
+              label={t('@astryx.dateInput.clear', {label})}
               onClick={handleClear}
-              aria-label={t('@astryx.dateInput.clear', {label})}
-              {...stylex.props(styles.iconButton)}>
-              <Icon icon="close" size="sm" color="secondary" />
-            </button>
+            />
           )}
           {isBusy && <Spinner size="sm" />}
           {statusIcon}
@@ -1050,6 +1076,7 @@ export function DateTimeInput({
           max={calendarMax}
           dateConstraints={dateConstraints}
           numberOfMonths={numberOfMonths}
+          weekStartsOn={weekStartsOn}
         />,
         {placement: 'below', alignment: 'start'},
       )}

package/src/Dialog/Dialog.tsx

@@ -50,6 +50,7 @@ import {devWarn} from '../utils/devWarning';
 import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 /**
  * Calculate a directional translate offset for dialog entry animation.
@@ -137,14 +138,6 @@ const styles = stylex.create({
     animationDuration: durationVars['--duration-medium-max'],
     animationTimingFunction: easeVars['--ease-standard'],
     animationFillMode: 'backwards' as const,
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   // Applied via isOpen prop — avoids :where([open]) attribute selectors
   // which have zero specificity and can lose to default styles depending
@@ -640,7 +633,7 @@ export function Dialog({
       {...safeProps}
       {...mergeProps(
         themeProps('dialog', {variant}),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.dialog,
           isOpen && styles.open,
           styles.backdrop,

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -24,17 +24,12 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-dropdown-menu'},
-      {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
+      {className: 'astryx-dropdown-menu-item', visualProps: ['size', 'variant']},
       {
         className: 'astryx-dropdown-menu-radio',
         visualProps: ['size'],
         states: ['checked', 'disabled'],
       },
-      {
-        className: 'astryx-dropdown-menu-radio-dot',
-        visualProps: ['size'],
-        states: ['checked', 'disabled'],
-      },
       {className: 'astryx-dropdown-menu-section-heading'},
       {className: 'astryx-dropdown-menu-divider'},
       {className: 'astryx-dropdown-menu-indicator-icon'},
@@ -59,7 +54,7 @@ export const docs = {
     {
       name: 'items',
       type: 'DropdownMenuOption[]',
-      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?, description?, endContent?, isDisabled?, variant?, hasCloseOnSelect?, id?}` (variant `"destructive"` renders it in the error color; `endContent` holds trailing content such as a keyboard-shortcut hint; `id` is the row\'s stable React key, needed only when the array reorders or filters), a divider `{type: "divider"}`, or a section `{type: "section", title?, id?, items: [...action items]}`.',
       required: true,
     },
     {
@@ -101,8 +96,9 @@ export const docs = {
       default: 'true',
     },    {
       name: 'children',
-      type: '(item: DropdownMenuItemData) => ReactNode',
-      description: 'Custom render function for each item in the list.',
+      type: 'ReactNode',
+      description:
+        'Compound-mode menu content: DropdownMenuItem, DropdownMenuDivider, DropdownMenuSubMenu, and the selectable items. Mutually exclusive with `items`.',
     },
   ],
   components: [