@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/dist/animator/createAnimator.js

@@ -0,0 +1,259 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file createAnimator.ts
+ * @input An element; the internal motion animator (motion/animator.ts), the
+ *   `springs.stateChange` motion role and the momentum coast (motion/coast.ts)
+ * @output The public animator: `createAnimator`, the `AnimatorHandle` it
+ *   returns, and their value types
+ * @position Public entry point, re-exported from the package root. The
+ *   `useAnimator` hook wraps it. Importing it does no DOM work.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/animator/createAnimator.test.ts
+ * - /packages/core/src/animator/createAnimator.doc.mjs
+ * - /packages/core/src/hooks/useAnimator.ts
+ */
+import { createMotionAnimator, SETTLE_THRESHOLD } from "../motion/animator.js";
+import { coast } from "../motion/coast.js";
+import { solveDecay } from "../motion/decay.js";
+import { registerSpringsTable, springs } from "../motion/uikit/springs.js";
+
+/**
+ * A channel the animator drives. `x` and `y` translate the element (px).
+ * `scale` scales it about its transform origin (1 is its size). `rotate`
+ * turns it (degrees, clockwise), and `opacity` fades it (0 to 1).
+ */
+
+/**
+ * Values by channel. A velocity uses the same keys, in units per second:
+ * px/s, scale per second, deg/s, opacity per second.
+ */
+
+/** Every channel's value (or velocity), as `get` and `getVelocity` read it. */
+
+/** Options of `AnimatorHandle.animate`. */
+
+/**
+ * A release velocity for `AnimatorHandle.decay`, per channel, in its units
+ * per second. That is px/s for `x` and `y`, and degrees per second for
+ * `rotate`. `scale` and `opacity` take their units per second.
+ */
+
+/**
+ * Animates one element. Each method acts on the channels it is given and
+ * leaves the others where they are.
+ */
+
+/** What `createAnimator` returns: the handle, and `destroy`. */
+
+const CHANNELS = ['x', 'y', 'scale', 'rotate', 'opacity'];
+
+/** The values of the channels the public API names, and nothing else. */
+function motionValues(values) {
+  const out = {};
+  if (values == null) {
+    return out;
+  }
+  for (const channel of CHANNELS) {
+    const value = values[channel];
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      out[channel] = value;
+    }
+  }
+  return out;
+}
+
+/**
+ * A coast from `from` at `velocity` on the momentum decay a scroll view
+ * uses, ending at rest. The theme does not change this decay. An opacity
+ * coast stops at 0 or 1.
+ */
+function momentum(from, velocity, threshold, isUnit) {
+  const glide = solveDecay({
+    from,
+    velocity
+  });
+  const edge = !isUnit ? null : glide.rest < 0 ? 0 : glide.rest > 1 ? 1 : null;
+  const hit = edge == null ? null : glide.timeToReach(edge);
+  const duration = hit ?? glide.settleTime(threshold);
+  const end = edge ?? glide.rest;
+  return {
+    duration,
+    at: t => t >= duration ? end : glide.value(t),
+    velocity: t => t >= duration ? 0 : glide.velocity(t)
+  };
+}
+function snapshot(read) {
+  return {
+    x: read('x'),
+    y: read('y'),
+    scale: read('scale'),
+    rotate: read('rotate'),
+    opacity: read('opacity')
+  };
+}
+
+/**
+ * Resolves once every motion of one call has finished, or as soon as any of
+ * them is interrupted (`finished` resolves `false`). A later call that takes
+ * over one channel ends the whole call where it stopped, as one `animate`
+ * does. The other channels move on.
+ */
+async function settledOrTakenOver(moving) {
+  if (moving.length === 0) {
+    return;
+  }
+  await new Promise(resolve => {
+    let left = moving.length;
+    for (const finished of moving) {
+      void finished.then(completed => {
+        left -= 1;
+        if (!completed || left === 0) {
+          resolve();
+        }
+      });
+    }
+  });
+}
+
+/**
+ * An animator whose element is attached later, through `attach`. It is the
+ * one construction `createAnimator` and `useAnimator` share, so the hook has
+ * no behavior of its own. Not exported from the package.
+ */
+export function createAttachableAnimator() {
+  const motion = createMotionAnimator(null);
+  // Calls do nothing while no element is attached, before the ref attaches
+  // or after it lets go. They also do nothing after destroy, and animate and
+  // decay then resolve at once.
+  let element = null;
+  let destroyed = false;
+  const inactive = () => destroyed || element == null;
+  const animator = {
+    async animate(target, options) {
+      const to = motionValues(target);
+      if (inactive() || Object.keys(to).length === 0) {
+        return;
+      }
+      // The role registry is written on first use, never on import.
+      registerSpringsTable();
+      const velocity = motionValues(options?.velocity);
+      await motion.animate(to, {
+        spring: springs.stateChange,
+        ...(Object.keys(velocity).length > 0 ? {
+          velocity
+        } : {})
+      }).finished;
+    },
+    async decay(velocity) {
+      if (inactive()) {
+        return;
+      }
+      const given = motionValues(velocity);
+      // The translate axes coast as a throw, which Reduce Motion lets
+      // continue. The others coast as a transition, which it replaces.
+      const translate = coast(motion, {
+        x: given.x,
+        y: given.y
+      });
+      const others = {};
+      for (const channel of ['scale', 'rotate', 'opacity']) {
+        const v0 = given[channel];
+        if (v0 != null) {
+          const property = channel === 'scale' ? 'scaleX' : channel;
+          others[channel] = momentum(motion.get(property), v0, SETTLE_THRESHOLD[property], channel === 'opacity');
+        }
+      }
+      const moving = [];
+      if (Object.keys(translate).length > 0) {
+        moving.push(motion.decay(translate).finished);
+      }
+      if (Object.keys(others).length > 0) {
+        moving.push(motion.play(others).finished);
+      }
+      await settledOrTakenOver(moving);
+    },
+    set(values) {
+      if (!inactive()) {
+        motion.set(motionValues(values));
+      }
+    },
+    get() {
+      return snapshot(channel => motion.get(channel));
+    },
+    getVelocity() {
+      return snapshot(channel => motion.getVelocity(channel));
+    },
+    stop() {
+      if (!inactive()) {
+        motion.stop();
+      }
+    },
+    destroy() {
+      if (!destroyed) {
+        destroyed = true;
+        // Halts every channel where it shows, so the element keeps those
+        // values and nothing reads as moving, then lets go of it.
+        motion.stop();
+        motion.dispose();
+      }
+    }
+  };
+  return {
+    animator,
+    attach: next => {
+      if (destroyed || next === element) {
+        return;
+      }
+      if (element != null) {
+        // The old node takes its values with it, so the next node, or a
+        // remount, starts at rest.
+        motion.attach(null);
+        motion.stop();
+        motion.set(motionValues(REST));
+      }
+      element = next;
+      motion.attach(next);
+    }
+  };
+}
+
+/** A new or remounted element starts from these values. */
+const REST = {
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: 0,
+  opacity: 1
+};
+
+/**
+ * Animates `element` with the motion Core uses. `animate` springs channels to
+ * a target on the state-change motion, and `decay` coasts them from a release
+ * velocity. `set` jumps them, `get` and `getVelocity` read them, `stop` halts
+ * them, and `destroy` lets the element go. Under Reduce Motion every call is
+ * planned. A move becomes a short cross-fade on a touch screen, and it lands
+ * at once with a mouse.
+ *
+ * Use one animator per element: two on one element overwrite each other.
+ *
+ * @example
+ * ```
+ * const card = document.querySelector('.card');
+ * const animator = createAnimator(card);
+ * await animator.animate({x: 0, rotate: 0}, {velocity: {x: -900}});
+ * animator.decay({x: 2400});
+ * animator.destroy();
+ * ```
+ */
+export function createAnimator(element) {
+  const {
+    animator,
+    attach
+  } = createAttachableAnimator();
+  attach(element);
+  return animator;
+}

