@astryxdesign/core 0.7.6 → 0.7.7-canary.1d04d40

package/dist/Slider/useSliderTouch.d.ts

@@ -0,0 +1,22 @@
+import { type SliderTouchModel, type SliderTouchParts } from './sliderTouchController.js';
+export type { SliderTouchModel, SliderTouchParts } from './sliderTouchController.js';
+export interface UseSliderTouchOptions {
+    /** The slider is enabled: its gestures attach for every pointer. */
+    readonly isEnabled: boolean;
+    readonly model: SliderTouchModel;
+    readonly getParts: () => SliderTouchParts | null;
+    /** Re-attaches when the thumbs or the orientation change. */
+    readonly thumbCount: number;
+    /**
+     * Whether each thumb renders inside its value tooltip: changing it mounts
+     * new thumbs. So the gestures re-attach.
+     */
+    readonly thumbsWrapped: boolean;
+}
+/**
+ * Wires UISlider's tracking to a rendered Slider for every pointer, while it
+ * is enabled. Slider's own pointer handlers then take only a mouse press on
+ * the track.
+ */
+export declare function useSliderTouch({ isEnabled, model, getParts, thumbCount, thumbsWrapped, }: UseSliderTouchOptions): void;
+//# sourceMappingURL=useSliderTouch.d.ts.map

package/dist/Slider/useSliderTouch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderTouch.d.ts","sourceRoot":"","sources":["../../src/Slider/useSliderTouch.ts"],"names":[],"mappings":"AAoBA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AAEhF,MAAM,WAAW,qBAAqB;IACpC,oEAAoE;IACpE,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,gBAAgB,GAAG,IAAI,CAAC;IACjD,6DAA6D;IAC7D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;CACjC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,aAAa,GACd,EAAE,qBAAqB,GAAG,IAAI,CAwB9B"}

package/dist/Slider/useSliderTouch.js

@@ -0,0 +1,56 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSliderTouch.ts
+ * @input Slider's value model and parts, and sliderTouchController.ts
+ * @output Exports `useSliderTouch` (the React wiring) and the
+ *   `SliderTouchModel` and `SliderTouchParts` types
+ * @position Internal to Slider. It is the touch layer's one import site, so
+ *   a desktop build can swap that module whole.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Slider/sliderTouchController.ts
+ * - /packages/core/src/Slider/Slider.tsx (the model and the parts)
+ * - /packages/core/src/Slider/useSliderTouch.test.tsx
+ */
+import { useEffect, useState } from 'react';
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { SliderTouchController } from "./sliderTouchController.js";
+/**
+ * Wires UISlider's tracking to a rendered Slider for every pointer, while it
+ * is enabled. Slider's own pointer handlers then take only a mouse press on
+ * the track.
+ */
+export function useSliderTouch({
+  isEnabled,
+  model,
+  getParts,
+  thumbCount,
+  thumbsWrapped
+}) {
+  // The parts getter reads only refs. So the first one stays current.
+  const [controller] = useState(() => new SliderTouchController(model, getParts));
+  // Hands the controller this render's model: the values and callbacks it
+  // reads from gesture callbacks outside React's render.
+  useIsomorphicLayoutEffect(() => {
+    controller.setModel(model);
+  });
+  const {
+    isHorizontal
+  } = model;
+  // Synchronizes the thumbs with the document's gesture host. Their
+  // PressTrackers and pans attach while the slider is enabled. They detach,
+  // ending any interaction silently, when it is disabled or the thumbs
+  // change.
+  useEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+    return controller.attach();
+  }, [controller, isEnabled, thumbCount, isHorizontal, thumbsWrapped]);
+  // Releases the controller's animators and gesture host listeners on
+  // unmount.
+  useEffect(() => () => controller.dispose(), [controller]);
+}

package/dist/Tooltip/Tooltip.d.ts

@@ -10,9 +10,9 @@
  * - /packages/cli/assets/templates/blocks/components/Tooltip/ (showcase blocks)
  */
 import React, { type ReactElement, type ReactNode } from 'react';
-import { type TooltipFocusTrigger, type TooltipTouchTrigger } from './useTooltip.js';
+import { type TooltipFocusTrigger, type TooltipTriggerBehavior, type TooltipTouchTrigger } from './useTooltip.js';
 import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer.js';
