@astryxdesign/core 0.3.0-canary.6afcfb7 → 0.3.0-canary.b8cfd19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAsJD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAoPb;yBAvQe,MAAM"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAsJD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAwDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Pb;yBA9Qe,MAAM"}
@@ -119,10 +119,10 @@ const styles = {
119
119
  kjj79g: "xl56j7k",
120
120
  kzqmXN: "xh8yej3",
121
121
  kZKoxP: "x5yr21d",
122
- kWkggS: "xelv01g",
123
- kMwMTN: "xicfil",
122
+ kWkggS: "x17x4s8c",
123
+ kMwMTN: "xv1l7n4",
124
124
  kMv6JI: "x9ynric",
125
- k63SB2: "xi08x9w",
125
+ k63SB2: "x1e4wzip",
126
126
  kP9fke: "xtvhhri",
127
127
  $$css: true
128
128
  },
@@ -178,7 +178,7 @@ const dynamicStyles = {
178
178
  "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size)
179
179
  }],
180
180
  fontSize: size => [_temp, {
181
- "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`var(--_avatar-fallback-font-size, ${size * INITIALS_FONT_SIZE_RATIO}px)`)
181
+ "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`${size * INITIALS_FONT_SIZE_RATIO}px`)
182
182
  }],
183
183
  statusPosition: size => [_temp2, {
184
184
  "--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO),
@@ -402,12 +402,16 @@ export function Avatar({
402
402
  className: "xh8yej3 x5yr21d xl1xv1r"
403
403
  }
404
404
  }), showInitials && /*#__PURE__*/_jsx("div", {
405
- ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
405
+ ...mergeProps(themeProps('avatar-fallback', {
406
+ size: resolvedSize
407
+ }), stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize))),
406
408
  children: getInitials(name)
407
409
  }), showIcon && /*#__PURE__*/_jsx("div", {
408
- ...{
409
- className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xelv01g xicfil x9ynric xi08x9w xtvhhri"
410
- },
410
+ ...mergeProps(themeProps('avatar-fallback', {
411
+ size: resolvedSize
412
+ }), {
413
+ className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
414
+ }),
411
415
  children: /*#__PURE__*/_jsx(DefaultIcon, {
412
416
  size: numericSize
413
417
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAmB,EACnB,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAwejB;yBAhgBe,UAAU"}
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAmB,EACnB,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCA4ejB;yBApgBe,UAAU"}
@@ -602,12 +602,10 @@ export function Pagination({
602
602
  tooltip: isDisabled || !hasPrevious ? undefined : previousLabel,
603
603
  variant: "ghost",
604
604
  size: buttonSize,
605
- icon: /*#__PURE__*/_jsx("span", {
606
- ...stylex.props(rtlStyles.mirror),
607
- children: /*#__PURE__*/_jsx(Icon, {
608
- icon: "chevronLeft",
609
- size: isSm ? 'sm' : 'md'
610
- })
605
+ icon: /*#__PURE__*/_jsx(Icon, {
606
+ icon: "chevronLeft",
607
+ size: isSm ? 'sm' : 'md',
608
+ xstyle: rtlStyles.mirror
611
609
  }),
612
610
  onClick: handlePrevious,
613
611
  isDisabled: isDisabled || !hasPrevious,
@@ -617,12 +615,10 @@ export function Pagination({
617
615
  tooltip: isDisabled || !hasNext ? undefined : nextLabel,
618
616
  variant: "ghost",
619
617
  size: buttonSize,
620
- icon: /*#__PURE__*/_jsx("span", {
621
- ...stylex.props(rtlStyles.mirror),
622
- children: /*#__PURE__*/_jsx(Icon, {
623
- icon: "chevronRight",
624
- size: isSm ? 'sm' : 'md'
625
- })
618
+ icon: /*#__PURE__*/_jsx(Icon, {
619
+ icon: "chevronRight",
620
+ size: isSm ? 'sm' : 'md',
621
+ xstyle: rtlStyles.mirror
626
622
  }),
627
623
  onClick: handleNext,
628
624
  isDisabled: isDisabled || !hasNext,
@@ -77,8 +77,12 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
77
77
  /**
78
78
  * Target marks drawn on the track at fixed points in the same `0..max`
79
79
  * scale as `value` — e.g. a goal line. Marks stay visible whether progress
80
- * is below or past them. Each mark's required `label` names it for assistive
81
- * tech and is revealed via a `Tooltip` on hover/focus. Ignored when
80
+ * is below or past them, and take their color from what they sit on: a mark
81
+ * inside the filled area uses the fill variant's on-color (on-accent,
82
+ * on-warning, on-error, …), while a mark still out on the bare track uses
83
+ * `--color-text-primary` (`--color-text-secondary` on a disabled bar, which
84
+ * dims everything it draws). Each mark's required `label` names it for
85
+ * assistive tech and is revealed via a `Tooltip` on hover/focus. Ignored when
82
86
  * `isIndeterminate` is true.
83
87
  */
84
88
  marks?: ReadonlyArray<ProgressBarMark>;
@@ -119,8 +123,11 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
119
123
  * ```
120
124
  *
121
125
  * A mark's height, width, and color are directly themeable via the
122
- * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
123
- * bar (centered, so the overhang is symmetric):
126
+ * `progressbar-mark` target. The target reflects `data-placement`
127
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
128
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
129
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
130
+ * that overhangs the bar (centered, so the overhang is symmetric):
124
131
  *
125
132
  * @example
126
133
  * ```
@@ -1 +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"}
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;;;;;;;;;;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"}
@@ -84,6 +84,16 @@ const styles = {
84
84
  kyAemX: "x4hg4is",
85
85
  ko0y90: "xa4qsjk",
86
86
  $$css: true
87
+ },
88
+ mark: {
89
+ kVAEAm: "x10l6tqk",
90
+ k87sOh: "xwa60dl",
91
+ kzqmXN: "xfo62xy",
92
+ kZKoxP: "xdk7pt",
93
+ kI3sdo: "x1a2a7pz x17nn4n9",
94
+ kInvED: "x1wfwxd8 x7s97pk",
95
+ k3aq6I: "x11lhmoz xoffwj3",
96
+ $$css: true
87
97
  }
88
98
  };
89
99
  const variantStyles = {
@@ -112,6 +122,69 @@ const variantStyles = {
112
122
  $$css: true
113
123
  }
114
124
  };
125
+
126
+ // A mark sitting inside the filled area is drawn *on* the bar, so it takes the
127
+ // on-color that pairs with the fill's own variant color — the same pairing
128
+ // Badge uses for solid semantic backgrounds.
129
+ //
130
+ // `neutral` and `disabled` both fill with the muted `--color-text-disabled`
131
+ // gray, which carries no semantic weight and has no dedicated on-token, so
132
+ // they fall back to a plain foreground. They pick different ones: a `neutral`
133
+ // bar is live, so its mark keeps the full-contrast `--color-text-primary` a
134
+ // mark uses out on the track; a `disabled` bar is deliberately low-emphasis —
135
+ // its own label and value text drop to muted colors — so its mark steps down
136
+ // to `--color-text-secondary` rather than becoming the loudest thing on a
137
+ // grayed-out component.
138
+ const markOnFillStyles = {
139
+ accent: {
140
+ kWkggS: "x1azo05",
141
+ $$css: true
142
+ },
143
+ success: {
144
+ kWkggS: "x9mohwv",
145
+ $$css: true
146
+ },
147
+ warning: {
148
+ kWkggS: "xmgwp2l",
149
+ $$css: true
150
+ },
151
+ error: {
152
+ kWkggS: "xfba6wv",
153
+ $$css: true
154
+ },
155
+ neutral: {
156
+ kWkggS: "x19aspcf",
157
+ $$css: true
158
+ },
159
+ disabled: {
160
+ kWkggS: "xdomwnj",
161
+ $$css: true
162
+ }
163
+ };
164
+
165
+ // A mark out on the bare track is a foreground tick over the muted track
166
+ // background, so it takes `--color-text-primary`.
167
+ //
168
+ // The obvious candidate was `--color-border-emphasized` — the emphasized
169
+ // divider color `Divider`'s `strong` variant and `Slider`'s marks use — but
170
+ // divider tokens sit a step or two from the track on the same neutral ramp, so
171
+ // a mark drawn in one is at or near invisible: measured against each shipped
172
+ // theme's track it lands between 1.00:1 (theme-neutral, both modes, where the
173
+ // track is aliased to that very token) and 2.9:1, under the 3:1 WCAG 1.4.11
174
+ // non-text floor in 7 of 8 themes. `--color-text-secondary` still misses in
175
+ // two. `--color-text-primary` is the one foreground guaranteed to read against
176
+ // every surface a theme defines: 5.8:1 to 15.7:1 on the track across all
177
+ // themes and both modes.
178
+ const markOnTrackStyles = {
179
+ track: {
180
+ kWkggS: "x19aspcf",
181
+ $$css: true
182
+ },
183
+ trackDisabled: {
184
+ kWkggS: "xdomwnj",
185
+ $$css: true
186
+ }
187
+ };
115
188
  function defaultFormatValueLabel(value, max) {
116
189
  const pct = max > 0 ? Math.round(value / max * 100) : 0;
117
190
  return `${pct}%`;
@@ -143,8 +216,11 @@ function defaultFormatValueLabel(value, max) {
143
216
  * ```
144
217
  *
145
218
  * A mark's height, width, and color are directly themeable via the
146
- * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
147
- * bar (centered, so the overhang is symmetric):
219
+ * `progressbar-mark` target. The target reflects `data-placement`
220
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
221
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
222
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
223
+ * that overhangs the bar (centered, so the overhang is symmetric):
148
224
  *
149
225
  * @example
150
226
  * ```
@@ -190,13 +266,21 @@ export function ProgressBar({
190
266
  // Marks make no sense without a determinate value, so they are only drawn
191
267
  // in determinate mode. Non-finite mark values are dropped; the rest are
192
268
  // clamped to the track edges, matching the bar's own `clampedValue`.
269
+ //
270
+ // Each mark also records whether it lands on the filled part of the bar
271
+ // (`isOnFill`), which decides its color: a mark inside the fill reads against
272
+ // the variant color, one out on the bare track reads against the track. A
273
+ // mark exactly at the fill's leading edge counts as on the fill — it is the
274
+ // "reached the target" moment — except at zero progress, where there is no
275
+ // fill for it to sit on.
193
276
  const resolvedMarks = !isIndeterminate && marks ? marks.filter(mark => Number.isFinite(mark.value)).map(mark => {
194
277
  const clamped = Math.min(Math.max(0, mark.value), safeMax);
195
278
  const pct = safeMax > 0 ? clamped / safeMax * 100 : 0;
196
279
  return {
197
280
  value: mark.value,
198
281
  label: mark.label,
199
- pct
282
+ pct,
283
+ isOnFill: percentage > 0 && pct <= percentage
200
284
  };
201
285
  }) : [];
202
286
  return /*#__PURE__*/_jsxs("div", {
@@ -272,11 +356,17 @@ export function ProgressBar({
272
356
  // fallback shown while the lazy Tooltip chunk loads, so the tick is
273
357
  // always visible and the label attaches once ready. The list `key`
274
358
  // lives on the mapped <Suspense>, not here.
359
+ //
360
+ // `placement` is reflected as `data-placement` (and a class) so a
361
+ // theme can style the two cases separately on the
362
+ // `progressbar-mark` target; `variant` mirrors the fill's variant
363
+ // for the same reason.
275
364
  const markEl = /*#__PURE__*/_jsx("span", {
276
365
  tabIndex: 0,
277
- ...mergeProps(themeProps('progressbar-mark'), {
278
- className: "x10l6tqk xwa60dl xfo62xy xdk7pt x19aspcf x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x11lhmoz xoffwj3"
279
- }),
366
+ ...mergeProps(themeProps('progressbar-mark', {
367
+ variant: fillVariant,
368
+ placement: mark.isOnFill ? 'fill' : 'track'
369
+ }), stylex.props(styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
280
370
  style: {
281
371
  insetInlineStart: `${mark.pct}%`
282
372
  }
package/dist/astryx.css CHANGED
@@ -548,7 +548,6 @@
548
548
  .xgcd1z6:not(#\#):not(#\#):not(#\#){background-color:inherit}
549
549
  .xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)}
550
550
  .xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
551
- .xelv01g:not(#\#):not(#\#):not(#\#){background-color:var(--_avatar-fallback-background,var(--color-neutral))}
552
551
  .xgcxg3y:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent-muted)}
553
552
  .x1ewilqj:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}
554
553
  .x1o0wnni:not(#\#):not(#\#):not(#\#){background-color:var(--color-background-blue)}
@@ -576,6 +575,9 @@
576
575
  .x1q5y3ey:not(#\#):not(#\#):not(#\#){background-color:var(--color-icon-secondary)}
577
576
  .x17x4s8c:not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}
578
577
  .x1azo05:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-accent)}
578
+ .xfba6wv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-error)}
579
+ .x9mohwv:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-success)}
580
+ .xmgwp2l:not(#\#):not(#\#):not(#\#){background-color:var(--color-on-warning)}
579
581
  .x1lmrjuc:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
580
582
  .xi89dp7:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
581
583
  .x1u4601x:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay)}
@@ -585,6 +587,7 @@
585
587
  .xzyc27v:not(#\#):not(#\#):not(#\#){background-color:var(--color-syntax-background)}
586
588
  .x16fr6go:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-disabled)}
587
589
  .x19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}
590
+ .xdomwnj:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-secondary)}
588
591
  .xdsb6cv:not(#\#):not(#\#):not(#\#){background-color:var(--color-track)}
589
592
  .x24i8r5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning-muted)}
590
593
  .x1q8g9m5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning)}
@@ -651,7 +654,6 @@
651
654
  .xj8ax7g:not(#\#):not(#\#):not(#\#){color:#FF0000}
652
655
  .x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
653
656
  .x19co3pv:not(#\#):not(#\#):not(#\#){color:transparent}
654
- .xicfil:not(#\#):not(#\#):not(#\#){color:var(--_avatar-fallback-color,var(--color-text-secondary))}
655
657
  .xqwr325:not(#\#):not(#\#):not(#\#){color:var(--color-accent)}
656
658
  .xrkvqaz:not(#\#):not(#\#):not(#\#){color:var(--color-background-surface)}
657
659
  .xjt36v0:not(#\#):not(#\#):not(#\#){color:var(--color-error)}
@@ -794,7 +796,6 @@
794
796
  .xk50ysn:not(#\#):not(#\#):not(#\#){font-weight:500}
795
797
  .x1s688f:not(#\#):not(#\#):not(#\#){font-weight:600}
796
798
  .x1pd3egz:not(#\#):not(#\#):not(#\#){font-weight:inherit}
797
- .xi08x9w:not(#\#):not(#\#):not(#\#){font-weight:var(--_avatar-fallback-font-weight,var(--font-weight-medium))}
798
799
  .x1lvx875:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-bold)}
799
800
  .x1e4wzip:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-medium)}
800
801
  .x1sodnla:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-normal)}