@astryxdesign/core 0.7.8 → 0.7.9-canary.0a64fdb

package/dist/privateAttributes/menuPressLit.stylex.js

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file privateAttributes/menuPressLit.stylex.ts
+ * @input The row that a held finger or pen lights in a menu
+ * @output Exports markMenuPressLit and clearMenuPressLit, which mark that row,
+ *   and isMenuPressLit, which reads the mark. It also exports
+ *   menuPressLitRowStyle, which paints the marked row. The hold pair,
+ *   holdMenuPressPaint and releaseMenuPressPaint, keeps the other rows off
+ *   their pressed paint, and isMenuPressPaintHeld reads that hold.
+ * @position Owner module of the private menu-press-lit attribute: the only
+ *   file that writes its name. The menu press model (hooks/useMenuPress.ts)
+ *   marks the row; DropdownMenu's rows compose the styles. No package entry
+ *   exports it.
+ *
+ * SYNC: Each row that composes menuPressLitRowStyle reads
+ *   `--_menu-row-focus-paint` in its `:focus` background, and a row with an
+ *   `:active` background reads `--_menu-row-active-paint` there:
+ * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+const MENU_PRESS_LIT = 'data-astryx-menu-press-lit';
+const ACTIVE_PAINT = '--_menu-row-active-paint';
+
+/** Marks `row` as the row that a held finger or pen lights. */
+export function markMenuPressLit(row) {
+  row.setAttribute(MENU_PRESS_LIT, '');
+}
+
+/** Removes the mark from `row`. */
+export function clearMenuPressLit(row) {
+  row.removeAttribute(MENU_PRESS_LIT);
+}
+
+/** Whether a held finger or pen lights `row`. */
+export function isMenuPressLit(row) {
+  return row.hasAttribute(MENU_PRESS_LIT);
+}
+
+/**
+ * Keeps `menu`'s rows off their `:active` paint while a held finger or pen
+ * presses in it. The row the press began on stays `:active` as the press
+ * moves on. The lit row keeps the pressed overlay through its own mark.
+ */
+export function holdMenuPressPaint(menu) {
+  menu.style.setProperty(ACTIVE_PAINT, 'transparent');
+}
+
+/** Gives `menu`'s rows their `:active` paint back. */
+export function releaseMenuPressPaint(menu) {
+  menu.style.removeProperty(ACTIVE_PAINT);
+}
+
+/** Whether a held finger or pen keeps `menu`'s rows off their `:active` paint. */
+export function isMenuPressPaintHeld(menu) {
+  return menu.style.getPropertyValue(ACTIVE_PAINT) !== '';
+}
+
+/**
+ * A value for each attribute state. The index signature gives StyleX the value
+ * type, which it cannot read from a literal attribute key.
+ */
+
+const litRowPaint = {
+  '--_menu-row-focus-paint': {
+    default: null,
+    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
+  },
+  '--_menu-row-active-paint': {
+    default: null,
+    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
+  }
+};
+const styles = {
+  row: {
+    "--_menu-row-focus-paint": "x1ar3rj9",
+    "--_menu-row-active-paint": "xcukuoe",
+    $$css: true
+  }
+};
+
+/**
+ * Compose on a menu row whose `:focus` background is
+ * `var(--_menu-row-focus-paint, <hover overlay>)`, and whose `:active`
+ * background, if any, is `var(--_menu-row-active-paint, <pressed overlay>)`.
+ * The row paints the hover overlay on focus, and the pressed overlay while a
+ * held finger or pen lights it.
+ * Under a finger, the hover overlay is too faint to follow. The variable has
+ * no default: a layered stylesheet emits a default unlayered, and it would
+ * beat the attribute arm. The value resolves on the row, so a theme set on any
+ * ancestor applies. The style sets only a custom property, which shares no
+ * key with StyleX's CSS property type, so TypeScript needs the wider type.
+ */
+export const menuPressLitRowStyle = styles.row;

package/dist/privateAttributes/press.stylex.d.ts

