@astryxdesign/core 0.7.6 → 0.7.7-canary.1d04d40

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 and ProgressBarTouch
  * @output Exports ProgressBar component, ProgressBarProps, ProgressBarVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -35,6 +35,7 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {ProgressBarVariantMap} from './index';
+import {useProgressBarTouch} from './ProgressBarTouch';
 
 // 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
@@ -249,10 +250,26 @@ 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%)',
+        // Under a finger: the touch minimum and the flip offset (below).
+        '@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 +288,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 +311,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%',
@@ -428,7 +477,15 @@ const markOnTrackStyles = stylex.create({
 // `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
+  >;
 
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
@@ -509,7 +566,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 +598,7 @@ export function ProgressBar({
               value: mark.value,
               label: mark.label,
               pct,
-              isOnFill: percentage > 0 && pct <= percentage,
+              isOnFill: percentage > 0 && pct <= touch.drawnPercentage,
             };
           })
       : [];
@@ -582,6 +648,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),
@@ -600,7 +667,11 @@ export function ProgressBar({
             <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,
+  };
+}

package/src/Selector/Selector.tsx

@@ -46,6 +46,7 @@ import {
 } from '../Field';
 import {Divider} from '../Divider';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
 import {useKeepLayerOpenProps, type LayerPlacement} from '../Layer/useLayer';
 import {InternalInputClearButton} from '../Field/InputClearButton';
 import {Spinner} from '../Spinner';
@@ -113,6 +114,14 @@ import english from '../i18n/generated-english/Selector/Selector.generated';
 
 registerEnglishFallback(english);
 
+/**
+ * A guess, confirmed by the open measure: more options than this overflow
+ * the popover listbox's 300 px block size even at 24 px rows, under the
+ * smallest default row (28 px). A wrong guess (a theme with shorter rows, a
+ * taller bottom sheet) costs only the measure's correction.
+ */
+const MOST_ROWS_THAT_FIT = 12;
+
 const styles = stylex.create({
   // Trigger container — the enhanced click target wrapping the combobox button and clear button as siblings
   triggerContainer: {
@@ -350,7 +359,21 @@ const styles = stylex.create({
     paddingBlock: spacingVars['--spacing-1'],
     paddingInline: spacingVars['--spacing-1'],
     opacity: 1,
-    transition: `opacity ${durationVars['--duration-fast']}`,
+    // Under Reduce Motion the list appears at once on a fine pointer, and
+    // takes the shared cross-fade on a coarse one.
+    transitionProperty: 'opacity',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        reducedMotionFadeConsts.duration,
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
+    },
+    transitionTimingFunction: {
+      default: 'ease',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        reducedMotionFadeConsts.easing,
+    },
   },
   dropdownInput: {
     // The input trigger's text inset includes its border. Mirror that extra
@@ -376,7 +399,8 @@ const styles = stylex.create({
   },
   dropdownHidden: {
     opacity: 0,
-    transition: 'none',
+    // A longhand: the shorthand would lose to the list's longhands.
+    transitionProperty: 'none',
   },
 
   // Popover container (for anchor positioning)
@@ -1407,10 +1431,13 @@ export function Selector<T extends SelectorOptionType>(
     return match == null ? -1 : Number(match[1]);
   }, []);
   // Re-measured when the option set changes; the count is the dependency.
+  // A list longer than the most rows that can fit cannot fit, so it starts
+  // as a scroll container and the open measure only confirms it.
   const listboxHasOverflow = useMenuOverflow(
     listboxRef,
     filteredItems.length,
     surface.isOpen,
+    filteredItems.length > MOST_ROWS_THAT_FIT,
   );
   const listboxPress = useMenuPress({
     menuRef: listboxRef,

package/src/Slider/Slider.doc.mjs

@@ -237,12 +237,14 @@ export const docs = {
     {
       name: 'containerClassName',
       type: 'string',
-      description: 'Class name for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Class name for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'containerStyle',
       type: 'CSSProperties',
-      description: 'Inline styles for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Inline styles for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'controlXstyle',
@@ -295,7 +297,7 @@ export const docs = {
     ],
     anatomy,
     description:
-      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.',
+      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage. Under a finger, on any touch device, it tracks as UISlider does: only the thumb takes a drag, through a target larger than it, the value follows the finger’s travel rather than jumping to it, a release coasts on before `onChangeEnd`, a swipe from the track scrolls the page, and a tap on the track or a mark sets the value when the finger lifts (the thumb springs there). A mouse drag on a thumb tracks the same way, past the same 10 px in any direction, with no lift or coast; a mouse press on the track moves the thumb there, and only a primary click presses. A pen drags as a finger does, claiming only along the track, and its drag ends at the release with no coast. A wheel or a trackpad scroll over the slider goes to whatever scrolls under it.',
     bestPractices: [
       {
         guidance: true,
@@ -508,7 +510,7 @@ export const docsZh = {
   usage: {
     anatomy,
     description:
-      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.',
+      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage. Under a finger, on any touch device, it tracks as UISlider does: only the thumb takes a drag, through a target larger than it, the value follows the finger’s travel rather than jumping to it, a release coasts on before `onChangeEnd`, a swipe from the track scrolls the page, and a tap on the track or a mark sets the value when the finger lifts (the thumb springs there). A mouse drag on a thumb tracks the same way, past the same 10 px in any direction, with no lift or coast; a mouse press on the track moves the thumb there, and only a primary click presses. A pen drags as a finger does, claiming only along the track, and its drag ends at the release with no coast. A wheel or a trackpad scroll over the slider goes to whatever scrolls under it.',
     bestPractices: [
       {
         guidance: true,
@@ -544,7 +546,7 @@ export const docsDense = {
   usage: {
     anatomy,
     description:
-      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.',
+      'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage. Under a finger, on any touch device, it tracks as UISlider does: only the thumb takes a drag, through a target larger than it, the value follows the finger’s travel rather than jumping to it, a release coasts on before `onChangeEnd`, a swipe from the track scrolls the page, and a tap on the track or a mark sets the value when the finger lifts (the thumb springs there). A mouse drag on a thumb tracks the same way, past the same 10 px in any direction, with no lift or coast; a mouse press on the track moves the thumb there, and only a primary click presses. A pen drags as a finger does, claiming only along the track, and its drag ends at the release with no coast. A wheel or a trackpad scroll over the slider goes to whatever scrolls under it.',
     bestPractices: [
       {
         guidance: true,
@@ -574,10 +576,12 @@ export const docsDense = {
     ],
   },
   propDescriptions: {
-    containerXstyle: 'StyleX styles for the field container; no effect in InputGroup or horizontal-labels FormLayout. No root xstyle/className/style.',
+    containerXstyle:
+      'StyleX styles for the field container; no effect in InputGroup or horizontal-labels FormLayout. No root xstyle/className/style.',
     containerClassName: 'Class name for the field container.',
     containerStyle: 'Inline styles for the field container.',
-    controlXstyle: 'StyleX styles for the visual control box (border, background, icons); not the native input.',
+    controlXstyle:
+      'StyleX styles for the visual control box (border, background, icons); not the native input.',
     controlClassName: 'Class name for the visual control box.',
     controlStyle: 'Inline styles for the visual control box.',
     label: 'Label text (always rendered for a11y).',