@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d

package/dist/CheckboxList/CheckboxList.js

@@ -18,10 +18,11 @@
 import { useCallback, useId, useMemo, useOptimistic, useTransition } from 'react';
 import { Field } from "../Field/Field.js";
 import { List } from "../List/List.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { CheckboxListContext } from "./CheckboxListContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_ARRAY = [];
 /**
  * A checkbox group component for multi-value selection.
@@ -52,6 +53,7 @@ export function CheckboxList({
   density = 'balanced',
   hasDividers = false,
   isDisabled = false,
+  disabledMessage,
   isReadOnly = false,
   children,
   ref,
@@ -62,6 +64,7 @@ export function CheckboxList({
   'data-testid': dataTestId
 }) {
   const inputID = useId();
+  const labelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const [, startTransition] = useTransition();
@@ -71,6 +74,19 @@ export function CheckboxList({
   // Tracks which item has a pending `changeAction`. Auto-reverts to null when
   // the transition settles, so the spinner clears without manual cleanup.
   const [loadingValue, setLoadingValue] = useOptimistic(null);
+
+  // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
+  // controls swallow pointer events, so the tooltip listeners attach to the
+  // group container and the checkboxes stay perceivable via aria-disabled
+  // instead of the disabled attribute. Toggling is blocked in the item.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The group container is not naturally focusable; focusin bubbles up from
+    // the checkboxes, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
   const handleChange = useCallback((newValues, toggledValue) => {
     onChange?.(newValues);
     if (changeAction) {
@@ -87,16 +103,19 @@ export function CheckboxList({
     value: isCollectionMode ? optimisticValue : undefined,
     onChange: isCollectionMode ? handleChange : undefined,
     isDisabled,
+    hasDisabledMessage: showsDisabledMessage,
     isReadOnly,
     loadingValue
-  }), [isCollectionMode, optimisticValue, handleChange, isDisabled, isReadOnly, loadingValue]);
-  return /*#__PURE__*/_jsx(Field, {
+  }), [isCollectionMode, optimisticValue, handleChange, isDisabled, showsDisabledMessage, isReadOnly, loadingValue]);
+  return /*#__PURE__*/_jsxs(Field, {
     ref: ref,
     "data-testid": dataTestId,
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: inputID,
+    labelID: labelID,
+    isGroupLabel: true,
     descriptionID: description ? descriptionID : undefined,
     isDisabled: isDisabled,
     status: status ? {
@@ -111,14 +130,25 @@ export function CheckboxList({
       className,
       style
     }),
-    children: /*#__PURE__*/_jsx(CheckboxListContext, {
+    children: [/*#__PURE__*/_jsx(CheckboxListContext, {
       value: contextValue,
-      children: /*#__PURE__*/_jsx(List, {
-        density: density,
-        hasDividers: hasDividers,
-        children: children
+      children: /*#__PURE__*/_jsx("div", {
+        ref: el => {
+          // Anchor + hover/focus listeners for the disabled-message tooltip.
+          // Handlers are gated internally by isEnabled, so attaching
+          // unconditionally is safe.
+          disabledMessageTooltip.ref(el);
+        },
+        role: "group",
+        "aria-labelledby": labelID,
+        "aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
+        children: /*#__PURE__*/_jsx(List, {
+          density: density,
+          hasDividers: hasDividers,
+          children: children
+        })
       })
-    })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 CheckboxList.displayName = 'CheckboxList';

package/dist/CheckboxList/CheckboxListContext.d.ts

@@ -8,6 +8,13 @@ export interface CheckboxListContextValue {
      */
     onChange?: (values: string[], toggledValue?: string) => void;
     isDisabled: boolean;
+    /**
+     * True when the whole group is disabled *and* a `disabledMessage` is set. In
+     * that mode items stay focusable via `aria-disabled` (instead of the native
+     * `disabled` attribute) so the group's disabled-reason tooltip is keyboard-
+     * and AT-discoverable; toggling is still blocked.
+     */
+    hasDisabledMessage?: boolean;
     isReadOnly: boolean;
     /**
      * The value of the item with a pending `changeAction`, or null when idle.

package/dist/CheckboxList/CheckboxListContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC"}
+{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC"}

package/dist/CheckboxList/CheckboxListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAqGvB;yBAnHe,gBAAgB"}
+{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAkGvB;yBAhHe,gBAAgB"}

package/dist/CheckboxList/CheckboxListItem.js

@@ -135,7 +135,6 @@ export function CheckboxListItem({
     endContent: endContent,
     isDisabled: effectiveDisabled,
     onClick: isInteractive ? handleToggle : undefined,
-    "aria-checked": resolvedChecked === 'indeterminate' ? 'mixed' : resolvedChecked,
     "aria-busy": isBusy || undefined,
     xstyle: [resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly && styles.selected, xstyle],
     className: className,

package/dist/Citation/Citation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AA+FD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA0EpC;yBApFe,QAAQ"}
+{"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAuGD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA8EpC;yBAxFe,QAAQ"}

package/dist/Citation/Citation.js

@@ -50,7 +50,7 @@ const styles = {
   },
   labelHover: {
     kWkggS: "xe9uy6x",
-    kMwMTN: "x140uwzg",
+    kMwMTN: "xv1l7n4 x140uwzg",
     $$css: true
   },
   number: {
@@ -61,7 +61,7 @@ const styles = {
     kGuDYH: "x141an7d",
     k63SB2: "x2mo6ok",
     kLWn49: "x1ltkj2j",
-    kMwMTN: "xjse4m1",
+    kMwMTN: "xv1l7n4",
     kWkggS: "xgcxg3y",
     kaIpWk: "xjspbzw",
     k7Eaqz: "x16asifk",
@@ -75,7 +75,7 @@ const styles = {
     $$css: true
   },
   numberHover: {
-    kWkggS: "xe9uy6x",
+    kWkggS: "xgcxg3y xe9uy6x",
     $$css: true
   }
 };
@@ -94,6 +94,10 @@ export function Citation({
   const href = source.url;
   const icon = source.icon;
   const Tag = href ? 'a' : 'span';
+  // `doc-noteref` is a reference role — only appropriate on the interactive
+  // link form. On a plain (unlinked) span it is not a permitted role
+  // (axe: aria-allowed-role), so omit it there; the aria-label still names it.
+  const noteRole = href ? 'doc-noteref' : undefined;
   const linkProps = href ? {
     href,
     target: '_blank',
@@ -109,7 +113,7 @@ export function Citation({
     return /*#__PURE__*/_jsx(Tag, {
       ...rest,
       ref: elementRef,
-      role: "doc-noteref",
+      role: noteRole,
       "aria-label": `Citation ${number}: ${title}`,
       "data-testid": testId,
       ...linkProps,
@@ -122,7 +126,7 @@ export function Citation({
   return /*#__PURE__*/_jsxs(Tag, {
     ...rest,
     ref: elementRef,
-    role: "doc-noteref",
+    role: noteRole,
     "aria-label": `Citation ${number}: ${title}`,
     "data-testid": testId,
     ...linkProps,

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyT5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AA6ND;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAoLhB;yBA3Me,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsU5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAgOD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAkMhB;yBAzNe,SAAS"}

package/dist/CodeBlock/CodeBlock.js

@@ -413,7 +413,9 @@ export function CodeBlock({
   });
   const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx("button", {
     type: "button",
-    onClick: () => {
+    onClick: e => {
+      // Stop propagation so copying does not toggle the collapsible header.
+      e.stopPropagation();
       void handleCopy();
     },
     "aria-label": copied ? 'Copied' : 'Copy code',
@@ -428,53 +430,65 @@ export function CodeBlock({
     children: copyIcon
   }) : null;
   const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
-    role: canCollapse ? 'button' : undefined,
-    tabIndex: canCollapse ? 0 : undefined,
-    "aria-expanded": canCollapse ? !isCollapsed : undefined,
-    onClick: canCollapse ? () => setIsCollapsed(prev => !prev) : undefined,
-    onKeyDown: canCollapse ? e => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        setIsCollapsed(prev => !prev);
-      }
-    } : undefined,
     ...{
       0: {
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1"
       },
-      2: {
-        className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x92x3c3 x1q0q8m5 xw8gpjh"
-      },
       1: {
-        className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x1ypdohk x87ps6o"
-      },
-      3: {
-        className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x92x3c3 x1q0q8m5 xw8gpjh x1ypdohk x87ps6o"
+        className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x92x3c3 x1q0q8m5 xw8gpjh"
       }
-    }[!!hasLineNumbers << 1 | !!canCollapse << 0],
-    children: [/*#__PURE__*/_jsxs("span", {
+    }[!!hasLineNumbers << 0],
+    children: [/*#__PURE__*/_jsx("div", {
+      role: canCollapse ? 'button' : undefined,
+      tabIndex: canCollapse ? 0 : undefined,
+      "aria-expanded": canCollapse ? !isCollapsed : undefined,
+      onClick: canCollapse ? () => setIsCollapsed(prev => !prev) : undefined,
+      onKeyDown: canCollapse ? e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setIsCollapsed(prev => !prev);
+        }
+      } : undefined,
       ...{
-        className: "x78zum5 x6s0dn4 xzye2dw x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
-      },
-      children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsx("span", {
+        0: {
+          className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h"
+        },
+        1: {
+          className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o"
+        }
+      }[!!canCollapse << 0],
+      children: /*#__PURE__*/_jsxs("span", {
         ...{
-          0: {
-            className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92"
-          },
-          1: {
-            className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-          }
-        }[!!isCollapsed << 0],
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronDown",
-          size: "xsm",
-          color: "inherit"
-        })
-      })]
+          className: "x78zum5 x6s0dn4 xzye2dw x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
+        },
+        children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsx("span", {
+          ...{
+            0: {
+              className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92"
+            },
+            1: {
+              className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92 x19jd1h0"
+            }
+          }[!!isCollapsed << 0],
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "chevronDown",
+            size: "xsm",
+            color: "inherit"
+          })
+        })]
+      })
     }), copyButtonEl]
   }) : null;
   const codeBody = /*#__PURE__*/_jsx("div", {
-    ref: scrollContainerRef,
+    ref: scrollContainerRef
+    // The scroll container is keyboard-focusable so keyboard users can
+    // scroll long or wide code that overflows the viewport. Uses
+    // role="group" (not "region") so multiple code blocks on a page don't
+    // create duplicate same-named landmarks (axe: landmark-unique).
+    ,
+    tabIndex: 0,
+    role: "group",
+    "aria-label": languageLabel ?? 'Code',
     ...mergeProps({
       className: "xw2csxc x1odjw0f"
     }, {

package/dist/CommandPalette/CommandPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA+GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAC5B,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,EACA,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAA8B,EAC9B,kBAAqC,EACrC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAyB,EACzB,KAAW,EACX,SAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAqRxB;yBAvSe,cAAc"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA6GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAA8B,EAC9B,kBAAqC,EACrC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAyB,EACzB,KAAW,EACX,SAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAkRxB;yBAlSe,cAAc"}

package/dist/CommandPalette/CommandPalette.js

@@ -314,12 +314,12 @@ export function CommandPalette({
     isBusy
   }), [optimisticSearch, setOptimisticSearch, runSearch, value, setValue, listId, combobox.highlightedIndex, combobox.setHighlightedIndex, combobox.getItemId, selectableItems, optimisticResults, selectItem, handleKeyDown, handleClose, isOpen, isBusy]);
 
-  // Empty state uses committed search (= what current results correspond to),
-  // not optimisticSearch (= what the user typed).
-  // While the transition is pending, search stays at '' so showEmptyBootstrap
-  // remains true even after the user has started typing.
+  // `search` is the committed query the on-screen results correspond to (it
+  // still holds the previous query while a transition is pending). Keeping both
+  // flags ungated by `isPending` makes them exhaustive over the empty case, so
+  // the empty state is never unmounted and re-added mid-search (which flashed).
   const showEmptyBootstrap = search === '' && optimisticResults.length === 0;
-  const showEmptySearch = !isPending && search !== '' && optimisticResults.length === 0;
+  const showEmptySearch = search !== '' && optimisticResults.length === 0;
   let listContent;
   if (showEmptyBootstrap) {
     listContent = /*#__PURE__*/_jsx(CommandPaletteEmpty, {

package/dist/ContextMenu/ContextMenu.d.ts

@@ -24,6 +24,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
+import type { StyleXStyles } from '../theme/types';
 import type { DropdownMenuOption, DropdownMenuItemData, DropdownMenuDivider, DropdownMenuSection } from '../DropdownMenu/DropdownMenu';
 export type ContextMenuItemData = DropdownMenuItemData;
 export type ContextMenuDivider = DropdownMenuDivider;
@@ -32,6 +33,13 @@ export type ContextMenuOption = DropdownMenuOption;
 interface ContextMenuBaseProps extends BaseProps {
     /** Ref forwarded to the trigger wrapper element. */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Styles applied to the trigger wrapper element (the right-click target).
+     * By default the trigger is a plain block that hugs its content — pass a
+     * fill style (e.g. `width/height: 100%`) when the whole parent area should
+     * be right-clickable (as the Table does for full-cell context menus).
+     */
+    triggerXstyle?: StyleXStyles | StyleXStyles[];
     /** The trigger area — right-click on this to open the menu. */
     children: ReactNode;
     /** Custom menu width. @default '160px' */
@@ -39,11 +47,10 @@ interface ContextMenuBaseProps extends BaseProps {
     /** Size of menu items. @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Whether to auto-focus the first menu item when the menu opens.
-     * Set to `false` for inline showcases or documentation previews.
-     * @default true
+     * Accessible name for the menu surface, announced when it opens.
+     * @default 'Context menu'
      */
-    hasAutoFocus?: boolean;
+    label?: string;
     /** When true, right-click shows the native browser context menu instead. */
     isDisabled?: boolean;
     /** Called when the menu opens or closes. */
@@ -84,7 +91,7 @@ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
  * </ContextMenu>
  * ```
  */
-export declare function ContextMenu({ children, menuWidth, size, hasAutoFocus, isDisabled, onOpenChange, ref, className, style, xstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, menuWidth, size, label, isDisabled, onOpenChange, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

package/dist/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAiCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GACxB,oBAAoB,GACpB,wBAAwB,CAAC;AAM7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,YAAmB,EACnB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAoIlB;yBAjJe,WAAW"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwOlB;yBAtPe,WAAW"}

package/dist/ContextMenu/ContextMenu.js

@@ -30,6 +30,8 @@ import { useLayer } from "../Layer/useLayer.js";
 import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
 import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
+import { useLongPress } from "../hooks/useLongPress.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
@@ -37,6 +39,10 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
+  trigger: {
+    k7VYTy: "xpdipgo",
+    $$css: true
+  },
   menu: {
     kB7OPa: "x9f619",
     k1xSpc: "x78zum5",
@@ -107,13 +113,14 @@ export function ContextMenu({
   children,
   menuWidth,
   size = 'md',
-  hasAutoFocus = true,
+  label = 'Context menu',
   isDisabled = false,
   onOpenChange,
   ref,
   className,
   style,
   xstyle,
+  triggerXstyle,
   'data-testid': testId,
   ...props
 }) {
@@ -124,12 +131,21 @@ export function ContextMenu({
     x: 0,
     y: 0
   });
+  // Element focused before the menu opened, restored when it closes so focus
+  // does not fall to <body> after Escape or outside-click dismissal.
+  const triggerFocusRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const layer = useLayer({
     mode: 'fixed',
     onHide: useCallback(() => {
       setIsOpen(false);
       onOpenChange?.(false);
+      // Restore focus to the element that was focused before opening.
+      const toRestore = triggerFocusRef.current;
+      triggerFocusRef.current = null;
+      if (toRestore && document.contains(toRestore)) {
+        toRestore.focus();
+      }
     }, [onOpenChange]),
     onShow: useCallback(() => {
       setIsOpen(true);
@@ -143,13 +159,22 @@ export function ContextMenu({
   const {
     listRef,
     handleKeyDown: listNavKeyDown,
-    focusFirst
+    focusFirst,
+    focusItem
   } = useListFocus({
     itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
     wrap: false,
     onEscape: closeMenu
   });
 
+  // First-character typeahead over the enabled menu items (menus-11).
+  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) : [], [listRef]);
+  const typeahead = useTypeahead({
+    getItemLabels: () => getMenuItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
+  });
+
   // Dismiss on any click outside the menu. We use popover="manual" (not
   // "auto") because the native light-dismiss treats the mouseup from the
   // opening right-click as a dismiss event. Handling it ourselves via
@@ -169,6 +194,30 @@ export function ContextMenu({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, closeMenu, listRef]);
+
+  // Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
+  // only fires when focus is inside the menu; a document-level listener is
+  // kept as a reliable fallback Escape path (e.g. if focus has moved out of
+  // the menu). Guards against IME composition-cancel.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleEscape = e => {
+      if (e.key !== 'Escape') {
+        return;
+      }
+      if (e.isComposing || e.keyCode === 229) {
+        return;
+      }
+      e.preventDefault();
+      closeMenu();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, closeMenu]);
   const listKeyDown = useCallback(e => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -178,22 +227,56 @@ export function ContextMenu({
       }
       return;
     }
+    if (typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
     listNavKeyDown(e);
-  }, [listNavKeyDown]);
+  }, [listNavKeyDown, typeahead]);
   const handleContextMenu = useCallback(e => {
     if (isDisabled) {
       return;
     }
     e.preventDefault();
-    positionRef.current = {
-      x: e.clientX,
-      y: e.clientY
-    };
+    // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
+    // `contextmenu` event whose coordinates are (0, 0) in several browsers.
+    // Detect that and anchor the menu to the trigger's box instead, so the
+    // menu is reachable without a pointer (menus-8).
+    const isKeyboardInvoked = e.clientX === 0 && e.clientY === 0 && e.detail === 0;
+    if (isKeyboardInvoked && e.currentTarget instanceof HTMLElement) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      positionRef.current = {
+        x: rect.left,
+        y: rect.bottom
+      };
+    } else {
+      positionRef.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    }
+    // Remember the element focused before opening so we can restore it on
+    // close (Escape or outside-click), instead of dropping focus to <body>.
+    triggerFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : e.currentTarget;
     layer.show();
-    if (hasAutoFocus) {
+    requestAnimationFrame(() => focusFirst());
+  }, [isDisabled, layer, focusFirst]);
+
+  // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
+  // `contextmenu` event on long-press, so a context menu is otherwise
+  // unreachable on touch. Open the menu at the touch point once the press is
+  // held long enough (see useLongPress for timer/move-cancel/cleanup logic).
+  const longPressHandlers = useLongPress({
+    disabled: isDisabled,
+    onLongPress: useCallback(point => {
+      positionRef.current = {
+        x: point.x,
+        y: point.y
+      };
+      layer.show();
       requestAnimationFrame(() => focusFirst());
-    }
-  }, [isDisabled, layer, hasAutoFocus, focusFirst]);
+    }, [layer, focusFirst])
+  });
   const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
   const contextValue = useMemo(() => ({
     closeMenu,
@@ -204,13 +287,15 @@ export function ContextMenu({
     children: [/*#__PURE__*/_jsx("div", {
       ref: ref,
       onContextMenu: handleContextMenu,
-      "aria-haspopup": "menu",
+      ...longPressHandlers,
       "data-testid": testId,
+      ...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
       children: children
     }), layer.render(/*#__PURE__*/_jsx("div", {
       ref: listRef,
       id: menuId,
       role: "menu",
+      "aria-label": label,
       onKeyDown: listKeyDown,
       ...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
       children: /*#__PURE__*/_jsx(DropdownMenuContext, {

package/dist/DateInput/DateInput.d.ts

@@ -50,6 +50,28 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the input is disabled. When set together with
+     * `isDisabled`, the input shows a tooltip with this text on hover and
+     * keyboard focus, and the field stays focusable (via `aria-disabled`)
+     * so the reason is discoverable by keyboard and assistive technology.
+     * Typing and calendar activation stay blocked.
+     *
+     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     *
+     * @example
+     * ```
+     * <DateInput
+     *   label="Event date"
+     *   value={date}
+     *   onChange={setDate}
+     *   isDisabled
+     *   disabledMessage="You need the Editor role to change this"
+     * />
+     * ```
+     */
+    disabledMessage?: string;
     /**
      * The selected date in ISO format (YYYY-MM-DD).
      */
@@ -132,7 +154,7 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * />
  * ```
  */
-export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder, size, status, labelTooltip, hasClear, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
+export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder, size: sizeProp, status, labelTooltip, hasClear, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
 export declare namespace DateInput {
     var displayName: string;
 }