@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/SideNav/railMotion.js

@@ -0,0 +1,253 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file railMotion.ts
+ * @input The rail's outer element, the animated-layout module's handle,
+ *   motion and in-place swap (motion/animatedLayout.ts)
+ * @output Exports `SideNavShellContext` (what AppShell lends its SideNav),
+ *   `createRailLayout`, `snapshotRail` and `playRail`: the rail's collapse
+ *   motion
+ * @position Internal to SideNav (`component:SideNav` FR6, DEC-2); AppShell's
+ *   content area moves through the context (`component:AppShell` FR17)
+ *
+ * Collapsing or expanding the rail plays one motion on one clock, the
+ * `springs.settle` role the animated-layout module reads (`spec:AST-105`
+ * FR4):
+ * - Layout snaps to the final rail width at once; nothing animates a width.
+ * - A collapse covers the old rail by a clip: the module's in-place swap
+ *   (`spec:AST-105` FR8) holds the old, expanded rail as one transient copy
+ *   and the clip closes it to the new width. The copy's text fades over the
+ *   first 40%; the real collapsed rail, raised above the copy, fades in over
+ *   the last 30%, so the real rail, icons only, is all that remains.
+ * - An expand reveals the real rail by a clip from the old width, its text
+ *   fading in over the last 60% so no label shows at the collapsed width,
+ *   under the old, collapsed rail held by the same swap, which fades over the
+ *   first 60%: the first frame is the frame before the click.
+ * - In AppShell the rail's edge rides the content column's glide, frame by
+ *   frame, so the two never part, also when a change interrupts a running
+ *   one; the copy is laid in the row that holds both.
+ * - A change made during a running motion starts from what the rail shows:
+ *   its width, its labels' opacity and its collapsed icons' opacity, so the
+ *   rail stays continuous.
+ * - Every starting clip applies in the commit's layout effect, before the
+ *   first frame paints.
+ * - Under Reduce Motion it follows `design:reduced-motion`: opacity only
+ *   under a coarse primary pointer (DR2), an immediate change otherwise
+ *   (DR3). Without Web Animations, the change lands at once.
+ *
+ * SYNC: When modified, update SideNav.tsx, AppShell.tsx and
+ * SideNavRailMotion.test.tsx.
+ */
+import { createContext } from 'react';
+import { createAnimatedLayout, holdLayoutSwap, layoutMotionFor, playLayoutFrames, playLayoutSwap } from "../motion/animatedLayout.js";
+
+/** What AppShell lends its SideNav; outside AppShell, nothing. */
+
+export const SideNavShellContext = /*#__PURE__*/createContext(null);
+SideNavShellContext.displayName = 'SideNavShellContext';
+
+/** A SideNav outside AppShell holds its own handle over its parent. */
+export function createRailLayout(rail) {
+  return createAnimatedLayout(() => rail()?.parentElement ?? null);
+}
+
+/** What a rail shows: at rest, or partway through a motion. */
+
+/** A playing rail motion. */
+
+/**
+ * Before the change commits: the old rail, where it was, and what it shows,
+ * from a running motion or at rest.
+ */
+export function snapshotRail(rail, handle, running, isCollapsed) {
+  if (rail == null || typeof rail.animate !== 'function') {
+    return null;
+  }
+  const railRect = rail.getBoundingClientRect();
+  return {
+    rail,
+    railRect,
+    shown: running ?? {
+      width: railRect.width,
+      labels: isCollapsed ? 0 : 1,
+      collapsed: isCollapsed ? 1 : 0
+    },
+    swap: holdLayoutSwap(handle, rail)
+  };
+}
+const clamp = value => Math.min(1, Math.max(0, value));
+
+/** The rail's own text: elements that hold a run of text directly. */
+function textElements(rail) {
+  return Array.from(rail.querySelectorAll('*')).filter(element => Array.from(element.childNodes).some(node => node.nodeType === 3 && node.textContent?.trim()));
+}
+
+/** `element`'s ancestor (or itself) that sits directly in `host`. */
+function childOf(host, element) {
+  let node = element;
+  while (node != null && node.parentElement !== host) {
+    node = node.parentElement;
+  }
+  return node;
+}
+const AT_REST = {
+  end: () => {},
+  shown: () => null
+};
+
+/**
+ * After the change commits, before paint: play the rail's motion from the
+ * snapshot, on the module's motion. With a `column` (in AppShell), the rail's
+ * edge rides its glide.
+ */
+export function playRail(snapshot, current, handle, column = null) {
+  const {
+    railRect,
+    swap,
+    shown: from
+  } = snapshot;
+  // The rail as it is now: a resizable rail's nav remounts when its resize
+  // wrapper comes and goes with the collapse.
+  const rail = current?.isConnected === true ? current : snapshot.rail;
+  if (!rail.isConnected) {
+    return AT_REST;
+  }
+  const motion = layoutMotionFor(rail);
+  const next = rail.getBoundingClientRect();
+  if (motion.kind === 'instant' || Math.abs(next.width - from.width) < 0.5) {
+    return AT_REST;
+  }
+  const isCollapse = next.width < from.width;
+  // The labels and the collapsed icons over the motion's progress, from what
+  // the rail showed.
+  const labelsAt = p => isCollapse ? from.labels * (1 - clamp(p / 0.4)) : from.labels + (1 - from.labels) * clamp((p - 0.4) / 0.6);
+  const collapsedAt = p => isCollapse ? from.collapsed + (1 - from.collapsed) * clamp((p - 0.7) / 0.3) : from.collapsed * (1 - clamp(p / 0.6));
+  const rtl = getComputedStyle(rail).direction === 'rtl';
+  const sign = rtl ? -1 : 1;
+  const inset = px => rtl ? `inset(0px 0px 0px ${px}px)` : `inset(0px ${px}px 0px 0px)`;
+  // The row that holds the rail and the column, or the rail's parent.
+  const host = column?.parentElement != null && column.parentElement.contains(rail) ? column.parentElement : rail.parentElement;
+  // Riding needs the swap: its frames carry the column's travel. Without one
+  // (old content that cannot be copied) the clip follows the motion's curve.
+  const rides = host != null && column?.parentElement === host && swap != null;
+  // The width the rail shows over the motion: on the column's glide (its
+  // travel so far added to where it started), or on the motion's curve.
+  const widthAt = (p, ride) => rides ? from.width + sign * ride.x : from.width + (next.width - from.width) * p;
+  const now = () => Number(rail.ownerDocument.timeline?.currentTime ?? 0);
+  const startedAt = now();
+  const durationMs = motion.kind === 'spring' ? motion.progress.durationMs : motion.durationMs;
+  const shown = () => {
+    const elapsed = now() - startedAt;
+    if (elapsed >= durationMs) {
+      return null;
+    }
+    const p = motion.kind === 'spring' ? 1 - motion.progress.remaining(elapsed) : 0;
+    let width = from.width + (next.width - from.width) * p;
+    if (rides && column != null) {
+      // The rail's edge is the column's: read it where it shows.
+      const edge = column.getBoundingClientRect();
+      const own = rail.getBoundingClientRect();
+      width = rtl ? own.right - edge.right : edge.left - own.left;
+    }
+    return {
+      width,
+      labels: labelsAt(p),
+      collapsed: collapsedAt(p)
+    };
+  };
+  const rideWith = rides && column != null ? {
+    element: column,
+    travel: {
+      x: sign * (from.width - next.width),
+      y: 0
+    },
+    isCopyMoved: false
+  } : undefined;
+  // The copy keeps the rail's inline-start edge where the rail is now, so it
+  // meets the real rail wherever SideNav sits (a centered rail moves).
+  const at = DOMRect.fromRect({
+    x: rtl ? next.right - railRect.width : next.left,
+    y: next.top,
+    width: railRect.width,
+    height: railRect.height
+  });
+  if (isCollapse) {
+    // A collapse covers the old rail, held by the swap, from the width it
+    // shows down to the new one; the real, collapsed rail fades in above it.
+    if (swap == null || host == null) {
+      return AT_REST;
+    }
+    const raised = childOf(host, rail);
+    const restore = raised == null ? null : {
+      position: raised.style.position,
+      zIndex: raised.style.zIndex
+    };
+    if (raised != null) {
+      if (getComputedStyle(raised).position === 'static') {
+        raised.style.position = 'relative';
+      }
+      raised.style.zIndex = '2';
+    }
+    const end = playLayoutSwap({
+      ...swap,
+      rect: at
+    }, {
+      host,
+      isOpaque: true,
+      copy: (p, ride) => ({
+        clipPath: inset(railRect.width - widthAt(p, ride)),
+        opacity: 1 - clamp((p - 0.7) / 0.3)
+      }),
+      copyText: labelsAt,
+      rideWith,
+      onEnd: () => {
+        if (raised != null && restore != null) {
+          raised.style.position = restore.position;
+          raised.style.zIndex = restore.zIndex;
+        }
+      },
+      incoming: [{
+        element: rail,
+        frames: p => ({
+          opacity: collapsedAt(p)
+        })
+      }]
+    });
+    return {
+      end,
+      shown
+    };
+  }
+
+  // An expand reveals the real rail from the width it showed, its text fading
+  // in late, under the old, collapsed rail fading early.
+  const incoming = [{
+    element: rail,
+    frames: (p, ride) => ({
+      clipPath: inset(next.width - widthAt(p, ride))
+    })
+  }, ...textElements(rail).map(element => ({
+    element,
+    frames: p => ({
+      opacity: labelsAt(p)
+    })
+  }))];
+  const end = swap != null && host != null ? playLayoutSwap({
+    ...swap,
+    rect: at
+  }, {
+    host,
+    isOpaque: true,
+    copy: p => ({
+      opacity: collapsedAt(p)
+    }),
+    rideWith,
+    incoming
+  }) : playLayoutFrames(handle, incoming);
+  return {
+    end,
+    shown
+  };
+}