package/dist/astryx.css

@@ -63,6 +63,7 @@
   @keyframes x13kz0yu-B{0%, 100%{opacity:1;}50%{opacity:.5;}}
   @keyframes x132z07p-B{0%{opacity:.25;}9.99%{opacity:.25;}10%{opacity:.325;}19.99%{opacity:.325;}20%{opacity:.4;}29.99%{opacity:.4;}30%{opacity:.475;}39.99%{opacity:.475;}40%{opacity:.55;}49.99%{opacity:.55;}50%{opacity:.625;}59.99%{opacity:.625;}60%{opacity:.7;}69.99%{opacity:.7;}70%{opacity:.775;}79.99%{opacity:.775;}80%{opacity:.85;}89.99%{opacity:.85;}90%{opacity:.925;}100%{opacity:.925;}}
   @keyframes x1jn504y-B{from{opacity:1;}to{opacity:0;}}
+  @keyframes x12p7u8f-B{from{opacity:0;animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1);}to{opacity:1;}}
   @keyframes x18re5ia-B{from{opacity:0;}to{opacity:1;}}
   @keyframes xtut5q7-B{0%{opacity:1;}50%{opacity:.5;}100%{opacity:1;}}
   @keyframes x1k48ry3-B{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
@@ -74,7 +75,7 @@
   @keyframes x1b6yrix-B{from{opacity:0;transform:translateY(var(--spacing-2));}to{opacity:1;transform:translateY(0);}}
   @keyframes xiylxmw-B{from{opacity:0;transform:translateY(calc(-1 * var(--spacing-2)));}to{opacity:1;transform:translateY(0);}}
   @keyframes xml828b-B{from{opacity:1;}to{opacity:var(--_progress-bar-pulse-floor);}}
-  @keyframes x1wbvqyn-B{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:calc(var(--_spinner-ring-diameter) * -3.141592653589793);}}
+  @keyframes xqng64z-B{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
   @keyframes x1c2q33o-B{0%{transform:translateX(100%);}100%{transform:translateX(-250%);}}
   @keyframes xr3m334-B{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}
   @keyframes x1xhkexc-B{from{width:0;margin-inline-end:0;opacity:0;}to{width:14px;margin-inline-end:var(--spacing-1);opacity:1;}}
@@ -148,6 +149,8 @@
   .xt8hc1d{--_layout-flush-block-end:initial}
   .xu9n9za{--_layout-flush-block-start:initial}
   .xiki222{--_popover-radius:var(--radius-container)}
+  .x1bs45cr{--_power-search-sheet-hit-content:none}
+  .x1o3f7l6{--_power-search-sheet-hit-inset:0px}
   .x1s9pv7w{--_press-overlay:transparent}
   .x1l7afqf{--_press-paint-image:linear-gradient(var(--_press-paint),var(--_press-paint))}
   .xz2mauf{--_press-paint:color-mix(in srgb,var(--color-overlay-pressed) calc(var(--astryx-press-alpha) * 100%),transparent)}
@@ -454,6 +457,8 @@
   @media (any-pointer: coarse){.x1hl81f0.x1hl81f0{--_fade-delay:0s}}
   @media (pointer: coarse){.xp8r40j.xp8r40j{--_input-clear-hit-content:""}}
   @media (pointer: coarse){.x181bpwf.x181bpwf{--_input-clear-hit-inset:-2px}}
+  @media (pointer: coarse){.x73lxwv.x73lxwv{--_power-search-sheet-hit-content:""}}
+  @media (pointer: coarse){.xhx5icg.xhx5icg{--_power-search-sheet-hit-inset:min(0px,calc((100% - 44px) / 2))}}
   @media (any-pointer: coarse){.xm1aeao.xm1aeao{--_reveal-delay-reduced:0s,0s}}
   @media (any-pointer: coarse){.x1pn63d7.x1pn63d7{--_reveal-delay:0s,0s}}
   @media (any-pointer: coarse){.xi7d7de.xi7d7de{--_reveal-opacity:1}}
@@ -496,6 +501,7 @@
   .x1b50gpf:not(#\#){padding:calc(var(--_chat-composer-padding) - var(--border-width))}
   .x18oj4ui:not(#\#){padding:var(--_chat-composer-padding)}
   .xpoxszi:not(#\#){padding:var(--_segmented-control-padding)}
+  .x12nba7r:not(#\#){padding:var(--spacing-0-5)}
   .xtozwh:not(#\#){padding:var(--spacing-1) var(--spacing-2)}
   .x9epnlk:not(#\#){padding:var(--spacing-1)}
   .x15nmkw0:not(#\#){padding:var(--spacing-2) 0}
@@ -716,7 +722,6 @@
   .xg7jpbn:not(#\#):not(#\#):not(#\#){-webkit-text-fill-color:transparent}
   .xpdipgo:not(#\#):not(#\#):not(#\#){-webkit-touch-callout:none}
   .x1winvzj:not(#\#):not(#\#):not(#\#){-webkit-user-select:none}
-  .x4465f1:not(#\#):not(#\#):not(#\#){align-content:end}
   .x8gbvx8:not(#\#):not(#\#):not(#\#){align-content:flex-start}
   .x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
   .x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
@@ -760,9 +765,9 @@
   .x3psbcj:not(#\#):not(#\#):not(#\#){animation-name:x1ahk7ht-B}
   .x1dvww92:not(#\#):not(#\#):not(#\#){animation-name:x1b6yrix-B}
   .x97zbip:not(#\#):not(#\#):not(#\#){animation-name:x1k48ry3-B}
-  .x1nlxm0d:not(#\#):not(#\#):not(#\#){animation-name:x1wbvqyn-B}
   .x1gbn2au:not(#\#):not(#\#):not(#\#){animation-name:x1xhkexc-B}
   .x1srr2gu:not(#\#):not(#\#):not(#\#){animation-name:xiylxmw-B}
+  .x1ka1v4i:not(#\#):not(#\#):not(#\#){animation-name:xqng64z-B}
   .xozk8ic:not(#\#):not(#\#):not(#\#){animation-name:xr3m334-B}
   .x1mta51n:not(#\#):not(#\#):not(#\#){animation-name:xtut5q7-B}
   .xck01x9:not(#\#):not(#\#):not(#\#){animation-name:xu7jd1z-B}
@@ -1270,6 +1275,7 @@
   .x1p6hqjl:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--_tokenizer-end-lane-reserve,0px)}
   .x1by8st6:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--astryx-dialog-padding-inline-end,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-right,0px)))))}
   .x17sfb9: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))))}
+  .x19m2zy8:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--container-padding-inline-end,0px)}
   .x64h4k7:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--container-padding-inline-end)}
   .x1peupej:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-inner-x,var(--spacing-4))}
   .x19eyx77:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-own-outer-x,var(--layout-padding-outer-x,var(--spacing-4)))}
@@ -1303,6 +1309,7 @@
   .xw2xrtw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--_tree-indent,0px)}
   .xqmdmw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-left,0px)))))}
   .x1jni19p:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-number-input-padding-inline-start,var(--astryx-number-input-padding-inline,var(--astryx-number-input-padding,var(--spacing-2))))}
