@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2

package/dist/Slider/useSliderTouch.d.ts

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

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

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

package/dist/Slider/useSliderTouch.js

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

package/dist/Switch/Switch.d.ts

@@ -135,7 +135,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
     status?: InputStatus;
     /**
      * Size variant controlling track and thumb dimensions.
-     * - 'sm': 34x20px (matches sm checkbox/radio vertical rhythm)
+     * - 'sm': 32x20px (matches sm checkbox/radio vertical rhythm)
      * - 'md': 40x24px (default, matches md checkbox/radio vertical rhythm)
      * @default 'md'
      */

package/dist/Switch/Switch.d.ts.map

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

package/dist/Switch/Switch.js

@@ -15,10 +15,10 @@
  * - /apps/storybook/stories/Switch.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Switch/ (showcase blocks)
  */
-import { useId, useOptimistic, useTransition, useEffect, useRef } from 'react';
+import { Fragment, useId, useMemo, useOptimistic, useTransition, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, focusVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, focusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { FieldLabel } from "../Field/FieldLabel.js";
 import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { Spinner } from "../Spinner/index.js";
@@ -26,7 +26,6 @@ import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import "./switch.markers.stylex.js";
 import { switchFocusInput, switchScope } from "./switch.markers.stylex.js";
-import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
@@ -34,21 +33,54 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Switch/Switch.generated.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerEnglishFallback(english);
-const wrapperSizeStyles = {
-  sm: {
-    kzqmXN: "x1td3qas",
-    kZKoxP: "x1qx5ct2",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x100vrsf",
-    kZKoxP: "xxk0z11",
-    $$css: true
-  }
+import "../utils/interactionOverlay.stylex.js";
+import { interactionOverlayStyles, pressConsts, pressVars } from "../utils/interactionOverlay.stylex.js";
+import { pressHoldsDragProps } from "../privateAttributes/pressHoldsDrag.stylex.js";
+import { useSwitchTouch } from "./useSwitchTouch.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
+
+/**
+ * The track box of each size, px (width × height), for the touch
+ * presentation's thumb geometry.
+ * SYNC: wrapperSizeStyles and trackSizeStyles below.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TRACK_SIZE = {
+  sm: [32, 20],
+  md: [40, 24]
 };
-const inputSizeStyles = {
+
+/**
+ * A finger: utils/touchPresentation.ts's TOUCH_QUERY. The touch presentation
+ * is one model on every touch device: the lift, tracking, flip rule and
+ * springs sit under it alone.
+ * SYNC: utils/touchPresentation.ts TOUCH_QUERY.
+ */
+const TOUCH = '@media (pointer: coarse)';
+
+/** The press controller's two states on the row it writes to. */
+const PRESS_ON = '[data-astryx-press="on"]';
+const PRESS_FADING = '[data-astryx-press="fading"]';
+
+/**
+ * The shared press release, for the press layers the switch fades on the
+ * compositor. The clock scales by the theme's tempo, and the curve is the
+ * controller's own. Switch.test.tsx compares the two.
+ * SYNC: utils/interactionOverlay.stylex.ts PRESS_RELEASE_DURATION,
+ * PRESS_RELEASE_DURATION_REDUCED and RELEASE_EASE.
+ */
+const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
+const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+const PRESS_RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
+
+// The measured hit insets (utils/hitArea), 0 until measured.
+const HIT_TOP = 'var(--astryx-hit-inset-top, 0px)';
+const HIT_RIGHT = 'var(--astryx-hit-inset-right, 0px)';
+const HIT_BOTTOM = 'var(--astryx-hit-inset-bottom, 0px)';
+const HIT_LEFT = 'var(--astryx-hit-inset-left, 0px)';
+const wrapperSizeStyles = {
   sm: {
     kzqmXN: "x1td3qas",
     kZKoxP: "x1qx5ct2",
@@ -60,6 +92,10 @@ const inputSizeStyles = {
     $$css: true
   }
 };
+
+// Every touch value sits in the same property as the mouse value, as a
+// nested condition, never in a later style. A later style that names a
+// property replaces all of it, mouse value included.
 const trackSizeStyles = {
   sm: {
     kzqmXN: "x1td3qas",
@@ -74,17 +110,24 @@ const trackSizeStyles = {
     $$css: true
   }
 };
+
+// The thumb is one circle under any pointer, at each state's size. Under a
+// finger it rests by insets instead of a transform, centered in the track's
+// height at each end. So the compositor moves and lifts it with translate and
+// scale alone; useSwitchTouch measures the box it renders.
 const thumbOffSizeStyles = {
   sm: {
     kzqmXN: "x6jxa94",
     kZKoxP: "x1v9usgg",
-    k3aq6I: "xbryuvx",
+    kLqNvP: "x13kxlb5",
+    k3aq6I: "xbryuvx xhyyqqw",
     $$css: true
   },
   md: {
     kzqmXN: "x1kky2od",
     kZKoxP: "xlup9mm",
-    k3aq6I: "xbryuvx",
+    kLqNvP: "xsprn4g",
+    k3aq6I: "xbryuvx xhyyqqw",
     $$css: true
   }
 };
@@ -92,13 +135,17 @@ const thumbOnSizeStyles = {
   sm: {
     kzqmXN: "x1kky2od",
     kZKoxP: "xlup9mm",
-    k3aq6I: "xv5t66b xi9aj42",
+    kLqNvP: "xskqmzm",
+    kt4wiu: "x1syr3z6",
+    k3aq6I: "xv5t66b xi9aj42 x1pxz8w1 xhyyqqw",
     $$css: true
   },
   md: {
     kzqmXN: "xw4jnvo",
     kZKoxP: "x1qx5ct2",
-    k3aq6I: "x15481yp x12xz5k6",
+    kLqNvP: "xskqmzm",
+    kt4wiu: "x1syr3z6",
+    k3aq6I: "x15481yp x12xz5k6 x1pxz8w1 xhyyqqw",
     $$css: true
   }
 };
@@ -111,11 +158,22 @@ const thumbOnSizeStyles = {
 // hover tint already is: pressing the input, the track or the label all
 // activate the row.
 const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
-// The touch press's paint, declared by the shared overlay styles on the
-// element the controller writes to (`pressedAlpha`) at the press's strength,
-// 1 while on and 1 → 0 over the release, and inherited resolved by the layer
-// that paints it. See interactionOverlay.stylex.ts.
-const pressedOverlayImage = 'var(--_press-paint-image)';
+
+/** The touch press's release on the press layer: opacity 1 → 0. */
+const pressLayerRelease = "x1jn504y-B";
+const PRESS_ALPHA = pressVars['--astryx-press-alpha'];
+
+/**
+ * The shared strength's release, restated so a fine pointer keeps it: the
+ * same keyframes, so the same animation.
+ */
+const pressStrengthRelease = "x10jkm1t-B";
+const pressOwnerStyles = {
+  pressedAlphaLayered: {
+    kKVMdj: "x14e4jsf xxsp3er x6su2wr",
+    $$css: true
+  }
+};
 const labelWrapperSizeStyles = {
   sm: {
     kAzted: "xisnujt",
@@ -154,6 +212,10 @@ const styles = {
     kHBbk8: "xc8icb0",
     $$css: true
   },
+  switchWrapperInteractive: {
+    kFalU9: "xge0x1e",
+    $$css: true
+  },
   input: {
     kVAEAm: "x10l6tqk",
     k87sOh: "xwa60dl",
@@ -165,8 +227,9 @@ const styles = {
     $$css: true
   },
   inputCoarse: {
-    kjFi6P: "xkagaj0",
-    kHzOjL: "x80b3aj",
+    kzqmXN: "xh8yej3 x1uj43hb",
+    kZKoxP: "x5yr21d xgjkl26",
+    k3aq6I: "x11lhmoz x1xdvw9q",
     $$css: true
   },
   inputDisabled: {
@@ -180,15 +243,39 @@ const styles = {
   track: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
+    kVAEAm: "xrxqdxo",
+    kHBbk8: "xsmms64",
     kaIpWk: "xjspbzw",
     k1ekBW: "x15406qy",
-    kIyJzY: "xuedmi6 x12w9bfk",
+    kIyJzY: "xuedmi6 xouc37c xzwa1y6 xuh6ohu",
     kAMwcw: "xlr8y92",
     kB7OPa: "x9f619",
     kMzoRj: "xc342km x13rsnn2",
     ksu8eU: "xng3xce xx61lck",
     kVAM5u: "x1w1tqly",
-    kKwaWg: "x1xm682w xowtp19 xphwcek x1p4304o",
+    kKwaWg: "x1xm682w xowtp19",
+    kgeoSG: "xpxppvc x15cra4q",
+    kEoFBp: "x1hmns74",
+    kFcpXp: "xxx281p",
+    kxmVGU: "x12maryy",
+    kPB484: "xxyica1",
+    km8f2m: "xkk1bqk",
+    kLkRvE: "x1my3e5g",
+    k5QlbN: "x2huugr x1ccaw7f",
+    k7EzDT: "xxhzo2e",
+    kQZAMR: "xvym4rz xigdn9b",
+    kZiNAr: "xgq6fxe",
+    k8Tatv: "xq2jpp1",
+    k5JduY: "x1s928wv",
+    kc3QkE: "x1h1zc6f x1ep27e9",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xarstr8",
+    kDVEDD: "x1r0yslu",
+    kUfP38: "x1k48kgn",
+    kloYau: "x2q1x1w",
+    kypkao: "xmf22ne",
+    ks3ayO: "x1uc2128",
+    kWkaDd: "xqycr0j",
     $$css: true
   },
   trackFocus: {
@@ -218,10 +305,35 @@ const styles = {
     kGNEyG: "x6s0dn4",
     kjj79g: "xl56j7k",
     kaIpWk: "xjspbzw",
-    k1ekBW: "xh3q6i0",
-    kIyJzY: "xuedmi6 x12w9bfk",
+    kVAEAm: "x8imsj1",
+    kYYq5F: "x1s6gw0t",
+    kqGvvJ: "xfmjvo4",
+    kY2c9j: "x1e8ofxz",
+    kfzvcC: "x1bjav06",
+    k1ekBW: "xh3q6i0 xiz4dsw",
+    kIyJzY: "xuedmi6 xzwa1y6 xuh6ohu",
     kAMwcw: "xlr8y92",
-    kKwaWg: "x1xm682w xowtp19 xphwcek x1p4304o",
+    kgeoSG: "xpxppvc x15cra4q",
+    kEoFBp: "x1hmns74",
+    kFcpXp: "xxx281p",
+    kPB484: "xxyica1",
+    km8f2m: "xkk1bqk",
+    kLkRvE: "x1my3e5g",
+    k5QlbN: "x2huugr x1ccaw7f",
+    k7EzDT: "xxhzo2e",
+    kQZAMR: "xvym4rz xigdn9b",
+    kZiNAr: "xgq6fxe",
+    k8Tatv: "xq2jpp1",
+    k5JduY: "x1s928wv",
+    kc3QkE: "x1h1zc6f x1ep27e9",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xarstr8",
+    kUfP38: "x1k48kgn",
+    kloYau: "x2q1x1w",
+    kypkao: "xmf22ne",
+    kbMawA: "xoca22b",
+    kWkaDd: "xqycr0j",
+    kKwaWg: "x1xm682w xowtp19",
     $$css: true
   },
   thumbOff: {
@@ -365,10 +477,49 @@ export function Switch({
     describedByParts.push(disabledMessageTooltip.describedBy);
   }
   const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
+
+  // The touch presentation (coarse pointer): its parts are always rendered;
+  // CSS shows them under a finger and the hook animates and listens there.
+  const surfaceRef = useRef(null);
+  const inputRef = useRef(null);
+  const thumbRef = useRef(null);
+  const trackRef = useRef(null);
+  const touchParts = useMemo(() => ({
+    surface: surfaceRef,
+    input: inputRef,
+    thumb: thumbRef,
+    track: trackRef
+  }), []);
+  // The track in a state: its theme target and fill. The other state's, for
+  // the fade layer's colour (switchFill.ts).
+  const trackPropsFor = on => mergeProps(themeProps('switch', {
+    checked: on ? 'checked' : null,
+    disabled: isDisabled ? 'disabled' : null,
+    size
+  }), stylex.props(styles.track, trackSizeStyles[size], on ? styles.trackOn : styles.trackOff, styles.trackFocus, isDisabled && styles.trackDisabled, isDisabled && !on && styles.trackDisabledOff));
+  // Syncs the hit area's insets with the layout around the switch, through
+  // utils/hitArea's observers. Under a coarse pointer they grow toward 44 px,
+  // stopping at half the gap to each neighbouring target. A disabled switch
+  // watches nothing.
+  useIsomorphicLayoutEffect(() => {
+    const surface = surfaceRef.current;
+    if (surface == null || isDisabled) {
+      return;
+    }
+    return watchHitArea(surface, insets => writeHitInsets(surface, insets));
+  }, [isDisabled]);
+  useSwitchTouch(touchParts, {
+    isOn,
+    isInteractive: !isDisabled && !isBusy,
+    isDisabled,
+    trackSize: TRACK_SIZE[size],
+    otherTrackProps: trackPropsFor(!isOn)
+  });
   const switchElement = /*#__PURE__*/_jsxs("div", {
-    ...stylex.props(styles.switchWrapper, wrapperSizeStyles[size]),
+    ref: surfaceRef,
+    ...stylex.props(styles.switchWrapper, wrapperSizeStyles[size], !isDisabled && !isBusy && styles.switchWrapperInteractive),
     children: [/*#__PURE__*/_jsx("input", {
-      ref: useMergedRefs(ref, disabledMessageTooltip.positionRef),
+      ref: useMergedRefs(ref, disabledMessageTooltip.positionRef, inputRef),
       id: id,
       type: "checkbox",
       role: "switch"
@@ -409,15 +560,13 @@ export function Switch({
       ,
       "aria-invalid": status?.type === 'error' ? true : isRequired ? false : undefined,
       "aria-busy": isBusy || undefined,
-      ...stylex.props(styles.input, rtlStyles.centerInline('-50%'), styles.inputCoarse, inputSizeStyles[size], isDisabled && styles.inputDisabled, isBusy && styles.inputBusy, switchFocusInput)
+      ...stylex.props(styles.input, rtlStyles.centerInline('-50%'), styles.inputCoarse, isDisabled && styles.inputDisabled, isBusy && styles.inputBusy, switchFocusInput)
     }), /*#__PURE__*/_jsx("div", {
+      ref: trackRef,
       "aria-hidden": "true",
-      ...mergeProps(themeProps('switch', {
-        checked: isOn ? 'checked' : null,
-        disabled: isDisabled ? 'disabled' : null,
-        size
-      }), stylex.props(styles.track, trackSizeStyles[size], isOn ? styles.trackOn : styles.trackOff, styles.trackFocus, isDisabled && styles.trackDisabled, isDisabled && !isOn && styles.trackDisabledOff)),
+      ...trackPropsFor(isOn),
       children: /*#__PURE__*/_jsx("div", {
+        ref: thumbRef,
         ...mergeProps(themeProps('switch-thumb', {
           checked: isOn ? 'checked' : null,
           size
@@ -470,15 +619,20 @@ export function Switch({
         disabledMessageTooltip.interactionRef(el);
       },
       ...(isDisabled ? undefined : pressable),
+      ...pressHoldsDragProps(!isDisabled),
       ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope,
       // The touch press's strength and release live on the row the
       // controller writes to; the track and thumb inherit and paint it.
-      !isDisabled && interactionOverlayStyles.pressedAlpha),
-      children: [' ', labelPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [labelElement, switchElement]
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [switchElement, labelElement]
-      })]
+      !isDisabled && interactionOverlayStyles.pressedAlpha, !isDisabled && pressOwnerStyles.pressedAlphaLayered),
+      children: [' ', labelPosition === 'start' ? [/*#__PURE__*/_jsx(Fragment, {
+        children: labelElement
+      }, "label"), /*#__PURE__*/_jsx(Fragment, {
+        children: switchElement
+      }, "switch")] : [/*#__PURE__*/_jsx(Fragment, {
+        children: switchElement
+      }, "switch"), /*#__PURE__*/_jsx(Fragment, {
+        children: labelElement
+      }, "label")]]
     }), status?.message && /*#__PURE__*/_jsx(FieldStatus, {
       type: status.type,
       message: status.message,

package/dist/Switch/switchFill.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @file switchFill.ts
+ * @input Switch's track element and the props its other state renders with
+ * @output Exports TrackState, sameTrackState, trackStateOf, readInState and
+ *   readFillOf: an element read in its other state, in place
+ * @position Shared by Switch.tsx and useSwitchTouch.ts for the colour fade
+ *   under a finger
+ *
+ * The colour fade needs the track's fill in its other state, as the theme
+ * paints it. readFillOf swaps the track's class and attributes, reads the
+ * colour and swaps back in the same task, so nothing paints in between.
+ *
+ * SYNC: When modified, update Switch.tsx and useSwitchTouch.ts.
+ */
+/** A track state: its class name and its data attributes. */
+export interface TrackState {
+    readonly className: string;
+    readonly attributes: Readonly<Record<string, string>>;
+}
+/** Whether two track states render alike: the same class and attributes. */
+export declare function sameTrackState(a: TrackState | null, b: TrackState | null): boolean;
+/** The track state of rendered props (`className` and `data-*` props). */
+export declare function trackStateOf(props: object): TrackState;
+/**
+ * Reads `element` as it renders in `state` (its class and data attributes),
+ * swapping them in and back in the same task, so nothing paints between.
+ */
+export declare function readInState<T>(element: HTMLElement, state: TrackState, read: (element: HTMLElement) => T): T;
+/** The track's computed fill in `state`, read without a paint. */
+export declare function readFillOf(track: HTMLElement, state: TrackState): string;
+//# sourceMappingURL=switchFill.d.ts.map

package/dist/Switch/switchFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switchFill.d.ts","sourceRoot":"","sources":["../../src/Switch/switchFill.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,6DAA6D;AAC7D,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACvD;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAC5B,CAAC,EAAE,UAAU,GAAG,IAAI,EACpB,CAAC,EAAE,UAAU,GAAG,IAAI,GACnB,OAAO,CAYT;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAYtD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,CAAC,GAChC,CAAC,CAgCH;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAMxE"}

package/dist/Switch/switchFill.js

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file switchFill.ts
+ * @input Switch's track element and the props its other state renders with
+ * @output Exports TrackState, sameTrackState, trackStateOf, readInState and
+ *   readFillOf: an element read in its other state, in place
+ * @position Shared by Switch.tsx and useSwitchTouch.ts for the colour fade
+ *   under a finger
+ *
+ * The colour fade needs the track's fill in its other state, as the theme
+ * paints it. readFillOf swaps the track's class and attributes, reads the
+ * colour and swaps back in the same task, so nothing paints in between.
+ *
+ * SYNC: When modified, update Switch.tsx and useSwitchTouch.ts.
+ */
+
+/** A track state: its class name and its data attributes. */
+
+/** Whether two track states render alike: the same class and attributes. */
+export function sameTrackState(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null || a.className !== b.className) {
+    return false;
+  }
+  const names = Object.keys(a.attributes);
+  return names.length === Object.keys(b.attributes).length && names.every(name => a.attributes[name] === b.attributes[name]);
+}
+
+/** The track state of rendered props (`className` and `data-*` props). */
+export function trackStateOf(props) {
+  const attributes = {};
+  let className = '';
+  for (const [name, value] of Object.entries(props)) {
+    if (name === 'className' && typeof value === 'string') {
+      className = value;
+    } else if (name.startsWith('data-') && value != null) {
+      // As React writes a data attribute: every value but null or undefined.
+      attributes[name] = String(value);
+    }
+  }
+  return {
+    className,
+    attributes
+  };
+}
+
+/**
+ * Reads `element` as it renders in `state` (its class and data attributes),
+ * swapping them in and back in the same task, so nothing paints between.
+ */
+export function readInState(element, state, read) {
+  const names = new Set(Object.keys(state.attributes));
+  for (const attribute of Array.from(element.attributes)) {
+    if (attribute.name.startsWith('data-')) {
+      names.add(attribute.name);
+    }
+  }
+  const savedClass = element.className;
+  const saved = new Map();
+  for (const name of names) {
+    saved.set(name, element.getAttribute(name));
+  }
+  const apply = (className, valueOf) => {
+    element.className = className;
+    for (const name of names) {
+      const value = valueOf(name);
+      if (value == null) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value);
+      }
+    }
+  };
+  apply(state.className, name => state.attributes[name] ?? null);
+  try {
+    return read(element);
+  } finally {
+    apply(savedClass, name => saved.get(name) ?? null);
+  }
+}
+
+/** The track's computed fill in `state`, read without a paint. */
+export function readFillOf(track, state) {
+  return readInState(track, state, element => getComputedStyle(element).backgroundColor);
+}