@astryxdesign/core 0.7.9-canary.a1a6151 → 0.7.9-canary.cfd25ce

package/dist/CheckboxInput/CheckboxInput.d.ts.map

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

package/dist/CheckboxInput/CheckboxInput.js

@@ -36,6 +36,8 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { useIndicator } from "../Indicator/useIndicator.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
+import { touchHitAreaStyles } from "../utils/touchHitArea.stylex.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/CheckboxInput/CheckboxInput.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -62,6 +64,10 @@ const styles = {
     kOIVth: "xxhr3t",
     $$css: true
   },
+  hitAreaHost: {
+    kVAEAm: "xrxqdxo",
+    $$css: true
+  },
   indicatorPressImage: {
     "--_indicator-press-image": "x1dueop1 x189o2zt",
     $$css: true
@@ -210,6 +216,49 @@ export function CheckboxInput({
   const {
     focusProps
   } = useIndicatorFocusRing(indicatorRef);
+
+  // Under a coarse pointer a labelled checkbox's row grows toward 44 px
+  // through an invisible band, and nothing changes size. A label-hidden
+  // checkbox is a marker in another component's row, which keeps its target.
+  const hasHitArea = !isLabelHidden && !isDisabled && !isReadOnly;
+  const inputRef = useRef(null);
+  // The watch lives as long as the row is attached: the ref's cleanup stops
+  // it, and a replaced row starts its own.
+  const watchRowHitArea = useCallback(row => {
+    if (row == null || !hasHitArea) {
+      return;
+    }
+    return watchHitArea(row, insets => writeHitInsets(row, insets));
+  }, [hasHitArea]);
+  // The disabled-message tooltip listens for hover and focus on the whole
+  // row, a larger trigger. It anchors on the checkbox itself (below), so it
+  // shows next to the control. Its handlers check isEnabled, so the row
+  // always attaches them.
+  const rowRef = useMergedRefs(disabledMessageTooltip.interactionRef, watchRowHitArea);
+  // Where a press on the row itself began. A browser can move a tap's click
+  // onto the row's edge, so the band is judged from the press.
+  const pressPointRef = useRef(null);
+  const handleRowPointerDown = event => {
+    pressPointRef.current = event.target === event.currentTarget ? {
+      x: event.clientX,
+      y: event.clientY
+    } : null;
+  };
+  // A press that began on the band, outside the row's box, toggles the
+  // checkbox, as a tap on the box does. A click from code has no press count
+  // (`detail` is 0), so it never toggles from here.
+  const handleRowClick = event => {
+    const press = pressPointRef.current;
+    pressPointRef.current = null;
+    if (press == null || event.detail === 0 || event.target !== event.currentTarget) {
+      return;
+    }
+    const box = event.currentTarget.getBoundingClientRect();
+    const isOnBand = press.x < box.left || press.x > box.right || press.y < box.top || press.y > box.bottom;
+    if (isOnBand) {
+      inputRef.current?.click();
+    }
+  };
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
 
@@ -249,17 +298,11 @@ export function CheckboxInput({
       size
     }), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
     children: [/*#__PURE__*/_jsxs("div", {
-      ref: el => {
-        // Interaction (hover/focus) listeners for the disabled-message
-        // tooltip attach to the whole row for a larger trigger target;
-        // positioning anchors on the checkbox itself (below) so the tooltip
-        // appears next to the control, not the far edge of the row.
-        // Handlers are gated internally by isEnabled, so attaching
-        // unconditionally is safe.
-        disabledMessageTooltip.interactionRef(el);
-      },
+      ref: rowRef,
+      onPointerDown: hasHitArea ? handleRowPointerDown : undefined,
+      onClick: hasHitArea ? handleRowClick : undefined,
       ...(isDisabled ? undefined : pressable),
-      ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
+      ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, hasHitArea && styles.hitAreaHost, hasHitArea && touchHitAreaStyles.layer,
       // Hover and focus reach the checkbox visual through this ancestor
       // marker rather than props, so the whole row drives it.
       !isDisabled && indicatorScope, !isDisabled && styles.indicatorPressImage,
@@ -272,7 +315,7 @@ export function CheckboxInput({
         ...focusProps,
         children: [/*#__PURE__*/_jsx("input", {
           ...rest,
-          ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
+          ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef, inputRef),
           id: id,
           type: "checkbox"
           // Withhold the name while disabled: the input stays focusable (not

package/dist/InputGroup/InputGroup.d.ts

@@ -59,7 +59,8 @@ export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'childr
      */
     size?: InputGroupSize;
     /**
-     * Status indicator applied to the group border.
+     * Validation status. Its message shows below the group. The group border
+     * does not change; a theme can style the row from `data-status`.
      */
     status?: InputStatus;
     /**
@@ -72,8 +73,8 @@ export interface InputGroupProps extends Omit<BaseProps<HTMLDivElement>, 'childr
     'data-testid'?: string;
 }
 /**
- * Groups an input with prefix/suffix addons in a visually connected
- * container with shared border and focus ring.
+ * Groups an input with prefix and suffix addons in one connected row. A
+ * focused member stays above its neighbours, so its focus ring shows in full.
  *
  * @example
  * ```

package/dist/InputGroup/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BA8EjB;yBA/Fe,UAAU"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAsB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BA8EjB;yBA/Fe,UAAU"}

package/dist/InputGroup/InputGroup.js

@@ -57,8 +57,8 @@ const sizeStyles = {
   }
 };
 /**
- * Groups an input with prefix/suffix addons in a visually connected
- * container with shared border and focus ring.
+ * Groups an input with prefix and suffix addons in one connected row. A
+ * focused member stays above its neighbours, so its focus ring shows in full.
  *
  * @example
  * ```

package/dist/InputGroup/groupStyles.d.ts

@@ -33,7 +33,7 @@ export declare const groupStyles: Readonly<{
         readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", 0 | "8px">;
         readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", 0 | "8px">;
         readonly ':focus-within': stylex.StyleXClassNameFor<":focus-within", {
-            readonly zIndex: 1;
+            readonly zIndex: 2;
         }>;
     }>;
 }>;

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AA0BX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AA0BX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EA0DtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -62,7 +62,7 @@ export const groupStyles = {
     kVL7Gh: "xbiv7yw x1xrp5p4",
     kfmiAY: "x1ga7v0g x1ursdma",
     kT0f0o: "x16uus16 x1qa286i",
-    kXnDq0: "x1rm9qnc",
+    kXnDq0: "x1pc0aet",
     $$css: true
   }
 };

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAsIlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAuLpB;yBAtMe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAkC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAsIlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAuMpB;yBAtNe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -17,7 +17,7 @@
  * - /apps/storybook/stories/RadioList.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
-import React, { use, useId, useRef } from 'react';
+import React, { use, useCallback, useId, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { RadioListContext } from "./RadioList.js";
 import { RadioListReasonContext } from "./RadioListReasonContext.js";
@@ -31,6 +31,9 @@ import "../Indicator/indicator.markers.stylex.js";
 import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
 import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
+import { touchHitAreaStyles } from "../utils/touchHitArea.stylex.js";
 import { useIndicator } from "../Indicator/useIndicator.js";
 import { Item } from "../Item/Item.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -186,6 +189,18 @@ export function RadioListItem({
   // since the visible label is now a plain (non-`<label>`) text node — a real
   // `<label htmlFor>` would double-fire under delegation.
   const radioRef = useRef(null);
+
+  // Under a coarse pointer an option's row grows toward 44 px through an
+  // invisible band, and the row keeps its size. A tap on the band lands on
+  // the row, which hands it to the radio. The watch lives as long as the row
+  // is attached: the ref's cleanup stops it.
+  const watchRowHitArea = useCallback(row => {
+    if (row == null || isDisabled) {
+      return;
+    }
+    return watchHitArea(row, insets => writeHitInsets(row, insets));
+  }, [isDisabled]);
+  const mergedRowRef = useMergedRefs(ref, watchRowHitArea);
   const radioCircle = /*#__PURE__*/_jsxs("div", {
     ...stylex.props(styles.radioWrapper, wrapperSizeStyles[size], !isDisabled && styles.indicatorPressOverlay),
     ...focusProps,
@@ -251,7 +266,7 @@ export function RadioListItem({
     children: [radioCircle, startContent]
   }) : radioCircle;
   return /*#__PURE__*/_jsx(Item, {
-    ref: ref,
+    ref: mergedRowRef,
     ...(isDisabled ? undefined : pressable),
     startContent: mediaContent
     // Delegate row-surface clicks (label text, description, and the empty
@@ -283,7 +298,7 @@ export function RadioListItem({
     // interactive hover/press background. Applied after Item's own base
     // styles so it wins within the base layer; a `radio-list-item` theme
     // still overrides it from the higher `astryx-theme` layer.
-    rowStyles.root, !isDisabled && rowStyles.press, xstyle],
+    rowStyles.root, !isDisabled && rowStyles.press, !isDisabled && touchHitAreaStyles.layer, xstyle],
     ...mergeProps(
     // One target for every row, carrying its size and runtime state so a
     // theme can express "selected option at large" or restyle disabled

package/dist/astryx.css

@@ -1633,7 +1633,7 @@
   .xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x1nyx83j:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(50%)}
   .x9cjr8z:popover-open:not(#\#):not(#\#):not(#\#){transform:translateY(0)}
-  .x1rm9qnc:focus-within:not(#\#):not(#\#):not(#\#){z-index:1}
+  .x1pc0aet:focus-within:not(#\#):not(#\#):not(#\#){z-index:2}
   .xf5goe6.xf5goe6:where(.astryx-input-group > [data-astryx-input-group-item]):focus-visible:not(#\#):not(#\#):not(#\#){z-index:2}
   .x151j4nw:has(input[aria-disabled="true"]:focus-visible):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
   .xwmge8v:has(> [aria-disabled="true"]:focus-visible):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
@@ -2322,6 +2322,7 @@
   @media (prefers-reduced-motion: reduce) and (not (pointer: coarse)) and (not (pointer: coarse)){.xxsp3er.xxsp3er[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-name:none}}
   @media (forced-colors: active){.x1pjcgc3.x1pjcgc3[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:Highlight}}
   @media (forced-colors: active){.x1r4mieh.x1r4mieh[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:Highlight}}
+  @media (pointer: coarse){.x16x82qr.x16x82qr:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:calc(var(--astryx-hit-inset-top,0px) * -1) calc(var(--astryx-hit-inset-right,0px) * -1) calc(var(--astryx-hit-inset-bottom,0px) * -1) calc(var(--astryx-hit-inset-left,0px) * -1)}}
   @starting-style{@media (prefers-reduced-motion: reduce) and (pointer: coarse){.xgo67oj.xgo67oj.xgo67oj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:0}}}
   @starting-style{@media (prefers-reduced-motion: reduce){.xspp5ug.xspp5ug.xspp5ug:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateY(0)}}}
   @media (pointer: coarse){.x10ogxw0.x10ogxw0.x10ogxw0:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:none}}
@@ -2493,7 +2494,10 @@
   .x1c108yo:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(-100%)}
   .x12ayhd5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(100%)}
   @media (forced-colors: none){.x1my3e5g.x1my3e5g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--color-overlay-pressed)}}
+  @media (pointer: coarse){.x1c440c0.x1c440c0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--astryx-hit-inset-left,0px) var(--astryx-hit-inset-top,0px),calc(100% - var(--astryx-hit-inset-right,0px)) var(--astryx-hit-inset-top,0px),calc(100% - var(--astryx-hit-inset-right,0px)) calc(100% - var(--astryx-hit-inset-bottom,0px)),var(--astryx-hit-inset-left,0px) calc(100% - var(--astryx-hit-inset-bottom,0px)),var(--astryx-hit-inset-left,0px) var(--astryx-hit-inset-top,0px))}}
+  @media (pointer: coarse){.x1fjtqre.x1fjtqre:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}}
   @media (pointer: coarse){.x1ep27e9.x1ep27e9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}}
+  @media (pointer: coarse){.x7b72wb.x7b72wb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}}
   @media (prefers-reduced-motion: reduce){.xhhm9v0.xhhm9v0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-delay:0s}}
   @media (prefers-reduced-motion: reduce){.x1viac0w.x1viac0w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:.01s}}
   @media (prefers-reduced-motion: reduce){.x13sdc92.x13sdc92:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-duration:0s}}

package/dist/gestures/PanGestureRecognizer.d.ts

@@ -6,7 +6,12 @@ export interface PanGestureRecognizerOptions extends GestureRecognizerOptions<Pa
     minimumNumberOfTouches?: number;
     /** @default Infinity */
     maximumNumberOfTouches?: number;
-    hysteresis?: number;
+    /**
+     * The travel that begins the pan, px. A function gives each press its own
+     * threshold: it reads the press's first touch when that touch lands.
+     * @default UIKit's 10
+     */
+    hysteresis?: number | ((touch: GestureTouch) => number);
     /** Movement that may begin the pan; anything else fails it. @default 'any' */
     direction?: PanDirection;
     /**
@@ -51,6 +56,11 @@ export declare class PanGestureRecognizer extends GestureRecognizer {
     /** The movement the begin threshold took (excluded from `translation()`). */
     travelAtBegan: Point;
     private readonly tracker;
+    /**
+     * Read once per press. A finger that lands later keeps the press's
+     * threshold.
+     */
+    private readonly hysteresisFor;
     /** The lift's event time once the pan ended: its release (AST-100 FR2). */
     private releaseTime;
     /** The centroid where the gesture started, in client px. */

package/dist/gestures/PanGestureRecognizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanGestureRecognizer.d.ts","sourceRoot":"","sources":["../../src/gestures/PanGestureRecognizer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"PanGestureRecognizer.d.ts","sourceRoot":"","sources":["../../src/gestures/PanGestureRecognizer.ts"],"names":[],"mappings":"AAuCA,OAAO,EAEL,iBAAiB,EAEjB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,mBAAmB,EAAE,YAAY,EAAE,KAAK,EAAC,MAAM,SAAS,CAAC;AAGtE,MAAM,MAAM,YAAY,GACtB,KAAK,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,2BAA4B,SAAQ,wBAAwB,CAAC,oBAAoB,CAAC;IACjG,iBAAiB;IACjB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC,CAAC;IACxD,8EAA8E;IAC9E,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACjD,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,qBAAa,oBAAqB,SAAQ,iBAAiB;IACzD,IAAa,IAAI,IAAI,iBAAiB,CAAC,MAAM,CAAC,CAE7C;IAED,2FAA2F;IAC3F,SAAS,KAAK,MAAM,IAAI,KAAK,CAE5B;IAED,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,YAAY,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,UAAU,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAQ;IACpC,6EAA6E;IAC7E,aAAa,EAAE,KAAK,CAAQ;IAE5B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;IAC1C;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA2C;IACzE,2EAA2E;IAC3E,OAAO,CAAC,WAAW,CAAiC;IACpD,4DAA4D;IAC5D,OAAO,CAAC,MAAM,CAAe;IAC7B,6EAA6E;IAC7E,OAAO,CAAC,MAAM,CAAe;IAC7B,qEAAqE;IACrE,OAAO,CAAC,GAAG,CAAe;IAC1B,OAAO,CAAC,MAAM,CAAe;gBAEjB,OAAO,GAAE,2BAAgC;IAgBrD;;;OAGG;IACH,WAAW,IAAI,KAAK;IAOpB;;;;;OAKG;IACH,YAAY,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI;IAI3C,kFAAkF;IAClF,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAIlC,wEAAwE;IACxE,gBAAgB,IAAI,KAAK;IAIzB;;;;OAIG;IACH,QAAQ,IAAI,KAAK;IAIjB;;;;OAIG;IACH,cAAc,IAAI,KAAK;IAQvB;;;;;;;OAOG;IACH,IAAa,mBAAmB,IAAI,mBAAmB,CAkBtD;cAEkB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO;cAW1C,YAAY,CAC7B,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,EACpC,KAAK,EAAE,mBAAmB,GACzB,IAAI;cAuBY,YAAY,CAC7B,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,EACrC,KAAK,EAAE,mBAAmB,GACzB,IAAI;cASY,YAAY,CAC7B,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,EACpC,KAAK,EAAE,mBAAmB,GACzB,IAAI;cAoBY,KAAK,IAAI,IAAI;IAWhC;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;IAoBjE,OAAO,CAAC,QAAQ;IAsChB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAUrB;;;;;;;OAOG;cACgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAsBvD,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,KAAK;IAWb,kEAAkE;IAClE,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,MAAM;CASf"}

