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

package/src/Selector/Selector.tsx

@@ -545,6 +545,21 @@ function DefaultOption({option}: {option: SelectorOptionData}) {
   );
 }
 
+// Case-insensitive substring match for a single option. The one predicate used
+// by both the flat filter (count + keyboard nav) and the grouped renderer, so
+// what is shown while searching stays in lockstep with the announced count.
+function optionMatchesQuery(
+  option: SelectorOptionData,
+  query: string,
+): boolean {
+  if (!query) {
+    return true;
+  }
+  return (option.label ?? option.value)
+    .toLowerCase()
+    .includes(query.toLowerCase());
+}
+
 // Case-insensitive substring filter over the selectable options. Shared by the
 // `filteredItems` memo (rendering) and the search-change handler, which needs
 // the count for the *next* query synchronously to announce it exactly once per
@@ -556,10 +571,7 @@ function filterOptionsByQuery(
   if (!query) {
     return items;
   }
-  const q = query.toLowerCase();
-  return items.filter(item =>
-    (item.label ?? item.value).toLowerCase().includes(q),
-  );
+  return items.filter(item => optionMatchesQuery(item, query));
 }
 
 /**
@@ -947,16 +959,15 @@ export function Selector<T extends SelectorOptionType>(
 
   // Render all options (handling sections/dividers)
   const renderOptions = useCallback(() => {
-    // When search is active, render filtered items flat (no sections/dividers)
-    if (hasSearch && searchQuery) {
-      if (filteredItems.length === 0) {
-        return [
-          <div key="empty" {...stylex.props(styles.emptyState)}>
-            No results found
-          </div>,
-        ];
-      }
-      return filteredItems.map((item, index) => renderItem(item, index));
+    const isSearching = hasSearch && Boolean(searchQuery);
+
+    // Nothing matched across every group/option: show the empty state.
+    if (isSearching && filteredItems.length === 0) {
+      return [
+        <div key="empty" {...stylex.props(styles.emptyState)}>
+          No results found
+        </div>,
+      ];
     }
 
     let flatIndex = 0;
@@ -966,13 +977,27 @@ export function Selector<T extends SelectorOptionType>(
       const option = options[i];
 
       if (isDivider(option)) {
+        // While searching, a standalone divider between groups would orphan
+        // itself once its neighbors are filtered out, so skip it.
+        if (isSearching) {
+          continue;
+        }
         elements.push(<Divider key={`divider-${i}`} xstyle={styles.divider} />);
       } else if (isSection(option)) {
         const sectionItems: ReactNode[] = [];
         for (const opt of option.options) {
-          sectionItems.push(renderItem(normalizeOption(opt), flatIndex));
+          const normalized = normalizeOption(opt);
+          if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
+            continue;
+          }
+          sectionItems.push(renderItem(normalized, flatIndex));
           flatIndex++;
         }
+        // Hide a group entirely (header + wrapper) when none of its items
+        // match the query, so no header is left standing over nothing.
+        if (sectionItems.length === 0) {
+          continue;
+        }
         if (option.title) {
           elements.push(
             <Divider
@@ -988,7 +1013,11 @@ export function Selector<T extends SelectorOptionType>(
           </div>,
         );
       } else if (isOptionData(option)) {
-        elements.push(renderItem(normalizeOption(option), flatIndex));
+        const normalized = normalizeOption(option);
+        if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
+          continue;
+        }
+        elements.push(renderItem(normalized, flatIndex));
         flatIndex++;
       }
     }
@@ -1017,7 +1046,7 @@ export function Selector<T extends SelectorOptionType>(
             isDisabled && inputWrapperStyles.disabled,
             !selectedItem && styles.triggerPlaceholder,
             status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
+            status && !isDisabled && inputStatusHoverShadowStyles[status.type],
             inputGroup && groupStyles.inGroup,
             xstyle,
           ),
@@ -1080,7 +1109,17 @@ export function Selector<T extends SelectorOptionType>(
             onClick={handleClear}
             aria-label={t('@astryx.selector.clearLabel', {label})}
             {...stylex.props(styles.clearButton)}>
-            <Icon icon="close" size="sm" color="secondary" />
+            <Icon
+              icon="close"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the clear glyph itself, so a theme can
+              // restyle just this icon (color, size, hover) via `defineTheme`.
+              // Same-element rules in @layer astryx-theme win over the icon's
+              // own base color/size, which a button-level target could not
+              // reach.
+              {...themeProps('selector-clear-icon')}
+            />
           </button>
         )}
         <span
@@ -1096,7 +1135,19 @@ export function Selector<T extends SelectorOptionType>(
               color={STATUS_ICON_COLOR_MAP[status.type]}
             />
           ) : (
-            <Icon icon="chevronDown" size="sm" color="inherit" />
+            <Icon
+              icon="chevronDown"
+              size="sm"
+              color="inherit"
+              // Stable theme target on the chevron glyph itself, so a theme can
+              // restyle just this icon (color, size, hover) — and its
+              // open/closed state — via `defineTheme`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base color/size,
+              // which a button-level target could not reach.
+              {...themeProps('selector-indicator-icon', {
+                state: popover.isOpen ? 'expanded' : 'collapsed',
+              })}
+            />
           )}
         </span>
       </div>

package/src/SideNav/SideNav.tsx

@@ -31,7 +31,7 @@ import {
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {borderVars, colorVars, spacingVars} from '../theme/tokens.stylex';
+import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps, mergeRefs} from '../utils';
 import {
   SideNavCollapseContext,
@@ -123,9 +123,6 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-2'],
     paddingBlockStart: spacingVars['--spacing-1'],
     paddingBlockEnd: spacingVars['--spacing-2'],
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
   },
   footerRow: {
     display: 'flex',
@@ -145,7 +142,6 @@ const styles = stylex.create({
     alignItems: 'center',
   },
   stickyBottomCollapsed: {
-    borderBlockStart: 'none',
     paddingBlockStart: 0,
   },
   // Drawer footer — pushed to bottom of the scrollable content area
@@ -155,9 +151,6 @@ const styles = stylex.create({
     marginBlockStart: 'auto',
     gap: spacingVars['--spacing-2'],
     paddingBlockStart: spacingVars['--spacing-2'],
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
   },
   drawerFooterIcons: {
     display: 'flex',

package/src/SideNav/SideNavCollapseButton.tsx

@@ -23,7 +23,7 @@ import {durationVars, easeVars} from '../theme/tokens.stylex';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
-import {composeEventHandlers} from '../utils';
+import {composeEventHandlers, rtlStyles} from '../utils';
 import {
   useSideNavCollapse,
   type SideNavCollapseState,
@@ -131,12 +131,14 @@ export function SideNavCollapseButton({
       onClick={composeEventHandlers(onClickProp, toggle)}
       icon={
         children ?? (
-          <span
-            {...stylex.props(
-              styles.chevron,
-              isCollapsed && styles.chevronCollapsed,
-            )}>
-            {getIcon('chevronLeft')}
+          <span {...stylex.props(rtlStyles.mirror)}>
+            <span
+              {...stylex.props(
+                styles.chevron,
+                isCollapsed && styles.chevronCollapsed,
+              )}>
+              {getIcon('chevronLeft')}
+            </span>
           </span>
         )
       }

package/src/SideNav/SideNavItem.tsx

@@ -356,6 +356,8 @@ export function SideNavItem({
   size = 'md',
   'data-testid': testId,
   ref,
+  xstyle,
+  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
@@ -502,7 +504,7 @@ export function SideNavItem({
     // Items with children: popover trigger + popover
     if (hasChildren) {
       return (
-        <div {...stylex.props(styles.root)}>
+        <div {...stylex.props(styles.root, xstyle)}>
           <button
             ref={mergeRefs(ref, popover.triggerRef)}
             type="button"
@@ -554,7 +556,7 @@ export function SideNavItem({
     );
 
     return (
-      <div ref={itemRef} {...stylex.props(styles.root)}>
+      <div ref={itemRef} {...stylex.props(styles.root, xstyle)}>
         {collapsedElement}
         <Tooltip content={label} placement="end" anchorRef={itemRef} />
       </div>
@@ -670,7 +672,7 @@ export function SideNavItem({
   }
 
   const item = (
-    <div ref={itemRef} {...stylex.props(styles.root)}>
+    <div ref={itemRef} {...stylex.props(styles.root, xstyle)}>
       {itemElement}
       {hasChildren && !isCollapsed && (
         <div

package/src/Slider/Slider.doc.mjs

@@ -141,6 +141,12 @@ export const docs = {
       type: 'string',
       description: 'Tooltip text for an info icon displayed next to the label.',
     },
+    {
+      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/Slider/Slider.test.tsx

@@ -9,6 +9,7 @@
  * SYNC: When Slider.tsx changes, update tests to match new behavior
  */
 
