@astryxdesign/core 0.3.0-canary.2d2dba1 → 0.3.0-canary.5f9896c

package/dist/ProgressBar/ProgressBar.d.ts

@@ -77,8 +77,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>;
@@ -119,8 +123,11 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
  * ```
  *
  * 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
  * ```

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,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;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAqIlB;yBAtJe,WAAW"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,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;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2OD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmKlB;yBApLe,WAAW"}

package/dist/ProgressBar/ProgressBar.js

@@ -84,6 +84,16 @@ const styles = {
     kyAemX: "x4hg4is",
     ko0y90: "xa4qsjk",
     $$css: true
+  },
+  mark: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xwa60dl",
+    kzqmXN: "xfo62xy",
+    kZKoxP: "xdk7pt",
+    kI3sdo: "x1a2a7pz x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    k3aq6I: "x11lhmoz xoffwj3",
+    $$css: true
   }
 };
 const variantStyles = {
@@ -112,6 +122,69 @@ const variantStyles = {
     $$css: true
   }
 };
+
+// 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 = {
+  accent: {
+    kWkggS: "x1azo05",
+    $$css: true
+  },
+  success: {
+    kWkggS: "x9mohwv",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xmgwp2l",
+    $$css: true
+  },
+  error: {
+    kWkggS: "xfba6wv",
+    $$css: true
+  },
+  neutral: {
+    kWkggS: "x19aspcf",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "xdomwnj",
+    $$css: true
+  }
+};
+
+// 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 = {
+  track: {
+    kWkggS: "x19aspcf",
+    $$css: true
+  },
+  trackDisabled: {
+    kWkggS: "xdomwnj",
+    $$css: true
+  }
+};
 function defaultFormatValueLabel(value, max) {
   const pct = max > 0 ? Math.round(value / max * 100) : 0;
   return `${pct}%`;
@@ -143,8 +216,11 @@ function defaultFormatValueLabel(value, max) {
  * ```
  *
  * 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
  * ```
@@ -190,13 +266,21 @@ 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.filter(mark => Number.isFinite(mark.value)).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
+      pct,
+      isOnFill: percentage > 0 && pct <= percentage
     };
   }) : [];
   return /*#__PURE__*/_jsxs("div", {
@@ -272,11 +356,17 @@ export function ProgressBar({
         // 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 = /*#__PURE__*/_jsx("span", {
           tabIndex: 0,
-          ...mergeProps(themeProps('progressbar-mark'), {
-            className: "x10l6tqk xwa60dl xfo62xy xdk7pt x19aspcf x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x11lhmoz xoffwj3"
-          }),
+          ...mergeProps(themeProps('progressbar-mark', {
+            variant: fillVariant,
+            placement: mark.isOnFill ? 'fill' : 'track'
+          }), stylex.props(styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
           style: {
             insetInlineStart: `${mark.pct}%`
           }

package/dist/Stack/stack.stylex.d.ts

@@ -170,12 +170,12 @@ export declare function stack({ crossAlign, direction, gap, mainAlign, wrap, }:
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "24px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "24px">;
-}> | Readonly<{
-    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "2px">;
-    readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "2px">;
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "4px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "4px">;
+}> | Readonly<{
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "2px">;
+    readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "2px">;
 }> | Readonly<{
     readonly columnGap: stylex.StyleXClassNameFor<"columnGap", "6px">;
     readonly rowGap: stylex.StyleXClassNameFor<"rowGap", "6px">;

package/dist/astryx.css

@@ -576,6 +576,9 @@
   .x1q5y3ey:not(#\#):not(#\#):not(#\#){background-color:var(--color-icon-secondary)}
   .x17x4s8c:not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}
   .x1azo05:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-accent)}
+  .xfba6wv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-error)}
+  .x9mohwv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-success)}
+  .xmgwp2l:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-warning)}
   .x1lmrjuc:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
   .xi89dp7:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
   .x1u4601x:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay)}
@@ -585,6 +588,7 @@
   .xzyc27v:not(#\#):not(#\#):not(#\#){background-color:var(--color-syntax-background)}
   .x16fr6go:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-disabled)}
   .x19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}
+  .xdomwnj:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-secondary)}
   .xdsb6cv:not(#\#):not(#\#):not(#\#){background-color:var(--color-track)}
   .x24i8r5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning-muted)}
   .x1q8g9m5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning)}