package/dist/gestures/PanGestureRecognizer.js

@@ -74,6 +74,12 @@ export class PanGestureRecognizer extends GestureRecognizer {
   lockedAxis = null;
   /** The movement the begin threshold took (excluded from `translation()`). */
   travelAtBegan = ZERO;
+
+  /**
+   * Read once per press. A finger that lands later keeps the press's
+   * threshold.
+   */
+
   /** The lift's event time once the pan ended: its release (AST-100 FR2). */
   releaseTime = undefined;
   /** The centroid where the gesture started, in client px. */
@@ -87,7 +93,11 @@ export class PanGestureRecognizer extends GestureRecognizer {
     super(options);
     this.minimumNumberOfTouches = options.minimumNumberOfTouches ?? 1;
     this.maximumNumberOfTouches = options.maximumNumberOfTouches ?? Number.POSITIVE_INFINITY;
-    this.hysteresis = options.hysteresis ?? UIKIT_PAN.hysteresis.value;
+    const {
+      hysteresis
+    } = options;
+    this.hysteresisFor = typeof hysteresis === 'function' ? hysteresis : null;
+    this.hysteresis = typeof hysteresis === 'number' ? hysteresis : UIKIT_PAN.hysteresis.value;
     this.direction = options.direction ?? 'any';
     this.axisRatio = options.axisRatio ?? 1;
     this.lockAxis = options.lockAxis ?? false;
@@ -177,6 +187,10 @@ export class PanGestureRecognizer extends GestureRecognizer {
   }
   touchesBegan(touches, event) {
     if (this.numberOfTouches === touches.length) {
+      const first = touches[0];
+      if (this.hysteresisFor != null && first != null) {
+        this.hysteresis = this.hysteresisFor(first);
+      }
       this.origin = centroid(this.touches.values());
       this.adjust = ZERO;
       this.raw = ZERO;

package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts

@@ -12,11 +12,16 @@ type PhysicalEdge = 'left' | 'right';
  * A screen-edge pan is a finger's: it takes no `allowedPointerTypes` and no
  * `allowedScrollTypes`, so neither a mouse, a trackpad nor a pen drives it.
  */
-export interface ScreenEdgePanGestureRecognizerOptions extends Omit<PanGestureRecognizerOptions, 'direction' | 'allowedPointerTypes' | 'allowedScrollTypes'> {
+export interface ScreenEdgePanGestureRecognizerOptions extends Omit<PanGestureRecognizerOptions, 'direction' | 'allowedPointerTypes' | 'allowedScrollTypes' | 'hysteresis'> {
     /** The edges a touch may start from. @default ['leading'] */
     edges?: ReadonlyArray<ScreenEdge>;
     /** Width of the band at each edge, px. */
     edgeRegion?: number;
+    /**
+     * The travel that begins the pan in its edge zone, px. It is one number for
+     * every press, since the zone sets the threshold itself. @default UIKit's 15
+     */
+    hysteresis?: number;
 }
 export declare class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {
     get kind(): PanGestureRecognizer['kind'];

package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenEdgePanGestureRecognizer.d.ts","sourceRoot":"","sources":["../../src/gestures/ScreenEdgePanGestureRecognizer.ts"],"names":[],"mappings":"AAsCA,OAAO,EAAmB,KAAK,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EACL,oBAAoB,EACpB,KAAK,2BAA2B,EACjC,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAC,mBAAmB,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAS/D;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhD,kDAAkD;AAClD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAarC;;;GAGG;AACH,MAAM,WAAW,qCAAsC,SAAQ,IAAI,CACjE,2BAA2B,EAC3B,WAAW,GAAG,qBAAqB,GAAG,oBAAoB,CAC3D;IACC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,8BAA+B,SAAQ,oBAAoB;IACtE,IAAa,IAAI,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAEhD;IAED,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,EAAE,YAAY,GAAG,IAAI,CAAQ;IACvC;;;;OAIG;IACH,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAQ;IAClD,mEAAmE;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,iFAAiF;IACjF,OAAO,CAAC,MAAM,CAA2B;gBAE7B,OAAO,GAAE,qCAA0C;IAiB/D;;;;;OAKG;IACH,IAAa,mBAAmB,IAAI,mBAAmB,CAWtD;IAED;;;;OAIG;IACH,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED;;;;OAIG;IACH,aAAa,IAAI,IAAI;cAcF,YAAY,CAC7B,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,EACpC,KAAK,EAAE,mBAAmB,GACzB,IAAI;IAiCP;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ;cAyBG,KAAK,IAAI,IAAI;IAKhC,OAAO,CAAC,MAAM;CAaf"}
+{"version":3,"file":"ScreenEdgePanGestureRecognizer.d.ts","sourceRoot":"","sources":["../../src/gestures/ScreenEdgePanGestureRecognizer.ts"],"names":[],"mappings":"AAsCA,OAAO,EAAmB,KAAK,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EACL,oBAAoB,EACpB,KAAK,2BAA2B,EACjC,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAC,mBAAmB,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAS/D;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhD,kDAAkD;AAClD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAarC;;;GAGG;AACH,MAAM,WAAW,qCAAsC,SAAQ,IAAI,CACjE,2BAA2B,EAC3B,WAAW,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,YAAY,CAC1E;IACC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,8BAA+B,SAAQ,oBAAoB;IACtE,IAAa,IAAI,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAEhD;IAED,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,EAAE,YAAY,GAAG,IAAI,CAAQ;IACvC;;;;OAIG;IACH,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAQ;IAClD,mEAAmE;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,iFAAiF;IACjF,OAAO,CAAC,MAAM,CAA2B;gBAE7B,OAAO,GAAE,qCAA0C;IAiB/D;;;;;OAKG;IACH,IAAa,mBAAmB,IAAI,mBAAmB,CAWtD;IAED;;;;OAIG;IACH,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED;;;;OAIG;IACH,aAAa,IAAI,IAAI;cAcF,YAAY,CAC7B,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,EACpC,KAAK,EAAE,mBAAmB,GACzB,IAAI;IAiCP;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ;cAyBG,KAAK,IAAI,IAAI;IAKhC,OAAO,CAAC,MAAM;CAaf"}

package/dist/utils/touchHitArea.stylex.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file touchHitArea.stylex.ts
+ * @input Uses StyleX and the insets that utils/hitArea.ts writes on a host
+ * @output Exports `touchHitAreaStyles.layer`, a host's invisible hit band
+ *   under a coarse pointer
+ * @position Internal styling utility for CheckboxInput and RadioListItem
+ *
+ * The band is the host's `::after`, grown past each edge by the measured
+ * inset. A clip path cuts out the host's box, so its content keeps its taps.
+ * A tap on the band lands on the host. SYNC: hitArea.ts HIT_INSET_PROPERTIES.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const touchHitAreaStyles: Readonly<{
+    readonly layer: Readonly<{
+        readonly '::after': stylex.StyleXClassNameFor<"::after", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "\"\"";
+            };
+            readonly position: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "absolute";
+            };
+            readonly inset: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "calc(var(--astryx-hit-inset-top, 0px) * -1) calc(var(--astryx-hit-inset-right, 0px) * -1) calc(var(--astryx-hit-inset-bottom, 0px) * -1) calc(var(--astryx-hit-inset-left, 0px) * -1)";
+            };
+            readonly clipPath: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": "polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--astryx-hit-inset-left, 0px) var(--astryx-hit-inset-top, 0px), calc(100% - var(--astryx-hit-inset-right, 0px)) var(--astryx-hit-inset-top, 0px), calc(100% - var(--astryx-hit-inset-right, 0px)) calc(100% - var(--astryx-hit-inset-bottom, 0px)), var(--astryx-hit-inset-left, 0px) calc(100% - var(--astryx-hit-inset-bottom, 0px)), var(--astryx-hit-inset-left, 0px) var(--astryx-hit-inset-top, 0px))";
+            };
+        }>;
+    }>;
+}>;
+//# sourceMappingURL=touchHitArea.stylex.d.ts.map