+  .x1ew2rer:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start,0px)}
   .x1c35znw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start)}
   .xwjyata:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--layout-padding-inner-x,var(--spacing-4))}
   .xaku5ci:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--layout-padding-own-outer-x,var(--layout-padding-outer-x,var(--spacing-4)))}
@@ -1539,6 +1546,8 @@
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x6tapwc:not(#\#):not(#\#):not(#\#){z-index:var(--_tree-focus-z,auto)}
+  .x189o2zt[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--_indicator-press-image:var(--_press-paint-image)}
+  .x1dueop1[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--_indicator-press-image:var(--_press-paint-image)}
   .x11z29ks[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
   .xli5ek3[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
@@ -1556,6 +1565,7 @@
   .x1vxsm5i:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:xu7jd1z-B}
   .x18lne9g:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:xwmkjkf-B}
   .x1spg45b.x1spg45b:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}
+  .x1vl4g35:active:not([data-astryx-press="on"]):not(#\#):not(#\#):not(#\#){background-size:0 0}
   .xz46atp.xz46atp:where(.astryx-input-group > [data-astryx-input-group-item]):not(:nth-last-child(1 of :not([popover]):not(template):not(dialog))):not(#\#):not(#\#):not(#\#){border-end-end-radius:0}
   .x1y3chn8.x1y3chn8:where(.astryx-input-group > [data-astryx-input-group-item]):not(:first-child):not(#\#):not(#\#):not(#\#){border-end-start-radius:0}
   .x1lsh8a1.x1lsh8a1:where(.astryx-input-group > [data-astryx-input-group-item]):not(:nth-last-child(1 of :not([popover]):not(template):not(dialog))):not(#\#):not(#\#):not(#\#){border-start-end-radius:0}
@@ -1570,6 +1580,7 @@
   .xy5bzlh.xy5bzlh:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}
   .x9o1np9.x9o1np9:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}
   .x16khyan:is(:disabled,[aria-disabled="true"]):not(#\#):not(#\#):not(#\#){cursor:default}
+  .xvivl9a:is([aria-disabled="true"]):not(#\#):not(#\#):not(#\#){cursor:default}
   .x1y40yee:popover-open:not(#\#):not(#\#):not(#\#){display:flex}
   .x1rq9t4t:placeholder-shown:is(:not(:focus), :read-only):not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-1))}
   .x17xqekc:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.3) 2px,black var(--spacing-1))}
