@astryxdesign/lab 0.7.5-canary.fd0aba8 → 0.7.6-canary.0ef60dd

package/dist/CircularProgress/CircularProgress.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file CircularProgress.tsx
- * @input Uses React, useId, stylex, SVG, color/spacing/duration/ease tokens
+ * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
+ *   Animations, color/spacing/duration/ease tokens
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *

package/dist/CircularProgress/CircularProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAQtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuKD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAuHvB;yBAzIe,gBAAgB"}
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAWtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmWD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BA+QvB;yBAjSe,gBAAgB"}

package/dist/CircularProgress/CircularProgress.js

@@ -4,7 +4,8 @@
 
 /**
  * @file CircularProgress.tsx
- * @input Uses React, useId, stylex, SVG, color/spacing/duration/ease tokens
+ * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
+ *   Animations, color/spacing/duration/ease tokens
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -14,7 +15,7 @@
  * - /packages/lab/src/CircularProgress/index.ts (exports if types change)
  * - /apps/storybook/stories/CircularProgress.stories.tsx (storybook stories)
  */
-import { useId } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, durationVars, easeVars, fontWeightVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -35,6 +36,8 @@ import { themeProps } from '@astryxdesign/core/utils';
  * ```
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** How far a turning layer's drawing reaches past the ring's box, in px. */
+const FILL_BLEED = 2;
 const SIZE_CONFIG = {
   sm: {
     diameter: 32,
@@ -83,9 +86,11 @@ const styles = {
     $$css: true
   },
   fill: {
-    kDwRjp: "xbh8q5q",
-    kU5bRw: "x1owpc8m",
-    k1ekBW: "xxnu56j",
+    kVAEAm: "x10l6tqk",
+    kpwlN0: "x10a8y8t",
+    kVQacm: "xb3r6kr",
+    kfzvcC: "x47corl",
+    k1ekBW: "x13b0p5u",
     kIyJzY: "x80gvsz",
     kAMwcw: "xlr8y92",
     $$css: true
@@ -153,6 +158,129 @@ function defaultFormatValueLabel(value, max) {
   return `${pct}%`;
 }
 
+/**
+ * Each half-ring's turn and the leading cap's for a filled share `p` (0–1),
+ * and which parts show. A half-ring parked at the edge of its half (the right
+ * one at 0, the left one until the value passes half) is hidden, so its
+ * antialiased end never leaves a hairline at 6 o'clock.
+ */
+function fillTurns(p) {
+  const turn = 360 * p;
+  return {
+    right: Math.min(Math.max(turn, 0), 180),
+    left: Math.min(Math.max(turn, 180), 360),
+    cap: turn,
+    rightShown: p > 0 ? 1 : 0,
+    leftShown: p > 0.5 ? 1 : 0,
+    caps: p > 0 ? 1 : 0
+  };
+}
+
+/** A CSS time (`410ms`, `0.41s`, or a list's first entry) in milliseconds. */
+function parseTime(value) {
+  const first = value.split(',')[0]?.trim() ?? '';
+  const amount = Number.parseFloat(first);
+  if (!Number.isFinite(amount)) {
+    return 0;
+  }
+  return first.endsWith('ms') ? amount : amount * 1000;
+}
+
+/**
+ * The theme's easing as a function of time (0–1), evaluated by the browser
+ * itself through a detached animation, so any CSS easing works. It runs only
+ * where Web Animations exists (its caller returns first otherwise), on the
+ * fill's computed `transition-timing-function`: one easing, which a browser
+ * always reports as valid CSS.
+ */
+function easingOf(easing) {
+  const effect = new KeyframeEffect(null, null, {
+    duration: 1000,
+    easing,
+    fill: 'both'
+  });
+  const probe = new Animation(effect);
+  return t => {
+    probe.currentTime = t * 1000;
+    return effect.getComputedTiming().progress ?? t;
+  };
+}
+
+/**
+ * Keyframes for a change from `from` to `to` (filled shares), sampled once a
+ * frame on the theme's easing, with an extra sample exactly where the arc
+ * crosses 12 or 6 o'clock so each half stops and starts on time.
+ */
+function fillKeyframes(from, to, duration, ease) {
+  const count = Math.max(8, Math.ceil(duration / (1000 / 60)));
+  const grid = Array.from({
+    length: count + 1
+  }, (_, i) => i / count);
+  const at = t => from + (to - from) * ease(t);
+  // Where the eased path passes half (p = 0.5): a sample there, and one just
+  // after it, so the halves hand over on time and the left half's
+  // visibility steps rather than fades.
+  const crossings = [];
+  for (let i = 0; i < count; i++) {
+    const a = grid[i];
+    const b = grid[i + 1];
+    const fa = at(a) - 0.5;
+    const fb = at(b) - 0.5;
+    if (fa === 0) {
+      crossings.push(a);
+    } else if (fa * fb < 0) {
+      let low = a;
+      let high = b;
+      for (let k = 0; k < 24; k++) {
+        const mid = (low + high) / 2;
+        if ((at(low) - 0.5) * (at(mid) - 0.5) <= 0) {
+          high = mid;
+        } else {
+          low = mid;
+        }
+      }
+      crossings.push((low + high) / 2);
+    }
+  }
+  const times = [...new Set([...grid, ...crossings, ...crossings.map(c => c + 1e-4).filter(t => t < 1)])].sort((x, y) => x - y);
+  const frames = times.map(t => ({
+    t,
+    ...fillTurns(t === 1 ? to : at(t))
+  }));
+  // The sample at a crossing sits exactly on half, where the left half reads
+  // as hidden. Give it the side the arc is leaving instead, so the left half
+  // steps at once both ways: shrinking through half, it used to fade out
+  // from the sample before, while it still drew part of the arc (a lighter
+  // band between the end cap and 6 o'clock for a frame).
+  const onHalf = new Set(crossings);
+  for (let i = 1; i < frames.length; i += 1) {
+    if (onHalf.has(frames[i].t) || frames[i].t === 1 && to === 0.5) {
+      frames[i].leftShown = frames[i - 1].leftShown;
+    }
+  }
+  return {
+    right: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.right}deg)`,
+      opacity: f.rightShown
+    })),
+    left: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.left}deg)`,
+      opacity: f.leftShown
+    })),
+    cap: frames.map(f => ({
+      offset: f.t,
+      transform: `rotate(${f.cap}deg)`,
+      opacity: f.caps
+    })),
+    start: frames.map(f => ({
+      offset: f.t,
+      opacity: f.caps
+    }))
+  };
+}
+
 /**
  * A circular/radial progress indicator that shows completion as a ring.
  *
@@ -205,7 +333,6 @@ export function CircularProgress({
   const safeMax = Number.isFinite(max) ? max : 0;
   const clampedValue = Math.min(Math.max(0, safeValue), safeMax);
   const percentage = safeMax > 0 ? clampedValue / safeMax : 0;
-  const dashoffset = circumference * (1 - percentage);
   const valueText = formatValueLabel(clampedValue, safeMax);
   const center = diameter / 2;
   const showLabel = !isLabelHidden;
@@ -213,6 +340,89 @@ export function CircularProgress({
   const centerContent = children != null ? children : showValueLabel ? valueText : null;
   const fillVariant = isDisabled ? 'disabled' : variant;
   const trackVariant = isDisabled ? 'neutral' : variant;
+
+  // A value change turns the fill's layers with Web Animations on the
+  // compositor, from wherever the arc is drawn now (mid-change, the running
+  // change's own curve says where) to the new value, on the theme's
+  // duration and easing. What renders is always the resting state, so a
+  // first render, a render without script, or a skipped animation shows the
+  // value.
+  const fillRef = useRef(null);
+  const rightRef = useRef(null);
+  const leftRef = useRef(null);
+  const capRef = useRef(null);
+  const startRef = useRef(null);
+  // Where the arc is drawn: the value at rest, or, when a change is
+  // interrupted, the point its own curve has reached. A change's cleanup
+  // records it and releases the change's animations (react-component-runtime
+  // INV3), so the next change starts from there and an unmount or a switch to
+  // indeterminate leaves nothing running. While indeterminate no value is
+  // drawn (null): the ring draws its own arc, not the value it holds, so the
+  // next value draws at once instead of sweeping from that held value.
+  const drawn = useRef(percentage);
+  useLayoutEffect(() => {
+    const from = drawn.current;
+    if (isIndeterminate) {
+      drawn.current = null;
+      return;
+    }
+    if (from === null || from === percentage) {
+      drawn.current = percentage;
+      return;
+    }
+    const fill = fillRef.current;
+    const layers = [rightRef.current, leftRef.current, capRef.current, startRef.current];
+    drawn.current = percentage;
+    if (fill == null || layers.some(layer => typeof layer?.animate !== 'function')) {
+      return;
+    }
+    const style = getComputedStyle(fill);
+    const duration = parseTime(style.transitionDuration);
+    if (duration <= 0) {
+      return;
+    }
+    const ease = easingOf(style.transitionTimingFunction);
+    const frames = fillKeyframes(from, percentage, duration, ease);
+    const timing = {
+      duration,
+      easing: 'linear',
+      fill: 'backwards'
+    };
+    const [right, left, cap, start] = layers;
+    const animations = [right.animate(frames.right, timing), left.animate(frames.left, timing), cap.animate(frames.cap, timing), start.animate(frames.start, timing)];
+    return () => {
+      const [first] = animations;
+      const progress = first.playState !== 'finished' ? Number(first.effect?.getComputedTiming().progress ?? 1) : 1;
+      // `progress` is the change's linear time fraction; the arc is drawn on
+      // its easing, so the eased position is where it is.
+      drawn.current = from + (percentage - from) * ease(progress);
+      for (const animation of animations) {
+        animation.cancel();
+      }
+    };
+  }, [percentage, isIndeterminate]);
+  const turns = fillTurns(percentage);
+  // One half of the ring's stroke, from 6 o'clock clockwise to 12 (the left
+  // half) before its layer turns; butt ends, the caps are drawn apart.
+  const bleedBox = `${-FILL_BLEED} ${-FILL_BLEED} ${diameter + 2 * FILL_BLEED} ${diameter + 2 * FILL_BLEED}`;
+  const halfRing = /*#__PURE__*/_jsx("svg", {
+    width: diameter + 2 * FILL_BLEED,
+    height: diameter + 2 * FILL_BLEED,
+    viewBox: bleedBox,
+    ...{
+      className: "x1lliihq xbh8q5q xy6n8ys"
+    },
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: center,
+      cy: center,
+      r: radius,
+      strokeWidth: strokeWidth,
+      strokeDasharray: `${circumference / 2} ${circumference}`,
+      transform: `rotate(90 ${center} ${center})`
+    })
+  });
+  // A round cap at 12 o'clock on the ring's centerline (a zero-length stroke).
+  const capPath = `M ${center} ${strokeWidth / 2} h 0`;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('circular-progress', {
@@ -274,16 +484,83 @@ export function CircularProgress({
           cy: center,
           r: radius,
           strokeWidth: strokeWidth
-        }) : /*#__PURE__*/_jsx("circle", {
-          ...mergeProps(themeProps('circular-progress-fill', {
-            variant: fillVariant
-          }), stylex.props(styles.fill, variantStyles[fillVariant])),
-          cx: center,
-          cy: center,
-          r: radius,
-          strokeWidth: strokeWidth,
-          strokeDasharray: circumference,
-          strokeDashoffset: dashoffset
+        }) : null]
+      }), isIndeterminate ? null :
+      /*#__PURE__*/
+      // The determinate fill (see `styles.fill`). Its stroke color is
+      // set on the theming target and inherited by every part.
+      _jsxs("span", {
+        ref: fillRef,
+        "aria-hidden": "true",
+        ...mergeProps(themeProps('circular-progress-fill', {
+          variant: fillVariant
+        }), stylex.props(styles.fill, variantStyles[fillVariant])),
+        children: [/*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x10l6tqk x13vifvy x3hqpx7 x5yr21d xb3r6kr x1nrll8i"
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            ref: rightRef,
+            ...{
+              className: "x10l6tqk x13vifvy x75ztot x5yr21d x1q1rmc8 xb5nubl"
+            },
+            style: {
+              transform: `rotate(${turns.right}deg)`,
+              opacity: turns.rightShown
+            },
+            children: halfRing
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x10l6tqk x13vifvy x3hqpx7 x5yr21d xb3r6kr xu96u03"
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            ref: leftRef,
+            ...{
+              className: "x10l6tqk x13vifvy x75ztot x5yr21d x1q1rmc8 xu96u03"
+            },
+            style: {
+              transform: `rotate(${turns.left}deg)`,
+              opacity: turns.leftShown
+            },
+            children: halfRing
+          })
+        }), /*#__PURE__*/_jsx("svg", {
+          width: diameter,
+          height: diameter,
+          viewBox: `0 0 ${diameter} ${diameter}`,
+          ...{
+            className: "x10l6tqk x10a8y8t x1q1rmc8 x1lliihq xbh8q5q x1owpc8m"
+          },
+          children: /*#__PURE__*/_jsx("path", {
+            ref: startRef,
+            d: capPath,
+            strokeWidth: strokeWidth,
+            style: {
+              opacity: turns.caps
+            }
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          ref: capRef,
+          ...{
+            className: "x10l6tqk x10a8y8t x1q1rmc8"
+          },
+          style: {
+            transform: `rotate(${turns.cap}deg)`,
+            opacity: turns.caps
+          },
+          children: /*#__PURE__*/_jsx("svg", {
+            width: diameter + 2 * FILL_BLEED,
+            height: diameter + 2 * FILL_BLEED,
+            viewBox: bleedBox,
+            ...{
+              className: "x1owpc8m x1lliihq xbh8q5q xy6n8ys"
+            },
+            children: /*#__PURE__*/_jsx("path", {
+              d: capPath,
+              strokeWidth: strokeWidth
+            })
+          })
         })]
       }), centerContent != null && /*#__PURE__*/_jsx("div", {
         ...{

package/dist/CommentPin/CommentPin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentPin.d.ts","sourceRoot":"","sources":["../../src/CommentPin/CommentPin.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA4BlD,qEAAqE;AACrE,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,iBAAiB,CAAC,EAC5B,UAAU,CACX;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,EAAE,SAAS,CAAC,qBAAqB,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAC3E;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8ND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,IAAW,EACX,WAAe,EACf,WAAe,EACf,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,CA4JnC;yBA3Ke,UAAU"}
+{"version":3,"file":"CommentPin.d.ts","sourceRoot":"","sources":["../../src/CommentPin/CommentPin.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA4BlD,qEAAqE;AACrE,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,iBAAiB,CAAC,EAC5B,UAAU,CACX;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,EAAE,SAAS,CAAC,qBAAqB,EAAE,GAAG,qBAAqB,EAAE,CAAC,CAAC;IAC3E;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6OD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,IAAW,EACX,WAAe,EACf,WAAe,EACf,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAClB,UAAkB,EAClB,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,CAwLnC;yBAvMe,UAAU"}

package/dist/CommentPin/CommentPin.js

@@ -88,6 +88,11 @@ const styles = {
     kSiTet: "xyd83as x1tbh5bv",
     $$css: true
   },
+  disabledUnselected: {
+    kVAM5u: "x9r1u3d xmnqt3w",
+    kMwMTN: "xv1l7n4 x1bhcspo",
+    $$css: true
+  },
   overflowCircle: {
     kg3NbH: "xnjsko4",
     $$css: true
@@ -269,8 +274,37 @@ export function CommentPin({
     ref: mergedRef,
     type: "button",
     "aria-label": label,
-    "aria-pressed": isSelected,
-    disabled: isDisabled,
+    "aria-pressed": isSelected
+    // A disabled pin keeps its tab stop and is announced as disabled through
+    // aria-disabled instead of the native attribute (spec:AST-085 FR1). The
+    // activation guards below keep it inert (FR2); focus is kept when the
+    // pin becomes disabled while focused (FR4), and the shared focus outline
+    // still paints, dimmed with the rest of the pin (FR6).
+    ,
+    "aria-disabled": isDisabled ? 'true' : undefined,
+    onClick: e => {
+      if (isDisabled) {
+        // A natively disabled element dispatched no click at all, so an
+        // aria-disabled pin must not reach the caller's handler, and the
+        // click must not leak to a clickable ancestor (annotation surface)
+        // the native attribute never let it reach either (FR2).
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      rest.onClick?.(e);
+    }
+    // The keyboard paths to activation are Enter and Space; other keys still
+    // reach caller handlers, as on an enabled pin (FR2).
+    ,
+    onKeyDown: e => {
+      if (isDisabled && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      rest.onKeyDown?.(e);
+    },
     ...mergeProps(themeProps('comment-pin', {
       size: resolvedSize,
       grouped: isGrouped ? 'grouped' : null,
@@ -279,7 +313,7 @@ export function CommentPin({
       dimmed: isDimmed ? 'dimmed' : null,
       resolved: isResolved ? 'resolved' : null,
       disabled: isDisabled ? 'disabled' : null
-    }), focusOutlineProps.focusVisible(styles.root, sizeStyles[resolvedSize], interactionOverlayStyles.backgroundImage, (isGrouped || hasUnread) && styles.withCount, isDimmed && !isSelected && styles.dimmed, isSelected && styles.selected, isDisabled && styles.disabled, xstyle), className, style),
+    }), focusOutlineProps.focusVisible(styles.root, sizeStyles[resolvedSize], interactionOverlayStyles.backgroundImage, (isGrouped || hasUnread) && styles.withCount, isDimmed && !isSelected && styles.dimmed, isSelected && styles.selected, isDisabled && styles.disabled, isDisabled && !isSelected && styles.disabledUnselected, xstyle), className, style),
     children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...{

package/dist/lab.css

@@ -63,6 +63,7 @@
   .xln7xf2:not(#\#){font:inherit}
   .x10a8y8t:not(#\#){inset:0}
   .xkdpibf:not(#\#){margin:-1px}
+  .xy6n8ys:not(#\#){margin:-2px}
   .x1ghz6dp:not(#\#){margin:0}
   .x10h29id:not(#\#){margin:var(--spacing-0-5)}
   .x1717udv:not(#\#){padding:0}
@@ -562,8 +563,8 @@
   .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
   .xq90yva:not(#\#):not(#\#):not(#\#){transition-property:border-color,background-color}
   .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
+  .x13b0p5u:not(#\#):not(#\#):not(#\#){transition-property:none}
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
-  .xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
   .x1gfj591:not(#\#):not(#\#):not(#\#){transition-property:top,left,width,height}
   .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
@@ -578,6 +579,7 @@
   .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
   .x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
+  .x1q1rmc8:not(#\#):not(#\#):not(#\#){will-change:transform,opacity}
   .x1so62im:not(#\#):not(#\#):not(#\#){will-change:transform}
   .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
   .x8knxv4:not(#\#):not(#\#):not(#\#){z-index:-1}
@@ -676,6 +678,9 @@
   .x1ueg155:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-md)}
   .x6k0iem:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-sm)}
   .x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
+  .xb5nubl:not(#\#):not(#\#):not(#\#):not(#\#){left:-100%}
+  .xu96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+  .x1nrll8i:not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
   .x1unci72:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--spacing-4)}
   .xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
   .x1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}
@@ -746,10 +751,12 @@
   .x6jxa94:not(#\#):not(#\#):not(#\#):not(#\#){width:14px}
   .x1kky2od:not(#\#):not(#\#):not(#\#):not(#\#){width:16px}
   .x1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
+  .x75ztot:not(#\#):not(#\#):not(#\#):not(#\#){width:200%}
   .xvy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}
   .x1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
+  .x3hqpx7:not(#\#):not(#\#):not(#\#):not(#\#){width:50%}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
   .x1smflpy:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(100% - 2 * var(--spacing-0-5) - var(--border-width))}
   .xurgr9q:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(100% + (var(--spacing-3) * 2))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.5-canary.fd0aba8",
+  "version": "0.7.6-canary.0ef60dd",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.5-canary.fd0aba8",
+    "@astryxdesign/core": "0.7.6-canary.0ef60dd",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.5-canary.fd0aba8",
-    "@astryxdesign/cli": "0.7.5-canary.fd0aba8",
+    "@astryxdesign/a11y-spec": "0.7.6-canary.0ef60dd",
+    "@astryxdesign/cli": "0.7.6-canary.0ef60dd",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chat/__tests__/ChatTypingIndicator.a11y.chromium.spec.ts

@@ -140,17 +140,29 @@ async function runState(
   });
 }
 
-test('the exact known failure matches one executed ChatTypingIndicator result', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('the exact known failure matches one executed ChatTypingIndicator result', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of CHAT_TYPING_STATUS_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(
-    unmatchedKnownFailures(CHAT_TYPING_STATUS_KNOWN_FAILURES, results),
-  ).toEqual([]);
+
+  test('the exact known failure matches one executed result', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      CHAT_TYPING_STATUS_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(
+      unmatchedKnownFailures(CHAT_TYPING_STATUS_KNOWN_FAILURES, results),
+    ).toEqual([]);
+  });
 });
 
 for (const state of CHAT_TYPING_STATUS_BINDING_STATES) {