@astryxdesign/core 0.1.9-canary.d2d84f8 → 0.1.9-canary.e00a241

package/src/Resizable/ResizeHandle.test.tsx

@@ -201,6 +201,100 @@ describe('ResizeHandle', () => {
     expect(document.body.style.userSelect).toBe('');
   });
 
+  // --- RTL pointer-drag direction ---
+
+  it('drives the region with the raw pointer delta under LTR', () => {
+    const resizable: ResizableProps = {
+      _size: 200,
+      _isCollapsed: false,
+      _onResizeStart: vi.fn(),
+      _onResizeMove: vi.fn(),
+      _onResizeEnd: vi.fn(),
+      _minSizePx: 100,
+      _maxSizePx: 400,
+      _snaps: [],
+      _collapsedSize: 40,
+      _collapsible: false,
+      _isResizableProps: true,
+    };
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const hitArea = screen.getByRole('separator')
+      .firstElementChild as HTMLElement;
+
+    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    // Pointer moves +40px to the right → panel grows by +40 under LTR.
+    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenLastCalledWith(40);
+  });
+
+  it('inverts the pointer delta under RTL so dragging resizes intuitively', () => {
+    const resizable: ResizableProps = {
+      _size: 200,
+      _isCollapsed: false,
+      _onResizeStart: vi.fn(),
+      _onResizeMove: vi.fn(),
+      _onResizeEnd: vi.fn(),
+      _minSizePx: 100,
+      _maxSizePx: 400,
+      _snaps: [],
+      _collapsedSize: 40,
+      _collapsible: false,
+      _isResizableProps: true,
+    };
+    // Under RTL the start panel sits on the RIGHT, so a pointer move to the
+    // right (+clientX) must SHRINK it — the delta is inverted. The handle reads
+    // its own computed `direction` via getRTLMultiplier(); jsdom doesn't resolve
+    // inherited `direction`, so force it on the separator (the handle element),
+    // mirroring the Slider RTL pointer-mapping test precedent.
+    render(<ResizeHandle resizable={resizable} label="Resize" />);
+    const separator = screen.getByRole('separator');
+    const hitArea = separator.firstElementChild as HTMLElement;
+
+    const realGetComputedStyle = window.getComputedStyle;
+    const gcsSpy = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockImplementation((el: Element, pseudo?: string | null) => {
+        if (el === separator) {
+          return {direction: 'rtl'} as CSSStyleDeclaration;
+        }
+        return realGetComputedStyle(el, pseudo ?? undefined);
+      });
+
+    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    // Same +40px physical move as LTR, but mirrored → −40 delta under RTL.
+    fireEvent.pointerMove(window, {clientX: 40, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenLastCalledWith(-40);
+
+    gcsSpy.mockRestore();
+  });
+
+  // --- Hit-area geometry (grab zone tracks the visible pill) ---
+
+  it('anchors the biased grab zone with the pill offset and a dir-flipped centering shift', () => {
+    // For an off-center pill the hit area must reuse the pill's physical offset
+    // construction (anchored at insetInlineStart:0) rather than a divider-
+    // relative 50% anchor + percentage bias, so the two stay aligned in LTR and
+    // RTL. The half-width-difference centering shift (6.5px) is inline, so it
+    // flips physical sign under RTL: `- 6.5px` (LTR) vs `+ 6.5px` (RTL). See the
+    // Playwright measurement (hitArea.center === pill.center, 0px offset in both
+    // directions) for the geometric proof; here we lock the transform shape.
+    render(<Harness handleProps={{pillPlacement: 'start'}} />);
+    const hitArea = getSeparator().firstElementChild as HTMLElement;
+    expect(hitArea.className).toContain('hitAreaOffsetX');
+    const style = hitArea.getAttribute('style') ?? '';
+    // LTR (default) branch subtracts the centering shift; RTL branch adds it.
+    expect(style).toContain('- 6.5px');
+    expect(style).toContain('+ 6.5px');
+  });
+
+  it('centers the grab zone on the divider when the pill is centered (no bias)', () => {
+    render(<Harness handleProps={{pillPlacement: 'center'}} />);
+    const hitArea = getSeparator().firstElementChild as HTMLElement;
+    // No physical offset — a plain logical centering class, no biased transform.
+    expect(hitArea.className).toContain('hitAreaCenteredX');
+    expect(hitArea.className).not.toContain('hitAreaOffsetX');
+  });
+
   // --- Prop composition (ordering choice: handler sits after {...props}) ---
 
   it('runs a consumer onKeyDown alongside keyboard resizing', () => {

package/src/Resizable/ResizeHandle.tsx

@@ -56,14 +56,27 @@ function resolveEffectiveSide(
 }
 
 /**
- * Hit area bias percentage. When the pill is off-center, the grab zone
- * shifts ~2:1 toward the pill so users can reach the visible grip easily.
+ * Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
+ *
+ * The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
+ * divider's inline-start edge and pushed one grip-width-plus-gap toward the
+ * panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
+ * offset is physical, the pill sits on the same physical side of the divider in
+ * both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
+ * exact same anchor + physical-offset construction as the pill (just wider) —
+ * anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
+ * biasing with a percentage translate mixes a logical anchor (which flips under
+ * RTL) with a physical translate (which doesn't), leaving the grab zone stranded
+ * to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
+ * `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
  */
-function hitAreaBias(effectiveSide: 'start' | 'end' | 'center'): string {
+function hitAreaBiasDir(
+  effectiveSide: 'start' | 'end' | 'center',
+): number | null {
   if (effectiveSide === 'center') {
-    return '50%';
+    return null;
   }
-  return effectiveSide === 'start' ? '66.67%' : '33.33%';
+  return effectiveSide === 'start' ? -1 : 1;
 }
 
 const styles = stylex.create({
@@ -102,8 +115,8 @@ const styles = stylex.create({
   },
   overlayVertical: {
     insetBlockEnd: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     height: 'var(--resize-handle-hit-area, 16px)',
   },
   horizontal: {
@@ -145,16 +158,24 @@ const styles = stylex.create({
     width: spacingVars['--spacing-4'],
     top: 0,
     bottom: 0,
-    left: '50%',
     cursor: 'col-resize',
   },
   hitAreaVertical: {
     height: spacingVars['--spacing-4'],
-    left: 0,
-    right: 0,
-    top: '50%',
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     cursor: 'row-resize',
   },
+  // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
+  // the divider itself. Anchored logically so it centers in both directions.
+  hitAreaCenteredX: {
+    insetInlineStart: '50%',
+    transform: 'translateX(-50%)',
+  },
+  hitAreaCenteredY: {
+    insetBlockStart: '50%',
+    transform: 'translateY(-50%)',
+  },
 
   // Pill base — themes target .astryx-resize-handle-pill for size/shape.
   pill: {
@@ -167,7 +188,7 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
-    left: '50%',
+    insetInlineStart: '50%',
     transform: 'translate(-50%, -50%)',
   },
   pillHorizontal: {
@@ -193,14 +214,32 @@ const styles = stylex.create({
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const dynamicStyles = stylex.create({
-  hitAreaBiasX: (pct: string) => ({
-    transform: `translateX(-${pct})`,
+  // Hit-area inline offset — mirrors the pill's `pillOffsetX`/`pillOffsetY`
+  // construction so the grab zone sits centred on the visible pill in BOTH
+  // directions. Both anchor at the divider's inline-start edge
+  // (`insetInlineStart: 0`) and travel toward the panel side with the SAME
+  // physical translate `dir * (gripWidth + gap)`, so they share the pill's
+  // near edge. The hit area is wider, so it also shifts by half the width
+  // difference `(16px − 3px) / 2 = 6.5px` to align the two CENTRES. That
+  // centring shift is along the inline axis (a box grows from its inline-start
+  // edge toward inline-end), so it must flip physical sign under RTL — unlike
+  // the `dir * (...)` travel, which is physical and identical in both
+  // directions because the pill's own offset is physical. Mixing the previous
+  // divider-relative `50%` anchor with a percentage translate stranded the grab
+  // zone to one side under RTL; this construction keeps it on the pill.
+  hitAreaOffsetX: (dir: number) => ({
+    insetInlineStart: 0,
+    transform: {
+      default: `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px), -50%)`,
+      ':is([dir="rtl"] *)': `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px), -50%)`,
+    },
   }),
-  hitAreaBiasY: (pct: string) => ({
-    transform: `translateY(-${pct})`,
+  hitAreaOffsetY: (dir: number) => ({
+    insetBlockStart: 0,
+    transform: `translate(-50%, calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
   }),
   pillOffsetX: (dir: number) => ({
-    left: 0,
+    insetInlineStart: 0,
     transform: `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)`,
   }),
   // Vertical offset: no rotation — use explicit landscape dimensions.
@@ -333,6 +372,9 @@ export function ResizeHandle({
     isReversed,
     resizable?._isCollapsed ?? false,
   );
+  // Physical offset direction shared by the pill and the grab zone (null =
+  // centered / no bias). Keeps the two positioned identically in LTR and RTL.
+  const hitBiasDir = hitAreaBiasDir(effectiveSide);
 
   const getRTLMultiplier = useCallback((): number => {
     const el = handleRef.current;
@@ -538,9 +580,17 @@ export function ResizeHandle({
         {...stylex.props(
           styles.hitArea,
           isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
-          isHorizontal
-            ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide))
-            : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)),
+          // Bias the grab zone to sit over the visible pill. When the pill is
+          // centered (no bias) just center the hit area on the divider; when
+          // it's offset to a panel side, reuse the pill's physical-offset
+          // construction so the two stay aligned in LTR and RTL alike.
+          hitBiasDir == null
+            ? isHorizontal
+              ? styles.hitAreaCenteredX
+              : styles.hitAreaCenteredY
+            : isHorizontal
+              ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
+              : dynamicStyles.hitAreaOffsetY(hitBiasDir),
           isDisabled && styles.disabled,
         )}
         onPointerDown={handlePointerDown}

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -169,6 +169,7 @@ export function SegmentedControlItem({
   icon,
   isDisabled = false,
   onClick: onClickProp,
+  xstyle,
   ...rest
 }: SegmentedControlItemProps) {
   const ctx = useSegmentedControlContext();
@@ -228,6 +229,7 @@ export function SegmentedControlItem({
           isSelected && styles.selected,
           !isSelected && !isItemDisabled && styles.hover,
           isItemDisabled && styles.disabled,
+          xstyle,
         ),
       )}>
       {iconElement}

package/src/Selector/Selector.doc.mjs

@@ -23,6 +23,8 @@ export const docs = {
     targets: [
       {className: 'astryx-selector', visualProps: ['size', 'status']},
       {className: 'astryx-selector-option'},
+      {className: 'astryx-selector-clear-icon'},
+      {className: 'astryx-selector-indicator-icon', states: ['state']},
     ],
   },
   description: 'Dropdown selector for choosing from a list of options.',
@@ -141,6 +143,12 @@ export const docs = {
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',

package/src/Selector/Selector.test.tsx

@@ -20,8 +20,11 @@ import {
 import userEvent from '@testing-library/user-event';
 import {Selector} from './Selector';
 import {SelectorOption} from './SelectorOption';
+import {Icon} from '../Icon';
 import {InputGroup, InputGroupText} from '../InputGroup';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSSFlat} from '../theme/generateThemeRules';
 
 function politeRegion(): HTMLElement | null {
   return document.querySelector('[data-astryx-live-region="polite"]');
@@ -746,6 +749,119 @@ describe('Selector', () => {
         expect(politeRegion()?.textContent ?? '').toBe('');
       });
     });
+
+    describe('grouped search', () => {
+      const GROUPED = [
+        {
+          type: 'section' as const,
+          title: 'Citrus',
+          options: [
+            {value: 'orange', label: 'Orange'},
+            {value: 'lemon', label: 'Lemon'},
+          ],
+        },
+        {
+          type: 'section' as const,
+          title: 'Berries',
+          options: [
+            {value: 'strawberry', label: 'Strawberry'},
+            {value: 'blueberry', label: 'Blueberry'},
+          ],
+        },
+      ];
+
+      it('keeps the group header above matching items while searching', async () => {
+        const user = userEvent.setup();
+        render(
+          <Selector
+            label="Fruit"
+            options={GROUPED}
+            onChange={() => {}}
+            hasSearch
+          />,
+        );
+        await user.click(screen.getByRole('button', {name: 'Fruit'}));
+        // "orange" only matches within the Citrus group.
+        await user.type(screen.getByRole('combobox', h), 'orange');
+
+        expect(
+          screen.getByRole('group', {name: 'Citrus', ...h}),
+        ).toBeInTheDocument();
+        const options = screen.getAllByRole('option', h);
+        expect(options).toHaveLength(1);
+        expect(options[0]).toHaveTextContent('Orange');
+      });
+
+      it('hides a group whose items have no match', async () => {
+        const user = userEvent.setup();
+        render(
+          <Selector
+            label="Fruit"
+            options={GROUPED}
+            onChange={() => {}}
+            hasSearch
+          />,
+        );
+        await user.click(screen.getByRole('button', {name: 'Fruit'}));
+        // "berry" only matches items inside the Berries group.
+        await user.type(screen.getByRole('combobox', h), 'berry');
+
+        expect(
+          screen.getByRole('group', {name: 'Berries', ...h}),
+        ).toBeInTheDocument();
+        expect(
+          screen.queryByRole('group', {name: 'Citrus', ...h}),
+        ).not.toBeInTheDocument();
+        expect(screen.getAllByRole('option', h)).toHaveLength(2);
+      });
+
+      it('lands keyboard focus on the correct option after filtering', async () => {
+        const user = userEvent.setup();
+        render(
+          <Selector
+            label="Fruit"
+            options={GROUPED}
+            onChange={() => {}}
+            hasSearch
+          />,
+        );
+        await user.click(screen.getByRole('button', {name: 'Fruit'}));
+        const search = screen.getByRole('combobox', h);
+        // "berry" leaves Strawberry, Blueberry (in that document order).
+        await user.type(search, 'berry');
+        const options = screen.getAllByRole('option', h);
+        expect(options.map(o => o.textContent)).toEqual([
+          'Strawberry',
+          'Blueberry',
+        ]);
+        await user.keyboard('{ArrowDown}');
+        expect(search).toHaveAttribute('aria-activedescendant', options[0].id);
+        await user.keyboard('{ArrowDown}');
+        expect(search).toHaveAttribute('aria-activedescendant', options[1].id);
+      });
+
+      it('shows the empty state when no group has a match', async () => {
+        const user = userEvent.setup();
+        render(
+          <Selector
+            label="Fruit"
+            options={GROUPED}
+            onChange={() => {}}
+            hasSearch
+          />,
+        );
+        await user.click(screen.getByRole('button', {name: 'Fruit'}));
+        await user.type(screen.getByRole('combobox', h), 'zzz');
+        expect(screen.queryAllByRole('option', h)).toHaveLength(0);
+        expect(
+          screen.queryByRole('group', {name: 'Citrus', ...h}),
+        ).not.toBeInTheDocument();
+        const listbox = screen.getByRole('listbox', h);
+        expect(
+          within(listbox).getByText('No results found'),
+        ).toBeInTheDocument();
+      });
+    });
   });
 
   describe('keyboard accessibility', () => {
@@ -1074,11 +1190,14 @@ describe('Selector', () => {
   });
 });
 
-
 describe('Selector statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
-      <Selector label="Fruit" options={['Apple', 'Banana']} status={{type: 'error', message: 'Required'}} />,
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        status={{type: 'error', message: 'Required'}}
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -1088,7 +1207,12 @@ describe('Selector statusVariant forwarding', () => {
 
   it('forwards statusVariant="detached" to the underlying Field status', () => {
     const {container} = render(
-      <Selector label="Fruit" options={['Apple', 'Banana']} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -1096,3 +1220,204 @@ describe('Selector statusVariant forwarding', () => {
     );
   });
 });
+
+describe('Selector clear icon theme target', () => {
+  // Resolve the clear glyph span (the astryx-icon element inside the clear
+  // button), independent of the theme target class.
+  const getClearIcon = (): HTMLElement => {
+    const button = screen.getByRole('button', {name: 'Clear Fruit'});
+    const icon = button.querySelector('.astryx-icon');
+    if (icon == null) {
+      throw new Error('clear icon not found');
+    }
+    return icon as HTMLElement;
+  };
+
+  it('renders the astryx-selector-clear-icon target on the clear glyph', () => {
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    // The stable theme target lands on the icon element itself (not the
+    // button), so a theme can restyle just this glyph (color, size, hover)
+    // via `defineTheme` — a button-level target could not reach the icon's
+    // own color/size.
+    const icon = getClearIcon();
+    expect(icon).toHaveClass('astryx-selector-clear-icon');
+    expect(icon).toHaveClass('astryx-icon');
+  });
+
+  it('keeps the clear button functional alongside the target', () => {
+    const onChange = vi.fn();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={onChange}
+        hasClear
+      />,
+    );
+    const clear = screen.getByRole('button', {name: 'Clear Fruit'});
+    expect(clear.tagName).toBe('BUTTON');
+    fireEvent.click(clear);
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('renders the default icon (secondary color, sm size) byte-identically', () => {
+    // Pixel-identical default guard: the clear glyph must carry the exact same
+    // StyleX color/size classes as a standalone secondary/sm icon. The added
+    // target class is purely additive — it changes nothing until a theme
+    // targets it.
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    const icon = getClearIcon();
+
+    const {container: refContainer} = render(
+      <Icon icon="close" size="sm" color="secondary" />,
+    );
+    const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+
+    const styleClasses = (el: HTMLElement) =>
+      el.className
+        .split(' ')
+        .filter(c => c !== 'astryx-selector-clear-icon')
+        .sort();
+
+    expect(styleClasses(icon)).toEqual(styleClasses(refIcon));
+  });
+
+  it('exposes selector-clear-icon so a theme reaches the icon color, size, and hover', () => {
+    // jsdom cannot resolve the @layer cascade, so the DOM-class assertion above
+    // (target lands on the icon element) plus this generation assertion (the
+    // theme emits same-element icon rules in @layer astryx-theme) together
+    // prove the seam: a same-element theme rule wins over the icon's own
+    // base-layer color/size.
+    const theme = defineTheme({
+      name: 'selector-clear-icon-test',
+      components: {
+        'selector-clear-icon': {
+          base: {
+            width: '12px',
+            height: '12px',
+            fontSize: '12px',
+            color: 'var(--color-icon-secondary)',
+            ':hover': {color: 'var(--color-icon-primary)'},
+          },
+        },
+      },
+    });
+    const css = generateThemeCSSFlat(theme);
+    expect(css).toContain('.astryx-selector-clear-icon {');
+    expect(css).toContain('width: 12px');
+    expect(css).toContain('height: 12px');
+    expect(css).toContain('.astryx-selector-clear-icon:hover {');
+    expect(css).toContain('color: var(--color-icon-primary)');
+  });
+});
+
+describe('Selector indicator (chevron) icon theme target', () => {
+  const getIndicatorIcon = (container: HTMLElement): HTMLElement => {
+    // The chevron is the only glyph carrying the indicator target class.
+    const icon = container.querySelector('.astryx-selector-indicator-icon');
+    if (icon == null) {
+      throw new Error('indicator icon not found');
+    }
+    return icon as HTMLElement;
+  };
+
+  it('renders the astryx-selector-indicator-icon target on the chevron glyph', () => {
+    const {container} = render(
+      <Selector label="Fruit" options={OPTIONS} onChange={() => {}} />,
+    );
+    // The stable theme target lands on the icon element itself (not the trigger
+    // button), so a theme can restyle just this glyph (color, size, hover) —
+    // and each open/closed state — via `defineTheme`. A button-level target
+    // could not reach the icon's own color/size.
+    const icon = getIndicatorIcon(container);
+    expect(icon).toHaveClass('astryx-selector-indicator-icon');
+    expect(icon).toHaveClass('astryx-icon');
+    // Open/closed state is reflected so a theme can target each state alone.
+    expect(icon).toHaveAttribute('data-state', 'collapsed');
+  });
+
+  it('reflects the expanded state on the chevron when the popover is open', async () => {
+    const user = userEvent.setup();
+    const {container} = render(
+      <Selector label="Fruit" options={OPTIONS} onChange={() => {}} />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    await waitFor(() => {
+      expect(getIndicatorIcon(container)).toHaveAttribute(
+        'data-state',
+        'expanded',
+      );
+    });
+  });
+
+  it('renders the default icon (inherit color, sm size) byte-identically', () => {
+    // Pixel-identical default guard: the chevron glyph must carry the exact
+    // same StyleX color/size classes as a standalone inherit/sm icon. The added
+    // target class + data-state are purely additive — they change nothing until
+    // a theme targets them.
+    const {container} = render(
+      <Selector label="Fruit" options={OPTIONS} onChange={() => {}} />,
+    );
+    const icon = getIndicatorIcon(container);
+
+    const {container: refContainer} = render(
+      <Icon icon="chevronDown" size="sm" color="inherit" />,
+    );
+    const refIcon = refContainer.querySelector('.astryx-icon') as HTMLElement;
+
+    // Exclude the additive theme-target classes (the stable target + its
+    // reflected state class) so only the StyleX color/size classes remain.
+    const themeTargetClasses = new Set([
+      'astryx-selector-indicator-icon',
+      'collapsed',
+      'expanded',
+    ]);
+    const styleClasses = (el: HTMLElement) =>
+      el.className
+        .split(' ')
+        .filter(c => !themeTargetClasses.has(c))
+        .sort();
+
+    expect(styleClasses(icon)).toEqual(styleClasses(refIcon));
+  });
+
+  it('exposes selector-indicator-icon so a theme reaches the icon size and per-state color', () => {
+    // jsdom cannot resolve the @layer cascade, so the DOM-class assertions
+    // above (target lands on the icon element) plus this generation assertion
+    // (the theme emits same-element icon rules in @layer astryx-theme) together
+    // prove the seam: a same-element theme rule wins over the icon's own
+    // base-layer color/size.
+    const theme = defineTheme({
+      name: 'selector-indicator-icon-test',
+      components: {
+        'selector-indicator-icon': {
+          base: {width: '14px', height: '14px', fontSize: '14px'},
+          'state:expanded': {color: 'var(--color-icon-primary)'},
+        },
+      },
+    });
+    const css = generateThemeCSSFlat(theme);
+    expect(css).toContain('.astryx-selector-indicator-icon {');
+    expect(css).toContain('width: 14px');
+    expect(css).toContain('height: 14px');
+    expect(css).toContain('.astryx-selector-indicator-icon.expanded');
+    expect(css).toContain('color: var(--color-icon-primary)');
+  });
+});