@@ -1685,13 +1696,13 @@
   @media (prefers-reduced-motion: reduce){.x4q6aw4.x4q6aw4:not(#\#):not(#\#):not(#\#){animation-direction:alternate}}
   @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x1jq6yc9.x1jq6yc9:not(#\#):not(#\#):not(#\#){animation-duration:.2s}}
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
-  @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x13pi3j7.x13pi3j7:not(#\#):not(#\#):not(#\#){animation-duration:min(var(--duration-fast-max),.2s)}}
   @media (prefers-reduced-motion: reduce){.x1p2ibn3.x1p2ibn3:not(#\#):not(#\#):not(#\#){animation-duration:var(--_progress-bar-pulse)}}
-  @media ((prefers-reduced-motion: reduce) and (not (prefers-reduced-motion: reduce))) or ((prefers-reduced-motion: reduce) and (not (pointer: coarse))){.xa4pr1u.xa4pr1u:not(#\#):not(#\#):not(#\#){animation-name:none}}
+  @media (prefers-reduced-motion: reduce) and (pointer: coarse){.x10got5w.x10got5w:not(#\#):not(#\#):not(#\#){animation-duration:200ms}}
+  @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))){.x2g3n7u.x2g3n7u:not(#\#):not(#\#):not(#\#){animation-name:none}}
   @media (prefers-reduced-motion: reduce) and (not (pointer: coarse)){.xtuz6mp.xtuz6mp:not(#\#):not(#\#):not(#\#){animation-name:none}}
   @media (prefers-reduced-motion: reduce){.x1aquc0h.x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
+  @media (prefers-reduced-motion: reduce) and (pointer: coarse){.xaqowwx.xaqowwx:not(#\#):not(#\#):not(#\#){animation-name:x12p7u8f-B}}
   @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))))){.x6mpr79.x6mpr79:not(#\#):not(#\#):not(#\#){animation-name:x18re5ia-B}}
-  @media (prefers-reduced-motion: reduce) and (pointer: coarse){.xajy0lc.xajy0lc:not(#\#):not(#\#):not(#\#){animation-name:x18re5ia-B}}
   @media (prefers-reduced-motion: reduce){.xfqa98z.xfqa98z:not(#\#):not(#\#):not(#\#){animation-name:xml828b-B}}
   @media (prefers-reduced-motion: reduce) and (pointer: coarse){.xr5m3f0.xr5m3f0:not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(.42,0,.58,1)}}
   @media (prefers-reduced-motion: reduce){.x10xcq22.x10xcq22:not(#\#):not(#\#):not(#\#){animation-timing-function:var(--_progress-bar-pulse-curve)}}
@@ -1807,6 +1818,7 @@
   @media (hover: hover){.x1rfoswn.x1rfoswn.x1rfoswn:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-accent),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.xcunlro.xcunlro.xcunlro:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-primary),var(--color-tint-hover) 15%)}}
   @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){.x10ue8fs.x10ue8fs.x10ue8fs:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}}
   @media (hover: hover){.xo5jvnm.xo5jvnm.xo5jvnm:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
   @media (pointer: coarse){.x1pxz8w1.x1pxz8w1:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:none}}
   @media (pointer: coarse){.xom6oz5.xom6oz5.xom6oz5:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
@@ -1843,6 +1855,7 @@
   .x11xkdxz:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--border-width)}
   .x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
   .x1c7jfne:not(#\#):not(#\#):not(#\#):not(#\#){bottom:2px}
+  .xdd4er5:not(#\#):not(#\#):not(#\#):not(#\#){bottom:auto}
   .xyi47jn:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--_tab-indicator-bottom,-1px)}
   .xvxfwfv:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--astryx-layer-inset-block-end,0px)}
   .x112dmjn:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-1)}
@@ -2017,7 +2030,7 @@
   .xe0p6wg:not(#\#):not(#\#):not(#\#):not(#\#){min-height:28px}
   .x21xpn4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:32px}
   .x1gg8mnh:not(#\#):not(#\#):not(#\#):not(#\#){min-height:44px}
-  .x121v3j4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:min-content}
+  .x1lh6h5t:not(#\#):not(#\#):not(#\#):not(#\#){min-height:fit-content}
   .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)}
@@ -2069,6 +2082,7 @@
   .x10wlt62:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:hidden}
   .x4ncuvb:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:var(--x-overflowY)}
   .x7p5m3t:not(#\#):not(#\#):not(#\#):not(#\#){overscroll-behavior-x:contain}
+  .x1e4zzel:not(#\#):not(#\#):not(#\#):not(#\#){overscroll-behavior-y:contain}
   .x18d9i69:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
   .x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
   .x1wkw6tp:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
@@ -2257,7 +2271,9 @@
   .xramuyw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:-4px}
   .xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
   .xxx281p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:0}
+  .xzdy5ak:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:calc(var(--astryx-hit-inset-top,0px) * -1) calc(var(--astryx-hit-inset-right,0px) * -1) calc(var(--astryx-hit-inset-bottom,0px) * -1) calc(var(--astryx-hit-inset-left,0px) * -1)}
   .xht581f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:var(--_input-clear-hit-inset)}
