@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,7 @@
  * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
 
-import {lazy, Suspense, useId} from 'react';
+import {lazy, Suspense, useId, type CSSProperties} from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 import {
@@ -223,19 +223,37 @@ const styles = stylex.create({
     position: 'relative',
     width: '100%',
   },
-  // The semantic rail holds only the fill, which rounds its own corners.
+  // The semantic rail holds only the fill and clips it to the rounded rail:
+  // the determinate fill slides in from the inline-start side and the
+  // indeterminate one overshoots both ends. Marks live outside the track (in
+  // trackContainer), so the clip never cuts a themed tall mark.
   track: {
     width: '100%',
     height: '8px',
     backgroundColor: colorVars['--color-background-muted'],
     borderRadius: radiusVars['--radius-full'],
-  },
-  // The indeterminate fill overshoots the track on both sides and must be
-  // clipped to the visible rail. Marks are suppressed in this mode.
-  trackClipped: {
     overflow: 'hidden',
   },
+  // The determinate fill spans the whole track and slides along it with a
+  // transform, so a value change animates on the compositor and keeps moving
+  // while a script runs; animating `width` would lay out and repaint on the
+  // main thread every frame and stall with it. `--_progress-bar-fill` is the
+  // filled share of the track (set inline); the fill's leading edge sits
+  // exactly there, mirrored in RTL. The mirror follows the bar's own
+  // direction (`:dir(rtl)`, the nearest `dir`), not any RTL ancestor, so a bar
+  // in an LTR region of an RTL page fills from the left like its label and
+  // marks. The layer is declared up front so Safari has the whole bar painted
+  // before it first moves.
+  //
+  // Under forced colors the fill is sized to the value instead (its `width`,
+  // 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).
   fill: {
+    width: {
+      default: '100%',
+      '@media (forced-colors: active)': 'var(--_progress-bar-fill, 0%)',
+    },
     height: '100%',
     // Forced colors replace status fills with Canvas; this boundary keeps the
     // fill's shape visible (architecture:theme-tokens INV11).
@@ -247,8 +265,32 @@ const styles = stylex.create({
     },
     outlineOffset: {default: null, '@media (forced-colors: active)': '-1px'},
     borderRadius: radiusVars['--radius-full'],
-    transitionProperty: 'width',
-    transitionDuration: durationVars['--duration-medium'],
+    transform: {
+      default: 'translateX(calc(var(--_progress-bar-fill, 0%) - 100%))',
+      ':dir(rtl)': {
+        default: 'translateX(calc(100% - var(--_progress-bar-fill, 0%)))',
+        '@media (forced-colors: active)': 'none',
+      },
+      '@media (forced-colors: active)': 'none',
+    },
+    willChange: {
+      default: 'transform',
+      '@media (forced-colors: active)': 'auto',
+    },
+    transitionProperty: {
+      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.
+    transitionDuration: {
+      default: durationVars['--duration-medium'],
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   indeterminateFill: {
@@ -383,6 +425,11 @@ 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>;
+
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
   return `${pct}%`;
@@ -462,6 +509,7 @@ export function ProgressBar({
   const showValueLabel = hasValueLabel && !isIndeterminate;
 
   const fillVariant = isDisabled ? 'disabled' : variant;
+  const fillStyle: FillStyle = {'--_progress-bar-fill': `${percentage}%`};
 
   // 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
@@ -536,7 +584,7 @@ export function ProgressBar({
           aria-valuetext={isIndeterminate ? undefined : valueText}
           {...mergeProps(
             themeProps('progress-bar-track'),
-            stylex.props(styles.track, isIndeterminate && styles.trackClipped),
+            stylex.props(styles.track),
           )}>
           {isIndeterminate ? (
             <div
@@ -554,7 +602,7 @@ export function ProgressBar({
                 themeProps('progress-bar-fill', {variant: fillVariant}),
                 stylex.props(styles.fill, variantStyles[fillVariant]),
               )}
-              style={{width: `${percentage}%`}}
+              style={fillStyle}
             />
           )}
         </div>

package/src/ProgressBar/__tests__/ProgressBar.a11y.chromium.spec.ts

@@ -87,18 +87,30 @@ async function runState(
   });
 }
 
-test('every progressbar expectation is exercised by a ProgressBar state', 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('every progressbar expectation is exercised by a ProgressBar state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of PROGRESSBAR_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(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(PROGRESSBAR_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      PROGRESSBAR_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(PROGRESSBAR_KNOWN_FAILURES, results)).toEqual(
+      [],
+    );
+  });
 });
 
 for (const state of PROGRESSBAR_BINDING_STATES) {