package/dist/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoE3C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAuBhB,CAAC;AAgBH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAMvD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,MAAe,EACf,MAAM,EAAE,UAAc,EACtB,KAAS,EACT,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Bf;yBArCe,QAAQ"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgG3C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAuBhB,CAAC;AAgBH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAMvD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,MAAe,EACf,MAAM,EAAE,UAAc,EACtB,KAAS,EACT,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Bf;yBArCe,QAAQ"}

package/dist/Skeleton/Skeleton.js

@@ -40,7 +40,16 @@ const STAGGER_TIME = 100;
 // Animation Keyframes
 // =============================================================================
 
-const skeletonFade = "xgnty7z-B";
+/**
+ * The pulse climbs from 0.25 to 0.925 opacity in ten equal steps, then plays
+ * back down (`alternate`). The steps are written out as holds joined by
+ * 0.01% ramps, with a linear timing function, rather than produced by a
+ * `steps()` timing function: WebKit never runs a `steps()` animation on the
+ * compositor, so Safari would repaint the pulse on the main thread and freeze
+ * it whenever a script runs. These keyframes give the same values at the same
+ * times, which every engine can animate off the main thread.
+ */
+const skeletonFade = "x132z07p-B";
 
 // =============================================================================
 // Styles
@@ -56,8 +65,8 @@ const styles = {
     kILWW9: "xpz12be",
     k44tkh: "xqgcaz",
     ko0y90: "xa4qsjk",
-    kKVMdj: "xeuoslp x1aquc0h",
-    kyAemX: "x193epu2",
+    kKVMdj: "x1xko2in x1aquc0h",
+    kyAemX: "x1esw782",
     $$css: true
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAowBlD;yBApwBe,MAAM"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAShD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BA0zBlD;yBA1zBe,MAAM"}