+  .xl7hj2y:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:var(--_power-search-sheet-hit-inset)}
   .xeu5z55:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:var(--_thumbnail-hit-inset)}
   @starting-style{.x4itv7f.x4itv7f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:0}}
   @starting-style{.x1igigxu.x1igigxu:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:1}}
@@ -2288,6 +2304,8 @@
   @starting-style{@media (prefers-reduced-motion: reduce) and (pointer: coarse){.xgo67oj.xgo67oj.xgo67oj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:0}}}
   @starting-style{@media (prefers-reduced-motion: reduce){.xspp5ug.xspp5ug.xspp5ug:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateY(0)}}}
   .xgw21jv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-position:bottom}
+  .x1d269y:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-position:var(--_segmented-after-background-position,0% 0%)}
+  .xkyjh71:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-position:var(--_segmented-lens-background-position,0% 0%)}
   .x1lczva8[data-astryx-cell-gliding]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:transparent}
   .x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
   .xxyica1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:inherit}
@@ -2306,12 +2324,20 @@
   .xslb4at:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-datetime-edit{padding-inline:0}
   .xvtkv6q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:background-color .15s ease,width .15s ease}
   .x17s1k9h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:opacity .15s ease}
+  .xt64kwx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{-webkit-backdrop-filter:var(--_segmented-after-webkit-backdrop-filter,none)}
+  .x1icymkt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{-webkit-backdrop-filter:var(--_segmented-lens-webkit-backdrop-filter,none)}
   .x19ds33d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{align-self:start}
   .x1abwkk1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{backdrop-filter:blur(2px)}