-export type { TooltipFocusTrigger, TooltipTouchTrigger } from './useTooltip.js';
+export type { TooltipFocusTrigger, TooltipTriggerBehavior, TooltipTouchTrigger, } from './useTooltip.js';
 export interface TooltipProps {
     /**
      * The trigger element(s). Children refs are preserved.
@@ -67,14 +67,38 @@ export interface TooltipProps {
      * - `auto`: tap opens the tooltip, unless the trigger performs an action of
      *   its own (a button, a link, a form control) — that tap belongs to the
      *   control, and a hint about a control the user just operated is noise
-     * - `tap`: tap always opens the tooltip. This is what an info icon rendered
-     *   as a button wants: it looks like an action to the DOM, but revealing the
-     *   tooltip is the only thing it does
+     * - `tap`: tap always opens the tooltip, even on a trigger that acts
      * - `none`: touch never opens the tooltip
      *
+     * It decides only under `triggerBehavior="adaptive"`, the default.
+     *
      * @default 'auto'
      */
     touchTrigger?: TooltipTouchTrigger;
+    /**
+     * How the trigger opens the tooltip:
+     * - `adaptive` (the default): hover and focus preview it. A tap opens it
+     *   unless the trigger performs an action of its own. While `touchTrigger`
+     *   remains, it decides those taps.
+     * - `hover`: hover and focus preview it; no touch or pen tap opens it.
+     * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
+     *   tooltip open, and the same press closes it. Hover and keyboard focus
+     *   still preview it. A pinned tooltip stays until Escape, a second press,
+     *   a press outside, or focus leaving. The press stops at the trigger. Its
+     *   default action is prevented, and the trigger's own handlers still run.
+     *   No clickable row or card around the trigger activates. With
+     *   `anchorRef`, the anchor's own `onClick` runs, and a plain `onClick`
+     *   element around it receives the press unless that `onClick` stops it.
+     *   Astryx clickable rows, cards, and containers ignore it, except an Item
+     *   row when the anchor is not a native button. The trigger reports
+     *   `aria-expanded` and `aria-controls`, and the tooltip's text is
+     *   announced once when it pins. Use it for a trigger whose information
+     *   lives only in the tooltip, such as an info icon. `touchTrigger` is
+     *   ignored.
+     *
+     * @default 'adaptive'
+     */
+    triggerBehavior?: TooltipTriggerBehavior;
     /**
      * Whether the tooltip is enabled.
      * When false, hover/focus triggers are disabled.
@@ -128,7 +152,7 @@ export interface TooltipProps {
  * </Tooltip>
  * ```
  */
-export declare function Tooltip({ children, anchorRef, content, placement, alignment, delay, hideDelay, focusTrigger, touchTrigger, isEnabled, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, }: TooltipProps): ReactElement;
+export declare function Tooltip({ children, anchorRef, content, placement, alignment, delay, hideDelay, focusTrigger, touchTrigger, triggerBehavior, isEnabled, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, }: TooltipProps): ReactElement;
 export declare namespace Tooltip {
     var displayName: string;
 }

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CA6J7B;yBA5Ke,OAAO"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAiBtB,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAEzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,eAA4B,EAC5B,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CAkK7B;yBAlLe,OAAO"}

package/dist/Tooltip/Tooltip.js