@@ -0,0 +1,139 @@
+/**
+ * @file privateAttributes/press.stylex.ts
+ * @input StyleX, the semantic overlay color tokens, the touch press strength
+ *   (`pressVars`, utils/interactionOverlay.stylex.ts) and the row layer's
+ *   clocks (utils/rowPressLayer.stylex.ts)
+ * @output `rowPressLayerStyles`: the compositor press layer for list rows
+ *   (`cell`) and its own-image arms for a row on the `backgroundImage`
+ *   variant (`cellOnImage`)
+ * @position Owner module of the private press attribute for the row layer:
+ *   the press controller (utils/pressFeedback.ts) writes the attribute, and
+ *   this file reads it. No package entry exports it. Item and TreeList
+ *   compose these styles after their overlay variant;
+ *   utils/interactionOverlay.cell.test.ts tests them.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const rowPressLayerStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", unknown>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
+        readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate" | null>;
+        readonly '::before': stylex.StyleXClassNameFor<"::before", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "\"\"";
+                    };
+                };
+            };
+            readonly position: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "absolute";
+                };
+            };
+            readonly inset: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": 0;
+                };
+            };
+            readonly zIndex: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": -1;
+                };
+            };
+            readonly borderRadius: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "inherit";
+                };
+            };
+            readonly pointerEvents: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "none";
+                };
+            };
+            readonly backgroundColor: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": stylex.StyleXVar<"light-dark(#05365919, #FFFFFF19)">;
+                };
+            };
+            readonly opacity: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"on\"]": 1;
+                    readonly "[data-astryx-press=\"fading\"]": 0;
+                };
+            };
+            readonly animationName: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly "[data-astryx-press=\"fading\"]": string;
+                    };
+                };
+            };
+            readonly animationDuration: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": {
+                        readonly default: string;
+                        readonly "@media (prefers-reduced-motion: reduce)": string;
+                    };
+                };
+            };
+            readonly animationTimingFunction: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": string;
+                };
+            };
+            readonly animationFillMode: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly "[data-astryx-press=\"fading\"]": "both";
+                };
+            };
+        }>;
+    }>;
+    readonly cellWithoutLayer: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none">;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", unknown>;
+        readonly isolation: stylex.StyleXClassNameFor<"isolation", "auto" | null>;
+        readonly '::before': stylex.StyleXClassNameFor<"::before", {
+            readonly content: {
+                readonly default: null;
+                readonly "@media (pointer: coarse)": {
+                    readonly default: null;
+                    readonly ":where(:not(:disabled,[aria-disabled=\"true\"]))": {
+                        readonly default: null;
+                        readonly ":is([data-astryx-press=\"on\"],[data-astryx-press=\"fading\"])": "none";
+                    };
+                };
+            };
+        }>;
+    }>;
+    readonly cellOnImage: Readonly<{
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
+    }>;
+}>;
+//# sourceMappingURL=press.stylex.d.ts.map

package/dist/privateAttributes/press.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"press.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/press.stylex.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAsD3C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyK9B,CAAC"}

package/dist/privateAttributes/press.stylex.js

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/* eslint-disable @astryx/no-hover-on-disabled -- Every hover branch is
+ * nested beneath ENABLED below, as in interactionOverlay.stylex.ts. */
+
+/**
+ * @file privateAttributes/press.stylex.ts
+ * @input StyleX, the semantic overlay color tokens, the touch press strength
+ *   (`pressVars`, utils/interactionOverlay.stylex.ts) and the row layer's
+ *   clocks (utils/rowPressLayer.stylex.ts)
+ * @output `rowPressLayerStyles`: the compositor press layer for list rows
+ *   (`cell`) and its own-image arms for a row on the `backgroundImage`
+ *   variant (`cellOnImage`)
+ * @position Owner module of the private press attribute for the row layer:
+ *   the press controller (utils/pressFeedback.ts) writes the attribute, and
+ *   this file reads it. No package entry exports it. Item and TreeList
+ *   compose these styles after their overlay variant;
+ *   utils/interactionOverlay.cell.test.ts tests them.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+import "../utils/interactionOverlay.stylex.js";
+import { pressVars } from "../utils/interactionOverlay.stylex.js";
+import "../utils/rowPressLayer.stylex.js";
+import { cellPressConsts } from "../utils/rowPressLayer.stylex.js";
+
+// The overlay's arm selectors (interactionOverlay.stylex.ts), restated here:
+// StyleX resolves a style's keys within its own file.
+const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
+const HOVER_HOVER = '@media (hover: hover)';
+const COARSE = '@media (pointer: coarse)';
+const PRESSED_ON = '[data-astryx-press="on"]';
+const PRESSED_FADING = '[data-astryx-press="fading"]';
+/**
+ * A press in any of its states: the row layer exists only then, so at rest a
+ * row's own `::before` and its stacking are untouched.
+ */
+const PRESSED_ANY = ':is([data-astryx-press="on"],[data-astryx-press="fading"])';
+const PRESS_ALPHA = pressVars['--astryx-press-alpha'];
+const hoverImage = `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`;
+const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
+/** The overlay's paint, read back off the element (its gradient layer). */
+const pressedOverlayImage = 'var(--_press-paint-image)';
+
+/**
+ * The overlay's strength release (interactionOverlay.stylex.ts), restated so
+ * a fine pointer keeps it: the same keyframes, so the same animation.
+ */
+const pressRelease = "x10jkm1t-B";
+
+/**
+ * The row layer's clock as CSS. It is the strength release's clock, scaled
+ * by the theme's `--_astryx-motion-tempo` up to 1.5, so the layer and the
+ * strength land together.
+ */
+const CELL_RELEASE = `calc(${cellPressConsts.cellReleaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
+/** The same clock under Reduce Motion: a tempo may shorten it, never lengthen it. */
+const CELL_RELEASE_REDUCED = `min(${cellPressConsts.cellReleaseMs}ms, calc(${cellPressConsts.cellReleaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+const REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
+
+/** Opacity 1 → 0: the row layer leaves; its fading arm runs it. */
+const cellRelease = "x1jn504y-B";
+
+/** The release's curve: the table's gentle ease-out. */
+const RELEASE_EASE = cellPressConsts.cellReleaseEase;
+export const rowPressLayerStyles = {
+  cell: {
+    kKwaWg: "x7ngsy6 x10ogxw0 xubczrd x18xnkjv",
+    kKVMdj: "x14e4jsf x6su2wr",
+    kHBbk8: "xif6eam",
+    kgeoSG: "x1ocadqd",
+    kEoFBp: "x1ukh9kf",
+    kFcpXp: "xrkptjy",
+    kxmVGU: "xjscm90",
+    kPB484: "x1kec4ew",
+    km8f2m: "x13r5q6d",
+    kLkRvE: "x1dn949c",
+    k5QlbN: "xw7rim2 xr9xsjc",
+    k7EzDT: "x1bxn267",
+    kQZAMR: "x16lp0i7 x1bf026e",
+    kZiNAr: "x1gyhjqm",
+    k8Tatv: "x1dn5vsf",
+    $$css: true
+  },
+  cellWithoutLayer: {
+    kKwaWg: "x18o3ruo",
+    kKVMdj: "x14e4jsf",
+    kHBbk8: "xrqzsdu",
+    kgeoSG: "x1995whq",
+    $$css: true
+  },
+  cellOnImage: {
+    kKwaWg: "x7uyq82 x3f84ok x7ngsy6 x10ogxw0 xubczrd x18xnkjv xmvprkv xetgvay",
+    $$css: true
+  }
+};

package/dist/theme/tokens.stylex.d.ts

@@ -15,7 +15,7 @@
  */
 import * as stylex from '@stylexjs/stylex';
 export declare const colorDefaults: {
-    readonly '--color-accent': "light-dark(#0064E0, #2694FE)";
+    readonly '--color-accent': "light-dark(#0064E0, #0171E3)";
     readonly '--color-accent-muted': "light-dark(#0082FB33, #0082FB3F)";
     readonly '--color-on-accent': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-neutral': "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))";
@@ -115,7 +115,7 @@ export declare const colorDefaults: {
     readonly '--color-text-yellow': "light-dark(#753F07, #FBCE03)";
 };
 export declare const colorVars: stylex.VarGroup<Readonly<{
-    readonly '--color-accent': "light-dark(#0064E0, #2694FE)";
+    readonly '--color-accent': "light-dark(#0064E0, #0171E3)";
     readonly '--color-accent-muted': "light-dark(#0082FB33, #0082FB3F)";
     readonly '--color-on-accent': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-neutral': "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))";

package/dist/theme/tokens.stylex.js

@@ -24,7 +24,7 @@ import * as stylex from '@stylexjs/stylex';
 
 export const colorDefaults = {
   // Core semantic
-  '--color-accent': 'light-dark(#0064E0, #2694FE)',
+  '--color-accent': 'light-dark(#0064E0, #0171E3)',
   '--color-accent-muted': 'light-dark(#0082FB33, #0082FB3F)',
   '--color-on-accent': 'light-dark(#FFFFFF, #FFFFFF)',
   '--color-neutral': 'light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))',

package/dist/utils/flatTree.d.ts

@@ -1,11 +1,12 @@
 /**
  * @file flatTree.ts
  * @input A DOM node
- * @output Exports parentAcrossShadow, and containsAlongFlatTree, which walks it
+ * @output Exports parentAcrossShadow, containsAlongFlatTree, which walks it,
+ *   and deepActiveElement
  * @position The flat-tree parent the browser scrolls and dispatches
- *   through, shared by the gesture host's native-scroll probe and the
+ *   through, shared by the gesture host's native-scroll probe, the
  *   selection lock (which the press feedback controller uses without the
- *   gesture system)
+ *   gesture system) and the Layer module's input hold
  */
 /** The node's parent, crossing out of shadow roots. */
 export declare function parentAcrossShadow(node: Node): Node | null;
@@ -14,4 +15,6 @@ export declare function parentAcrossShadow(node: Node): Node | null;
  * shadow root to its host, which `Node.contains` does not follow.
  */
 export declare function containsAlongFlatTree(ancestor: Node, node: Node): boolean;
+/** The focused element of `doc`, inside open shadow roots too. */
+export declare function deepActiveElement(doc: Document | null | undefined): Element | null;
 //# sourceMappingURL=flatTree.d.ts.map

package/dist/utils/flatTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flatTree.d.ts","sourceRoot":"","sources":["../../src/utils/flatTree.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,uDAAuD;AACvD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAa1D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAOzE"}
+{"version":3,"file":"flatTree.d.ts","sourceRoot":"","sources":["../../src/utils/flatTree.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,uDAAuD;AACvD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAa1D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAOzE;AAED,kEAAkE;AAClE,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS,GAC/B,OAAO,GAAG,IAAI,CAMhB"}

package/dist/utils/flatTree.js

@@ -3,11 +3,12 @@
 /**
  * @file flatTree.ts
  * @input A DOM node
- * @output Exports parentAcrossShadow, and containsAlongFlatTree, which walks it
+ * @output Exports parentAcrossShadow, containsAlongFlatTree, which walks it,
+ *   and deepActiveElement
  * @position The flat-tree parent the browser scrolls and dispatches
- *   through, shared by the gesture host's native-scroll probe and the
+ *   through, shared by the gesture host's native-scroll probe, the
  *   selection lock (which the press feedback controller uses without the
- *   gesture system)
+ *   gesture system) and the Layer module's input hold
  */
 
 /** The node's parent, crossing out of shadow roots. */
@@ -35,4 +36,13 @@ export function containsAlongFlatTree(ancestor, node) {
     }
   }
   return false;
+}
+
+/** The focused element of `doc`, inside open shadow roots too. */
+export function deepActiveElement(doc) {
+  let active = doc?.activeElement ?? null;
+  while (active?.shadowRoot?.activeElement != null) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
 }

package/dist/utils/hitArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hitArea.d.ts","sourceRoot":"","sources":["../../src/utils/hitArea.ts"],"names":[],"mappings":"AA6BA,+BAA+B;AAC/B,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,SAAkD,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAmCX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,MAAyB,GACjC,SAAS,CA4CX;AAYD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7B,OAAO,GAAE,MAAyB,GACjC,MAAM,CAoBR;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,CAI5E;AAmdD,iCAAiC;AACjC,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,EACrC,EAAC,OAA0B,EAAC,GAAE,mBAAwB,GACrD,MAAM,IAAI,CAyDZ"}
+{"version":3,"file":"hitArea.d.ts","sourceRoot":"","sources":["../../src/utils/hitArea.ts"],"names":[],"mappings":"AAgCA,+BAA+B;AAC/B,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,SAAkD,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAmCX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,MAAyB,GACjC,SAAS,CA4CX;AAYD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7B,OAAO,GAAE,MAAyB,GACjC,MAAM,CAoBR;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,CAI5E;AAsjBD,iCAAiC;AACjC,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,EACrC,EAAC,OAA0B,EAAC,GAAE,mBAAwB,GACrD,MAAM,IAAI,CAyDZ"}

package/dist/utils/hitArea.js

@@ -24,6 +24,9 @@
 // live control measures: only under a coarse primary pointer (AST-094), only on
 // screen, and in one read pass per frame within a 4 ms budget. Until the first
 // pass the insets are 0, so first paint never overlaps anything.
+// The insets are lengths in the control's own box, so a pass measures in its
+// layout px. A layer that opens from a smaller scale then keeps the insets of
+// the size it settles at.
 import { observeContent } from "./sharedMutationObserver.js";
 
 /** A rect in client pixels. */
@@ -263,6 +266,74 @@ function plainRect(element) {
     bottom
   };
 }
+
+/** A box that the transforms around it leave at its layout size. */
+const UNSCALED = {
+  x: 1,
+  y: 1
+};
+
+/** One axis of a box's scale on screen: its client size over its layout size. */
+function axisScale(onScreen, layout) {
+  if (!(layout > 0) || !(onScreen > 0)) {
+    return 1;
+  }
+  const scale = onScreen / layout;
+  // Within rounding of 1 the box is at its layout size: no change to the rects.
+  return Math.abs(scale - 1) < 1e-3 ? 1 : scale;
+}
+
+/**
+ * How far the transforms around `element` scale its box on screen, per axis.
+ * A layer that opens from a smaller scale scales every rect inside it, while
+ * the layout box keeps the size the layer settles at. Only a scale is
+ * expected: a rotated or skewed box would read as a larger scale.
+ */
+function screenScale(element, onScreen) {
+  // The offset size is the layout size in whole pixels, unaffected by
+  // transforms, and costs no style resolution. A box with none, such as an SVG
+  // element or a jsdom box, reads as unscaled.
+  const box = element;
+  const offsetWidth = box.offsetWidth ?? 0;
+  const offsetHeight = box.offsetHeight ?? 0;
+  if (offsetWidth === 0 || offsetHeight === 0) {
+    return UNSCALED;
+  }
+  // Within a pixel of its layout size the box reads as unscaled, which bounds
+  // the inset error at about a pixel. Only a box that a transform shrinks or
+  // grows reads its exact size from the computed style.
+  if (Math.abs(onScreen.right - onScreen.left - offsetWidth) <= 1 && Math.abs(onScreen.bottom - onScreen.top - offsetHeight) <= 1) {
+    return UNSCALED;
+  }
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (style == null || !style.width.endsWith('px')) {
+    return UNSCALED;
+  }
+  const px = value => Number.parseFloat(value) || 0;
+  const isContentBox = style.boxSizing !== 'border-box';
+  const width = px(style.width) + (isContentBox ? px(style.paddingLeft) + px(style.paddingRight) + px(style.borderLeftWidth) + px(style.borderRightWidth) : 0);
+  const height = px(style.height) + (isContentBox ? px(style.paddingTop) + px(style.paddingBottom) + px(style.borderTopWidth) + px(style.borderBottomWidth) : 0);
+  return {
+    x: axisScale(onScreen.right - onScreen.left, width),
+    y: axisScale(onScreen.bottom - onScreen.top, height)
+  };
+}
+
+/**
+ * `rect` in the layout px of the box at `origin`: its offset from `origin`,
+ * divided by that box's scale on screen.
+ */
+function inLayout(rect, origin, scale) {
+  if (scale.x === 1 && scale.y === 1) {
+    return rect;
+  }
+  return {
+    left: origin.left + (rect.left - origin.left) / scale.x,
+    top: origin.top + (rect.top - origin.top) / scale.y,
+    right: origin.left + (rect.right - origin.left) / scale.x,
+    bottom: origin.top + (rect.bottom - origin.top) / scale.y
+  };
+}
 /** The watched element `element` belongs to, if any (itself included). */
 function watchedOwner(element) {
   for (let node = element; node != null; node = node.parentElement) {
@@ -297,14 +368,15 @@ function readCandidates(doc) {
 /** A control's rect and clamped insets, from candidates already read. */
 function measureOne(watch, candidates) {
   const target = plainRect(watch.element);
+  const scale = screenScale(watch.element, target);
   // Two targets each growing up to half the minimum reach each other from a
   // minimum apart.
   const reach = Math.max(0, watch.minSize);
   const band = grown(target, {
-    top: reach,
-    right: reach,
-    bottom: reach,
-    left: reach
+    top: reach * scale.y,
+    right: reach * scale.x,
+    bottom: reach * scale.y,
+    left: reach * scale.x
   });
   const neighbours = candidates.filter(({
     element,
@@ -314,7 +386,12 @@ function measureOne(watch, candidates) {
   }) => rect);
   return {
     target,
-    insets: clampedHitInsets(target, neighbours, watch.minSize),
+    // The insets are in the control's layout px. The returned rects stay in
+    // screen px for a touch's distance checks. A neighbour maps by the
+    // control's scale, as if it is in the same layer. A neighbour outside that
+    // layer then reads farther away. A touch compares screen distances, so it
+    // still counts that neighbour.
+    insets: clampedHitInsets(inLayout(target, target, scale), neighbours.map(rect => inLayout(rect, target, scale)), watch.minSize),
     neighbours
   };
 }

package/dist/utils/inputStream.d.ts

@@ -6,12 +6,25 @@ export interface InputSubscriptionOptions {
      * @default false
      */
     readonly cancels?: boolean;
+    /**
+     * The subscriber runs before every subscriber that is not first. When it
+     * returns `true`, no later subscriber hears the event.
+     * @default false
+     */
+    readonly first?: boolean;
 }
 /** The events a window's capture phase sees: its own, and the document's. */
 export type InputEventMap = WindowEventMap & DocumentEventMap;
+/**
+ * The type of the latest pointer event `view`'s stream delivered: `mouse`,
+ * `pen` or `touch`, or `null` before any. The stream hears a pointer event
+ * type only while a subscriber listens to it, as press feedback does on any
+ * page with a pressable. Reading it adds no listener.
+ */
+export declare function getLastPointerType(view: Window): string | null;
 /**
  * Listen to `type` on `view`'s capture phase through its shared native
  * listener. Returns the unsubscribe; calling it again does nothing.
  */
-export declare function subscribeInput<K extends keyof InputEventMap>(view: Window, type: K, listener: (event: InputEventMap[K]) => void, { cancels }?: InputSubscriptionOptions): () => void;
+export declare function subscribeInput<K extends keyof InputEventMap>(view: Window, type: K, listener: (event: InputEventMap[K]) => unknown, { cancels, first }?: InputSubscriptionOptions): () => void;
 //# sourceMappingURL=inputStream.d.ts.map

package/dist/utils/inputStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputStream.d.ts","sourceRoot":"","sources":["../../src/utils/inputStream.ts"],"names":[],"mappings":"AA4CA,0CAA0C;AAC1C,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1D,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,EAAC,OAAe,EAAC,GAAE,wBAA6B,GAC/C,MAAM,IAAI,CAoCZ"}
+{"version":3,"file":"inputStream.d.ts","sourceRoot":"","sources":["../../src/utils/inputStream.ts"],"names":[],"mappings":"AAgDA,0CAA0C;AAC1C,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAM9D;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAE9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1D,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,OAAO,EAC9C,EAAC,OAAe,EAAE,KAAa,EAAC,GAAE,wBAA6B,GAC9D,MAAM,IAAI,CA4CZ"}