+  .xc4c6yy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{backdrop-filter:var(--_segmented-after-backdrop-filter,none)}
+  .x11t1reg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{backdrop-filter:var(--_segmented-lens-backdrop-filter,none)}
   .x1iobno9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-clip:border-box}
+  .x54l34w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-clip:var(--_segmented-after-background-clip,border-box)}
+  .xtojb3y:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-clip:var(--_segmented-lens-background-clip,border-box)}
   .xyhc2n1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:transparent}
   .x1l0fnur:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--_press-overlay)}
   .xnbhnmn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--_radio-row-press,transparent)}
+  .x1wb6yj0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--_segmented-after-background-color,transparent)}
+  .x1nk0e2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--_segmented-lens-background-color,transparent)}
   .x1uc2128:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--_switch-fade-fill,transparent)}
   .x1tzqye7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--color-accent)}
   .x1hw15nc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--color-border)}
@@ -2321,13 +2347,25 @@
   .xccdyz0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,var(--color-shadow),transparent)}
   .x1ppu1g5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,var(--color-shadow),transparent)}
   .x1xm21za:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-image:linear-gradient(var(--table-sticky-background,var(--color-background-card)),var(--table-sticky-background,var(--color-background-card)))}
+  .x10e6nnj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:var(--_segmented-after-background-image,none)}
+  .x19ph129:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-image:var(--_segmented-lens-background-image,none)}
   .xjnwjuh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-origin:border-box}
+  .x17as9s2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-origin:var(--_segmented-after-background-origin,padding-box)}
+  .x1mz0nwo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-origin:var(--_segmented-lens-background-origin,padding-box)}
   .xgaypha:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-repeat:no-repeat}
+  .x19crzk3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-repeat:var(--_segmented-after-background-repeat,repeat)}
+  .xzr6j9d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-repeat:var(--_segmented-lens-background-repeat,repeat)}
   .x1e2fbwo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-size:100% var(--_table-row-divider-app-width,var(--_table-row-divider-width,0px))}
+  .x1pxrrzi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-size:var(--_segmented-after-background-size,auto)}
+  .xai7mxl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-size:var(--_segmented-lens-background-size,auto)}
   .xnnzo76:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-inline-start-color:var(--color-border)}
   .xvsnedh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-inline-start-style:solid}
   .x1p96cux:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-inline-start-width:var(--border-width)}
+  .x1tmynux:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-shadow:var(--_segmented-after-box-shadow,none)}
+  .x19rx9s5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{box-shadow:var(--_segmented-lens-box-shadow,none)}
   .xoca22b:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-shadow:var(--shadow-low)}
+  .xtql2tq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{box-sizing:border-box}
+  .xx38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
   .x147exv5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{color:var(--color-syntax-added-marker)}
   .xtkarl4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{color:var(--color-syntax-punctuation)}
   .x16hy5kr:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{color:var(--color-syntax-removed-marker)}
@@ -2341,12 +2379,15 @@
   .xdaf9gw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:counter(astryx-list, lower-roman) "."}
   .xc2ndz5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:counter(astryx-list) "."}
   .xh3pasq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:var(--_input-clear-hit-content)}
+  .x1oocgs0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:var(--_power-search-sheet-hit-content)}
   .xhkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
   .x1h1zc6f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:none}
   .xolhmmf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-calendar-picker-indicator{display:none}
   .xtbmc8j:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{flex-shrink:0}
   .x3nzp0f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{font-family:var(--font-family-code)}
   .x1899uy6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{font-size:var(--text-body-size)}
+  .x13rwrtk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{forced-color-adjust:none}
+  .xwnwc82:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{forced-color-adjust:none}
   .xekda60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:-2px}
   .x1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
   .x1s13ptm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:var(--_slider-hit-end)}
@@ -2371,6 +2412,8 @@
   .x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
   .x1wnbjh8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{text-align:end}
   .x9rmy9g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{text-align:start}
