@astryxdesign/core 0.3.0 → 0.4.0

package/src/Pagination/Pagination.test.tsx

@@ -142,6 +142,21 @@ describe('Pagination', () => {
       ).toBe(true);
     });
 
+    it('renders the prev/next caret icons without an extra mirror wrapper span', () => {
+      // Regression: the RTL mirror used to wrap each chevron in a
+      // display:contents span, which dropped the icon out of the button's
+      // flex-centering context and offset the glyph vertically. The mirror now
+      // rides on the Icon via xstyle, so the icon renders as a direct centered
+      // child. jsdom has no layout engine to assert the pixel centering, but we
+      // can assert the structural fix: the icon carries its own class and is
+      // not the lone child of a bare wrapper span. (Centering is verified
+      // visually in Storybook.)
+      render(<Pagination page={3} onChange={() => {}} totalPages={5} />);
+      const next = screen.getByRole('button', {name: 'Go to next page'});
+      const icon = next.querySelector('.astryx-icon');
+      expect(icon).not.toBeNull();
+    });
+
     it('renders with data-testid', () => {
       render(
         <Pagination
@@ -557,7 +572,7 @@ describe('Pagination', () => {
       );
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
       expect(box).toBeInTheDocument();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
       // Visible leading "Page" label and trailing "/ N" total (10 pages).
       expect(screen.getByText('Page')).toBeInTheDocument();
       expect(screen.getByText('/ 10')).toBeInTheDocument();
@@ -594,8 +609,8 @@ describe('Pagination', () => {
       // The box is a NumberInput (a spinbutton) whose min/max clamp entries to
       // the valid page range without hand-rolled parsing in Pagination.
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
-      expect(box).toHaveAttribute('min', '1');
-      expect(box).toHaveAttribute('max', '10');
+      expect(box).toHaveAttribute('aria-valuemin', '1');
+      expect(box).toHaveAttribute('aria-valuemax', '10');
     });
 
     it('commits a typed page on Enter and rejects an over-range entry', async () => {
@@ -661,13 +676,13 @@ describe('Pagination', () => {
       await user.type(box, 'abc');
       await user.tab();
       expect(onChange).not.toHaveBeenCalled();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
 
       // Emptying the box and blurring reverts to the committed page too.
       await user.clear(box);
       await user.tab();
       expect(onChange).not.toHaveBeenCalled();
-      expect(box).toHaveValue(3);
+      expect(box).toHaveValue('3');
     });
 
     it('announces the committed page to screen readers', async () => {
@@ -785,7 +800,7 @@ describe('Pagination', () => {
       );
       const box = screen.getByRole('spinbutton', {name: 'Go to page'});
       // The box holds the page number, and committing drives page navigation.
-      expect(box).toHaveValue(1);
+      expect(box).toHaveValue('1');
       await user.clear(box);
       await user.type(box, '4{Enter}');
       expect(onChange).toHaveBeenCalledWith(4);
@@ -956,7 +971,7 @@ describe('Pagination', () => {
         // The box still holds the 1-based page number.
         expect(
           screen.getByRole('spinbutton', {name: 'Go to page'}),
-        ).toHaveValue(3);
+        ).toHaveValue('3');
       });
 
       it('keeps the input page-navigating with a custom label', async () => {

package/src/Pagination/Pagination.tsx

@@ -43,6 +43,7 @@ import {useListFocus} from '../hooks/useListFocus';
 import {mergeProps, rtlStyles} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n/useTranslator';
 import type {PaginationVariantMap} from './index';
 
@@ -165,6 +166,9 @@ export interface PaginationProps extends Omit<
 // Styles
 // =============================================================================
 
+/** Width (px) of the page-size Selector field. */
+const PAGE_SIZE_SELECTOR_WIDTH = 80;
+
 const styles = stylex.create({
   root: {
     display: 'flex',
@@ -214,14 +218,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   dotSm: {
     width: spacingVars['--spacing-1-5'],
@@ -265,9 +261,6 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
   },
-  pageSizeSelectorControl: {
-    width: 80,
-  },
   disabled: {
     opacity: 0.5,
     pointerEvents: 'none' as const,
@@ -702,7 +695,7 @@ export function Pagination({
                       active: isActive ? 'active' : null,
                       size,
                     }),
-                    stylex.props(
+                    focusOutlineProps.focusVisible(
                       styles.dot,
                       isSm && styles.dotSm,
                       isActive && styles.dotActive,
@@ -791,17 +784,19 @@ export function Pagination({
       data-testid={testId}>
       {pageSizeOptions != null && pageSizeOptions.length > 0 && (
         <div {...stylex.props(styles.pageSizeSelector)}>
-          <div {...stylex.props(styles.pageSizeSelectorControl)}>
-            <Selector
-              label={itemsPerPageLabel}
-              isLabelHidden
-              options={pageSizeOptions.map(opt => String(opt))}
-              value={String(pageSize)}
-              onChange={handlePageSizeChange}
-              size={buttonSize}
-              isDisabled={isDisabled}
-            />
-          </div>
+          <Selector
+            label={itemsPerPageLabel}
+            isLabelHidden
+            options={pageSizeOptions.map(opt => String(opt))}
+            value={String(pageSize)}
+            onChange={handlePageSizeChange}
+            size={buttonSize}
+            isDisabled={isDisabled}
+            // `width`, not `xstyle`: Selector's xstyle lands on the trigger
+            // box, while `width` sizes the whole field — which is what the
+            // removed wrapper did.
+            width={PAGE_SIZE_SELECTOR_WIDTH}
+          />
         </div>
       )}
       <div {...stylex.props(styles.controls)}>
@@ -812,9 +807,11 @@ export function Pagination({
             variant="ghost"
             size={buttonSize}
             icon={
-              <span {...stylex.props(rtlStyles.mirror)}>
-                <Icon icon="chevronsLeft" size={isSm ? 'sm' : 'md'} />
-              </span>
+              <Icon
+                icon="chevronsLeft"
+                size={isSm ? 'sm' : 'md'}
+                xstyle={rtlStyles.mirror}
+              />
             }
             onClick={handleFirst}
             isDisabled={isDisabled || !hasPrevious}
@@ -828,9 +825,11 @@ export function Pagination({
           variant="ghost"
           size={buttonSize}
           icon={
-            <span {...stylex.props(rtlStyles.mirror)}>
-              <Icon icon="chevronLeft" size={isSm ? 'sm' : 'md'} />
-            </span>
+            <Icon
+              icon="chevronLeft"
+              size={isSm ? 'sm' : 'md'}
+              xstyle={rtlStyles.mirror}
+            />
           }
           onClick={handlePrevious}
           isDisabled={isDisabled || !hasPrevious}
@@ -845,9 +844,11 @@ export function Pagination({
           variant="ghost"
           size={buttonSize}
           icon={
-            <span {...stylex.props(rtlStyles.mirror)}>
-              <Icon icon="chevronRight" size={isSm ? 'sm' : 'md'} />
-            </span>
+            <Icon
+              icon="chevronRight"
+              size={isSm ? 'sm' : 'md'}
+              xstyle={rtlStyles.mirror}
+            />
           }
           onClick={handleNext}
           isDisabled={isDisabled || !hasNext}
@@ -861,9 +862,11 @@ export function Pagination({
             variant="ghost"
             size={buttonSize}
             icon={
-              <span {...stylex.props(rtlStyles.mirror)}>
-                <Icon icon="chevronsRight" size={isSm ? 'sm' : 'md'} />
-              </span>
+              <Icon
+                icon="chevronsRight"
+                size={isSm ? 'sm' : 'md'}
+                xstyle={rtlStyles.mirror}
+              />
             }
             onClick={handleLast}
             isDisabled={isDisabled || !hasNext}

package/src/Popover/Popover.tsx

@@ -250,10 +250,6 @@ const styles = stylex.create({
     paddingInlineStart: spacingVars['--spacing-3'],
     paddingInlineEnd: spacingVars['--spacing-3'],
   },
-  gap: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-  },
   customWidth: (width: string | number) => ({
     width: typeof width === 'number' ? `${width}px` : width,
   }),
@@ -529,7 +525,8 @@ export function Popover({
           {
             placement,
             alignment,
-            xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+            offset: spacingVars['--spacing-1'],
+            xstyle: [popoverXstyle, layerAnimations[placement]],
           },
         )}
       </>
@@ -565,7 +562,8 @@ export function Popover({
           {
             placement,
             alignment,
-            xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+            offset: spacingVars['--spacing-1'],
+            xstyle: [popoverXstyle, layerAnimations[placement]],
           },
         )}
       </>
@@ -594,7 +592,8 @@ export function Popover({
         {
           placement,
           alignment,
-          xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]],
+          offset: spacingVars['--spacing-1'],
+          xstyle: [popoverXstyle, layerAnimations[placement]],
         },
       )}
     </>

package/src/PowerSearch/PowerSearch.tsx

@@ -104,7 +104,6 @@ const popoverLayerStyles = stylex.create({
   layer: {
     width: 'anchor-size(width)',
     minWidth: 400,
-    marginTop: spacingVars['--spacing-1'],
   },
 });
 
@@ -1053,6 +1052,7 @@ export function PowerSearch({
       {popover.render(popoverContent, {
         placement: 'below',
         alignment: 'start',
+        offset: spacingVars['--spacing-1'],
         xstyle: [popoverLayerStyles.layer, layerAnimations.below],
       })}
     </>

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -283,4 +283,46 @@ describe('PowerSearch', () => {
     // onSave should NOT be called because the event was already consumed (defaultPrevented)
     expect(onSave).not.toHaveBeenCalled();
   });
+
+  it('does not save/close on a composing Enter while typing a filter value (#4828)', () => {
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+
+    function StringValueHarness() {
+      const internalConfig = useInternalConfig(testConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'status',
+            operator: 'is',
+            value: {type: 'string', value: '한국어'},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={onCancel}
+        />
+      );
+    }
+
+    const {container} = render(<StringValueHarness />);
+    const input = container.querySelector('input');
+    expect(input).not.toBeNull();
+
+    // Same composing-Enter signal as BaseTypeahead's guard: isComposing
+    // (modern) or legacy keyCode 229. An IME commits its composition on
+    // Enter too, so this keydown must not also close/save the popover.
+    // handleKeyDown is bound on an ancestor container div, so the keydown
+    // reaches it the same way it would from any real input inside — same
+    // dispatch mechanism the sibling defaultPrevented test above uses.
+    fireEvent.keyDown(input!, {key: 'Enter', isComposing: true});
+    expect(onSave).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(input!, {key: 'Enter', keyCode: 229});
+    expect(onSave).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still saves normally.
+    fireEvent.keyDown(input!, {key: 'Enter'});
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
 });

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -20,6 +20,7 @@ import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
+import {isImeKeyEvent} from '../hooks/useFocusTrap';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -702,6 +703,12 @@ export function PowerSearchEditPopover({
   // Handle Enter to save, Escape to cancel
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Don't treat an IME composition-commit Enter as save-to-close --
+      // typing a CJK filter value and pressing Enter to confirm the
+      // composition would otherwise close the popover mid-composition.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Enter' && !isSaveDisabled && !e.defaultPrevented) {
         e.preventDefault();
         handleSave();

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -60,7 +60,7 @@ export const docs = {
       name: 'marks',
       type: 'ReadonlyArray<{value: number; label: string}>',
       description:
-        'Fixed target marks drawn on the track at values in the same 0..max scale as value (e.g. a goal line). They stay visible whether progress is below or past them. Each mark requires a label — it is the mark\'s accessible name and the text revealed via a tooltip on hover/focus. Ignored when indeterminate.',
+        'Fixed target marks drawn on the track at values in the same 0..max scale as value (e.g. a goal line). They stay visible whether progress 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, and so on), a mark still out on the bare track uses the primary text color (the secondary one on a disabled bar, which dims everything it draws). Each mark requires a label: it is the mark\'s accessible name and the text revealed via a tooltip on hover/focus. Ignored when indeterminate.',
     },
     {
       name: 'isDisabled',
@@ -80,7 +80,18 @@ export const docs = {
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
       {className: 'astryx-progressbar-track'},
-      {className: 'astryx-progressbar-mark'},
+      {
+        className: 'astryx-progressbar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+    ],
+    vars: [
+      {name: '--_progressbar-mark-width', description: 'Target mark tick width', default: '2px', private: true},
+      {name: '--_progressbar-mark-height', description: 'Target mark tick height', default: '8px', private: true},
+    ],
+    derived: [
+      {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},
+      {property: 'height', vars: ['--_progressbar-mark-height'], replaces: true},
     ],
   },
   usage: {
@@ -154,7 +165,7 @@ export const docsZh = {
       name: 'marks',
       type: 'ReadonlyArray<{value: number; label: string}>',
       description:
-        '在轨道上按与 value 相同的 0..max 刻度绘制的固定目标标记（例如目标线）。无论进度低于还是超过它们都保持可见。每个标记都必须提供 label——它既是标记的无障碍名称，也是悬停/聚焦时通过工具提示显示的文本。不确定模式下忽略。',
+        '在轨道上按与 value 相同的 0..max 刻度绘制的固定目标标记（例如目标线）。无论进度低于还是超过它们都保持可见，并根据所处位置取色：位于已填充区域内的标记使用与填充变体配对的前景色（on-accent、on-warning、on-error 等），仍位于空轨道上的标记使用主文本颜色（禁用状态下会降为次要文本颜色，与其整体弱化的呈现保持一致）。每个标记都必须提供 label——它既是标记的无障碍名称，也是悬停/聚焦时通过工具提示显示的文本。不确定模式下忽略。',
     },
     {
       name: 'isDisabled',
@@ -174,7 +185,18 @@ export const docsZh = {
       {className: 'astryx-progressbar', visualProps: ['variant']},
       {className: 'astryx-progressbar-fill', visualProps: ['variant']},
       {className: 'astryx-progressbar-track'},
-      {className: 'astryx-progressbar-mark'},
+      {
+        className: 'astryx-progressbar-mark',
+        visualProps: ['variant', 'placement'],
+      },
+    ],
+    vars: [
+      {name: '--_progressbar-mark-width', description: '目标标记刻度宽度', default: '2px', private: true},
+      {name: '--_progressbar-mark-height', description: '目标标记刻度高度', default: '8px', private: true},
+    ],
+    derived: [
+      {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},
+      {property: 'height', vars: ['--_progressbar-mark-height'], replaces: true},
     ],
   },
   usage: {
@@ -216,7 +238,7 @@ export const docsDense = {
     formatValueLabel: 'Custom value label formatter; defaults to percentage string.',
     variant: 'Semantic color variant.',
     isIndeterminate: 'Animated loading indicator for unknown progress.',
-    marks: 'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
+    marks: 'Fixed target marks ({value, label?}) drawn on the track in the 0..max scale; stay visible past the fill. Marks inside the fill take the variant on-color; marks on the bare track take the primary text color (secondary when disabled). A label reveals a tooltip on hover/focus. Ignored when indeterminate.',
     isDisabled: 'Visually disabled: grays out fill and text.',
     xstyle: 'StyleX styles for layout customization. Must be stylex.create() value.',
   },

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(