@astryxdesign/core 0.7.5 → 0.7.6-canary.bb18c81

package/dist/Toolbar/Toolbar.js

@@ -187,7 +187,8 @@ export function Toolbar({
     handleKeyDown,
     handleFocus
   } = useListFocus({
-    itemSelector: 'button, input, [tabindex]',
+    // `a[href]` catches a Button rendered with `href`.
+    itemSelector: 'button, input, a[href], [tabindex]',
     boundarySelector: '[role="toolbar"], [popover]',
     orientation,
     hasRovingTabIndex: true,

package/dist/Typeahead/Typeahead.d.ts

@@ -142,7 +142,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<FieldInpu
     /** Callback when dropdown opens/closes. */
     onOpenChange?: (isOpen: boolean) => void;
 }
-export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchText, isDisabled: isDisabledProp, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, id: idProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: TypeaheadProps<T>): React.JSX.Element;
+export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchText, isDisabled: isDisabledProp, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, onKeyDown, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-labelledby': ariaLabelledByProp, ...restProps }: TypeaheadProps<T>): React.JSX.Element;
 export declare namespace Typeahead {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AActD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAM1D,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACpE,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,WAAW,CACzB;IACC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IACpD,2CAA2C;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,yDAAyD;IACzD,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnC,kEAAkE;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6KD,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAClD,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,aAA0B,EAC1B,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,UAAU,EAAE,cAAsB,EAClC,eAAe,EACf,QAAe,EACf,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,qBAiVnB;yBAxXe,SAAS"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}

package/dist/Typeahead/Typeahead.js

@@ -35,6 +35,7 @@ import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 import { TrailingKeyDownContext } from "./trailingKeyDown.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -186,6 +187,7 @@ export function Typeahead({
   controlStyle,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
+  'aria-labelledby': ariaLabelledByProp,
   ...restProps
 }) {
   const {
@@ -201,6 +203,7 @@ export function Typeahead({
   const generatedInputId = useId();
   const inputId = idProp ?? generatedInputId;
   const inputLabelId = useId();
+  const fieldLabelId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
   const inputGroup = useInputGroup();
@@ -362,6 +365,10 @@ export function Typeahead({
     ariaLabelledBy,
     ariaDescribedBy
   } = getInputARIA(inputLabelId, [description ? descriptionId : null, status?.message ? statusMessageId : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+
+  // A caller aria-labelledby names the input together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const inputLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp) : ariaLabelledBy;
   const sizeStyle = wrapperSizeStyles[size];
   const typeaheadContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
@@ -420,7 +427,7 @@ export function Typeahead({
               isFocusableDisabled: showsDisabledMessage,
               inputId: inputId,
               ariaDescribedBy: [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
-              ariaLabelledBy: ariaLabelledBy,
+              ariaLabelledBy: inputLabelledBy,
               onChangeQuery: onChangeQuery,
               onOpenChange: onOpenChange,
               debounceMs: debounceMs,
@@ -461,6 +468,7 @@ export function Typeahead({
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: inputId,
+    labelID: ariaLabelledByProp != null ? fieldLabelId : undefined,
     descriptionID: description ? descriptionId : undefined,
     isOptional: isOptional,
     isRequired: isRequired,

package/dist/astryx.css

@@ -1386,6 +1386,7 @@
   .xv5t66b:not(#\#):not(#\#):not(#\#){transform:translateX(12px)}
   .x15481yp:not(#\#):not(#\#):not(#\#){transform:translateX(14px)}
   .xitnhlw:not(#\#):not(#\#):not(#\#){transform:translateX(50%)}
+  .x8mk83g:not(#\#):not(#\#):not(#\#){transform:translateX(calc(var(--_progress-bar-fill,0%) - 100%))}
   .x105ttfm:not(#\#):not(#\#):not(#\#){transform:translateY(-100%)}
   .x19xzu86:not(#\#):not(#\#):not(#\#){transform:translateY(-3px) scale(.985)}
   .x1bvilyr:not(#\#):not(#\#):not(#\#){transform:translateY(-4px)}
@@ -1465,7 +1466,6 @@
   .x13zkoj4:not(#\#):not(#\#):not(#\#){transition-property:transform,width}
   .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .x74b7sa:not(#\#):not(#\#):not(#\#){transition-property:visibility}
-  .xxrbq2n:not(#\#):not(#\#):not(#\#){transition-property:width}
   .xn34ekc:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out,ease-out}
   .x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
   .xcj1dhv:not(#\#):not(#\#):not(#\#){transition-timing-function:linear}
@@ -1486,6 +1486,7 @@
   .x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
   .x1q1rmc8:not(#\#):not(#\#):not(#\#){will-change:transform,opacity}
+  .x1so62im:not(#\#):not(#\#):not(#\#){will-change:transform}
   .x1yn0g08:not(#\#):not(#\#):not(#\#){word-break:break-all}
   .x13faqbe:not(#\#):not(#\#):not(#\#){word-break:break-word}
   .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
@@ -1599,6 +1600,7 @@
   .x3x83r7:has(:focus-visible):not(#\#):not(#\#):not(#\#){z-index:2}
   .xbw113y:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
   .x1eqdj8u:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
+  .x13s8k5t:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(calc(100% - var(--_progress-bar-fill,0%)))}
   .x1xrp5p4:first-child:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
   .xyf0ibl:first-child:not(#\#):not(#\#):not(#\#){border-inline-start-style:none}
   .x1pjv70x:first-child:not(#\#):not(#\#):not(#\#){border-inline-start-width:0}
@@ -1647,11 +1649,13 @@
   @media (forced-colors: active){.x1sir5s4.x1sir5s4:not(#\#):not(#\#):not(#\#){background-color:HighlightText}}
   @media (hover: hover){.x150ydqw.x150ydqw:not(#\#):not(#\#):not(#\#){background-color:transparent}}
   @media (forced-colors: active){.xs5hli.xs5hli:not(#\#):not(#\#):not(#\#){color:CanvasText}}
+  @media (forced-colors: active){.x1xt8qih.x1xt8qih:not(#\#):not(#\#):not(#\#){color:currentColor}}
   @media (forced-colors: active){.x1bhcspo.x1bhcspo:not(#\#):not(#\#):not(#\#){color:GrayText}}
   @media (forced-colors: active){.x1k5gbb1.x1k5gbb1:not(#\#):not(#\#):not(#\#){color:HighlightText}}
   @media (hover: hover){.x2dt3px.x2dt3px:not(#\#):not(#\#):not(#\#){cursor:zoom-in}}
   @media (hover: hover){.xqwu39o.xqwu39o:not(#\#):not(#\#):not(#\#){display:flex}}
   @media (max-width: 480px){.xedohl4.xedohl4:not(#\#):not(#\#):not(#\#){display:flex}}
+  @media (pointer: coarse){.xhj50sb.xhj50sb:not(#\#):not(#\#):not(#\#){display:none}}
   @media (max-width: 480px){.x1rpgqan.x1rpgqan:not(#\#):not(#\#):not(#\#){flex-direction:column}}
   @media (pointer: coarse){.x1jymrmb.x1jymrmb:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}}
   @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x1m67veq.x1m67veq:not(#\#):not(#\#):not(#\#){opacity:0}}
@@ -1663,10 +1667,12 @@
   @media (forced-colors: active){.x815t2r.x815t2r:not(#\#):not(#\#):not(#\#){outline-style:solid}}
   @media (forced-colors: active){.xcthrzx.xcthrzx:not(#\#):not(#\#):not(#\#){outline-width:1px}}
   @media (forced-colors: active){.x1xvue0r.x1xvue0r:not(#\#):not(#\#):not(#\#){outline-width:var(--border-width)}}
+  @media (pointer: coarse){.x1r3kph8.x1r3kph8:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--astryx-number-input-padding-inline-end,var(--astryx-number-input-padding-inline,var(--astryx-number-input-padding,var(--spacing-2))))}}
   @media (pointer: coarse){.x1bjav06.x1bjav06:not(#\#):not(#\#):not(#\#){pointer-events:none}}
   @media (prefers-reduced-motion: reduce){.xg83hb1.xg83hb1:not(#\#):not(#\#):not(#\#){scroll-behavior:auto}}
   @media (forced-colors: active){.xrih18v.xrih18v:not(#\#):not(#\#):not(#\#){scrollbar-color:auto}}
   @media (pointer: coarse) and (not (forced-colors: active)){.xk8rjfv.xk8rjfv:not(#\#):not(#\#):not(#\#){scrollbar-color:auto}}
+  @media (forced-colors: active){.x10rjfdt.x10rjfdt:not(#\#):not(#\#):not(#\#){transform:none}}
   @media (prefers-reduced-motion: reduce){.xuupxpy.xuupxpy:not(#\#):not(#\#):not(#\#){transform:none}}
   @media (prefers-reduced-motion: reduce){.x1oe9tb1.x1oe9tb1:not(#\#):not(#\#):not(#\#){transform:translateY(0)}}
   @media (prefers-reduced-motion: reduce){.x1k6wr6r.x1k6wr6r:not(#\#):not(#\#):not(#\#){transition-delay:0s,0s}}
@@ -1675,12 +1681,16 @@
   @media (prefers-reduced-motion: reduce){.xzg1mie.xzg1mie:not(#\#):not(#\#):not(#\#){transition-duration:.01s}}
   @media ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not (prefers-reduced-motion: reduce))) or ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not ((not (pointer: coarse))))){.xh0ie4q.xh0ie4q:not(#\#):not(#\#):not(#\#){transition-duration:.2s}}
   @media (prefers-reduced-motion: reduce){.xsr0bmt.xsr0bmt:not(#\#):not(#\#):not(#\#){transition-duration:0s,0s}}
+  @media ((prefers-reduced-motion: reduce) and (not (pointer: coarse)) and (not (prefers-reduced-motion: reduce))) or ((prefers-reduced-motion: reduce) and (not (pointer: coarse)) and (not (pointer: coarse))){.xo2sced.xo2sced:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
   @media (prefers-reduced-motion: reduce) and (not (pointer: coarse)){.xuh6ohu.xuh6ohu:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
+  @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x1r9o9eb.x1r9o9eb:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
   @media (prefers-reduced-motion: reduce){.x12w9bfk.x12w9bfk:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
   @media (prefers-reduced-motion: reduce){.x4wkmsb.x4wkmsb:not(#\#):not(#\#):not(#\#){transition-property:none}}
   @media (prefers-reduced-motion: reduce){.x3ya4ca.x3ya4ca:not(#\#):not(#\#):not(#\#){transition-property:opacity,overlay,display}}
+  @media (forced-colors: active){.x18hto2h.x18hto2h:not(#\#):not(#\#):not(#\#){transition-property:width}}
   @media (pointer: coarse){.x1s1rlkj.x1s1rlkj:not(#\#):not(#\#):not(#\#){transition-timing-function:cubic-bezier(.3,0,.6,.6)}}
   @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x19dgjhz.x19dgjhz:not(#\#):not(#\#):not(#\#){transition-timing-function:cubic-bezier(.42,0,.58,1)}}
+  @media (forced-colors: active){.x1mfxj9n.x1mfxj9n:not(#\#):not(#\#):not(#\#){will-change:auto}}
   .x1anq1lc.x1anq1lc:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
   .xzmimnh.xzmimnh:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed)),linear-gradient(var(--color-neutral),var(--color-neutral))}
   .x7uyq82.x7uyq82:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}
@@ -1724,6 +1734,7 @@
   @media (hover: hover){.x7jm8ul.x7jm8ul.x7jm8ul:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-secondary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.xo5jvnm.xo5jvnm.xo5jvnm:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
   @media (pointer: coarse){.xom6oz5.xom6oz5.xom6oz5:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
+  @media (forced-colors: active){.x1xwfpud.x1xwfpud:dir(rtl):not(#\#):not(#\#):not(#\#){transform:none}}
   @container (max-width: 399px){.x1alyx8p.x1alyx8p:not(#\#):not(#\#):not(#\#){flex-wrap:wrap}}
   @media (forced-colors: active){.x1vo6n7o.x1vo6n7o:active:not(#\#):not(#\#):not(#\#){background-color:Highlight}}
   @media (hover: hover){.x1otsd3y.x1otsd3y.x1otsd3y:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-hover),var(--color-overlay-hover)),linear-gradient(var(--color-neutral),var(--color-neutral))}}
@@ -1931,6 +1942,7 @@
   .x1xf4nls:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-lg)}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
   .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
+  .x3unnv6:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-12)}
   .x175cymr:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-2)}
   .ximsjs8:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-7)}
   .xkoleio:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-8)}
@@ -2145,6 +2157,7 @@
   @media (pointer: coarse){.x1xrq5m.x1xrq5m:not(#\#):not(#\#):not(#\#):not(#\#){min-width:44px}}
   @media (pointer: coarse){.xngvp7v.xngvp7v:not(#\#):not(#\#):not(#\#):not(#\#){min-width:44px}}
   @media (any-pointer: coarse){.x1c4064q.x1c4064q:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}}
+  @media (forced-colors: active){.xtyencx.xtyencx:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_progress-bar-fill,0%)}}
   @media (max-width: 640px){.xci7e5a.xci7e5a:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-fqzwsx)}}
   @supports (-webkit-touch-callout: none){@media (pointer: coarse){.x9w4715.x9w4715.x9w4715:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(max(1rem,var(--text-body-size)) * var(--text-body-leading));height:1lh}}}
   .x8s9nux[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-duration:.2s}

package/dist/gestures/PinchGestureRecognizer.d.ts

@@ -0,0 +1,30 @@
+import { GestureRecognizer, type GestureRecognizerOptions, type NativeTouchBehavior } from './GestureRecognizer.js';
+import type { GestureEventContext, GestureTouch, Point } from './types.js';
+export interface PinchGestureRecognizerOptions extends GestureRecognizerOptions<PinchGestureRecognizer> {
+    hysteresis?: number;
+}
+export declare class PinchGestureRecognizer extends GestureRecognizer {
+    hysteresis: number;
+    private initialSpan;
+    private scaleValue;
+    private readonly tracker;
+    private lastTime;
+    constructor(options?: PinchGestureRecognizerOptions);
+    /** Current span over the span the fingers started at. */
+    get scale(): number;
+    /** Re-base: from now on the scale reads `value` at the current span. */
+    set scale(value: number);
+    /** Scale per second (UIKit's filter; measured for pans, assumed here). */
+    get velocity(): number;
+    /** The midpoint between the two fingers. */
+    focalPoint(): Point;
+    /** Two fingers on this view are this recognizer's, not the browser's zoom. */
+    get nativeTouchBehavior(): NativeTouchBehavior;
+    protected acceptsTouch(touch: GestureTouch): boolean;
+    protected touchesBegan(_touches: ReadonlyArray<GestureTouch>, event: GestureEventContext): void;
+    protected touchesMoved(_touches: ReadonlyArray<GestureTouch>, event: GestureEventContext): void;
+    protected touchesEnded(): void;
+    protected reset(): void;
+    private span;
+}
+//# sourceMappingURL=PinchGestureRecognizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinchGestureRecognizer.d.ts","sourceRoot":"","sources":["../../src/gestures/PinchGestureRecognizer.ts"],"names":[],"mappings":"AAuBA,OAAO,EACL,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,WAAW,6BAA8B,SAAQ,wBAAwB,CAAC,sBAAsB,CAAC;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,sBAAuB,SAAQ,iBAAiB;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyB;IACjD,OAAO,CAAC,QAAQ,CAAK;gBAET,OAAO,GAAE,6BAAkC;IAKvD,yDAAyD;IACzD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,wEAAwE;IACxE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAStB;IAED,0EAA0E;IAC1E,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,4CAA4C;IAC5C,UAAU,IAAI,KAAK;IAInB,8EAA8E;IAC9E,IAAa,mBAAmB,IAAI,mBAAmB,CAEtD;cAEkB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO;cAI1C,YAAY,CAC7B,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,EACrC,KAAK,EAAE,mBAAmB,GACzB,IAAI;cAUY,YAAY,CAC7B,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,EACrC,KAAK,EAAE,mBAAmB,GACzB,IAAI;cA6BY,YAAY,IAAI,IAAI;cAIpB,KAAK,IAAI,IAAI;IAMhC,OAAO,CAAC,IAAI;CAIb"}

package/dist/gestures/PinchGestureRecognizer.js

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file PinchGestureRecognizer.ts
+ * @input Touches from a GestureArena
+ * @output Exports PinchGestureRecognizer (UIPinchGestureRecognizer) and its
+ *   options
+ * @position Continuous two-finger recognizer of packages/core/src/gestures
+ *
+ * Tracks the first two fingers; more are ignored. Begins once the distance
+ * between them has changed by `hysteresis` px. As in UIKit, `scale` is then
+ * the current distance over the starting distance moved by the hysteresis
+ * toward the pinch, so it does not jump (settable to re-base it); `velocity`
+ * is scale per second. Lifting either finger ends an
+ * active pinch and fails a possible one.
+ *
+ * A host gives every element WITHOUT a pinch recognizer `pinch-zoom` in its
+ * `touch-action`, so the page stays zoomable (WCAG 1.4.4); attaching one
+ * takes the two-finger gesture for this element only.
+ */
+
+import { UIKIT_PINCH } from "../motion/uikit/gestures.js";
+import { centroid, distance } from "./geometry.js";
+import { GestureRecognizer, isActive } from "./GestureRecognizer.js";
+import { VelocityTracker } from "./VelocityTracker.js";
+export class PinchGestureRecognizer extends GestureRecognizer {
+  initialSpan = 0;
+  scaleValue = 1;
+  tracker = new VelocityTracker();
+  lastTime = 0;
+  constructor(options = {}) {
+    super(options);
+    this.hysteresis = options.hysteresis ?? UIKIT_PINCH.hysteresis.value;
+  }
+
+  /** Current span over the span the fingers started at. */
+  get scale() {
+    return this.scaleValue;
+  }
+
+  /** Re-base: from now on the scale reads `value` at the current span. */
+  set scale(value) {
+    const span = this.span();
+    if (span > 0 && value > 0) {
+      this.initialSpan = span / value;
+      this.scaleValue = value;
+      // The velocity continues from the re-based value, without a jump.
+      this.tracker.reset();
+      this.tracker.add(value, 0, this.lastTime);
+    }
+  }
+
+  /** Scale per second (UIKit's filter; measured for pans, assumed here). */
+  get velocity() {
+    return this.tracker.velocity().x;
+  }
+
+  /** The midpoint between the two fingers. */
+  focalPoint() {
+    return centroid(this.touches.values());
+  }
+
+  /** Two fingers on this view are this recognizer's, not the browser's zoom. */
+  get nativeTouchBehavior() {
+    return {
+      panX: true,
+      panY: true,
+      pinchZoom: false,
+      doubleTapZoom: false
+    };
+  }
+  acceptsTouch(touch) {
+    return this.numberOfTouches < 2 && super.acceptsTouch(touch);
+  }
+  touchesBegan(_touches, event) {
+    this.lastTime = event.time;
+    if (this.numberOfTouches === 2) {
+      this.initialSpan = this.span();
+      this.scaleValue = 1;
+      this.tracker.reset();
+      this.tracker.add(1, 0, event.time);
+    }
+  }
+  touchesMoved(_touches, event) {
+    if (this.numberOfTouches < 2 || this.initialSpan <= 0) {
+      return;
+    }
+    this.lastTime = event.time;
+    const span = this.span();
+    // Once recognized, a pinch waiting on a recognizer it requires to fail
+    // keeps its re-based start: its moves only follow the fingers.
+    if (this.state === 'possible' && this.pending == null) {
+      if (Math.abs(span - this.initialSpan) >= this.hysteresis) {
+        // UIKit measures from the start moved by the hysteresis, and its
+        // first velocity spans from the touch-down (scale 1) to here.
+        this.initialSpan += Math.sign(span - this.initialSpan) * this.hysteresis;
+        this.scaleValue = span / this.initialSpan;
+        this.tracker.add(this.scaleValue, 0, event.time);
+        this.setState('began');
+      }
+      return;
+    }
+    this.scaleValue = span / this.initialSpan;
+    // Every move of the fingers is a sample: a span that holds while they
+    // move reads as no change, so the velocity never goes stale.
+    this.tracker.add(this.scaleValue, 0, event.time, {
+      isMotion: true
+    });
+    if (isActive(this.state)) {
+      this.setState('changed');
+    }
+  }
+  touchesEnded() {
+    this.setState(isActive(this.state) ? 'ended' : 'failed');
+  }
+  reset() {
+    this.initialSpan = 0;
+    this.scaleValue = 1;
+    this.tracker.reset();
+  }
+  span() {
+    const [a, b] = this.trackedTouches;
+    return a == null || b == null ? 0 : distance(a, b);
+  }
+}

package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts

@@ -0,0 +1,70 @@
+import { type NativeTouchBehavior } from './GestureRecognizer.js';
+import { PanGestureRecognizer, type PanGestureRecognizerOptions } from './PanGestureRecognizer.js';
+import type { GestureEventContext, GestureTouch } from './types.js';
+/**
+ * An edge by writing direction: under RTL the leading edge is the right one.
+ * Top and bottom edges land with their first user.
+ */
+export type ScreenEdge = 'leading' | 'trailing';
+/** A physical horizontal edge of the viewport. */
+type PhysicalEdge = 'left' | 'right';
+/**
+ * A screen-edge pan is a finger's: it takes no `allowedPointerTypes`
+ * (`spec:AST-094` FR43).
+ */
+export interface ScreenEdgePanGestureRecognizerOptions extends Omit<PanGestureRecognizerOptions, 'direction' | 'allowedPointerTypes'> {
+    /** The edges a touch may start from. @default ['leading'] */
+    edges?: ReadonlyArray<ScreenEdge>;
+    /** Width of the band at each edge, px. */
+    edgeRegion?: number;
+}
+export declare class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {
+    edges: ReadonlyArray<ScreenEdge>;
+    edgeRegion: number;
+    /** The physical edge the current gesture started from. */
+    activeEdge: PhysicalEdge | null;
+    /**
+     * @internal Set by the host while attached: called when the edge-zone
+     * answer changes, so the element's `touch-action` follows it
+     * (spec:AST-094 FR19, DEC-22).
+     */
+    onTouchBehaviorChange: (() => void) | null;
+    /** The hysteresis where the pan takes its axis (UIKit's 15 px). */
+    private readonly edgeHysteresis;
+    /** What the pan measured of its view (see EdgeLayout), until a layout change. */
+    private layout;
+    constructor(options?: ScreenEdgePanGestureRecognizerOptions);
+    /**
+     * The pan takes the horizontal axis only in its edge zone, a view within
+     * the band of an edge it watches; elsewhere it leaves the browser every
+     * touch behavior, so the author's scrolling is untouched (spec:AST-094
+     * FR18), never claiming across a whole wider element.
+     */
+    get nativeTouchBehavior(): NativeTouchBehavior;
+    /**
+     * @internal Whether the edge zone depends on the viewport's width: the pan
+     * watches the right side, whose band moves with the viewport, so the host
+     * reports a viewport resize to it as well as its own box's (FR19, FR24).
+     */
+    get watchesViewport(): boolean;
+    /**
+     * @internal The view's box may have changed (a resize): its edges' sides
+     * and the edge zone are measured again, and a changed answer calls
+     * onTouchBehaviorChange.
+     */
+    layoutChanged(): void;
+    protected touchesBegan(touches: ReadonlyArray<GestureTouch>, event: GestureEventContext): void;
+    /**
+     * The physical sides the pan's edges resolve to under the view's writing
+     * direction, and the sides whose band the view lies within, measured
+     * together once until a layout change: the view starts at that side and
+     * reaches no farther than `edgeRegion` from it, within layout's rounding
+     * (a strip authored at the 40.2 px region lays out at 40.203 px, on
+     * 1/64 px). A view that cannot be measured lies within none.
+     */
+    private measured;
+    protected reset(): void;
+    private edgeAt;
+}
+export {};
+//# sourceMappingURL=ScreenEdgePanGestureRecognizer.d.ts.map

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

@@ -0,0 +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,CACpC;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,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;IAe/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/gestures/ScreenEdgePanGestureRecognizer.js

@@ -0,0 +1,220 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ScreenEdgePanGestureRecognizer.ts
+ * @input Touches from a GestureArena; the viewport size and writing
+ *   direction from its environment
+ * @output Exports ScreenEdgePanGestureRecognizer
+ *   (UIScreenEdgePanGestureRecognizer), its options and edge type
+ * @position Continuous recognizer of packages/core/src/gestures, a pan that
+ *   only starts from a band at the edge of the viewport
+ *
+ * A touch that lands outside every requested band fails at once, so a
+ * recognizer that requires this one to fail is not held up by a touch in the
+ * middle of the screen. Inside a band, the pan begins on movement away from
+ * that edge. `leading` and `trailing` resolve against the view's writing
+ * direction: under RTL the leading edge is the right one, as the
+ * interactive pop gesture's is.
+ *
+ * Attach it to the edge zone: an element that lies within the band at its
+ * edge. There the pan takes the horizontal axis from the browser, which has
+ * nothing to scroll in so thin a band, so a touch in the band decides at
+ * UIKit's 15 px screen-edge hysteresis. On any other view, whose
+ * `touch-action` cannot claim per touch, it leaves the browser every touch
+ * behavior, so the author's scrolling there is untouched, and a touch in the
+ * band decides at FR19's 10 px like every other claim (spec:AST-094 FR18,
+ * DEC-22). The edges' physical sides and the edge zone are measured once,
+ * together, and serve both the element's `touch-action` and the touch-down
+ * decision; the host reports a layout change (layoutChanged), and a changed
+ * answer is announced (onTouchBehaviorChange) so `touch-action` follows it
+ * (FR19). The writing direction is read again at each touch-down: a view
+ * switched to RTL in place, with no resize, is measured again there and the
+ * change announced, so a `leading` back swipe follows the new leading edge
+ * (`design:bidirectionality` DR13). That touch landed under the touch-action
+ * from before, so it decides at FR19's 10 px unless that one claimed the
+ * axis.
+ */
+
+import { UIKIT_PAN, UIKIT_SCREEN_EDGE_PAN } from "../motion/uikit/gestures.js";
+import { ALL_NATIVE_TOUCH } from "./GestureRecognizer.js";
+import { PanGestureRecognizer } from "./PanGestureRecognizer.js";
+/**
+ * How far past `edgeRegion` a view still counts as the edge zone, px: layout
+ * snaps sizes to 1/64 px, so a strip authored at the region measures a hair
+ * wider; half a pixel takes that and nothing a pixel wider.
+ */
+const EDGE_ZONE_TOLERANCE = 0.5;
+
+/**
+ * An edge by writing direction: under RTL the leading edge is the right one.
+ * Top and bottom edges land with their first user.
+ */
+
+/** A physical horizontal edge of the viewport. */
+
+/**
+ * What the pan measures of its view, once until a layout change: the
+ * writing direction it read, the physical sides its edges resolve to under
+ * that direction, and the sides whose band the view lies within.
+ */
+
+/**
+ * A screen-edge pan is a finger's: it takes no `allowedPointerTypes`
+ * (`spec:AST-094` FR43).
+ */
+
+export class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {
+  /** The physical edge the current gesture started from. */
+  activeEdge = null;
+  /**
+   * @internal Set by the host while attached: called when the edge-zone
+   * answer changes, so the element's `touch-action` follows it
+   * (spec:AST-094 FR19, DEC-22).
+   */
+  onTouchBehaviorChange = null;
+  /** The hysteresis where the pan takes its axis (UIKit's 15 px). */
+
+  /** What the pan measured of its view (see EdgeLayout), until a layout change. */
+  layout = null;
+  constructor(options = {}) {
+    super({
+      maximumNumberOfTouches: 1,
+      hysteresis: UIKIT_SCREEN_EDGE_PAN.hysteresis.value,
+      ...options,
+      // A finger's only: under a mouse, a trackpad or a pen the screen-edge
+      // pan stays off (`spec:AST-094` FR43), whatever a caller passes.
+      allowedPointerTypes: ['touch']
+    });
+    this.edges = options.edges ?? ['leading'];
+    this.edgeRegion = options.edgeRegion ?? UIKIT_SCREEN_EDGE_PAN.edgeRegion.value;
+    this.edgeHysteresis = this.hysteresis;
+  }
+
+  /**
+   * The pan takes the horizontal axis only in its edge zone, a view within
+   * the band of an edge it watches; elsewhere it leaves the browser every
+   * touch behavior, so the author's scrolling is untouched (spec:AST-094
+   * FR18), never claiming across a whole wider element.
+   */
+  get nativeTouchBehavior() {
+    const {
+      watched,
+      zone
+    } = this.measured();
+    if (!watched.some(edge => zone.has(edge))) {
+      return ALL_NATIVE_TOUCH;
+    }
+    return {
+      panX: false,
+      panY: true,
+      pinchZoom: true,
+      doubleTapZoom: false
+    };
+  }
+
+  /**
+   * @internal Whether the edge zone depends on the viewport's width: the pan
+   * watches the right side, whose band moves with the viewport, so the host
+   * reports a viewport resize to it as well as its own box's (FR19, FR24).
+   */
+  get watchesViewport() {
+    return this.measured().watched.includes('right');
+  }
+
+  /**
+   * @internal The view's box may have changed (a resize): its edges' sides
+   * and the edge zone are measured again, and a changed answer calls
+   * onTouchBehaviorChange.
+   */
+  layoutChanged() {
+    const before = this.layout;
+    this.layout = null;
+    const after = this.measured();
+    if (before == null || before.watched.join() !== after.watched.join() || before.zone.size !== after.zone.size || [...after.zone].some(edge => !before.zone.has(edge))) {
+      this.onTouchBehaviorChange?.();
+    }
+  }
+  touchesBegan(touches, event) {
+    if (this.numberOfTouches === touches.length) {
+      // The touch-action the browser applies to this touch was derived from
+      // the layout in force as it landed: whether that claimed the axis.
+      const inForce = this.measured();
+      const claimedAxis = inForce.watched.some(side => inForce.zone.has(side));
+      // A direction switched in place (no resize) moves the leading edge:
+      // measure again, and announce it so touch-action follows for the next
+      // touch (DR13).
+      if (inForce.isRtl !== this.environment.isRtl(this.view)) {
+        this.layoutChanged();
+      }
+      const edge = this.edgeAt(touches[0]);
+      if (edge == null) {
+        this.setState('failed');
+        return;
+      }
+      this.activeEdge = edge;
+      // On an element within the band, which takes the axis across the edge,
+      // a touch decides at UIKit's 15 px; on any other, which leaves the
+      // browser that axis, at FR19's 10 px, before the browser commits to a
+      // scroll (spec:AST-094 FR18, DEC-22). The answer is the one this
+      // touch's touch-action was derived from: a touch that measured again
+      // decides at 10 px unless the layout in force claimed the axis.
+      const offZone = !claimedAxis || !this.measured().zone.has(edge);
+      this.hysteresis = offZone ? Math.min(this.edgeHysteresis, UIKIT_PAN.hysteresis.value) : this.edgeHysteresis;
+      this.direction = edge === 'left' ? 'right' : 'left';
+    }
+    super.touchesBegan(touches, event);
+  }
+
+  /**
+   * The physical sides the pan's edges resolve to under the view's writing
+   * direction, and the sides whose band the view lies within, measured
+   * together once until a layout change: the view starts at that side and
+   * reaches no farther than `edgeRegion` from it, within layout's rounding
+   * (a strip authored at the 40.2 px region lays out at 40.203 px, on
+   * 1/64 px). A view that cannot be measured lies within none.
+   */
+  measured() {
+    if (this.layout != null) {
+      return this.layout;
+    }
+    const isRtl = this.environment.isRtl(this.view);
+    const watched = this.edges.map(edge => edge === 'leading' !== isRtl ? 'left' : 'right');
+    const zone = new Set();
+    const rect = this.environment.viewRect?.(this.view);
+    if (rect != null && rect.width > 0) {
+      const {
+        width
+      } = this.environment.viewportSize();
+      const right = rect.left + rect.width;
+      const band = this.edgeRegion + EDGE_ZONE_TOLERANCE;
+      if (rect.left >= -EDGE_ZONE_TOLERANCE && right <= band) {
+        zone.add('left');
+      }
+      if (rect.left >= width - band && right <= width + EDGE_ZONE_TOLERANCE) {
+        zone.add('right');
+      }
+    }
+    this.layout = {
+      isRtl,
+      watched,
+      zone
+    };
+    return this.layout;
+  }
+  reset() {
+    super.reset();
+    this.activeEdge = null;
+  }
+  edgeAt(touch) {
+    const {
+      width
+    } = this.environment.viewportSize();
+    for (const physical of this.measured().watched) {
+      const inBand = physical === 'left' ? touch.startX <= this.edgeRegion : touch.startX >= width - this.edgeRegion;
+      if (inBand) {
+        return physical;
+      }
+    }
+    return null;
+  }
+}