+  .x1xm9zrc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:50% 50%}
+  .x8ihlwz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform-origin:50% 50%}
   .x1fgylwi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:center top}
   .xgu12d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:left center}
   .x1e8txe:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform:scaleX(0)}
@@ -2399,12 +2442,18 @@
   .x1dlmc9c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-timing-function:var(--ease-standard)}
   .xa5v58t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:var(--ease-standard)}
   .x1rbqspl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{user-select:none}
+  .x1631zco:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{visibility:var(--_segmented-after-visibility,hidden)}
+  .x1e91tbo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{visibility:var(--_segmented-lens-visibility,hidden)}
+  .x1y8idqa:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{will-change:var(--astryx-motion-will-change-after,auto)}
+  .xwrs98t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{will-change:var(--astryx-motion-will-change-before,auto)}
+  .xi4xitw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{z-index:-1}
   .xy5mcqj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}
   .x1r0yslu:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{z-index:0}
   .x12maryy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:1}
   .xzywxsk.xzywxsk:where(.x1odsvnm:active *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--color-overlay-pressed)}
   .xk7vujl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,var(--color-shadow),transparent)}
   .xlptwl5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,var(--color-shadow),transparent)}
+  .xf7ekc6.xf7ekc6:where(:has(.x1lrrceh:is(*))):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:none}
   .xdq8fwl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:right center}
   .x1c108yo:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(-100%)}
   .x12ayhd5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(100%)}
@@ -2428,21 +2477,61 @@
   @media (pointer: coarse){.x2huugr.x2huugr.x2huugr:where(.x1iwu4tg[data-astryx-press="on"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{opacity:1}}
   @media (prefers-reduced-motion: reduce) and (pointer: coarse){@media (pointer: coarse){.xigdn9b.xigdn9b.xigdn9b.xigdn9b:where(.x1iwu4tg[data-astryx-press="fading"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-duration:min(200ms,calc(200ms * var(--_astryx-motion-tempo,1)))}}}
   .xp6skj9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-color:inherit}
+  .x1tqw9ds:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-color:var(--_segmented-after-border-bottom-color,currentcolor)}
+  .xg5vybf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-color:var(--_segmented-lens-border-bottom-color,currentcolor)}
+  .xk12vn8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-left-radius:var(--_segmented-after-border-bottom-left-radius,0px)}
+  .x1gp8cmm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-left-radius:var(--_segmented-lens-border-bottom-left-radius,0px)}
+  .x1icybqf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-right-radius:var(--_segmented-after-border-bottom-right-radius,0px)}
+  .x1rj83xg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-right-radius:var(--_segmented-lens-border-bottom-right-radius,0px)}
   .xp41i57:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-style:inherit}
+  .xe87dmk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-style:var(--_segmented-after-border-bottom-style,none)}
+  .xjmzqq9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-style:var(--_segmented-lens-border-bottom-style,none)}
+  .x11at6vl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-width:var(--_segmented-after-border-bottom-width,0px)}
+  .xaki043:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-width:var(--_segmented-lens-border-bottom-width,0px)}
   .xhyqk6q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-width:var(--_table-row-divider-app-width,var(--_table-row-divider-width,0px))}
+  .x1pgdhoo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-left-color:var(--_segmented-after-border-left-color,currentcolor)}
+  .x1j47n5p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-left-color:var(--_segmented-lens-border-left-color,currentcolor)}
+  .x3sz45y:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-left-style:var(--_segmented-after-border-left-style,none)}
+  .xymdich:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-left-style:var(--_segmented-lens-border-left-style,none)}
+  .x1t5rpqk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-left-width:var(--_segmented-after-border-left-width,0px)}
+  .x131tjkd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-left-width:var(--_segmented-lens-border-left-width,0px)}
+  .xa4st9h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-right-color:var(--_segmented-after-border-right-color,currentcolor)}
+  .x1whvb6r:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-right-color:var(--_segmented-lens-border-right-color,currentcolor)}
+  .x1tili5q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-right-style:var(--_segmented-after-border-right-style,none)}
+  .x1rimih4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-right-style:var(--_segmented-lens-border-right-style,none)}
+  .x1n4cxts:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-right-width:var(--_segmented-after-border-right-width,0px)}
+  .xu7nluz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-right-width:var(--_segmented-lens-border-right-width,0px)}
+  .x18pjm2d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-color:var(--_segmented-after-border-top-color,currentcolor)}
+  .x1l1ofoh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-color:var(--_segmented-lens-border-top-color,currentcolor)}
+  .x13ob3d2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-left-radius:var(--_segmented-after-border-top-left-radius,0px)}
+  .x1gz1ewn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-left-radius:var(--_segmented-lens-border-top-left-radius,0px)}
+  .xbn9yse:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-right-radius:var(--_segmented-after-border-top-right-radius,0px)}
+  .xirquxt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-right-radius:var(--_segmented-lens-border-top-right-radius,0px)}
+  .x1ff385h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-style:var(--_segmented-after-border-top-style,none)}
+  .x10hoewy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-style:var(--_segmented-lens-border-top-style,none)}
+  .xsbnptc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-width:var(--_segmented-after-border-top-width,0px)}
+  .x267z7u:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-width:var(--_segmented-lens-border-top-width,0px)}
   .xe80sof:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:-2px}
   .x1xrz1ek:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:0}
   .x17wid7s:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:var(--_slider-hit-bottom)}
