@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/src/ProgressBar/ProgressBar.test.tsx

@@ -291,6 +291,16 @@ describe('ProgressBar', () => {
   describe('target marks', () => {
     const MARK = '.astryx-progressbar-mark';
 
+    // The StyleX atomic classes on an element, without the stable astryx-*
+    // theme classes and the bare variant/placement tokens — so a comparison
+    // reflects the resolved styles, not the reflected props.
+    function styleClasses(el: HTMLElement): string {
+      return Array.from(el.classList)
+        .filter(c => /^x[a-z0-9]+$/.test(c))
+        .sort()
+        .join(' ');
+    }
+
     it('renders no mark elements when marks is omitted', () => {
       const {container} = render(<ProgressBar value={50} label="Progress" />);
       expect(container.querySelectorAll(MARK)).toHaveLength(0);
@@ -405,6 +415,179 @@ describe('ProgressBar', () => {
       expect(container.querySelectorAll(MARK)).toHaveLength(0);
     });
 
+    // Mark color follows what the mark sits on: inside the filled area it
+    // takes the fill variant's on-color, out on the bare track it takes the
+    // primary text color. The choice is reflected as `data-placement`
+    // (plus `data-variant`, mirroring the fill) so themes can target it and
+    // tests can assert it without reading atomic class names.
+    it('marks the ticks inside the filled area as placed on the fill', () => {
+      const {container} = render(
+        <ProgressBar
+          value={60}
+          label="Progress"
+          marks={[
+            {value: 25, label: 'Behind'},
+            {value: 90, label: 'Ahead'},
+          ]}
+        />,
+      );
+      const marks = container.querySelectorAll<HTMLElement>(MARK);
+      expect(marks[0]).toHaveAttribute('data-placement', 'fill');
+      expect(marks[1]).toHaveAttribute('data-placement', 'track');
+      // Different placements resolve to different color styles.
+      expect(styleClasses(marks[0])).not.toBe(styleClasses(marks[1]));
+    });
+
+    it('treats a mark exactly at the current value as on the fill', () => {
+      const {container} = render(
+        <ProgressBar
+          value={70}
+          label="Progress"
+          marks={[{value: 70, label: 'Goal'}]}
+        />,
+      );
+      expect(container.querySelector(MARK)).toHaveAttribute(
+        'data-placement',
+        'fill',
+      );
+    });
+
+    it('places every mark on the track at zero progress', () => {
+      // With no fill drawn, even a mark at 0 sits on the bare track.
+      const {container} = render(
+        <ProgressBar
+          value={0}
+          label="Progress"
+          marks={[
+            {value: 0, label: 'Start'},
+            {value: 50, label: 'Goal'},
+          ]}
+        />,
+      );
+      const marks = container.querySelectorAll<HTMLElement>(MARK);
+      expect(marks[0]).toHaveAttribute('data-placement', 'track');
+      expect(marks[1]).toHaveAttribute('data-placement', 'track');
+      expect(styleClasses(marks[0])).toBe(styleClasses(marks[1]));
+    });
+
+    it('mirrors the fill variant on marks so the on-color matches the bar', () => {
+      const {container} = render(
+        <ProgressBar
+          value={80}
+          variant="warning"
+          label="Budget used"
+          marks={[
+            {value: 50, label: 'Half'},
+            {value: 95, label: 'Cap'},
+          ]}
+        />,
+      );
+      const marks = container.querySelectorAll<HTMLElement>(MARK);
+      expect(marks[0]).toHaveAttribute('data-variant', 'warning');
+      expect(marks[0]).toHaveAttribute('data-placement', 'fill');
+      expect(marks[1]).toHaveAttribute('data-variant', 'warning');
+      expect(marks[1]).toHaveAttribute('data-placement', 'track');
+    });
+
+    it('uses the disabled variant for marks when the bar is disabled', () => {
+      const {container} = render(
+        <ProgressBar
+          value={80}
+          variant="error"
+          isDisabled
+          label="Canceled"
+          marks={[{value: 50, label: 'Half'}]}
+        />,
+      );
+      expect(container.querySelector(MARK)).toHaveAttribute(
+        'data-variant',
+        'disabled',
+      );
+    });
+
+    it('keeps one plain foreground on both sides for neutral and disabled bars', () => {
+      // The neutral/disabled fill is the muted gray — it carries no semantic
+      // weight and has no on-token, so a mark on it takes the same plain
+      // foreground it would have out on the track.
+      for (const props of [
+        {variant: 'neutral'} as const,
+        {isDisabled: true} as const,
+      ]) {
+        const {container, unmount} = render(
+          <ProgressBar
+            value={60}
+            label="Progress"
+            {...props}
+            marks={[
+              {value: 20, label: 'On fill'},
+              {value: 90, label: 'On track'},
+            ]}
+          />,
+        );
+        const marks = container.querySelectorAll<HTMLElement>(MARK);
+        expect(marks[0]).toHaveAttribute('data-placement', 'fill');
+        expect(marks[1]).toHaveAttribute('data-placement', 'track');
+        expect(styleClasses(marks[0])).toBe(styleClasses(marks[1]));
+        unmount();
+      }
+    });
+
+    it("dims a disabled bar's marks below a live one's", () => {
+      // A disabled bar is deliberately low-emphasis (its label and value text
+      // drop to muted colors), so its marks step down to the secondary
+      // foreground on both sides rather than shouting over the grayed-out
+      // bar. A live neutral bar — same muted gray fill — keeps the
+      // full-contrast primary foreground.
+      const MARKS = [
+        {value: 20, label: 'On fill'},
+        {value: 90, label: 'On track'},
+      ];
+      const {container: live} = render(
+        <ProgressBar value={60} variant="neutral" label="A" marks={MARKS} />,
+      );
+      const {container: off} = render(
+        <ProgressBar value={60} isDisabled label="B" marks={MARKS} />,
+      );
+      const liveMarks = live.querySelectorAll<HTMLElement>(MARK);
+      const offMarks = off.querySelectorAll<HTMLElement>(MARK);
+      expect(styleClasses(offMarks[0])).not.toBe(styleClasses(liveMarks[0]));
+      expect(styleClasses(offMarks[1])).not.toBe(styleClasses(liveMarks[1]));
+    });
+
+    it('recolors marks per variant when they sit on the fill', () => {
+      // Two bars at the same progress with different variants give their
+      // on-fill marks different colors (different atomic classes), while
+      // their on-track marks stay the same divider color.
+      const {container: accent} = render(
+        <ProgressBar
+          value={60}
+          variant="accent"
+          label="A"
+          marks={[
+            {value: 20, label: 'On fill'},
+            {value: 90, label: 'On track'},
+          ]}
+        />,
+      );
+      const {container: error} = render(
+        <ProgressBar
+          value={60}
+          variant="error"
+          label="B"
+          marks={[
+            {value: 20, label: 'On fill'},
+            {value: 90, label: 'On track'},
+          ]}
+        />,
+      );
+      const accentMarks = accent.querySelectorAll<HTMLElement>(MARK);
+      const errorMarks = error.querySelectorAll<HTMLElement>(MARK);
+      expect(styleClasses(accentMarks[0])).not.toBe(
+        styleClasses(errorMarks[0]),
+      );
+      expect(styleClasses(accentMarks[1])).toBe(styleClasses(errorMarks[1]));
+    });
+
     it('renders every mark as a focusable trigger (label is required, never decorative)', () => {
       const {container} = render(
         <ProgressBar
@@ -583,9 +766,49 @@ describe('ProgressBar', () => {
       expect(trackHasOverflowHidden).toBe(true);
     });
 
+    it('sizes the mark through the derived vars, so a theme override cannot lose the cascade', () => {
+      // width/height are declared as `var(--_progressbar-mark-*)` and nothing
+      // else declares those vars, so the value a theme sets on the
+      // `progressbar-mark` target lands even in a consumer whose StyleX is
+      // unlayered and would otherwise outrank `@layer astryx-theme`.
+      const {container} = render(
+        <ProgressBar
+          value={50}
+          label="Progress"
+          marks={[{value: 80, label: 'M'}]}
+        />,
+      );
+      const mark = container.querySelector<HTMLElement>(MARK)!;
+      let css = '';
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            css += rule.cssText + '\n';
+          }
+        } catch {
+          // ignore cross-origin sheets
+        }
+      }
+      css += Array.from(document.querySelectorAll('style'))
+        .map(s => s.textContent || '')
+        .join('\n');
+      const markRules = Array.from(mark.classList)
+        .filter(cls => /^x[a-z0-9]+$/.test(cls))
+        .flatMap(
+          cls =>
+            css.match(new RegExp(`\\.${cls}\\b[^{]*\\{[^}]*\\}`, 'g')) ?? [],
+        );
+      expect(markRules.join('\n')).toMatch(
+        /width:\s*var\(--_progressbar-mark-width,\s*2px\)/,
+      );
+      expect(markRules.join('\n')).toMatch(
+        /height:\s*var\(--_progressbar-mark-height,\s*8px\)/,
+      );
+    });
+
     it('renders the mark on the stable progressbar-mark target, centered for symmetric overhang', () => {
       // The mark's width/height/color are directly overridable via the
-      // `progressbar-mark` theme target (no dedicated CSS vars). It is centered
+      // `progressbar-mark` theme target. It is centered
       // on the track (translate -50%,-50%) so a themed taller tick overhangs the
       // bar symmetrically above and below without being clipped.
       const {container} = render(

package/src/ProgressBar/ProgressBar.tsx

@@ -30,6 +30,7 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -122,8 +123,12 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
   /**
    * Target marks drawn on the track at fixed points in the same `0..max`
    * scale as `value` — e.g. a goal line. Marks stay visible whether progress
-   * is below or past them. Each mark's required `label` names it for assistive
-   * tech and is revealed via a `Tooltip` on hover/focus. Ignored when
+   * is below or past them, and take their color from what they sit on: a mark
+   * inside the filled area uses the fill variant's on-color (on-accent,
+   * on-warning, on-error, …), while a mark still out on the bare track uses
+   * `--color-text-primary` (`--color-text-secondary` on a disabled bar, which
+   * dims everything it draws). Each mark's required `label` names it for
+   * assistive tech and is revealed via a `Tooltip` on hover/focus. Ignored when
    * `isIndeterminate` is true.
    */
   marks?: ReadonlyArray<ProgressBarMark>;
@@ -257,28 +262,27 @@ const styles = stylex.create({
   },
   // A mark is a vertical tick centered on the track, a child of the
   // `role="progressbar"` element (unchanged DOM). The track no longer clips, so
-  // its height — 8px by default, directly overridable via the `progressbar-mark`
-  // theme target — may exceed the bar and overhang; the centering translate
-  // keeps any overhang symmetric. Positioned horizontally via `insetInlineStart`;
-  // the translate mirrors under RTL.
+  // its height — 8px by default — may exceed the bar and overhang; the centering
+  // translate keeps any overhang symmetric. Positioned horizontally via
+  // `insetInlineStart`; the translate mirrors under RTL.
+  //
+  // The dimensions read private vars rather than being plain declarations: a
+  // theme writes `width`/`height` on the `progressbar-mark` target as usual and
+  // the derived-var registry emits them as these vars instead of as competing
+  // properties. Nothing else declares them, so the theme value lands whatever
+  // the consumer's cascade looks like — a source-build app that compiles StyleX
+  // without `useCSSLayers` leaves the atomics unlayered, where they outrank
+  // every rule in `@layer astryx-theme` and made sizing the mark impossible
+  // without `!important`.
+  //
+  // The tick's color is not set here: it depends on what the mark sits on, so
+  // it comes from `markOnFillStyles[variant]` (mark inside the filled area) or
+  // `markOnTrackStyles.track` (mark out on the bare track).
   mark: {
     position: 'absolute',
     top: '50%',
-    width: 2,
-    height: 8,
-    // Defaults to text-primary. Directly overridable via the `progressbar-mark`
-    // theme target — a theme can set `backgroundColor`, `width`, and `height`
-    // (e.g. a taller "flag" tick that overhangs the bar, or per-variant
-    // contrast) with `defineTheme`; no dedicated CSS vars needed.
-    backgroundColor: colorVars['--color-text-primary'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
+    width: 'var(--_progressbar-mark-width, 2px)',
+    height: 'var(--_progressbar-mark-height, 8px)',
     transform: {
       default: 'translate(-50%, -50%)',
       ':is([dir="rtl"] *)': 'translate(50%, -50%)',
@@ -307,6 +311,64 @@ const variantStyles = stylex.create({
   },
 });
 
+// A mark sitting inside the filled area is drawn *on* the bar, so it takes the
+// on-color that pairs with the fill's own variant color — the same pairing
+// Badge uses for solid semantic backgrounds.
+//
+// `neutral` and `disabled` both fill with the muted `--color-text-disabled`
+// gray, which carries no semantic weight and has no dedicated on-token, so
+// they fall back to a plain foreground. They pick different ones: a `neutral`
+// bar is live, so its mark keeps the full-contrast `--color-text-primary` a
+// mark uses out on the track; a `disabled` bar is deliberately low-emphasis —
+// its own label and value text drop to muted colors — so its mark steps down
+// to `--color-text-secondary` rather than becoming the loudest thing on a
+// grayed-out component.
+const markOnFillStyles = stylex.create({
+  accent: {
+    backgroundColor: colorVars['--color-on-accent'],
+  },
+  success: {
+    backgroundColor: colorVars['--color-on-success'],
+  },
+  warning: {
+    backgroundColor: colorVars['--color-on-warning'],
+  },
+  error: {
+    backgroundColor: colorVars['--color-on-error'],
+  },
+  neutral: {
+    backgroundColor: colorVars['--color-text-primary'],
+  },
+  disabled: {
+    backgroundColor: colorVars['--color-text-secondary'],
+  },
+});
+
+// A mark out on the bare track is a foreground tick over the muted track
+// background, so it takes `--color-text-primary`.
+//
+// The obvious candidate was `--color-border-emphasized` — the emphasized
+// divider color `Divider`'s `strong` variant and `Slider`'s marks use — but
+// divider tokens sit a step or two from the track on the same neutral ramp, so
+// a mark drawn in one is at or near invisible: measured against each shipped
+// theme's track it lands between 1.00:1 (theme-neutral, both modes, where the
+// track is aliased to that very token) and 2.9:1, under the 3:1 WCAG 1.4.11
+// non-text floor in 7 of 8 themes. `--color-text-secondary` still misses in
+// two. `--color-text-primary` is the one foreground guaranteed to read against
+// every surface a theme defines: 5.8:1 to 15.7:1 on the track across all
+// themes and both modes.
+const markOnTrackStyles = stylex.create({
+  track: {
+    backgroundColor: colorVars['--color-text-primary'],
+  },
+  // A disabled bar dims everything it draws, so its track marks step down to
+  // the secondary foreground for the same reason the disabled on-fill mark
+  // does — matching the muted label and value text.
+  trackDisabled: {
+    backgroundColor: colorVars['--color-text-secondary'],
+  },
+});
+
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
   return `${pct}%`;
@@ -338,8 +400,11 @@ function defaultFormatValueLabel(value: number, max: number): string {
  * ```
  *
  * A mark's height, width, and color are directly themeable via the
- * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
- * bar (centered, so the overhang is symmetric):
+ * `progressbar-mark` target. The target reflects `data-placement`
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
+ * that overhangs the bar (centered, so the overhang is symmetric):
  *
  * @example
  * ```
@@ -387,6 +452,13 @@ export function ProgressBar({
   // 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
   // clamped to the track edges, matching the bar's own `clampedValue`.
+  //
+  // Each mark also records whether it lands on the filled part of the bar
+  // (`isOnFill`), which decides its color: a mark inside the fill reads against
+  // the variant color, one out on the bare track reads against the track. A
+  // mark exactly at the fill's leading edge counts as on the fill — it is the
+  // "reached the target" moment — except at zero progress, where there is no
+  // fill for it to sit on.
   const resolvedMarks =
     !isIndeterminate && marks
       ? marks
@@ -394,7 +466,12 @@ export function ProgressBar({
           .map(mark => {
             const clamped = Math.min(Math.max(0, mark.value), safeMax);
             const pct = safeMax > 0 ? (clamped / safeMax) * 100 : 0;
-            return {value: mark.value, label: mark.label, pct};
+            return {
+              value: mark.value,
+              label: mark.label,
+              pct,
+              isOnFill: percentage > 0 && pct <= percentage,
+            };
           })
       : [];
 
@@ -471,21 +548,40 @@ export function ProgressBar({
         )}
         {/* Target marks — children of the progressbar element (unchanged),
             layered above the fill so they show whether progress is below or
-            past them. Each mark is labeled, so it is a focusable Tooltip
-            trigger: the label is visible on hover/focus and names the mark for
-            assistive tech via the Tooltip's aria-describedby, without adding a
-            labeled child to the progressbar's own a11y subtree. */}
+            past them. A mark's color follows what it sits on: inside the fill
+            it uses the fill variant's on-color, out on the bare track it uses
+            the emphasized divider color. Each mark is labeled, so it is a
+            focusable Tooltip trigger: the label is visible on hover/focus and
+            names the mark for assistive tech via the Tooltip's
+            aria-describedby, without adding a labeled child to the
+            progressbar's own a11y subtree. */}
         {resolvedMarks.map(mark => {
           // The tick element. It is both the Tooltip's anchor and the Suspense
           // fallback shown while the lazy Tooltip chunk loads, so the tick is
           // always visible and the label attaches once ready. The list `key`
           // lives on the mapped <Suspense>, not here.
+          //
+          // `placement` is reflected as `data-placement` (and a class) so a
+          // theme can style the two cases separately on the
+          // `progressbar-mark` target; `variant` mirrors the fill's variant
+          // for the same reason.
           const markEl = (
             <span
               tabIndex={0}
               {...mergeProps(
-                themeProps('progressbar-mark'),
-                stylex.props(styles.mark),
+                themeProps('progressbar-mark', {
+                  variant: fillVariant,
+                  placement: mark.isOnFill ? 'fill' : 'track',
+                }),
+                stylex.props(
+                  focusOutlineStyles.focusVisible,
+                  styles.mark,
+                  mark.isOnFill
+                    ? markOnFillStyles[fillVariant]
+                    : isDisabled
+                      ? markOnTrackStyles.trackDisabled
+                      : markOnTrackStyles.track,
+                ),
               )}
               style={{insetInlineStart: `${mark.pct}%`}}
             />

package/src/RadioList/RadioList.doc.mjs

@@ -12,8 +12,10 @@ export const docs = {
     targets: [
       {className: 'astryx-radio-list', visualProps: ['orientation', 'size']},
       {className: 'astryx-radio-list-item'},
-      {className: 'astryx-radio', visualProps: ['size'], states: ['checked', 'disabled']},
-      {className: 'astryx-radio-dot', visualProps: ['size']},
+      {className: 'astryx-radio-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-radio-indicator-dot', visualProps: ['size']},
+      {className: 'astryx-radio', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'radio-indicator'},
+      {className: 'astryx-radio-dot', visualProps: ['size'], deprecatedFor: 'radio-indicator-dot'},
     ],
   },
   description: 'Radio group container with field integration for label, description, and status.',