package/dist/Slider/Slider.js

@@ -4,8 +4,8 @@
 
 /**
  * @file Slider.tsx
- * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip, VisuallyHidden
- * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring
+ * @input Uses React, useId, useRef, useCallback, useEffect, Field, Tooltip, useTooltip, VisuallyHidden
+ * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Slider.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Slider/ (showcase blocks)
  */
-import { useId, useMemo, useRef, useState, useCallback } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -25,6 +25,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
@@ -283,6 +284,7 @@ export function Slider({
     onFocus,
     onBlur,
     id: idProp,
+    'aria-labelledby': ariaLabelledByProp,
     'aria-describedby': ariaDescribedByProp,
     ...restWithRange
   } = props;
@@ -453,11 +455,38 @@ export function Slider({
   }, [isRange]);
 
   // Pointer handlers
+  // The pointer that owns the drag in progress. A control tracks one touch
+  // (UIKit's `isMultipleTouchEnabled` is false by default): another finger
+  // landing on the slider, moving or lifting never takes over or ends the
+  // drag the first one owns.
+  const dragPointerRef = useRef(null);
+
+  // Removes the document lostpointercapture listener of the drag in progress.
+  // It exists only while a drag does, so an idle slider holds no document
+  // listener (react-component-runtime INV5).
+  const detachLostCaptureRef = useRef(null);
+  const endDrag = useCallback(pointerId => {
+    if (draggingThumbRef.current !== null && pointerId === dragPointerRef.current) {
+      detachLostCaptureRef.current?.();
+      detachLostCaptureRef.current = null;
+      draggingThumbRef.current = null;
+      dragPointerRef.current = null;
+      setDraggingThumb(null);
+      fireChangeEnd();
+    }
+  }, [fireChangeEnd]);
+
+  // A slider unmounted mid-drag leaves no listener behind.
+  useEffect(() => () => detachLostCaptureRef.current?.(), []);
   const handlePointerDown = useCallback(e => {
     if (isDisabled) {
       return;
     }
     e.preventDefault();
+    if (draggingThumbRef.current !== null) {
+      return;
+    }
+    dragPointerRef.current = e.pointerId;
 
     // If the click originated from a mark element, snap to that mark's value
     // instead of calculating from pointer position (avoids off-by-one when
@@ -481,24 +510,30 @@ export function Slider({
     // focus event, so a thumb the user had tabbed to would keep its ring
     // through the drag.
     setKeyboardFocusThumb(null);
+
+    // A capture lost without an up or a cancel (the browser releases it, or
+    // script does) still ends the drag, so the slider never stays held by a
+    // pointer that is gone. The listener sits on the document, where
+    // lostpointercapture bubbles to and where the browser fires it when the
+    // captured node is removed, so a control node replaced during the drag
+    // (a FormLayout direction change) is still covered. It lives only for
+    // this drag.
+    const doc = e.currentTarget.ownerDocument;
+    const onLostCapture = event => endDrag(event.pointerId);
+    doc.addEventListener('lostpointercapture', onLostCapture);
+    detachLostCaptureRef.current = () => doc.removeEventListener('lostpointercapture', onLostCapture);
     if (typeof e.currentTarget.setPointerCapture === 'function') {
       e.currentTarget.setPointerCapture(e.pointerId);
     }
-  }, [isDisabled, getValueFromPosition, getClosestThumb, updateValue]);
+  }, [isDisabled, getValueFromPosition, getClosestThumb, updateValue, endDrag]);
   const handlePointerMove = useCallback(e => {
-    if (draggingThumbRef.current === null || isDisabled) {
+    if (draggingThumbRef.current === null || e.pointerId !== dragPointerRef.current || isDisabled) {
       return;
     }
     const newVal = getValueFromPosition(e.clientX, e.clientY);
     updateValue(draggingThumbRef.current, newVal);
   }, [isDisabled, getValueFromPosition, updateValue]);
-  const handlePointerUp = useCallback(_e => {
-    if (draggingThumbRef.current !== null) {
-      draggingThumbRef.current = null;
-      setDraggingThumb(null);
-      fireChangeEnd();
-    }
-  }, [fireChangeEnd]);
+  const handlePointerUp = useCallback(e => endDrag(e.pointerId), [endDrag]);
 
   // Keyboard handler
   const handleKeyDown = useCallback((thumbIndex, e) => {
@@ -624,8 +659,10 @@ export function Slider({
       "aria-orientation": orientation,
       "aria-disabled": isDisabled || undefined,
       "aria-invalid": status?.type === 'error' ? true : undefined,
-      "aria-label": thumbLabel,
-      "aria-labelledby": !isRange ? labelID : undefined,
+      "aria-label": thumbLabel
+      // A caller aria-labelledby names the control together with its label.
+      ,
+      "aria-labelledby": !isRange ? joinAriaIDs(labelID, ariaLabelledByProp) : undefined,
       "aria-describedby": [!isRange ? ariaDescribedByProp : undefined, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
       onKeyDown: after(e => handleKeyDown(thumbIndex, e), !isRange ? onKeyDown : undefined),
       onFocus: after(e => handleThumbFocus(thumbIndex, e), !isRange ? onFocus : undefined),
@@ -735,7 +772,7 @@ export function Slider({
         ref: useMergedRefs(isRange ? ref : undefined, trackRef, disabledMessageTooltip.ref),
         ...(isRange ? {
           role: 'group',
-          'aria-labelledby': labelID
+          'aria-labelledby': joinAriaIDs(labelID, ariaLabelledByProp)
         } : undefined),
         onPointerDown: after(handlePointerDown, onPointerDown),
         onPointerMove: after(handlePointerMove, onPointerMove),

package/dist/StatusDot/StatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAoFjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAmChB;yBA9Ce,SAAS"}
+{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AA+GjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAmChB;yBA9Ce,SAAS"}

package/dist/StatusDot/StatusDot.js

@@ -72,16 +72,28 @@ const variants = {
   success: {
     kWkggS: "xdsz4j9",
     kMwMTN: "xri61p4",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   warning: {
     kWkggS: "x1q8g9m5",
     kMwMTN: "xrebv38",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   error: {
     kWkggS: "x1pjz0fi",
     kMwMTN: "x1m024r3",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   accent: {

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA2yBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA80BX;yBA/1Be,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAozBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAq1BX;yBAt2Be,IAAI"}

package/dist/Stepper/Step.js

@@ -365,19 +365,23 @@ const styles = {
     $$css: true
   },
   iconSuccess: {
-    kMwMTN: "xtjic6",
+    kMwMTN: "x1vau044",
     $$css: true
   },
   iconWarning: {
-    kMwMTN: "xs3pv69",
+    kMwMTN: "x4z9hng",
     $$css: true
   },
   iconError: {
-    kMwMTN: "xjt36v0",
+    kMwMTN: "xskb5cx",
     $$css: true
   },
   numberBadge: {
     k1xSpc: "xrvj5dj",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     kgQiWS: "x1ku5rj1",
     kzqmXN: "x12xnipv",
     kZKoxP: "x6b6gus",
@@ -872,7 +876,7 @@ export function Step({
     ...{
       className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj xeuugli"
     },
-    children: [(!isCompact || indicatorPosition !== 'on-track') && indicatorNode, /*#__PURE__*/_jsx("span", {
+    children: [(!isCompact || indicatorPosition !== 'on-track') && indicatorNode, ' ', /*#__PURE__*/_jsx("span", {
       ...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle)),
       children: label
     }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
@@ -1063,7 +1067,7 @@ export function Step({
             "aria-hidden": "true",
             ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, hasIndicator && styles.otSegGapRailV, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
           })]
-        }), /*#__PURE__*/_jsxs("div", {
+        }), ' ', /*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 xdt5ytf x1nhvcw1 x98rzlu x1lsbc85 xeuugli"
           },
@@ -1103,7 +1107,7 @@ export function Step({
           "aria-hidden": "true",
           ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapRailH, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
         })]
-      }), !isCompact && /*#__PURE__*/_jsxs("div", {
+      }), ' ', !isCompact && /*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace)),
         children: [labelLineNode, otDescriptionNode]
       })]

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":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAoV9C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,aAAqB,EACrB,YAAoB,EACpB,MAAM,EACN,IAAW,EACX,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,kBAAkB,EAAE,mBAAmB,EACvC,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,IAAI,EACR,EAAE,WAAW,+BA0Ob;yBAvQe,MAAM"}

package/dist/Switch/Switch.js

@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import "./switch.markers.stylex.js";
-import { switchFocusScope, switchScope } from "./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";
@@ -190,8 +190,8 @@ const styles = {
     $$css: true
   },
   trackFocus: {
-    kI3sdo: "x1a2a7pz x1bax923",
-    kInvED: "x1s7sthk",
+    kI3sdo: "x1a2a7pz x1hn17kp",
+    kInvED: "xa7ti9",
     $$css: true
   },
   trackOff: {
@@ -404,7 +404,7 @@ export function Switch({
       "aria-describedby": ariaDescribedBy,
       "aria-invalid": status?.type === 'error' ? true : undefined,
       "aria-busy": isBusy || undefined,
-      ...stylex.props(styles.input, rtlStyles.centerInline('-50%'), styles.inputCoarse, inputSizeStyles[size], isDisabled && styles.inputDisabled, isBusy && styles.inputBusy)
+      ...stylex.props(styles.input, rtlStyles.centerInline('-50%'), styles.inputCoarse, inputSizeStyles[size], isDisabled && styles.inputDisabled, isBusy && styles.inputBusy, switchFocusInput)
     }), /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       ...mergeProps(themeProps('switch', {
@@ -461,7 +461,7 @@ export function Switch({
         disabledMessageTooltip.interactionRef(el);
       },
       ...(isDisabled ? undefined : pressable),
-      ...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope, switchFocusScope,
+      ...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),

package/dist/Switch/switch.markers.stylex.d.ts

@@ -4,6 +4,11 @@ import * as stylex from '@stylexjs/stylex';
  * Prevents focus-within and hover styles from leaking from parent containers.
  */
 export declare const switchScope: ReturnType<typeof stylex.defineMarker>;
-/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
-export declare const switchFocusScope: ReturnType<typeof stylex.defineMarker>;
+/**
+ * Marks the switch's own focusable input, the track's preceding sibling, so
+ * the track's focus ring follows that input's `:focus-visible` alone. Unlike
+ * `switchScope`, it stays on while disabled (a focusable-disabled switch
+ * still shows the ring).
+ */
+export declare const switchFocusInput: ReturnType<typeof stylex.defineMarker>;
 //# sourceMappingURL=switch.markers.stylex.d.ts.map

package/dist/Switch/switch.markers.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Switch/switch.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACxC,CAAC;AAExB,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC7C,CAAC"}
+{"version":3,"file":"switch.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Switch/switch.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACxC,CAAC;AAExB;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC7C,CAAC"}

package/dist/Switch/switch.markers.stylex.js

@@ -11,8 +11,13 @@ export const switchScope = {
   $$css: true
 };
 
-/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
-export const switchFocusScope = {
-  xgy66g5: "xgy66g5",
+/**
+ * Marks the switch's own focusable input, the track's preceding sibling, so
+ * the track's focus ring follows that input's `:focus-visible` alone. Unlike
+ * `switchScope`, it stays on while disabled (a focusable-disabled switch
+ * still shows the ring).
+ */
+export const switchFocusInput = {
+  x7rrw3w: "x7rrw3w",
   $$css: true
 };

package/dist/TabList/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAqKD;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,QAAQ,qBAmLV;yBAnMe,GAAG"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AA2KD;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,QAAQ,qBAmLV;yBAnMe,GAAG"}

package/dist/TabList/Tab.js

@@ -124,6 +124,10 @@ const hoverSizeStyles = {
   }
 };
 const layoutStyles = {
+  hug: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
   fill: {
     kUk6DE: "x98rzlu",
     kjj79g: "xl56j7k",
@@ -242,7 +246,7 @@ export function Tab({
     tabIndex: isSelected ? 0 : -1,
     ...mergeProps(themeProps('tab', {
       selected: isSelected ? 'selected' : null
-    }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isSelected && styles.selected, isFill && layoutStyles.fill, !isDisabled && tabScope,
+    }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isSelected && styles.selected, isFill ? layoutStyles.fill : layoutStyles.hug, !isDisabled && tabScope,
     // The touch press's strength and release live on the tab the
     // controller writes to; the hover layer inherits and paints it.
     !isDisabled && interactionOverlayStyles.pressedAlpha, xstyle), className, style)