+  .x1fv2pxm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--_segmented-after-height,0px)}
+  .xlxjeq7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--_segmented-lens-height,0px)}
   .xu6fald:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--_sheet-keyboard-inset,0px)}
   .x34npju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--spacing-1)}
+  .x1ggeerv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{left:var(--_segmented-after-left,0px)}
+  .x1h6x5ug:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:var(--_segmented-lens-left,0px)}
   .x3dkws7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{margin-bottom:calc(-1 * var(--_table-row-divider-app-width,var(--_table-row-divider-width,0px)))}
   .xec4aax:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{min-height:0}
   .x51xajf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-2px}
   .x1m1drc7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:0}
+  .x3g43gi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:var(--_segmented-after-top,0px)}
+  .x319kzk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:var(--_segmented-lens-top,0px)}
   .xw5uirw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:var(--_slider-hit-top)}
   .xk9ib7f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:0}
   .xkj6t0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:0}
   .xzkji8o:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:6px}
+  .x1l8h5kv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--_segmented-after-width,0px)}
+  .xj84cd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--_segmented-lens-width,0px)}
   .xi8c0p9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--indicator-width,1px)}
   .x1oke5ut:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--size-element-lg)}
   .x15skwfs[data-astryx-cell-gliding="line"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline:0}

package/dist/gestures/GestureHost.d.ts

@@ -96,6 +96,12 @@ export declare class GestureHost {
      * lift click (`spec:AST-094` FR28: nothing acts).
      */
     private readonly cancelledFingers;
+    /**
+     * The pens and pointer-read fingers that the app's lost focus cancelled,
+     * by pointer id. Each is kept until its lift, which must not click either,
+     * or until a new press.
+     */
+    private readonly cancelledPointers;
     /** Touch.identifier → the element the finger landed on. */
     private readonly touchTargets;
     /**
@@ -117,6 +123,8 @@ export declare class GestureHost {
     private readonly processed;
     /** pointerId → arena id, for live mouse and pen contacts. */
     private readonly pointerIds;
+    /** Each contact's kind: a blur refuses a pen's or a pointer-read finger's lift, never a mouse's. */
+    private readonly pointerKinds;
     /**
      * The boxes the host watches for screen-edge pans (syncLayoutWatch): each
      * element with an enabled one, and the root for one whose band moves with
@@ -397,7 +405,18 @@ export declare class GestureHost {
     private readonly onArmedPress;
     /** A kept press's blocking `touchmove` follows the armed press (syncTouchMoveListener). */
     private syncKeptPresses;
-    /** After a contact ends: an armed press that is over stops listening. */
+    /**
+     * A new press is a new gesture, as the click guard reads one, so the lifts
+     * the blur cancelled owe nothing after it. A second finger keeps the other
+     * fingers' refusals, since those fingers may still be down.
+     */
+    private dropCancelledLifts;
+    /**
+     * After a contact ends: an armed press that is over stops listening. A
+     * contact the lost focus cancelled still owes its lift, so the press is
+     * not over until that lift comes. A lift the page never hears ends it at
+     * the next press, or at a cancel.
+     */
     private releaseArmedPress;
     /** With nothing attached, stop listening and stop following the pointer. */
     private uninstallIfIdle;
@@ -688,6 +707,8 @@ export declare class GestureHost {
      * FR10), and no claim is released here.
      */
     private failUnclaimedLoneFingerPans;
+    /** Whether a finger's drag is claimed: then two fingers make no pinch. */
+    private isFingerClaimed;
     private readonly onVisibilityChange;
     private readonly onBlur;
     /** Whether the browser sends Touch Events at all (`ontouchstart`). */
@@ -698,6 +719,11 @@ export declare class GestureHost {
      * after load), as the move path does.
      */
     private readsFingersFromPointerEvents;
+    /**
+     * The lift of a contact the lost focus cancelled: its click is refused,
+     * and a finger's touchend after it is cancelled.
+     */
+    private refuseCancelledLift;
     /** The app lost focus: UIKit cancels every touch in flight. */
     private cancelEverything;
 }