@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/DateRangeInput/DateRangeInput.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import { plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
-import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
+import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { Calendar } from "../Calendar/index.js";
@@ -30,8 +30,51 @@ import { mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { stableClassName } from "../naming.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  presetButton: {
+    k1xSpc: "x1lliihq",
+    kzqmXN: "xh8yej3",
+    kmVPX3: "xtozwh",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kaIpWk: "xh6dtrn",
+    kWkggS: "xjbqb8w xe9uy6x",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    kMwMTN: "x1tgivj0",
+    kkrTdU: "x1ypdohk",
+    k9WMMc: "x1yc453h",
+    $$css: true
+  },
+  presetButtonActive: {
+    kWkggS: "xgcxg3y",
+    kMwMTN: "xqwr325",
+    $$css: true
+  }
+};
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -108,6 +151,7 @@ export function DateRangeInput({
   statusVariant = 'attached',
   labelTooltip,
   numberOfMonths = 2,
+  weekStartsOn,
   width,
   xstyle,
   className,
@@ -218,7 +262,8 @@ export function DateRangeInput({
       ...rest,
       ...mergeProps(themeProps('date-range-input', {
         size,
-        status: status?.type ?? null
+        status: status?.type ?? null,
+        disabled: isDisabled ? 'disabled' : null
       }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
       children: [/*#__PURE__*/_jsx("button", {
         type: "button",
@@ -226,14 +271,7 @@ export function DateRangeInput({
         disabled: isEffectivelyDisabled,
         "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
         tabIndex: -1,
-        ...{
-          0: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-          },
-          1: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
-          }
-        }[!!isEffectivelyDisabled << 0],
+        ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "calendar",
           size: "sm",
@@ -276,21 +314,12 @@ export function DateRangeInput({
           }
         }[!!!displayValue << 1 | !!isEffectivelyDisabled << 0],
         children: displayValue || placeholder
-      }), hasClear && value !== null && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": t('@astryx.dateInput.clear', {
+      }), hasClear && value !== null && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+        label: t('@astryx.dateInput.clear', {
           label
         }),
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "close",
-          size: "sm",
-          color: "secondary",
-          ...themeProps('date-range-input-clear-icon')
-        })
+        onClick: handleClear,
+        iconClassName: stableClassName('date-range-input-clear-icon')
       }), isBusy && /*#__PURE__*/_jsx(Spinner, {
         size: "sm"
       }), statusIcon]
@@ -317,14 +346,7 @@ export function DateRangeInput({
             ,
             "aria-current": isActive ? 'true' : undefined,
             onClick: () => handlePresetClick(preset),
-            ...{
-              0: {
-                className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn xjbqb8w xe9uy6x x9ynric xcr08ib x1kq96og x1tgivj0 x1ypdohk x1yc453h x1a2a7pz x1p25gnr"
-              },
-              1: {
-                className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn x9ynric xcr08ib x1kq96og x1ypdohk x1yc453h x1a2a7pz x1p25gnr xgcxg3y xqwr325"
-              }
-            }[!!isActive << 0],
+            ...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive),
             children: preset.label
           }, preset.label);
         })
