@multiplatform.one/theme 7.81.0 → 7.81.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.81.0",
+  "version": "7.81.2",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.81.0",
-    "@multiplatform.one/store": "^7.81.0",
+    "@multiplatform.one/platform": "^7.81.2",
+    "@multiplatform.one/store": "^7.81.2",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.81.0",
-    "@multiplatform.one/test-utils": "7.81.0",
+    "@multiplatform.one/config": "7.81.2",
+    "@multiplatform.one/test-utils": "7.81.2",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/overlaySurfaces.tsx

@@ -28,9 +28,11 @@ import {
 export const overlayScrim = "$shadow4" as const;
 
 /**
- * A sheet's grabber (HIG, FZ-8557): a 36×5 capsule inside the sheet's top
- * edge, 6pt down, drawn over the frame rather than floating on the scrim.
- * Spread on `Sheet.Handle`; the frame keeps `sheetGrabberClearance` clear.
+ * A sheet's grabber (HIG, FZ-8557, FZ-8648): a 36×5 capsule 5pt inside the
+ * sheet's top edge, drawn over the frame rather than floating on the scrim.
+ * Its margins net to no height, so it lands the same on a web `Sheet.Handle`
+ * laid out above the frame and on a native grab zone's first child. The one
+ * recipe for every sheet: spread it and set nothing else.
  */
 export const sheetGrabber = {
   width: 36,
@@ -40,14 +42,21 @@ export const sheetGrabber = {
   opacity: 0.45,
   alignSelf: "center",
   marginHorizontal: 0,
-  marginTop: 0,
-  marginBottom: -11,
+  marginTop: 5,
+  marginBottom: -10,
   zIndex: 10,
 } as const;
 
 /** The top inset a sheet's content keeps clear of its grabber. */
 export const sheetGrabberClearance = 16;
 
+/** A native sheet's grab zone, the target around `sheetGrabber`. */
+export const sheetGrabberZone = {
+  alignSelf: "stretch",
+  alignItems: "center",
+  height: 21,
+} as const;
+
 // ── Overlay frame focus (LC-71) ──────────────────────────────────────────
 // Radix Dialog.Content / Primer Dialog are tabIndex=-1 and auto-focused on
 // open. The frame is not a control: UA :focus-visible must not ring the

package/src/theme/sheetGrabber.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { sheetGrabber, sheetGrabberClearance, sheetGrabberZone } from "./overlaySurfaces";
+
+describe("sheetGrabber (FZ-8648)", () => {
+  it("is the HIG capsule, 36×5 and 5pt inside the sheet's top edge", () => {
+    expect(sheetGrabber).toMatchObject({ width: 36, height: 5, marginTop: 5, alignSelf: "center" });
+  });
+
+  it("takes no height, so it lands the same above a frame and inside a grab zone", () => {
+    expect(sheetGrabber.marginTop + sheetGrabber.height + sheetGrabber.marginBottom).toBe(0);
+  });
+
+  it("clears a frame's content and fits its grab zone", () => {
+    const end = sheetGrabber.marginTop + sheetGrabber.height;
+    expect(sheetGrabberClearance).toBeGreaterThan(end);
+    expect(sheetGrabberZone.height).toBeGreaterThan(end);
+  });
+});

package/src/theme/theme.tsx

@@ -19,6 +19,7 @@ import { defaultPreset } from "./presets";
 import { ScaleStyles } from "./scale/ScaleStyles";
 import { useActiveScale } from "./scale/useActiveScale";
 import { type ThemeConfig, getPreset } from "./shared";
+import { touchManipulationCss } from "./touchManipulation";
 import { useSchemePreference } from "./useSchemePreference";
 
 /**
@@ -168,6 +169,7 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
       "::view-transition-old(root), ::view-transition-new(root) {",
       "  animation-duration: calc(var(--mp-transition) * 1);",
       "}",
+      touchManipulationCss,
     ].join("\n");
     document.head.appendChild(style);
   }, []);

package/src/theme/touchManipulation.ts

@@ -0,0 +1,27 @@
+/**
+ * LC-196 TOUCH-MANIPULATION: every web pressable sets `touch-action:
+ * manipulation` so a tap fires without the double-tap-zoom wait, while pinch
+ * zoom stays on. ThemeProvider injects this once with its global styles.
+ * `:where()` keeps it at zero specificity so a drag surface that sets its own
+ * `touch-action: none` still wins. `button` sits outside it at element
+ * specificity because the Tamagui reset's `button { all: unset }` would
+ * otherwise put it back to `auto`; this sheet is appended after the reset.
+ */
+export const pressableSelectors = [
+  "a[href]",
+  "summary",
+  "label[for]",
+  '[role="button"]',
+  '[role="link"]',
+  '[role="tab"]',
+  '[role="menuitem"]',
+  '[role="menuitemradio"]',
+  '[role="menuitemcheckbox"]',
+  '[role="option"]',
+  '[role="switch"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[tabindex="0"]',
+] as const;
+
+export const touchManipulationCss = `:where(${pressableSelectors.join(", ")}),\nbutton {\n  touch-action: manipulation;\n}`;

package/types/theme/overlaySurfaces.d.ts

@@ -8,9 +8,11 @@ import { type DialogContentProps as TamaguiDialogContentProps, type SizeTokens,
  */
 export declare const overlayScrim: "$shadow4";
 /**
- * A sheet's grabber (HIG, FZ-8557): a 36×5 capsule inside the sheet's top
- * edge, 6pt down, drawn over the frame rather than floating on the scrim.
- * Spread on `Sheet.Handle`; the frame keeps `sheetGrabberClearance` clear.
+ * A sheet's grabber (HIG, FZ-8557, FZ-8648): a 36×5 capsule 5pt inside the
+ * sheet's top edge, drawn over the frame rather than floating on the scrim.
+ * Its margins net to no height, so it lands the same on a web `Sheet.Handle`
+ * laid out above the frame and on a native grab zone's first child. The one
+ * recipe for every sheet: spread it and set nothing else.
  */
 export declare const sheetGrabber: {
     readonly width: 36;
@@ -20,12 +22,18 @@ export declare const sheetGrabber: {
     readonly opacity: 0.45;
     readonly alignSelf: "center";
     readonly marginHorizontal: 0;
-    readonly marginTop: 0;
-    readonly marginBottom: -11;
+    readonly marginTop: 5;
+    readonly marginBottom: -10;
     readonly zIndex: 10;
 };
 /** The top inset a sheet's content keeps clear of its grabber. */
 export declare const sheetGrabberClearance = 16;
+/** A native sheet's grab zone, the target around `sheetGrabber`. */
+export declare const sheetGrabberZone: {
+    readonly alignSelf: "stretch";
+    readonly alignItems: "center";
+    readonly height: 21;
+};
 type OpenAutoFocus = (event: Event) => void;
 /**
  * The house open focus for a raw `Dialog.Content`, which `DialogContent` and

package/types/theme/overlaySurfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlaySurfaces.d.ts","sourceRoot":"","sources":["../../src/theme/overlaySurfaces.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAOL,KAAK,kBAAkB,IAAI,yBAAyB,EAEpD,KAAK,UAAU,EACf,KAAK,cAAc,EAEpB,MAAM,SAAS,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AA6DxC,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAmC5C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAG9F;AAID,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,wBAAgB,sBAAsB,IAAI,wBAAwB,CAEjE;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAQD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa;eAJb,SAAS;WACb,UAAU;kDAcjB,CAAC;AA8DH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;eAEiB,SAAS;kDAelD,CAAC;AAOH,eAAO,MAAM,kBAAkB;eA5GlB,SAAS;WACb,UAAU;kDAqHlB,CAAC;AAgCF,eAAO,MAAM,kBAAkB;;;;;;;;eAEY,SAAS;kDAelD,CAAC;AAiBH,eAAO,MAAM,cAAc;eALd,SAAS;IACpB,iEAAiE;sBAC/C,aAAa;kDA0BhC,CAAC"}
+{"version":3,"file":"overlaySurfaces.d.ts","sourceRoot":"","sources":["../../src/theme/overlaySurfaces.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAOL,KAAK,kBAAkB,IAAI,yBAAyB,EAEpD,KAAK,UAAU,EACf,KAAK,cAAc,EAEpB,MAAM,SAAS,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAC;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,oEAAoE;AACpE,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AA6DX,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAmC5C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAG9F;AAID,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,wBAAgB,sBAAsB,IAAI,wBAAwB,CAEjE;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAQD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa;eAJb,SAAS;WACb,UAAU;kDAcjB,CAAC;AA8DH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;eAEiB,SAAS;kDAelD,CAAC;AAOH,eAAO,MAAM,kBAAkB;eA5GlB,SAAS;WACb,UAAU;kDAqHlB,CAAC;AAgCF,eAAO,MAAM,kBAAkB;;;;;;;;eAEY,SAAS;kDAelD,CAAC;AAiBH,eAAO,MAAM,cAAc;eALd,SAAS;IACpB,iEAAiE;sBAC/C,aAAa;kDA0BhC,CAAC"}

package/types/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAG1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,EAAE,KAAK,WAAW,EAAa,MAAM,UAAU,CAAC;AAGvD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAkBD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CA2GvB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAG1B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,EAAE,KAAK,WAAW,EAAa,MAAM,UAAU,CAAC;AAIvD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAkBD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CA4GvB"}

package/types/theme/touchManipulation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * LC-196 TOUCH-MANIPULATION: every web pressable sets `touch-action:
+ * manipulation` so a tap fires without the double-tap-zoom wait, while pinch
+ * zoom stays on. ThemeProvider injects this once with its global styles.
+ * `:where()` keeps it at zero specificity so a drag surface that sets its own
+ * `touch-action: none` still wins. `button` sits outside it at element
+ * specificity because the Tamagui reset's `button { all: unset }` would
+ * otherwise put it back to `auto`; this sheet is appended after the reset.
+ */
+export declare const pressableSelectors: readonly ["a[href]", "summary", "label[for]", "[role=\"button\"]", "[role=\"link\"]", "[role=\"tab\"]", "[role=\"menuitem\"]", "[role=\"menuitemradio\"]", "[role=\"menuitemcheckbox\"]", "[role=\"option\"]", "[role=\"switch\"]", "[role=\"checkbox\"]", "[role=\"radio\"]", "[tabindex=\"0\"]"];
+export declare const touchManipulationCss: string;
+//# sourceMappingURL=touchManipulation.d.ts.map

package/types/theme/touchManipulation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchManipulation.d.ts","sourceRoot":"","sources":["../../src/theme/touchManipulation.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,oSAerB,CAAC;AAEX,eAAO,MAAM,oBAAoB,QAA0F,CAAC"}