@@ -17,6 +17,7 @@ import React, { useCallback, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import * as stylex from '@stylexjs/stylex';
 import { useTooltip } from "./useTooltip.js";
+import { stopPressPinClick } from "../Layer/usePressPin.js";
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -59,6 +60,7 @@ export function Tooltip({
   hideDelay = 0,
   focusTrigger = 'auto',
   touchTrigger = 'auto',
+  triggerBehavior = 'adaptive',
   isEnabled = true,
   onOpenChange,
   hasHoverIndication = 'auto',
@@ -85,6 +87,7 @@ export function Tooltip({
     hideDelay,
     focusTrigger,
     touchTrigger,
+    triggerBehavior,
     isEnabled,
     isOpen,
     isDefaultOpen,
@@ -188,6 +191,7 @@ export function Tooltip({
         ref: tooltip.ref,
         tabIndex: 0,
         "aria-describedby": tooltip.describedBy,
+        onClick: stopPressPinClick,
         ...{
           0: {
             className: "xt0psk2"
@@ -205,6 +209,7 @@ export function Tooltip({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       ref: wrapperRef,
+      onClick: stopPressPinClick,
       ...{
         className: "xjp7ctv"
       },

package/dist/Tooltip/index.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When adding new Tooltip files, update exports here
  */
 export { useTooltip } from './useTooltip.js';
-export type { TooltipFocusTrigger, TooltipTouchTrigger, TooltipOptions, TooltipReturn, } from './useTooltip.js';
+export type { TooltipFocusTrigger, TooltipTriggerBehavior, TooltipTouchTrigger, TooltipOptions, TooltipReturn, } from './useTooltip.js';
 export { Tooltip } from './Tooltip.js';
 export type { TooltipProps } from './Tooltip.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,GACd,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACd,aAAa,GACd,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC"}

package/dist/Tooltip/useTooltip.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file useTooltip.tsx
- * @input Uses useLayer, useTouchTrigger, React hooks
+ * @input Uses useLayer, usePressPin, React hooks
  * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
@@ -9,7 +9,7 @@
  */
 import { type ReactNode, type RefCallback } from 'react';
 import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
-import { type LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
+import type { LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
 /**
  * Focus trigger behavior for tooltips
  */
@@ -18,6 +18,13 @@ export type TooltipFocusTrigger = 'auto' | 'always' | 'never';
  * Touch trigger behavior for tooltips
  */
 export type TooltipTouchTrigger = LayerTouchTrigger;
+/**
+ * How the trigger opens the tooltip. `adaptive`, the default, previews it on
+ * hover and focus, and a tap opens it unless the trigger acts. `hover`
+ * previews it on hover and focus, and no touch or pen tap opens it. `toggle`
+ * pins it on a click, tap, Enter, or Space on a button trigger.
+ */
+export type TooltipTriggerBehavior = 'adaptive' | 'hover' | 'toggle';
 export interface TooltipOptions {
     /**
      * Position placement relative to anchor
@@ -54,14 +61,33 @@ export interface TooltipOptions {
      * - `auto`: tap opens the tooltip, unless the trigger performs an action of
      *   its own (a button, a link, a form control) — that tap belongs to the
      *   control, and a hint about a control the user just operated is noise
-     * - `tap`: tap always opens the tooltip. This is what an info icon rendered
-     *   as a button wants: it looks like an action to the DOM, but revealing the
-     *   tooltip is the only thing it does
+     * - `tap`: tap always opens the tooltip, even on a trigger that acts
      * - `none`: touch never opens the tooltip
      *
+     * It decides only under `triggerBehavior="adaptive"`, the default.
+     *
      * @default 'auto'
      */
     touchTrigger?: TooltipTouchTrigger;
+    /**
+     * How the trigger opens the tooltip:
+     * - `adaptive` (the default): hover and focus preview it. A tap opens it
+     *   unless the trigger performs an action of its own. While `touchTrigger`
+     *   remains, it decides those taps.
+     * - `hover`: hover and focus preview it; no touch or pen tap opens it.
+     * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
+     *   tooltip open, and the same press closes it. Hover and keyboard focus
+     *   still preview it. A pinned tooltip stays until Escape, a second press,
+     *   a press outside, or focus leaving. Astryx clickable rows and cards
+     *   ignore the pinning press, except an Item row on a trigger that is not
+     *   a native button. The `Tooltip` component also stops it at a child
+     *   trigger. A hook caller stops a plain `onClick` ancestor itself. The
+     *   trigger reports `aria-expanded` and `aria-controls`, and the tooltip's
+     *   text is announced once when it pins. `touchTrigger` is ignored.
+     *
+     * @default 'adaptive'
+     */
+    triggerBehavior?: TooltipTriggerBehavior;
     /**
      * Whether the tooltip is enabled.
      * When false, hover/focus triggers are disabled.

package/dist/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA4ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAkbtE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AA+ChE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;;;;;;;OAiBG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAEzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAqdtE"}

package/dist/Tooltip/useTooltip.js

@@ -4,7 +4,7 @@
 
 /**
  * @file useTooltip.tsx
- * @input Uses useLayer, useTouchTrigger, React hooks
+ * @input Uses useLayer, usePressPin, React hooks
  * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
@@ -14,9 +14,11 @@
 import { useCallback, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useLayerInternal } from "../Layer/useLayer.js";
-import { useTouchTrigger } from "../Layer/useTouchTrigger.js";
+import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { registerLayerSurface } from "../Layer/layerSurfacePress.js";
+import { usePressPin } from "../Layer/usePressPin.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
@@ -49,6 +51,13 @@ const styles = {
  * Touch trigger behavior for tooltips
  */
 
+/**
+ * How the trigger opens the tooltip. `adaptive`, the default, previews it on
+ * hover and focus, and a tap opens it unless the trigger acts. `hover`
+ * previews it on hover and focus, and no touch or pen tap opens it. `toggle`
+ * pins it on a click, tap, Enter, or Space on a button trigger.
+ */
+
 /**
  * Check if an element is naturally focusable
  */
@@ -104,6 +113,7 @@ export function useTooltip(options = {}) {
     hideDelay = 0,
     focusTrigger = 'auto',
     touchTrigger = 'auto',
+    triggerBehavior = 'adaptive',
     isEnabled = true,
     isOpen,
     isDefaultOpen = false,
@@ -157,23 +167,42 @@ export function useTooltip(options = {}) {
     clearTimeouts();
     hideLayer();
   }, [clearTimeouts, hideLayer]);
+
+  // A press pins the tooltip under `triggerBehavior="toggle"`. The pin also
+  // owns the tooltip's touch trigger, so this one call wires both.
   const {
-    isTouchPointerRef,
-    isTouchInteraction,
-    handlePointerEnter,
-    handlePointerDown: handleTouchPointerDown,
-    clearTapOpen
-  } = useTouchTrigger({
+    isToggleTrigger,
+    isHeldOpen: isPressHeldOpen,
+    attach: attachPressPin,
+    unpin: unpinPress,
+    isPinShown,
+    touch: {
+      isTouchPointerRef,
+      isTouchInteraction,
+      handlePointerEnter,
+      handlePointerDown: handleTouchPointerDown,
+      clearTapOpen
+    }
+  } = usePressPin({
+    triggerBehavior,
     touchTrigger,
     isEnabled,
-    isControlled: isOpen !== undefined,
-    isOpen: isLayerOpen,
-    layerId: layerId,
+    isOpen,
+    isLayerOpen,
+    layerId,
     triggerRef,
+    component: 'Tooltip',
     show: showNow,
-    hide: hideNow
+    hide: hideNow,
+    report: next => next ? onShow?.() : onHide?.()
   });
 
+  // Only a pin announces the text: a preview is already the trigger's
+  // description.
+  const contentRef = useRef(null);
+  useAnnounceRenderedText(contentRef, isPinShown, 'pinned');
+  const contentRefs = useMergedRefs(contentRef, registerLayerSurface);
+
   // Schedule show with delay (suppressed when isOpen is false)
   const scheduleShow = useCallback(() => {
     if (!isEnabled || isOpen === false) {
@@ -201,7 +230,7 @@ export function useTooltip(options = {}) {
   // trigger onto the tooltip surface without the tooltip vanishing — required
   // for WCAG 1.4.13 (Content on Hover or Focus: hoverable).
   const scheduleHide = useCallback(() => {
-    if (isOpen === true) {
+    if (isOpen === true || isPressHeldOpen()) {
       return;
     }
     clearTimeouts();
@@ -209,7 +238,7 @@ export function useTooltip(options = {}) {
     hideTimeoutRef.current = setTimeout(() => {
       hideLayer();
     }, effectiveHideDelay);
-  }, [isOpen, clearTimeouts, hideLayer, hideDelay]);
+  }, [isOpen, isPressHeldOpen, clearTimeouts, hideLayer, hideDelay]);
 
   // Cancel a pending hide (e.g. the pointer entered the tooltip surface).
   const cancelHide = useCallback(() => {
@@ -286,6 +315,10 @@ export function useTooltip(options = {}) {
     clearTimeouts();
     showLayer();
   }, [isEnabled, isFocusForTrigger, isTouchInteraction, clearTimeouts, showLayer]);
+
+  // A pinned tooltip's focus-leave close is the pin's own: it listens on the
+  // trigger whatever `focusTrigger` is. This schedules the unpinned hide,
+  // which a held tooltip skips.
   const handleFocusOut = useCallback(e => {
     if (!focusCountedRef.current && !isFocusForTrigger(e)) {
       return;
@@ -302,6 +335,11 @@ export function useTooltip(options = {}) {
   // A touch press is a different gesture (it may be the only way to open the
   // tooltip at all), so the touch path answers it first.
   const handlePointerDown = useCallback(event => {
+    // A press on a toggle trigger pins or closes through its click. It
+    // neither hides the preview here nor waits for a tap verdict.
+    if (isToggleTrigger(triggerRef.current)) {
+      return;
+    }
     if (handleTouchPointerDown(event)) {
       return;
     }
@@ -310,7 +348,7 @@ export function useTooltip(options = {}) {
     }
     clearTimeouts();
     hideLayer();
-  }, [handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
+  }, [isToggleTrigger, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
 
   // Interaction ref that handles event listeners only
   const interactionRef = useCallback(el => {
@@ -341,7 +379,8 @@ export function useTooltip(options = {}) {
       }
     }
     triggerRef.current = el;
-  }, [focusTrigger, handleMouseEnter, handleMouseLeave, handleFocusIn, handleFocusOut, handlePointerEnter, handlePointerDown]);
+    attachPressPin(el);
+  }, [attachPressPin, focusTrigger, handleMouseEnter, handleMouseLeave, handleFocusIn, handleFocusOut, handlePointerEnter, handlePointerDown]);
 
   // Combined ref - shorthand for calling both positionRef and interactionRef
   const ref = useCallback(el => {
@@ -414,6 +453,7 @@ export function useTooltip(options = {}) {
     onDismiss: () => {
       clearTimeouts();
       clearTapOpen();
+      unpinPress();
       if (isOpen !== undefined) {
         onHide?.();
         return;
@@ -446,14 +486,15 @@ export function useTooltip(options = {}) {
     // something else in the shared interactive-ancestor walk, so a
     // clickable container around the trigger leaves the press alone while
     // document listeners still see it.
+    // The pin's announcement reads this element's text.
     _jsx("div", {
-      ref: registerLayerSurface,
+      ref: contentRefs,
       ...{
         className: "xfsso4q xy143xn x12gdq22 x1djylfy xw5ewwj x13faqbe"
       },
       children: children
     }), renderProps);
-  }, [renderLayer, placement, alignment, popoverXstyle, cancelHide, scheduleHide]);
+  }, [renderLayer, placement, alignment, popoverXstyle, cancelHide, scheduleHide, contentRefs]);
   return {
     ref,
     positionRef: layerRef,

package/dist/Typeahead/BaseTypeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgCnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAgB,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAkBzE,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AA8MD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EA80CrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgCnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAgB,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAmBzE,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AA8MD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EAq1CrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}

package/dist/Typeahead/BaseTypeahead.js

@@ -46,6 +46,7 @@ import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import { clampInlineSize } from "../Layer/clampInlineSize.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Typeahead/BaseTypeahead.generated.js";
+import { textEntryTraitAttributes } from "../Field/textEntryTraits.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerEnglishFallback(english);
 // =============================================================================
@@ -311,8 +312,9 @@ export const BaseTypeahead = function BaseTypeahead({
   const displayedResults = useMemo(() => displayOrder(results, queryEntryCount), [results, queryEntryCount]);
   // Committed values (Tokenizer's tokens) leave the shown rows in the same
   // render that commits them, before any reload answers, so a list never
-  // offers a token (component:Tokenizer FR13). The highlight stays on its item
-  // when that item remains. The previous key is remembered in state, like
+  // offers a token (component:Tokenizer FR13). Until the reload answers, the
+  // highlight stays on its item when that item remains; the reloaded list
+  // highlights its first row. The previous key is remembered in state, like
   // `sourceOfState` below.
   const committedChoices = useCommittedChoices();
   const committedChoicesKey = committedChoices?.key;
@@ -753,7 +755,12 @@ export const BaseTypeahead = function BaseTypeahead({
     resultsGenRef.current = gen;
     const shown = bootstrapResults.slice(0, maxMenuItems);
     const nextHighlightedIndex = shown.length > 0 ? 0 : -1;
+    // A focus load that yields no choice, or fails (it arrives here empty),
+    // closes the list rather than leaving it open and empty. A typed
+    // query's empty search is not a focus load and keeps its empty-search
+    // message.
     if (results.length === 0 && shown.length === 0 && highlightedIndex === -1) {
+      popover.hide();
       return;
     }
     setHeldHeight(null);
@@ -761,14 +768,10 @@ export const BaseTypeahead = function BaseTypeahead({
     setHighlightedIndex(nextHighlightedIndex);
     if (bootstrapResults.length > 0) {
       showLayer();
-    } else if (committedChoices != null) {
-      // A Tokenizer list left with no eligible choice (its focus entries
-      // all committed, or the request failed) closes rather than staying
-      // open and empty (component:Tokenizer FR15). A plain Typeahead
-      // provides no committed choices and keeps its current behavior.
+    } else {
       popover.hide();
     }
-  }, [highlightedIndex, maxMenuItems, results.length, showLayer, replaceResults, popover, committedChoices]);
+  }, [highlightedIndex, maxMenuItems, results.length, showLayer, replaceResults, popover]);
 
   // Perform bootstrap
   const performBootstrap = useCallback(async () => {
@@ -1216,7 +1219,14 @@ export const BaseTypeahead = function BaseTypeahead({
       readOnly: isFocusableDisabled || undefined,
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
-      autoComplete: "off",
+      autoComplete: "off"
+      // Autocorrect would rewrite names and identifiers. The key is only a
+      // label: Enter still commits the highlighted option.
+      ,
+      ...textEntryTraitAttributes({
+        enterKeyHint: 'search',
+        hasAutoCorrect: false
+      }),
       ...mergeProps(stylex.props(styles.input, isDisabled && styles.inputDisabled, inputXStyle, xstyle), className, style)
     }), isLoading && busyLane == null && /*#__PURE__*/_jsx("span", {
       ...{