@@ -335,7 +357,8 @@ export function DateRangeInput({
         min: min,
         max: max,
         dateConstraints: dateConstraints,
-        numberOfMonths: numberOfMonths
+        numberOfMonths: numberOfMonths,
+        weekStartsOn: weekStartsOn
       })]
     }), {
       placement: 'below',

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -1,4 +1,5 @@
 import { type InputStatus } from '../Field';
+import { type DayOfWeek, type DayOfWeekName } from '../Calendar';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
 export type ISODateTimeString = string & {
@@ -156,6 +157,13 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
      * @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;
 }
 /**
  * A combined date and time picker with side-by-side date input and
@@ -171,7 +179,7 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
  * />
  * ```
  */
-export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
+export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
 export declare namespace DateTimeInput {
     var displayName: string;
 }

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
@@ -18,8 +18,8 @@
 import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
-import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
+import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { Spinner } from "../Spinner/index.js";
@@ -29,10 +29,12 @@ import { usePopover } from "../Popover/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
-import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs } from "../utils/index.js";
+import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
@@ -43,6 +45,23 @@ const styles = {
     kOIVth: "x1txdalj",
     $$css: true
   },
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
   dateWrapper: {
     kUk6DE: "x98rzlu",
     kCS8Yb: "x1r8uery",
@@ -142,6 +161,7 @@ export function DateTimeInput({
   status,
   labelTooltip,
   numberOfMonths = 1,
+  weekStartsOn,
   width,
   xstyle,
   className,
@@ -150,6 +170,10 @@ export function DateTimeInput({
   ...rest
 }) {
   const t = useTranslator();
+  // Speaks arrow-key stepping results through the persistent live regions:
+  // stepping programmatically rewrites a plain textbox's value, which screen
+  // readers do not announce on their own (WCAG 4.1.2).
+  const announce = useAnnounce();
   const placeholder = placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
   const timePlaceholder = timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
   const size = useSize(sizeProp, 'md');
@@ -286,7 +310,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(() => {
     if (!isEffectivelyDisabled) {
@@ -453,10 +488,13 @@ export function DateTimeInput({
         const combined = combineDateTime(valueParts.date, newTime);
         if (combined) {
           fireChange(combined);
+          // Screen readers do not announce the programmatic value rewrite,
+          // so speak the new time explicitly (WCAG 4.1.2).
+          announce(formatDisplayTime(newTime, hasSeconds));
         }
       }
     }
-  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange]);
+  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime]);
 
   // --- Clear ---
   const handleClear = useCallback(() => {
@@ -495,7 +533,8 @@ export function DateTimeInput({
       ...rest,
       ...mergeProps(themeProps('date-time-input', {
         size,
-        status: status?.type ?? null
+        status: status?.type ?? null,
+        disabled: isDisabled ? 'disabled' : null
       }), stylex.props(styles.row, xstyle), className, style),
       children: [/*#__PURE__*/_jsxs("div", {
         ref: popover.triggerRef,
@@ -508,14 +547,7 @@ export function DateTimeInput({
           onClick: handleCalendarToggle,
           disabled: isEffectivelyDisabled,
           "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
-          ...{
-            0: {
-              className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-            },
-            1: {
-              className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
-            }
-          }[!!isEffectivelyDisabled << 0],
+          ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "calendar",
             size: "sm",
@@ -567,21 +599,12 @@ export function DateTimeInput({
           as: "div",
           role: "alert",
           "aria-live": "assertive",
-          children: !isDateInputValid ? 'Invalid date' : ''
-        }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
-          type: "button",
-          onClick: handleClear,
-          "aria-label": t('@astryx.dateInput.clear', {
+          children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
+        }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+          label: t('@astryx.dateInput.clear', {
             label
           }),
-          ...{
-            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-          },
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "close",
-            size: "sm",
-            color: "secondary"
-          })
+          onClick: handleClear
         }), isBusy && /*#__PURE__*/_jsx(Spinner, {
           size: "sm"
         }), statusIcon]
@@ -644,7 +667,7 @@ export function DateTimeInput({
           as: "div",
           role: "alert",
           "aria-live": "assertive",
-          children: !isTimeInputValid ? 'Invalid time' : ''
+          children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
         })]
       })]
     }), popover.render(/*#__PURE__*/_jsx(Calendar, {
@@ -655,7 +678,8 @@ export function DateTimeInput({
       min: calendarMin,
       max: calendarMax,
       dateConstraints: dateConstraints,
-      numberOfMonths: numberOfMonths
+      numberOfMonths: numberOfMonths,
+      weekStartsOn: weekStartsOn
     }), {
       placement: 'below',
       alignment: 'start'

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAqB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AA+HD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Sb;yBA3Te,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAsB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA2Sb;yBA3Te,MAAM"}

package/dist/Dialog/Dialog.js

@@ -27,12 +27,14 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { devWarn } from "../utils/devWarning.js";
 import { DialogContext } from "./DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport
  * center, scaled to the given distance.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function getDialogDirection(triggerEl, distance = 16) {
   const rect = triggerEl.getBoundingClientRect();
   const dx = rect.left + rect.width / 2 - window.innerWidth / 2;
@@ -91,8 +93,6 @@ const styles = {
     k44tkh: "xqgcaz",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
-    kI3sdo: "x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
     $$css: true
   },
   open: {
@@ -447,7 +447,7 @@ export function Dialog({
     ...safeProps,
     ...mergeProps(themeProps('dialog', {
       variant
-    }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
+    }), focusOutlineProps.focusVisible(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && (() => {
       const o = resolveDialogPositionOffsets(position);
       return dynamicStyles.position(o.top, o.insetInlineStart, o.insetInlineEnd, o.bottom);
     })(), isFullscreen && styles.fullscreen, xstyle), className, style),

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -10,6 +10,11 @@
  *
  * Both modes use useListFocus for DOM-based keyboard navigation.
  *
+ * Initial focus on open follows the input modality: a keyboard open
+ * (Enter / Space / ArrowDown on the trigger) focuses the first enabled item
+ * (APG menu-button); a pointer open focuses the menu container itself so no
+ * item reads as pre-selected, and the first ArrowDown then moves to item 1.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
@@ -19,14 +24,28 @@
  */
 import React, { type ReactNode } from 'react';
 import { type ButtonProps } from '../Button';
-import type { IconType } from '../Icon';
+import type { DropdownMenuItemProps } from './DropdownMenuItem';
 import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
 import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuItemData {
-    label: string;
-    onClick?: () => void;
-    isDisabled?: boolean;
-    icon?: ReactNode | IconType;
+/**
+ * Data-mode shape for one menu row.
+ *
+ * The item fields are sourced from `DropdownMenuItemProps` — data mode renders
+ * through `DropdownMenuItem`, so the two APIs describe the same thing and must
+ * not drift. Only the fields listed here are part of the data API; add a key to
+ * the `Pick` to expose more of the item's props to `items`.
+ */
+export interface DropdownMenuItemData extends Pick<DropdownMenuItemProps, 'icon' | 'onClick' | 'isDisabled' | 'variant' | 'description' | 'endContent' | 'hasCloseOnSelect'> {
+    /**
+     * Stable identity for the row, used as its React key (as on
+     * `TreeListItemData`). Omit it and the row is keyed by position, which is
+     * correct for a fixed menu; set it when `items` can reorder, filter, or grow,
+     * so a row keeps its DOM node — and therefore keyboard focus — as the array
+     * changes around it.
+     */
+    id?: string;
+    /** Primary label content. */
+    label: ReactNode;
     /**
      * Nested submenu entries. When present, this row becomes a submenu (a
      * flyout revealing `items`) instead of a leaf action — no separate item
@@ -34,15 +53,21 @@ export interface DropdownMenuItemData {
      */
     items?: DropdownMenuOption[];
 }
-export interface DropdownMenuDivider {
+/**
+ * Data-mode shape for a divider row. The compound-mode peer is the
+ * `DropdownMenuDivider` component, which both modes render.
+ */
+export interface DropdownMenuDividerData {
     type: 'divider';
 }
 export interface DropdownMenuSection {
     type: 'section';
+    /** Stable identity for the group; see {@link DropdownMenuItemData.id}. */
+    id?: string;
     title?: string;
     items: DropdownMenuItemData[];
 }
-export type DropdownMenuOption = DropdownMenuItemData | DropdownMenuDivider | DropdownMenuSection;
+export type DropdownMenuOption = DropdownMenuItemData | DropdownMenuDividerData | DropdownMenuSection;
 export type DropdownMenuButtonProps = Omit<ButtonProps, 'onClick'>;
 interface DropdownMenuBaseProps extends BaseProps {
     button?: DropdownMenuButtonProps;

package/dist/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAetC,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAMnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwRnB;yBAtSe,YAAY"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAInD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAa9D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAQtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiC5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,CACrB;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+BpD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,gBAAgB,EAC5B,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,SAAmB,EACnB,SAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA2TnB;yBAzUe,YAAY"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -14,6 +14,11 @@
  *
  * Both modes use useListFocus for DOM-based keyboard navigation.
  *
+ * Initial focus on open follows the input modality: a keyboard open
+ * (Enter / Space / ArrowDown on the trigger) focuses the first enabled item
+ * (APG menu-button); a pointer open focuses the menu container itself so no
+ * item reads as pre-selected, and the first ArrowDown then moves to item 1.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
@@ -60,16 +65,6 @@ const styles = {
     k7Eaqz: "xrzjruh",
     $$css: true
   },
-  popoverBlockGap: {
-    keoZOQ: "xcsaf9d",
-    k1K539: "x14cgwvg",
-    $$css: true
-  },
-  popoverInlineGap: {
-    keTefX: "x11g1kdw",
-    k71WvV: "xnur1sd",
-    $$css: true
-  },
   popoverCustomWidth: width => [{
     k7Eaqz: (typeof width === 'number' ? `${width}px` : width) != null ? "xkj4a21" : typeof width === 'number' ? `${width}px` : width,
     $$css: true
@@ -82,6 +77,20 @@ const styles = {
 // Types
 // =============================================================================
 
+/**
+ * Data-mode shape for one menu row.
+ *
+ * The item fields are sourced from `DropdownMenuItemProps` — data mode renders
+ * through `DropdownMenuItem`, so the two APIs describe the same thing and must
+ * not drift. Only the fields listed here are part of the data API; add a key to
+ * the `Pick` to expose more of the item's props to `items`.
+ */
+
+/**
+ * Data-mode shape for a divider row. The compound-mode peer is the
+ * `DropdownMenuDivider` component, which both modes render.
+ */
+
 // =============================================================================
 // Props
 // =============================================================================
@@ -170,6 +179,13 @@ export function DropdownMenu({
   // Defer item focus until the layer has committed open, so focus restore
   // captures the trigger instead of the first menu item.
   const shouldFocusOnOpenRef = useRef(false);
+
+  // How the next open was initiated. Keyboard (and programmatic) opens focus
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container instead, so no item is visually highlighted as
+  // if pre-selected (#4477). Reset to 'keyboard' after every open so
+  // programmatic controlled opens keep the item-focus behavior.
+  const openModalityRef = useRef('keyboard');
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);
     if (!isControlled) {
@@ -229,14 +245,26 @@ export function DropdownMenu({
     }
   }, [controlledIsOpen, isControlled, popover]);
 
-  // Move focus into the menu only after the layer has committed open.
+  // Move focus into the menu only after the layer has committed open,
+  // honoring the input modality: keyboard (and programmatic) opens land on
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container itself (tabIndex={-1}) so no item is
+  // highlighted as if pre-selected (#4477). Container focus keeps arrows,
+  // typeahead, Escape and Tab in the menu's onKeyDown, and is also the
+  // fallback when no item is focusable (e.g. all disabled), mirroring the
+  // submenu flyout fallback.
   useEffect(() => {
     if (!popover.isOpen || !shouldFocusOnOpenRef.current) {
       return;
     }
     shouldFocusOnOpenRef.current = false;
-    requestAnimationFrame(() => focusFirst());
-  }, [popover.isOpen, focusFirst]);
+    requestAnimationFrame(() => {
+      if (openModalityRef.current === 'pointer' || !focusFirst()) {
+        listRef.current?.focus();
+      }
+      openModalityRef.current = 'keyboard';
+    });
+  }, [popover.isOpen, focusFirst, listRef]);
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(e => {
@@ -269,25 +297,34 @@ export function DropdownMenu({
     }
     listNavKeyDown(e);
   }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
-  const openAndFocus = useCallback(() => {
+  const openAndFocus = useCallback((modality = 'keyboard') => {
+    openModalityRef.current = modality;
     shouldFocusOnOpenRef.current = true;
     popover.show();
   }, [popover]);
-  const handleButtonClick = useCallback(() => {
+  const handleButtonClick = useCallback(e => {
     // 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.
+    // otherwise immediately re-open it. Short-circuit within the guard
+    // window.
     if (Date.now() - lastHideTimeRef.current < 50) {
       return;
     }
     onClick?.();
+    // detail === 0 marks a synthesized click (screen reader / AT
+    // activation): treat it as keyboard so those users still land on the
+    // first item. Real pointer clicks report detail >= 1.
+    const modality = e.detail === 0 ? 'keyboard' : 'pointer';
     if (isControlled) {
+      if (!controlledIsOpen) {
+        openModalityRef.current = modality;
+      }
       onOpenChange?.(!controlledIsOpen);
     } else {
       if (popover.isOpen) {
         popover.hide();
       } else {
-        openAndFocus();
+        openAndFocus(modality);
       }
     }
   }, [onClick, isControlled, onOpenChange, controlledIsOpen, popover, openAndFocus]);
@@ -309,8 +346,6 @@ export function DropdownMenu({
     color: "inherit"
   }) : undefined);
   const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
-  const popoverGapStyle = placement === 'above' || placement === 'below' ? styles.popoverBlockGap : styles.popoverInlineGap;
-
   // Context for compound items
   const contextValue = useMemo(() => ({
     closeMenu,
@@ -347,6 +382,12 @@ export function DropdownMenu({
       ref: listRef,
       id: menuId,
       role: "menu"
+      // Focus target for pointer opens (not in the Tab order): holding
+      // focus on the container keeps key events (arrows, typeahead,
+      // Escape, Tab) inside the menu without highlighting any item.
+      // Mirrors the DropdownMenuSubMenu flyout container.
+      ,
+      tabIndex: -1
       // Give the menu an accessible name from its trigger's label, so
       // screen readers announce e.g. "Actions menu" rather than an unnamed
       // menu (menus-13).
@@ -361,7 +402,8 @@ export function DropdownMenu({
     }), {
       placement,
       alignment,
-      xstyle: [popoverXstyle, popoverGapStyle, layerAnimations[placement]]
+      offset: spacingVars['--spacing-1'],
+      xstyle: [popoverXstyle, layerAnimations[placement]]
     })]
   });
 }