+import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -50,23 +51,17 @@ beforeEach(() => {
 describe('Slider', () => {
   // --- Aria labels ---
 
-  it('single thumb uses label as aria-label', () => {
+  it('single thumb takes its accessible name from the label', () => {
     render(<Slider label="Volume" value={50} />);
     const slider = screen.getByRole('slider');
-    expect(slider).toHaveAttribute('aria-label', 'Volume');
+    expect(slider).toHaveAccessibleName('Volume');
   });
 
-  it('range thumbs have correct aria-labels', () => {
+  it('range thumbs have individual names composing with the group label', () => {
     render(<Slider label="Price range" value={[20, 80] as [number, number]} />);
     const sliders = screen.getAllByRole('slider');
-    expect(sliders[0]).toHaveAttribute(
-      'aria-label',
-      'Price range, minimum value',
-    );
-    expect(sliders[1]).toHaveAttribute(
-      'aria-label',
-      'Price range, maximum value',
-    );
+    expect(sliders[0]).toHaveAccessibleName('Minimum value');
+    expect(sliders[1]).toHaveAccessibleName('Maximum value');
   });
 
   it('sets aria-valuetext with formatValue', () => {
@@ -94,7 +89,9 @@ describe('Slider', () => {
       render(<Slider label="Volume" value={value} min={0} max={100} />);
       const slider = screen.getByRole('slider');
       expect(slider).toHaveAttribute('aria-valuenow', String(expectedValue));
-      expect(slider).toHaveStyle({left: expectedPosition});
+      // Thumb positions via the logical `inset-inline-start` so it mirrors
+      // under RTL (see RTL Phase 4). In LTR this resolves to the left edge.
+      expect(slider).toHaveStyle({insetInlineStart: expectedPosition});
     },
   );
 
@@ -110,6 +107,102 @@ describe('Slider', () => {
     const sliders = screen.getAllByRole('slider');
     expect(sliders[0]).toHaveAttribute('aria-valuenow', '25');
     expect(sliders[1]).toHaveAttribute('aria-valuenow', '75');
+    // Per the APG multi-thumb pattern, each thumb's bounds are constrained by
+    // its sibling: the lower thumb can't exceed the upper thumb's value and
+    // the upper thumb can't go below the lower thumb's value.
+    expect(sliders[0]).toHaveAttribute('aria-valuemin', '0');
+    expect(sliders[0]).toHaveAttribute('aria-valuemax', '75');
+    expect(sliders[1]).toHaveAttribute('aria-valuemin', '25');
+    expect(sliders[1]).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('range thumb bounds update after moving a thumb', async () => {
+    const user = userEvent.setup();
+    function ControlledRange() {
+      const [value, setValue] = useState<[number, number]>([25, 75]);
+      return (
+        <Slider
+          label="Range"
+          value={value}
+          onChange={setValue}
+          min={0}
+          max={100}
+        />
+      );
+    }
+    render(<ControlledRange />);
+    const sliders = screen.getAllByRole('slider');
+    act(() => {
+      sliders[0].focus();
+    });
+    await user.keyboard('{ArrowRight}');
+    expect(sliders[0]).toHaveAttribute('aria-valuenow', '26');
+    // The upper thumb's floor tracks the lower thumb's new value.
+    expect(sliders[1]).toHaveAttribute('aria-valuemin', '26');
+    expect(sliders[0]).toHaveAttribute('aria-valuemax', '75');
+  });
+
+  it('range thumb bounds include the minStepsBetweenThumbs gap', () => {
+    render(
+      <Slider
+        label="Range"
+        value={[20, 80] as [number, number]}
+        min={0}
+        max={100}
+        step={5}
+        minStepsBetweenThumbs={2}
+      />,
+    );
+    const sliders = screen.getAllByRole('slider');
+    // minGap = 2 steps * 5 = 10
+    expect(sliders[0]).toHaveAttribute('aria-valuemax', '70');
+    expect(sliders[1]).toHaveAttribute('aria-valuemin', '30');
+  });
+
+  // --- Label association ---
+
+  // A <label htmlFor> must point at an existing form-associated element;
+  // div[role="slider"] is not labelable, so the Slider label must render as a
+  // group label instead (WCAG 1.3.1).
+  const LABELABLE_TAGS = new Set([
+    'BUTTON',
+    'INPUT',
+    'METER',
+    'OUTPUT',
+    'PROGRESS',
+    'SELECT',
+    'TEXTAREA',
+  ]);
+
+  function expectNoOrphanedLabels(container: HTMLElement) {
+    for (const labelEl of container.querySelectorAll('label[for]')) {
+      const target = document.getElementById(labelEl.getAttribute('for')!);
+      expect(target).not.toBeNull();
+      expect(LABELABLE_TAGS.has(target!.tagName)).toBe(true);
+    }
+  }
+
+  it('single mode renders the label as a group label naming the thumb', () => {
+    const {container} = render(<Slider label="Volume" value={50} />);
+    expectNoOrphanedLabels(container);
+    const slider = screen.getByRole('slider');
+    const labelledBy = slider.getAttribute('aria-labelledby');
+    expect(labelledBy).toBeTruthy();
+    expect(document.getElementById(labelledBy!)).toHaveTextContent('Volume');
+    expect(slider).toHaveAccessibleName('Volume');
+  });
+
+  it('range mode labels the slider group via aria-labelledby', () => {
+    const {container} = render(
+      <Slider label="Price range" value={[20, 80] as [number, number]} />,
+    );
+    expectNoOrphanedLabels(container);
+    const group = screen.getByRole('group', {name: 'Price range'});
+    const labelledBy = group.getAttribute('aria-labelledby');
+    expect(labelledBy).toBeTruthy();
+    expect(document.getElementById(labelledBy!)).toHaveTextContent(
+      'Price range',
+    );
   });
 
   it('sets aria-orientation for vertical', () => {
@@ -301,6 +394,58 @@ describe('Slider', () => {
     expect(handleChangeEnd).toHaveBeenCalledWith(55);
   });
 
+  // --- Fractional step precision ---
+
+  it('emits exact decimal values for fractional steps on keyboard', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const handleChangeEnd = vi.fn();
+    render(
+      <Slider
+        label="Opacity"
+        value={0.2}
+        min={0}
+        max={1}
+        step={0.1}
+        onChange={handleChange}
+        onChangeEnd={handleChangeEnd}
+      />,
+    );
+    const slider = screen.getByRole('slider');
+    act(() => {
+      slider.focus();
+    });
+    await user.keyboard('{ArrowRight}');
+    // 0.2 + 0.1 must not surface binary float error (0.30000000000000004)
+    expect(handleChange).toHaveBeenCalledWith(0.3);
+    expect(handleChangeEnd).toHaveBeenCalledWith(0.3);
+  });
+
+  it('emits exact decimal values for fractional steps in range mode', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const handleChangeEnd = vi.fn();
+    render(
+      <Slider
+        label="Range"
+        value={[0.2, 0.6] as [number, number]}
+        min={0}
+        max={1}
+        step={0.1}
+        onChange={handleChange}
+        onChangeEnd={handleChangeEnd}
+      />,
+    );
+    const sliders = screen.getAllByRole('slider');
+    act(() => {
+      sliders[1].focus();
+    });
+    await user.keyboard('{ArrowRight}');
+    // 0.6 + 0.1 snaps to 7 * 0.1, which is 0.7000000000000001 without rounding
+    expect(handleChange).toHaveBeenCalledWith([0.2, 0.7]);
+    expect(handleChangeEnd).toHaveBeenCalledWith([0.2, 0.7]);
+  });
+
   it('fires onChangeEnd on keyboard Home/End with correct value', async () => {
     const user = userEvent.setup();
     const handleChangeEnd = vi.fn();
@@ -416,6 +561,89 @@ describe('Slider', () => {
     expect(document.activeElement).toBe(slider);
   });
 
+  // --- RTL pointer value mapping (RTL Phase 4) ---
+  // Contract: the inline-start edge (value = min) is the RIGHT edge under RTL,
+  // so the same physical click maps to the mirrored value relative to LTR.
+  // `valueDisplay="none"` keeps the thumb a direct child of the track element
+  // (no Tooltip wrapper) so the mocked rect lands on trackRef.
+
+  it('maps a track click to the LTR value in the default direction', () => {
+    const handleChange = vi.fn();
+    render(
+      <Slider
+        label="Volume"
+        value={0}
+        min={0}
+        max={100}
+        valueDisplay="none"
+        onChange={handleChange}
+      />,
+    );
+    const track = screen.getByRole('slider').parentElement!;
+    track.getBoundingClientRect = () =>
+      ({
+        left: 0,
+        top: 0,
+        right: 200,
+        bottom: 20,
+        width: 200,
+        height: 20,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+    // Click at 25% of the track from the left (x=50 of 200) → value 25 in LTR.
+    fireEvent.pointerDown(track, {clientX: 50, clientY: 10, pointerId: 1});
+    expect(handleChange).toHaveBeenLastCalledWith(25);
+  });
+
+  it('mirrors a track click to the RTL value when the track is rtl', () => {
+    const handleChange = vi.fn();
+    render(
+      <Slider
+        label="Volume"
+        value={0}
+        min={0}
+        max={100}
+        valueDisplay="none"
+        onChange={handleChange}
+      />,
+    );
+    const track = screen.getByRole('slider').parentElement!;
+    track.getBoundingClientRect = () =>
+      ({
+        left: 0,
+        top: 0,
+        right: 200,
+        bottom: 20,
+        width: 200,
+        height: 20,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+    // Force the track's computed direction to rtl (isRtlElement reads this).
+    const realGetComputedStyle = window.getComputedStyle;
+    const gcsSpy = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockImplementation((el: Element, pseudo?: string | null) => {
+        if (el === track) {
+          return {direction: 'rtl'} as CSSStyleDeclaration;
+        }
+        return realGetComputedStyle(el, pseudo ?? undefined);
+      });
+
+    // Same physical click at 25% from the left (x=50). Under RTL the inline
+    // start is the right edge, so fraction = (right - x)/width = 150/200 = 0.75
+    // → value 75 (the mirror of the LTR value 25).
+    fireEvent.pointerDown(track, {clientX: 50, clientY: 10, pointerId: 1});
+    expect(handleChange).toHaveBeenLastCalledWith(75);
+
+    gcsSpy.mockRestore();
+  });
+
   // --- Mark label click snapping ---
 
   it('clicking a mark label snaps to that mark value, not pointer position', () => {