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

package/src/Popover/usePopover.tsx

@@ -19,7 +19,7 @@
 import React, {useCallback, useEffect, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {useLayer, type ContextRenderProps} from '../Layer/useLayer';
-import {useFocusTrap} from '../hooks/useFocusTrap';
+import {useFocusTrapInternal} from '../hooks/useFocusTrap';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {
@@ -34,6 +34,7 @@ import {rtlStyles} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {mergeProps} from '../utils/mergeProps';
+import {isFocusDetached} from '../utils/focusReturn';
 import {themeProps} from '../utils/themeProps';
 import {paddingStyles} from '../Layout/padding.stylex';
 import type {SpacingStep} from '../utils/types';
@@ -422,28 +423,51 @@ function usePopoverImplementation(
 
   // Track whether to skip auto-focus for the current open event
   const skipAutoFocusRef = useRef(false);
+  // Whether `show` focused a content control within the opening event.
+  const hasFocusedInGestureRef = useRef(false);
+
+  // Set when the layer reports it has shown, so `show` can tell a popover
+  // that opened within the call from one whose content mounts later.
+  const hasShownRef = useRef(false);
+  const handleLayerShow = useCallback(() => {
+    hasShownRef.current = true;
+    onShow?.();
+  }, [onShow]);
 
   // Core layer for popover positioning
   const layer = useLayer({
     mode: 'context',
     lightDismiss: hasLightDismiss,
-    onShow,
+    onShow: handleLayerShow,
     onHide,
   });
 
   // Focus trap for the popover content. Escape stays registered while light
   // dismiss is on (native popover="auto" closes on Escape regardless), so a
   // host Dialog keeps deferring to this trap instead of double-dismissing.
-  const {containerRef: contentRef, focusFirst} = useFocusTrap<HTMLDivElement>({
-    isActive: layer.isOpen,
-    onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined,
-  });
+  // The element focused when `show` ran: initial focus may move inside before
+  // the trap activates, so the trap restores focus here instead.
+  const openerRef = useRef<HTMLElement | null>(null);
+  const getRestoreTarget = useCallback(() => openerRef.current, []);
+  const {containerRef: contentRef, focusFirst} =
+    useFocusTrapInternal<HTMLDivElement>({
+      isActive: layer.isOpen,
+      onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined,
+      getRestoreTarget,
+    });
 
   const focusInitialTarget = useCallback(() => {
     const container = contentRef.current;
     if (!container) {
       return;
     }
+    // Focus already on a control inside (set in `onShow`, or a press in the
+    // content) is where the user or the caller wants it; moving it would
+    // undo that.
+    const active = container.ownerDocument.activeElement;
+    if (active != null && active !== container && container.contains(active)) {
+      return;
+    }
     if (focusFirstContentControl(container)) {
       return;
     }
@@ -459,16 +483,23 @@ function usePopoverImplementation(
     // Reset the per-open focus preference after the popover closes.
     if (!layer.isOpen) {
       skipAutoFocusRef.current = false;
+      hasFocusedInGestureRef.current = false;
       return;
     }
     if (hasAutoFocus && !skipAutoFocusRef.current) {
       // Wait a frame so the content is mounted. A popover that closes or
       // unmounts first cancels it: the frame would otherwise move focus into
       // content that is no longer shown, after the close had left it alone.
-      const frame = requestAnimationFrame(focusInitialTarget);
+      const frame = requestAnimationFrame(() => {
+        const doc = contentRef.current?.ownerDocument ?? document;
+        if (hasFocusedInGestureRef.current && !isFocusDetached(doc)) {
+          return;
+        }
+        focusInitialTarget();
+      });
       return () => cancelAnimationFrame(frame);
     }
-  }, [layer.isOpen, hasAutoFocus, focusInitialTarget]);
+  }, [layer.isOpen, hasAutoFocus, focusInitialTarget, contentRef]);
 
   // Combined ref for trigger element (layer anchor + our ref). It is keyed on
   // the layer's own ref, not the whole layer: the layer object changes with
@@ -490,9 +521,40 @@ function usePopoverImplementation(
   const show = useCallback(
     (showOptions?: {skipAutoFocus?: boolean}) => {
       skipAutoFocusRef.current = showOptions?.skipAutoFocus ?? false;
+      hasShownRef.current = false;
+      const activeElement = (
+        triggerElementRef.current?.ownerDocument ?? document
+      ).activeElement as HTMLElement | null;
+      openerRef.current =
+        activeElement != null && !contentRef.current?.contains(activeElement)
+          ? activeElement
+          : null;
       layer.show();
+      // When the content is already mounted, the layer shows it within this
+      // call, so initial focus lands within the event that opened it: iOS
+      // raises its keyboard only for a focus made while the tap is still
+      // being handled. The frame in the effect above stays for content that
+      // mounts later.
+      // Only a content control already rendered takes focus here; content
+      // that renders on open (and the dialog-surface fallback) waits for the
+      // effect's frame.
+      const container = contentRef.current;
+      if (
+        hasShownRef.current &&
+        hasAutoFocus &&
+        !skipAutoFocusRef.current &&
+        container != null &&
+        !container.contains(container.ownerDocument.activeElement) &&
+        focusFirstContentControl(container)
+      ) {
+        // Initial focus is done. The effect's frame stays only as a fallback
+        // for focus lost to the page (content swapped in the same handler
+        // unmounts the control just focused); it must not move focus the user
+        // has since moved elsewhere.
+        hasFocusedInGestureRef.current = true;
+      }
     },
-    [layer],
+    [layer, hasAutoFocus, contentRef],
   );
 
   // Toggle function. Opening delegates to show so every route inherits the

package/src/PowerSearch/PowerSearch.tsx

@@ -31,6 +31,7 @@ import {
   type TokenizerOverflowBehavior,
 } from '../Tokenizer';
 import {TokenizerClearAllMessageContext} from '../Tokenizer/TokenizerClearAllMessageContext';
+import {TokenizerItemRemovableContext} from '../Tokenizer/TokenizerItemRemovableContext';
 import {TypeaheadItem} from '../Typeahead/TypeaheadItem';
 import {Token} from '../Token';
 import {Avatar} from '../Avatar';
@@ -751,6 +752,10 @@ export function PowerSearch({
     [config, filters, onChange, setPopoverState],
   );
 
+  // Tokenizer's Backspace does not go through renderToken. This predicate
+  // locks every token of a read-only field.
+  const isItemRemovable = useCallback(() => !isReadOnly, [isReadOnly]);
+
   // Handle clicking a token to edit
   const handleTokenClick = useCallback(
     (index: number) => {
@@ -1117,37 +1122,39 @@ export function PowerSearch({
         {/* The field's Clear all announces PowerSearch's own words
             (component:PowerSearch; component:Tokenizer AR7). */}
         <TokenizerClearAllMessageContext value={clearAllMessage}>
-          <Tokenizer
-            handleRef={tokenizerRef}
-            label={label}
-            isLabelHidden={isLabelHidden}
-            searchSource={searchSource}
-            value={tokenizerValue}
-            onChange={handleTokenizerChange}
-            renderToken={renderToken}
-            renderItem={renderItem}
-            maxMenuItems={MAX_BROWSE_MENU_ITEMS}
-            menuWidth={menuWidth}
-            placeholder={filters.length === 0 ? placeholder : ''}
-            hasAutoFocus={hasAutoFocus}
-            hasClear={hasClear && !isReadOnly}
-            startIcon={startIcon}
-            endContent={combinedEndContent}
-            isDisabled={isDisabled}
-            disabledMessage={disabledMessage}
-            size={size}
-            tokenOverflowBehavior={tokenOverflowBehavior}
-            hasEntriesOnFocus
-            debounceMs={0}
-            status={status}
-            statusVariant={statusVariant}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            containerXstyle={xstyle}
-            containerClassName={className}
-            containerStyle={style}
-            data-testid={testId}
-          />
+          <TokenizerItemRemovableContext value={isItemRemovable}>
+            <Tokenizer
+              handleRef={tokenizerRef}
+              label={label}
+              isLabelHidden={isLabelHidden}
+              searchSource={searchSource}
+              value={tokenizerValue}
+              onChange={handleTokenizerChange}
+              renderToken={renderToken}
+              renderItem={renderItem}
+              maxMenuItems={MAX_BROWSE_MENU_ITEMS}
+              menuWidth={menuWidth}
+              placeholder={filters.length === 0 ? placeholder : ''}
+              hasAutoFocus={hasAutoFocus}
+              hasClear={hasClear && !isReadOnly}
+              startIcon={startIcon}
+              endContent={combinedEndContent}
+              isDisabled={isDisabled}
+              disabledMessage={disabledMessage}
+              size={size}
+              tokenOverflowBehavior={tokenOverflowBehavior}
+              hasEntriesOnFocus
+              debounceMs={0}
+              status={status}
+              statusVariant={statusVariant}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              containerXstyle={xstyle}
+              containerClassName={className}
+              containerStyle={style}
+              data-testid={testId}
+            />
+          </TokenizerItemRemovableContext>
         </TokenizerClearAllMessageContext>
       </div>
       {popover.render(popoverContent, {

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -101,7 +101,8 @@ export const docs = {
     {
       name: 'isIndeterminate',
       type: 'boolean',
-      description: 'Animated loading indicator for unknown progress.',
+      description:
+        'Animated loading indicator for unknown progress. Under reduced motion it pulses in place instead of sliding.',
       default: 'false',
     },
     {
@@ -160,7 +161,7 @@ export const docs = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,
@@ -304,7 +305,7 @@ export const docsZh = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,
@@ -347,7 +348,7 @@ export const docsDense = {
   usage: {
     anatomy,
     description:
-      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.",
+      "A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting. Under a finger a new value animates as on iOS: linearly, in proportion to how far it moves (a full track takes one second at the theme's default tempo), and the fill keeps a minimum visible length above zero.",
     bestPractices: [
       {
         guidance: true,
@@ -390,7 +391,8 @@ export const docsDense = {
     formatValueLabel:
       'Custom value label formatter; defaults to percentage string.',
     variant: 'Semantic color variant.',
-    isIndeterminate: 'Animated loading indicator for unknown progress.',
+    isIndeterminate:
+      'Animated loading indicator for unknown progress. Under reduced motion it pulses in place instead of sliding.',
     marks:
       'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. Marks inside the fill take the variant on-color; marks on the bare track take the primary text color (secondary when disabled). A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
     isDisabled: 'Visually disabled: grays out fill and text.',

package/src/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file ProgressBar.tsx
- * @input Uses React, useId, stylex, color/spacing/radius/transition tokens
+ * @input Uses React, useId, stylex, tokens, ProgressBarTouch and resolveMotion
  * @output Exports ProgressBar component, ProgressBarProps, ProgressBarVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -35,6 +35,11 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {ProgressBarVariantMap} from './index';
+import {useProgressBarTouch} from './ProgressBarTouch';
+import {formatMotionRoleValue} from '../motion/roles';
+import {resolveMotion} from '../motion/resolveMotion';
+import {progressBar} from '../motion/uikit/progressBar';
+import {timing} from '../motion/uikit/timing';
 
 // Every mark is wrapped in a Tooltip (marks always carry a label), so load it
 // lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
@@ -116,7 +121,7 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
    * When true, renders an animated indeterminate progress indicator.
    * Use when the progress amount is unknown (e.g. loading, processing).
    * The `value` and `hasValueLabel` props are ignored in this mode.
-   * Respects `prefers-reduced-motion` by slowing the animation.
+   * Under reduced motion it pulses in place instead of sliding.
    * @default false
    */
   isIndeterminate?: boolean;
@@ -169,6 +174,19 @@ const indeterminateSlideRtl = stylex.keyframes({
   },
 });
 
+// Under reduced motion the indeterminate fill stops travelling and pulses in
+// place. It goes from full opacity down to the pulse's floor
+// (`--_progress-bar-pulse-floor`, the progress table's) and back. The
+// animation alternates direction each pass.
+const indeterminatePulse = stylex.keyframes({
+  from: {
+    opacity: 1,
+  },
+  to: {
+    opacity: 'var(--_progress-bar-pulse-floor)',
+  },
+});
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -249,10 +267,25 @@ const styles = stylex.create({
   // no transform), as before: the track's clip would cut the CanvasText
   // outline's start cap off a slid fill, and that outline is what keeps the
   // fill's shape visible there (architecture:theme-tokens INV11).
+  //
+  // Under a finger (TOUCH_QUERY, on every touch device), the fill moves as
+  // UIProgressView's setProgress(_:animated: true) does. It moves linearly
+  // from wherever it is drawn. Its duration is the `progress.fillTrackMs` role
+  // times the share of the track the value moved (`--_progress-bar-move`).
+  // Its curve is the `progress.curves.fill` role (`--_progress-bar-curve`).
+  // The touch layer (ProgressBarTouch) writes both, and this rule scales the
+  // duration by the theme's tempo. Above zero, the fill never draws shorter
+  // than the touch minimum (`--_progress-bar-min`, 16px on the 8px track). At
+  // zero it paints nothing (`fillEmpty`). Under reduced motion it lands at
+  // once, as everywhere (below). A mouse or trackpad keeps the theme's timing.
   fill: {
     width: {
       default: '100%',
-      '@media (forced-colors: active)': 'var(--_progress-bar-fill, 0%)',
+      '@media (forced-colors: active)': {
+        default: 'var(--_progress-bar-fill, 0%)',
+        '@media (pointer: coarse)':
+          'calc(max(var(--_progress-bar-fill, 0%), var(--_progress-bar-min, 0px)) + var(--_progress-bar-flip, 0) * 0.01px)',
+      },
     },
     height: '100%',
     // Forced colors replace status fills with Canvas; this boundary keeps the
@@ -271,6 +304,19 @@ const styles = stylex.create({
         default: 'translateX(calc(100% - var(--_progress-bar-fill, 0%)))',
         '@media (forced-colors: active)': 'none',
       },
+      '@media (pointer: coarse)': {
+        // `--_progress-bar-flip` steps 0, 1, 2, 0… on every change. It moves
+        // the fill by that many hundredths of a pixel. So a change back to the
+        // value it just left is never the running transition's own start
+        // value. CSS shortens a transition that reverses to its start, which
+        // would halve a return mid-flight (10 → 90 → 10). It takes three
+        // values because two would repeat on that return.
+        default:
+          'translateX(calc(max(var(--_progress-bar-fill, 0%), var(--_progress-bar-min, 0px)) - 100% + var(--_progress-bar-flip, 0) * 0.01px))',
+        ':dir(rtl)':
+          'translateX(calc(min(calc(100% - var(--_progress-bar-fill, 0%)), calc(100% - var(--_progress-bar-min, 0px))) - var(--_progress-bar-flip, 0) * 0.01px))',
+      },
+      // After the touch key, so StyleX negates that key under forced colors.
       '@media (forced-colors: active)': 'none',
     },
     willChange: {
@@ -281,17 +327,36 @@ const styles = stylex.create({
       default: 'transform',
       '@media (forced-colors: active)': 'width',
     },
-    // Under reduced motion a new value lands at once, on every pointer: the
-    // fill never travels (design:reduced-motion DR1). The keys are the shared
-    // reduced-motion queries, a fine pointer's and a coarse pointer's, spelled
-    // as the record's other transitions spell them.
+    // Under reduced motion a new value lands at once, with a mouse as with a
+    // finger: the fill never travels. The keys are the shared reduced-motion
+    // queries, as the other transitions spell them. The coarse key comes after
+    // the touch key, so it wins there.
     transitionDuration: {
       default: durationVars['--duration-medium'],
+      // The touch layer's move (the `progress.fillTrackMs` role times the
+      // share moved), scaled by the theme's tempo.
+      '@media (pointer: coarse)': {
+        default:
+          'calc(var(--_progress-bar-move, 0ms) * var(--_astryx-motion-tempo, 1))',
+        // Under forced colors the fill is sized by `width` instead. Touch
+        // motion never animates a layout property, so with a finger the new
+        // size lands at once there.
+        '@media (forced-colors: active)': '0s',
+      },
       '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
         '0s',
       '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
     },
-    transitionTimingFunction: easeVars['--ease-standard'],
+    transitionTimingFunction: {
+      default: easeVars['--ease-standard'],
+      '@media (pointer: coarse)': 'var(--_progress-bar-curve, linear)',
+    },
+  },
+  fillEmpty: {
+    opacity: {
+      default: null,
+      '@media (pointer: coarse)': 0,
+    },
   },
   indeterminateFill: {
     height: '100%',
@@ -304,17 +369,37 @@ const styles = stylex.create({
       '@media (forced-colors: active)': 'CanvasText',
     },
     outlineOffset: {default: null, '@media (forced-colors: active)': '-1px'},
-    width: '40%',
+    // Under reduced motion, on every pointer, the fill spans the whole track
+    // as one solid bar, and only its opacity pulses. Each way takes the
+    // `progress.reducedMotionPulseMs` role on the `timing.curves.move` curve
+    // (`--_progress-bar-pulse`, `--_progress-bar-pulse-curve`, set inline from
+    // the progress table). A busy loop: tempo does not scale it.
+    width: {
+      default: '40%',
+      '@media (prefers-reduced-motion: reduce)': '100%',
+    },
     borderRadius: radiusVars['--radius-full'],
     animationName: {
       default: indeterminateSlide,
-      ':is([dir="rtl"] *)': indeterminateSlideRtl,
+      ':is([dir="rtl"] *)': {
+        default: indeterminateSlideRtl,
+        '@media (prefers-reduced-motion: reduce)': indeterminatePulse,
+      },
+      '@media (prefers-reduced-motion: reduce)': indeterminatePulse,
     },
     animationDuration: {
       default: '1.5s',
-      '@media (prefers-reduced-motion: reduce)': '3s',
+      '@media (prefers-reduced-motion: reduce)': 'var(--_progress-bar-pulse)',
+    },
+    animationTimingFunction: {
+      default: 'ease-in-out',
+      '@media (prefers-reduced-motion: reduce)':
+        'var(--_progress-bar-pulse-curve)',
+    },
+    animationDirection: {
+      default: null,
+      '@media (prefers-reduced-motion: reduce)': 'alternate',
     },
-    animationTimingFunction: 'ease-in-out',
     animationIterationCount: 'infinite',
   },
   // A mark is a vertical tick centered on the track via their shared positioning container.
@@ -425,10 +510,41 @@ const markOnTrackStyles = stylex.create({
   },
 });
 
+// The reduced-motion pulse's variables, from the progress table.
+type PulseStyle = CSSProperties &
+  Record<
+    | '--_progress-bar-pulse'
+    | '--_progress-bar-pulse-curve'
+    | '--_progress-bar-pulse-floor',
+    string
+  >;
+
 // `CSSProperties` has no index signature for custom properties, so the fill's
 // inline style — which publishes the filled share as the private
 // `--_progress-bar-fill` — needs this augmentation to typecheck.
-type FillStyle = CSSProperties & Record<'--_progress-bar-fill', string>;
+type FillStyle = CSSProperties &
+  Record<
+    | '--_progress-bar-fill'
+    | '--_progress-bar-move'
+    | '--_progress-bar-curve'
+    | '--_progress-bar-flip'
+    | '--_progress-bar-min',
+    string
+  >;
+
+/**
+ * The reduced-motion pulse plays the `progress.reducedMotionPulseMs` role on
+ * the `timing.curves.move` curve, down to the progress table's floor.
+ */
+function pulseStyle(element: Element | null): PulseStyle {
+  const pulseMs = resolveMotion(element, progressBar, 'reducedMotionPulseMs');
+  const curve = resolveMotion(element, timing.curves.move);
+  return {
+    '--_progress-bar-pulse': `${pulseMs}ms`,
+    '--_progress-bar-pulse-curve': formatMotionRoleValue('curve', curve),
+    '--_progress-bar-pulse-floor': String(progressBar.reducedMotionPulseFloor),
+  };
+}
 
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
@@ -509,7 +625,16 @@ export function ProgressBar({
   const showValueLabel = hasValueLabel && !isIndeterminate;
 
   const fillVariant = isDisabled ? 'disabled' : variant;
-  const fillStyle: FillStyle = {'--_progress-bar-fill': `${percentage}%`};
+  // Under a finger the fill moves as UIProgressView's does and draws at least
+  // 16px; what that needs from script is the touch layer's (ProgressBarTouch).
+  const touch = useProgressBarTouch(
+    percentage,
+    !isIndeterminate && (marks?.length ?? 0) > 0,
+  );
+  const fillStyle: FillStyle = {
+    '--_progress-bar-fill': `${percentage}%`,
+    ...touch.fillVars,
+  };
 
   // Marks make no sense without a determinate value, so they are only drawn
   // in determinate mode. Non-finite mark values are dropped; the rest are
@@ -532,7 +657,7 @@ export function ProgressBar({
               value: mark.value,
               label: mark.label,
               pct,
-              isOnFill: percentage > 0 && pct <= percentage,
+              isOnFill: percentage > 0 && pct <= touch.drawnPercentage,
             };
           })
       : [];
@@ -582,6 +707,7 @@ export function ProgressBar({
           aria-valuemax={isIndeterminate ? undefined : safeMax}
           aria-labelledby={labelId}
           aria-valuetext={isIndeterminate ? undefined : valueText}
+          ref={touch.trackRef}
           {...mergeProps(
             themeProps('progress-bar-track'),
             stylex.props(styles.track),
@@ -595,12 +721,17 @@ export function ProgressBar({
                   variantStyles[fillVariant],
                 ),
               )}
+              style={pulseStyle(null)}
             />
           ) : (
             <div
               {...mergeProps(
                 themeProps('progress-bar-fill', {variant: fillVariant}),
-                stylex.props(styles.fill, variantStyles[fillVariant]),
+                stylex.props(
+                  styles.fill,
+                  percentage === 0 && styles.fillEmpty,
+                  variantStyles[fillVariant],
+                ),
               )}
               style={fillStyle}
             />

package/src/ProgressBar/ProgressBarTouch.ts

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBarTouch.ts
+ * @input Uses React, the touch presentation resolver, the shared resize
+ *   observer, and the progress table's roles (through resolveMotion)
+ * @output useProgressBarTouch: the fill's touch variables (move length,
+ *   curve, return offset, minimum length) and, under a finger with marks,
+ *   the share of the track the fill draws
+ * @position ProgressBar's touch layer, imported only by ProgressBar.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/ProgressBar/ProgressBar.tsx
+ * (its touch styles read these variables and the 16px minimum) and
+ * /packages/core/src/motion/uikit/progressBar.ts.
+ */
+
+import {useEffect, useRef, useState, type RefObject} from 'react';
+import {formatMotionRoleValue} from '../motion/roles';
+import {resolveMotion} from '../motion/resolveMotion';
+import {progressBar} from '../motion/uikit/progressBar';
+import {observeResize} from '../utils/sharedResizeObserver';
+import {useTouchPresentation} from '../utils/touchPresentation';
+
+/** The track's height. */
+const TRACK_HEIGHT_PX = 8;
+
+/**
+ * Under a finger the fill never draws shorter than this above zero:
+ * UIProgressView's minimum, two track heights, on ProgressBar's 8px track.
+ */
+export const TOUCH_MIN_FILL_PX =
+  progressBar.progressView.minimumFillHeights * TRACK_HEIGHT_PX;
+
+export interface ProgressBarTouch {
+  /** The fill's touch timing variables, set inline on the fill. */
+  fillVars: Record<
+    | '--_progress-bar-move'
+    | '--_progress-bar-curve'
+    | '--_progress-bar-flip'
+    | '--_progress-bar-min',
+    string
+  >;
+  /** The track, measured under a finger when the bar has marks. */
+  trackRef: RefObject<HTMLDivElement | null>;
+  /** The share of the track the fill draws (0–100), for placing marks. */
+  drawnPercentage: number;
+}
+
+export function useProgressBarTouch(
+  percentage: number,
+  hasMarks: boolean,
+): ProgressBarTouch {
+  // The touch fill's duration comes from how far the value moved since the
+  // last value, the model change that UIKit measures. It holds until the next
+  // change, so a re-render with the same value keeps it.
+  const [motion, setMotion] = useState({percentage, change: 0, flip: 0});
+  const isNewValue = motion.percentage !== percentage;
+  // The share of the track the value moved (0–1). `flip` steps through three
+  // values on every change (see the fill's touch transform).
+  const change = isNewValue
+    ? Math.abs(percentage - motion.percentage) / 100
+    : motion.change;
+  const flip = isNewValue ? (motion.flip + 1) % 3 : motion.flip;
+  if (isNewValue) {
+    setMotion({percentage, change, flip});
+  }
+
+  // Under a finger the fill draws at least TOUCH_MIN_FILL_PX long, so a mark
+  // it covers there sits on the fill. That length is a share of the track's
+  // width, which only layout knows. So the track is measured, but only under
+  // a finger and only when the bar has marks.
+  const {isTouch} = useTouchPresentation();
+  const watchesTrack = isTouch && hasMarks;
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  useEffect(() => {
+    const element = trackRef.current;
+    if (!watchesTrack || element == null) {
+      return;
+    }
+    // The shared observer; its first call (on registration) carries no
+    // contentRect, so that one reads the box.
+    return observeResize(element, entry => {
+      setTrackWidth(
+        entry.contentRect?.width ?? element.getBoundingClientRect().width,
+      );
+    });
+  }, [watchesTrack]);
+  const drawnPercentage =
+    watchesTrack && percentage > 0 && trackWidth > 0
+      ? Math.max(percentage, (TOUCH_MIN_FILL_PX / trackWidth) * 100)
+      : percentage;
+
+  // CSS applies the theme's tempo to this duration.
+  const fillTrackMs = resolveMotion(null, progressBar, 'fillTrackMs');
+  const curve = resolveMotion(null, progressBar.curves.fill);
+  return {
+    fillVars: {
+      '--_progress-bar-move': `${Math.round(change * fillTrackMs * 1000) / 1000}ms`,
+      '--_progress-bar-curve': formatMotionRoleValue('curve', curve),
+      '--_progress-bar-flip': String(flip),
+      '--_progress-bar-min': `${TOUCH_MIN_FILL_PX}px`,
+    },
+    trackRef,
+    drawnPercentage,
+  };
+}