package/dist/utils/touchHitArea.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchHitArea.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/touchHitArea.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;EAgB7B,CAAC"}

package/dist/utils/touchHitArea.stylex.js

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchHitArea.stylex.ts
+ * @input Uses StyleX and the insets that utils/hitArea.ts writes on a host
+ * @output Exports `touchHitAreaStyles.layer`, a host's invisible hit band
+ *   under a coarse pointer
+ * @position Internal styling utility for CheckboxInput and RadioListItem
+ *
+ * The band is the host's `::after`, grown past each edge by the measured
+ * inset. A clip path cuts out the host's box, so its content keeps its taps.
+ * A tap on the band lands on the host. SYNC: hitArea.ts HIT_INSET_PROPERTIES.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+// StyleX reads these at build time, so they are spelled out.
+const TOUCH = '@media (pointer: coarse)';
+// The insets are measured in the viewport, so the sides are physical.
+const TOP = 'var(--astryx-hit-inset-top, 0px)';
+const RIGHT = 'var(--astryx-hit-inset-right, 0px)';
+const BOTTOM = 'var(--astryx-hit-inset-bottom, 0px)';
+const LEFT = 'var(--astryx-hit-inset-left, 0px)';
+export const touchHitAreaStyles = {
+  layer: {
+    k5JduY: "x1fjtqre",
+    kwXMNM: "x7b72wb",
+    kv0HGH: "x16x82qr",
+    kJYu5r: "x1c440c0",
+    $$css: true
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.9-canary.a1a6151",
+  "version": "0.7.9-canary.cfd25ce",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -870,9 +870,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.9-canary.a1a6151",
-    "@astryxdesign/cli": "0.7.9-canary.a1a6151",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.a1a6151",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.cfd25ce",
+    "@astryxdesign/cli": "0.7.9-canary.cfd25ce",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.cfd25ce",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -109,7 +109,7 @@ export const docs = {
       name: 'size',
       type: "'sm' | 'md'",
       description:
-        'The size of the checkbox. sm for compact layouts, md for default.',
+        'The size of the checkbox. sm for compact layouts, md for default. Under a coarse pointer a labelled checkbox’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; nothing changes size.',
       default: "'md'",
     },
     {
@@ -361,7 +361,8 @@ export const docsZh = {
     {
       name: 'size',
       type: "'sm' | 'md'",
-      description: '复选框尺寸。sm 用于紧凑布局，md 为默认。',
+      description:
+        '复选框尺寸。sm 用于紧凑布局，md 为默认。在粗指针（触摸）下，带可见标签的复选框的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；尺寸不变。',
       default: "'md'",
     },
     {

package/src/CheckboxInput/CheckboxInput.tsx

@@ -24,6 +24,8 @@ import {
   useTransition,
   type ChangeEvent,
   type FocusEvent,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -55,6 +57,8 @@ import {useIndicator} from '../Indicator/useIndicator';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {watchHitArea, writeHitInsets} from '../utils/hitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -83,6 +87,10 @@ const styles = stylex.create({
   containerLabelHidden: {
     gap: 0,
   },
+  // Under a coarse pointer the row contains its hit band.
+  hitAreaHost: {
+    position: {default: null, '@media (pointer: coarse)': 'relative'},
+  },
   // An indicator in another package may not name this row's private press
   // attribute. So the row hands its touch press image down to an indicator
   // that paints its own press, but only in its own press states. A pressed
@@ -407,6 +415,63 @@ export function CheckboxInput({
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
   const {focusProps} = useIndicatorFocusRing(indicatorRef);
 
+  // Under a coarse pointer a labelled checkbox's row grows toward 44 px
+  // through an invisible band, and nothing changes size. A label-hidden
+  // checkbox is a marker in another component's row, which keeps its target.
+  const hasHitArea = !isLabelHidden && !isDisabled && !isReadOnly;
+  const inputRef = useRef<HTMLInputElement>(null);
+  // The watch lives as long as the row is attached: the ref's cleanup stops
+  // it, and a replaced row starts its own.
+  const watchRowHitArea = useCallback(
+    (row: HTMLDivElement | null) => {
+      if (row == null || !hasHitArea) {
+        return;
+      }
+      return watchHitArea(row, insets => writeHitInsets(row, insets));
+    },
+    [hasHitArea],
+  );
+  // The disabled-message tooltip listens for hover and focus on the whole
+  // row, a larger trigger. It anchors on the checkbox itself (below), so it
+  // shows next to the control. Its handlers check isEnabled, so the row
+  // always attaches them.
+  const rowRef = useMergedRefs(
+    disabledMessageTooltip.interactionRef,
+    watchRowHitArea,
+  );
+  // Where a press on the row itself began. A browser can move a tap's click
+  // onto the row's edge, so the band is judged from the press.
+  const pressPointRef = useRef<{x: number; y: number} | null>(null);
+  const handleRowPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    pressPointRef.current =
+      event.target === event.currentTarget
+        ? {x: event.clientX, y: event.clientY}
+        : null;
+  };
+  // A press that began on the band, outside the row's box, toggles the
+  // checkbox, as a tap on the box does. A click from code has no press count
+  // (`detail` is 0), so it never toggles from here.
+  const handleRowClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    const press = pressPointRef.current;
+    pressPointRef.current = null;
+    if (
+      press == null ||
+      event.detail === 0 ||
+      event.target !== event.currentTarget
+    ) {
+      return;
+    }
+    const box = event.currentTarget.getBoundingClientRect();
+    const isOnBand =
+      press.x < box.left ||
+      press.x > box.right ||
+      press.y < box.top ||
+      press.y > box.bottom;
+    if (isOnBand) {
+      inputRef.current?.click();
+    }
+  };
+
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
 
@@ -455,19 +520,15 @@ export function CheckboxInput({
         style,
       )}>
       <div
-        ref={el => {
-          // Interaction (hover/focus) listeners for the disabled-message
-          // tooltip attach to the whole row for a larger trigger target;
-          // positioning anchors on the checkbox itself (below) so the tooltip
-          // appears next to the control, not the far edge of the row.
-          // Handlers are gated internally by isEnabled, so attaching
-          // unconditionally is safe.
-          disabledMessageTooltip.interactionRef(el);
-        }}
+        ref={rowRef}
+        onPointerDown={hasHitArea ? handleRowPointerDown : undefined}
+        onClick={hasHitArea ? handleRowClick : undefined}
         {...(isDisabled ? undefined : pressable)}
         {...stylex.props(
           styles.container,
           isLabelHidden && styles.containerLabelHidden,
+          hasHitArea && styles.hitAreaHost,
+          hasHitArea && touchHitAreaStyles.layer,
           // Hover and focus reach the checkbox visual through this ancestor
           // marker rather than props, so the whole row drives it.
           !isDisabled && indicatorScope,
@@ -490,6 +551,7 @@ export function CheckboxInput({
               ref,
               indeterminateRef,
               disabledMessageTooltip.positionRef,
+              inputRef,
             )}
             id={id}
             type="checkbox"

package/src/InputGroup/InputGroup.doc.mjs

@@ -24,7 +24,7 @@ export const docs = {
     ],
   },
   description:
-    'Groups an input with prefix/suffix addons in a visually connected container with shared border and focus ring.',
+    'Groups an input with prefix and suffix addons in one connected row. A focused member stays above its neighbours, so its focus ring shows in full.',
   props: [
     {
       name: 'children',
@@ -59,7 +59,7 @@ export const docs = {
     {
       name: 'isOptional',
       type: 'boolean',
-      description: 'Show "(optional)" indicator.',
+      description: 'Show the "Optional" indicator after the label.',
       default: 'false',
     },
     {
@@ -77,7 +77,8 @@ export const docs = {
     {
       name: 'status',
       type: "{type: 'warning' | 'error' | 'success', message?: string}",
-      description: 'Status indicator applied to the group border.',
+      description:
+        'Validation status. Its message shows below the group. The group border does not change; a theme can style the row from `data-status`.',
     },
     {
       name: 'labelTooltip',

package/src/InputGroup/InputGroup.tsx

@@ -109,7 +109,8 @@ export interface InputGroupProps extends Omit<
   size?: InputGroupSize;
 
   /**
-   * Status indicator applied to the group border.
+   * Validation status. Its message shows below the group. The group border
+   * does not change; a theme can style the row from `data-status`.
    */
   status?: InputStatus;
 
@@ -125,8 +126,8 @@ export interface InputGroupProps extends Omit<
 }
 
 /**
- * Groups an input with prefix/suffix addons in a visually connected
- * container with shared border and focus ring.
+ * Groups an input with prefix and suffix addons in one connected row. A
+ * focused member stays above its neighbours, so its focus ring shows in full.
  *
  * @example
  * ```

package/src/InputGroup/groupStyles.ts

@@ -96,8 +96,10 @@ export const groupStyles = stylex.create({
       default: 0,
       [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
+    // Input wrappers already sit at z-index 1. A focused member goes one
+    // higher, so an unfocused input beside it cannot cover its focus ring.
     ':focus-within': {
-      zIndex: 1,
+      zIndex: 2,
     },
   },
 });

package/src/RadioList/RadioListItem.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   displayName: 'Radio List Item',
   isHiddenFromOverview: true,
   description:
-    'Individual radio item with label, description, and content slots.',
+    'Individual radio item with label, description, and content slots. Under a coarse pointer an enabled option’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; the row keeps its size. That hit area is the row’s `::after`, so decorate a row with a child.',
   // RadioListItem requires RadioList context; wrap it so the preview doesn't throw.
   playground: {
     defaults: {value: 'option-1', label: 'Option'},
@@ -97,7 +97,8 @@ export const docsZh = {
   name: 'RadioListItem',
   isHiddenFromOverview: true,
   displayName: 'Radio List Item',
-  description: '单个单选选项，包含标签、描述和内容插槽。',
+  description:
+    '单个单选选项，包含标签、描述和内容插槽。在粗指针（触摸）下，已启用选项的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；行尺寸不变。该点击区域是行的 `::after`，因此请用子元素装饰行。',
   props: [
     {
       name: 'label',

package/src/RadioList/RadioListItem.tsx

@@ -18,7 +18,7 @@
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
-import React, {use, useId, useRef, type ReactNode} from 'react';
+import React, {use, useCallback, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
@@ -32,6 +32,9 @@ import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {watchHitArea, writeHitInsets} from '../utils/hitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {useIndicator} from '../Indicator/useIndicator';
 import {Item, type ItemAlign} from '../Item/Item';
 import {themeProps} from '../utils/themeProps';
@@ -305,6 +308,21 @@ export function RadioListItem({
   // `<label htmlFor>` would double-fire under delegation.
   const radioRef = useRef<HTMLInputElement>(null);
 
+  // Under a coarse pointer an option's row grows toward 44 px through an
+  // invisible band, and the row keeps its size. A tap on the band lands on
+  // the row, which hands it to the radio. The watch lives as long as the row
+  // is attached: the ref's cleanup stops it.
+  const watchRowHitArea = useCallback(
+    (row: HTMLDivElement | null) => {
+      if (row == null || isDisabled) {
+        return;
+      }
+      return watchHitArea(row, insets => writeHitInsets(row, insets));
+    },
+    [isDisabled],
+  );
+  const mergedRowRef = useMergedRefs(ref, watchRowHitArea);
+
   const radioCircle = (
     <div
       {...stylex.props(
@@ -387,7 +405,7 @@ export function RadioListItem({
 
   return (
     <Item
-      ref={ref}
+      ref={mergedRowRef}
       {...(isDisabled ? undefined : pressable)}
       startContent={mediaContent}
       // Delegate row-surface clicks (label text, description, and the empty
@@ -419,6 +437,7 @@ export function RadioListItem({
           // still overrides it from the higher `astryx-theme` layer.
           rowStyles.root,
           !isDisabled && rowStyles.press,
+          !isDisabled && touchHitAreaStyles.layer,
           xstyle,
         ] as StyleXStyles
       }

package/src/gestures/PanGestureRecognizer.ts

@@ -55,7 +55,12 @@ export interface PanGestureRecognizerOptions extends GestureRecognizerOptions<Pa
   minimumNumberOfTouches?: number;
   /** @default Infinity */
   maximumNumberOfTouches?: number;
-  hysteresis?: number;
+  /**
+   * The travel that begins the pan, px. A function gives each press its own
+   * threshold: it reads the press's first touch when that touch lands.
+   * @default UIKit's 10
+   */
+  hysteresis?: number | ((touch: GestureTouch) => number);
   /** Movement that may begin the pan; anything else fails it. @default 'any' */
   direction?: PanDirection;
   /**
@@ -117,6 +122,11 @@ export class PanGestureRecognizer extends GestureRecognizer {
   travelAtBegan: Point = ZERO;
 
   private readonly tracker: VelocityTracker;
+  /**
+   * Read once per press. A finger that lands later keeps the press's
+   * threshold.
+   */
+  private readonly hysteresisFor: ((touch: GestureTouch) => number) | null;
   /** The lift's event time once the pan ended: its release (AST-100 FR2). */
   private releaseTime: number | undefined = undefined;
   /** The centroid where the gesture started, in client px. */
@@ -132,7 +142,10 @@ export class PanGestureRecognizer extends GestureRecognizer {
     this.minimumNumberOfTouches = options.minimumNumberOfTouches ?? 1;
     this.maximumNumberOfTouches =
       options.maximumNumberOfTouches ?? Number.POSITIVE_INFINITY;
-    this.hysteresis = options.hysteresis ?? UIKIT_PAN.hysteresis.value;
+    const {hysteresis} = options;
+    this.hysteresisFor = typeof hysteresis === 'function' ? hysteresis : null;
+    this.hysteresis =
+      typeof hysteresis === 'number' ? hysteresis : UIKIT_PAN.hysteresis.value;
     this.direction = options.direction ?? 'any';
     this.axisRatio = options.axisRatio ?? 1;
     this.lockAxis = options.lockAxis ?? false;
@@ -237,6 +250,10 @@ export class PanGestureRecognizer extends GestureRecognizer {
     event: GestureEventContext,
   ): void {
     if (this.numberOfTouches === touches.length) {
+      const first = touches[0];
+      if (this.hysteresisFor != null && first != null) {
+        this.hysteresis = this.hysteresisFor(first);
+      }
       this.origin = centroid(this.touches.values());
       this.adjust = ZERO;
       this.raw = ZERO;

package/src/gestures/README.md

@@ -118,7 +118,8 @@ The pan reads its numbers the way `UIPanGestureRecognizer` does, as measured
 in the UIKit lab:
 
 - It begins once the centroid has moved `hysteresis` (10 px) along either
-  axis, not as a distance.
+  axis, not as a distance. A function gives each press its own threshold,
+  read from the press's first touch when it lands.
 - `translation()` leaves out the travel the threshold took: a slow drag reads
   zero when the pan begins, and a step that overshoots keeps only the
   overshoot. A dragged surface does not jump. `totalTranslation()` is the

package/src/gestures/ScreenEdgePanGestureRecognizer.ts

@@ -76,12 +76,17 @@ interface EdgeLayout {
  */
 export interface ScreenEdgePanGestureRecognizerOptions extends Omit<
   PanGestureRecognizerOptions,
-  'direction' | 'allowedPointerTypes' | 'allowedScrollTypes'
+  'direction' | 'allowedPointerTypes' | 'allowedScrollTypes' | 'hysteresis'
 > {
   /** The edges a touch may start from. @default ['leading'] */
   edges?: ReadonlyArray<ScreenEdge>;
   /** Width of the band at each edge, px. */
   edgeRegion?: number;
+  /**
+   * The travel that begins the pan in its edge zone, px. It is one number for
+   * every press, since the zone sets the threshold itself. @default UIKit's 15
+   */
+  hysteresis?: number;
 }
 
 export class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {

package/src/utils/touchHitArea.stylex.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchHitArea.stylex.ts
+ * @input Uses StyleX and the insets that utils/hitArea.ts writes on a host
+ * @output Exports `touchHitAreaStyles.layer`, a host's invisible hit band
+ *   under a coarse pointer
+ * @position Internal styling utility for CheckboxInput and RadioListItem
+ *
+ * The band is the host's `::after`, grown past each edge by the measured
+ * inset. A clip path cuts out the host's box, so its content keeps its taps.
+ * A tap on the band lands on the host. SYNC: hitArea.ts HIT_INSET_PROPERTIES.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+// StyleX reads these at build time, so they are spelled out.
+const TOUCH = '@media (pointer: coarse)';
+// The insets are measured in the viewport, so the sides are physical.
+const TOP = 'var(--astryx-hit-inset-top, 0px)';
+const RIGHT = 'var(--astryx-hit-inset-right, 0px)';
+const BOTTOM = 'var(--astryx-hit-inset-bottom, 0px)';
+const LEFT = 'var(--astryx-hit-inset-left, 0px)';
+
+export const touchHitAreaStyles = stylex.create({
+  layer: {
+    '::after': {
+      content: {default: null, [TOUCH]: '""'},
+      position: {default: null, [TOUCH]: 'absolute'},
+      inset: {
+        default: null,
+        [TOUCH]: `calc(${TOP} * -1) calc(${RIGHT} * -1) calc(${BOTTOM} * -1) calc(${LEFT} * -1)`,
+      },
+      // The outer rectangle, then the host's box as an even-odd hole.
+      clipPath: {
+        default: null,
+        [TOUCH]: `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${LEFT} ${TOP}, calc(100% - ${RIGHT}) ${TOP}, calc(100% - ${RIGHT}) calc(100% - ${BOTTOM}), ${LEFT} calc(100% - ${BOTTOM}), ${LEFT} ${TOP})`,
+      },
+    },
+  },
+});