@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/Selector/__tests__/Selector.combobox.a11y.chromium.spec.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** Chromium accessibility-tree and relationship proof for Selector's Combobox binding. */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  unmatchedKnownFailures,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {createChromiumHarness} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {COMBOBOX_PATTERN} from '@astryxdesign/a11y-spec';
+import {
+  SELECTOR_COMBOBOX_SCENARIOS,
+  type SelectorComboboxScenario,
+} from './Combobox.a11y.states';
+import {SELECTOR_COMBOBOX_KNOWN_FAILURES} from './Combobox.a11y.known-failures';
+
+let storybook: StaticServer;
+const observedResults: BindingResult[] = [];
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+  expect(
+    unmatchedKnownFailures(SELECTOR_COMBOBOX_KNOWN_FAILURES, observedResults),
+  ).toEqual([]);
+});
+
+async function awaitScenario(
+  page: Page,
+  scenario: SelectorComboboxScenario,
+): Promise<void> {
+  if (!scenario.open) {
+    return;
+  }
+  await expect(page.getByRole('listbox')).toBeVisible();
+  if (scenario.highlightFirst) {
+    await expect(
+      page.getByRole('combobox', {name: scenario.facts.name}),
+    ).toHaveAttribute('aria-activedescendant', /.+/);
+  }
+}
+
+for (const scenario of SELECTOR_COMBOBOX_SCENARIOS) {
+  test(`Selector Combobox contract — ${scenario.id}`, async ({page}) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=${scenario.storyId}&viewMode=story`,
+      {waitUntil: 'load'},
+    );
+    await awaitScenario(page, scenario);
+
+    // A modal sheet makes the trigger inert, so find it among hidden nodes too.
+    const subject = page.getByRole('combobox', {
+      name: scenario.facts.name,
+      includeHidden: true,
+    });
+    if (
+      scenario.binding === 'Selector.trigger' &&
+      scenario.facts.popupVisible
+    ) {
+      // AR1: the trigger names the popup kind its presentation renders.
+      await expect(subject).toHaveAttribute(
+        'aria-haspopup',
+        scenario.facts.popupRole,
+      );
+    }
+    const related: Record<string, Locator> = {};
+    if (scenario.facts.popupVisible) {
+      related.popup =
+        scenario.facts.popupRole === 'dialog'
+          ? page.getByRole('dialog', {name: 'Fruit'})
+          : page.getByRole('listbox');
+    }
+    if (scenario.facts.activeDescendant) {
+      related['active-descendant'] = page.getByRole('option', {name: 'Apple'});
+    }
+    const cdp = await page.context().newCDPSession(page);
+    const run = await checkAccessibilitySpec({
+      spec: COMBOBOX_PATTERN,
+      binding: scenario.binding,
+      state: scenario.id,
+      facts: scenario.facts,
+      knownFailures: SELECTOR_COMBOBOX_KNOWN_FAILURES,
+      mount: async () => createChromiumHarness({page, cdp, subject, related}),
+    });
+    observedResults.push(run);
+
+    expect(formatFailures(blockingResults([run]))).toBe('');
+    expect(
+      run.results
+        .filter(result => result.status === 'unrun')
+        .map(result => `${result.expectation}: ${result.detail ?? ''}`),
+    ).toEqual([]);
+  });
+}

package/src/Selector/__tests__/Selector.combobox.a11y.test.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** Selector's first binding to the reusable Combobox semantic contract. */
+
+import {cleanup, render, screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {describe, expect, it} from 'vitest';
+import {
+  COMBOBOX_PATTERN,
+  expectAccessibilitySpec,
+} from '@astryxdesign/a11y-spec';
+import {Selector} from '../Selector';
+import {installListboxDialogStubs} from './Listbox.a11y.dom';
+import {
+  SELECTOR_COMBOBOX_EXCLUSIONS,
+  SELECTOR_COMBOBOX_SCENARIOS,
+  type SelectorComboboxScenario,
+} from './Combobox.a11y.states';
+import {SELECTOR_COMBOBOX_KNOWN_FAILURES} from './Combobox.a11y.known-failures';
+
+installListboxDialogStubs();
+
+const hidden = {hidden: true} as const;
+
+function subjectFor(scenario: SelectorComboboxScenario): HTMLElement {
+  return screen.getByRole('combobox', {...hidden, name: scenario.facts.name});
+}
+
+describe('Selector Combobox semantic binding', () => {
+  it.each(SELECTOR_COMBOBOX_SCENARIOS)('$id', async scenario => {
+    await expectAccessibilitySpec({
+      spec: COMBOBOX_PATTERN,
+      binding: scenario.binding,
+      state: scenario.id,
+      facts: scenario.facts,
+      knownFailures: SELECTOR_COMBOBOX_KNOWN_FAILURES,
+      render: async () => {
+        render(
+          <Selector
+            label="Fruit"
+            options={[
+              {value: 'apple', label: 'Apple'},
+              {value: 'banana', label: 'Banana'},
+            ]}
+            onChange={() => {}}
+            {...scenario.props}
+          />,
+        );
+        if (!scenario.open) {
+          return;
+        }
+        const user = userEvent.setup();
+        await user.click(
+          scenario.props.hasSearch
+            ? screen.getByRole('button', {name: /Fruit/})
+            : screen.getByRole('combobox', {name: 'Fruit'}),
+        );
+        await screen.findByRole('listbox', hidden);
+        if (scenario.highlightFirst) {
+          const search = subjectFor(scenario);
+          await waitFor(() => expect(search).toHaveFocus());
+          await user.keyboard('{ArrowDown}');
+        }
+      },
+      subject: () => subjectFor(scenario),
+      related: () => {
+        const related: Record<string, Element> = {};
+        if (!scenario.facts.popupVisible) {
+          return related;
+        }
+        const listbox = screen.getByRole('listbox', hidden);
+        if (scenario.binding === 'Selector.trigger') {
+          // AR1: the trigger names the popup kind its presentation renders.
+          expect(subjectFor(scenario)).toHaveAttribute(
+            'aria-haspopup',
+            scenario.facts.popupRole,
+          );
+        }
+        related.popup =
+          scenario.facts.popupRole === 'dialog'
+            ? screen.getByRole('dialog', {...hidden, name: 'Fruit'})
+            : listbox;
+        if (scenario.facts.activeDescendant) {
+          expect(
+            subjectFor(scenario).getAttribute('aria-activedescendant'),
+          ).not.toBeNull();
+          related['active-descendant'] = within(listbox).getByRole('option', {
+            ...hidden,
+            name: 'Apple',
+          });
+        }
+        return related;
+      },
+      cleanup,
+    });
+  });
+
+  it('keeps the bounded first-adopter state matrix explicit', () => {
+    expect(
+      SELECTOR_COMBOBOX_SCENARIOS.map(scenario => [
+        scenario.binding,
+        scenario.id,
+      ]),
+    ).toEqual([
+      ['Selector.trigger', 'closed'],
+      ['Selector.trigger', 'open'],
+      ['Selector.trigger', 'read-only'],
+      ['Selector.trigger', 'busy'],
+      ['Selector.trigger', 'sheet-open'],
+      ['Selector.search', 'search-active'],
+    ]);
+    expect(SELECTOR_COMBOBOX_EXCLUSIONS).toHaveLength(5);
+  });
+
+  it('pins every known failure to exactly one bound state', () => {
+    expect(SELECTOR_COMBOBOX_KNOWN_FAILURES).toHaveLength(1);
+    for (const record of SELECTOR_COMBOBOX_KNOWN_FAILURES) {
+      expect(
+        SELECTOR_COMBOBOX_SCENARIOS.filter(
+          scenario =>
+            scenario.binding === record.binding && scenario.id === record.state,
+        ),
+      ).toHaveLength(1);
+    }
+  });
+});

package/src/SideNav/SideNav.test.tsx

@@ -989,6 +989,41 @@ describe('SideNav resizable', () => {
     ).toBeInTheDocument();
   });
 
+  it('names the nav it resizes with aria-controls (APG window splitter)', () => {
+    render(<SideNav resizable>Content</SideNav>);
+    const nav = screen.getByRole('navigation');
+    const handle = screen.getByRole('separator');
+    expect(nav.id).not.toBe('');
+    expect(handle).toHaveAttribute('aria-controls', nav.id);
+  });
+
+  it("keeps a consumer's nav id and points the handle at it", () => {
+    render(
+      <SideNav resizable id="primary-nav">
+        Content
+      </SideNav>,
+    );
+    expect(screen.getByRole('navigation')).toHaveAttribute('id', 'primary-nav');
+    expect(screen.getByRole('separator')).toHaveAttribute(
+      'aria-controls',
+      'primary-nav',
+    );
+  });
+
+  it('keeps the generated nav id when a wrapper forwards id={undefined}', () => {
+    render(
+      <SideNav resizable id={undefined}>
+        Content
+      </SideNav>,
+    );
+    const nav = screen.getByRole('navigation');
+    expect(nav.id).not.toBe('');
+    expect(screen.getByRole('separator')).toHaveAttribute(
+      'aria-controls',
+      nav.id,
+    );
+  });
+
   it('clips the overlay drag handle within the resizable nav bounds', () => {
     render(<SideNav resizable>Content</SideNav>);
     const nav = screen.getByRole('navigation');

package/src/SideNav/SideNav.tsx

@@ -22,7 +22,13 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
-import {useCallback, useImperativeHandle, useRef, type ReactNode} from 'react';
+import {
+  useCallback,
+  useId,
+  useImperativeHandle,
+  useRef,
+  type ReactNode,
+} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
@@ -440,6 +446,10 @@ export function SideNav({
   );
 
   const navRef = useRef<HTMLElement>(null);
+  // The resize handle names the pane it resizes (APG window splitter), so the
+  // nav needs an id; a consumer's own id wins.
+  const generatedNavId = useId();
+  const navId = props.id ?? generatedNavId;
   const mergedNavRef = useMergedRefs(ref, navRef);
   const collapseStateRef = useRef<SideNavCollapseState>({
     isCollapsed: false,
@@ -611,7 +621,10 @@ export function SideNav({
         className,
         resizableNavStyle,
       )}
-      {...props}>
+      {...props}
+      // After the spread: a wrapper forwarding `id={undefined}` must not erase
+      // the id the resize handle's aria-controls points at.
+      id={navId}>
       {hasStickyTop && (
         <div
           {...stylex.props(
@@ -672,6 +685,7 @@ export function SideNav({
         xstyle={styles.resizableHandle}
         resizable={resizableHook.props}
         label={t('@astryx.sideNav.resizeSidebar')}
+        aria-controls={navId}
       />
     </div>
   ) : (

package/src/Slider/Slider.spec.md

@@ -35,8 +35,10 @@ an additive target for the interactive control surface.
 ## Compatibility and migration
 
 - Released default preserved: `yes`
-- Compatibility class: additive target and state reflection only; runtime,
-  default styling, DOM semantics, and public props remain unchanged
+- Compatibility class: additive target and state reflection; default styling,
+  DOM semantics, and public props remain unchanged, and the one keyboard change
+  AR1 names — the horizontal arrows follow the track's direction under RTL —
+  ships as a behavior fix
 - Controlled/uncontrolled behavior: unchanged; Slider remains controlled
 - Migration decision: none
 
@@ -62,9 +64,9 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Public concepts
 
-This adds one public theming target without adding or changing a component prop,
-value domain, or behavior. Consumer props, modes, states, and usage remain
-documented in `Slider.doc.mjs`.
+The record adds one public theming target and names the keyboard model (AR1)
+without adding or changing a component prop or value domain. Consumer props,
+modes, states, and usage remain documented in `Slider.doc.mjs`.
 
 ## Behavioral and layout contract
 
@@ -102,8 +104,10 @@ either component's remaining target shape.
 
 ### Transformation and precedence order
 
-- No new value, snapping, geometry, interaction, or styling precedence rule is
-  introduced.
+- ORD1: an arrow or Page key result snaps to the nearest step, then clamps to
+  the bounds; Home and End go to `min` and `max` (AR1).
+- The anatomy decision (DEC-1) introduces no value, snapping, geometry,
+  interaction, or styling precedence rule of its own.
 
 ### Performance and resources
 
@@ -111,9 +115,21 @@ either component's remaining target shape.
 
 ## Accessibility contract
 
-This contract does not change or extend Slider's existing accessible name, value,
-range-thumb naming, description/status association, keyboard behavior, disabled
-behavior, or value-tooltip behavior.
+The anatomy decision (DEC-1) does not change Slider's accessible name, value,
+range-thumb naming, description/status association, disabled behavior, or
+value-tooltip behavior; AR1 records the keyboard model and its one correction.
+
+- **AR1 — Slider adopts the APG Slider pattern** (`spec:AST-020/FR15`), each
+  thumb as one composite control: every thumb is `role="slider"` with an
+  accessible name (a range names each thumb), `aria-valuemin`, `aria-valuemax`,
+  `aria-valuenow`, `aria-valuetext` when a formatter changes the spoken value,
+  `aria-orientation`, and `aria-disabled` when disabled; an enabled thumb, and a
+  disabled thumb that carries a disabled message, is a Tab stop.
+  ArrowUp and ArrowDown step by `step`; on a horizontal track the horizontal
+  arrows follow the track's direction — ArrowRight increases and ArrowLeft
+  decreases under LTR, and under RTL ArrowLeft increases and ArrowRight
+  decreases; PageUp and PageDown step by ten steps; Home moves to `min` and End to `max`. In a range, a thumb never crosses the other past the minimum
+  separation.
 
 ## Design relationships
 
@@ -198,13 +214,14 @@ separately listed value tooltip retains Tooltip's target.
 
 ## Verification map
 
-| Contract            | Verification                                                                           | Representative states                                                 | Mutation or failure expectation                                                                                      | Audit section          |
-| ------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                   | Single, range, horizontal, vertical, marks                            | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                             | `audit:Slider/anatomy` |
-| FR2                 | `Slider.test.tsx`, `themingTargets.test.ts`, generated probe theme, and Chromium       | Root, horizontal/vertical control, disabled control, track, and thumb | A target class/state is missing, undocumented, or placed outside its owning anatomy.                                 | `audit:Slider/theming` |
-| FR3                 | Source and consumer-doc review                                                         | Filled range, marks, labels, adjacent text value                      | A missing target is inaccurately documented as present or intentionally permanent.                                   | `audit:Slider/theming` |
-| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only | Label, status, value tooltip, disabled reason                         | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage. | `audit:Slider/anatomy` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                          | Canonical anatomy and four current local targets                      | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                   | `audit:Slider/theming` |
+| Contract            | Verification                                                                                                                                                                                                                                                                                                                                                                    | Representative states                                                         | Mutation or failure expectation                                                                                                                                       | Audit section                |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
+| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                                                                                                                                                                                                                                                                                                            | Single, range, horizontal, vertical, marks                                    | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                                                                              | `audit:Slider/anatomy`       |
+| AR1                 | Slider accessibility contract (`internal/a11y-spec`, pending) bound to Slider, in jsdom and Chromium; `Slider.test.tsx` keyboard suites, including "follows the mirrored track under RTL: ArrowLeft increases, ArrowRight decreases, Up/Down unchanged" and "keeps ArrowLeft decreasing on a vertical track under RTL"; the Page, Home/End and Up/Down cases under the contract | Single and range; horizontal LTR and RTL; vertical; disabled; formatted value | A thumb loses its role, name or value properties; an arrow, Page, Home or End key stops stepping or steps against the mirrored track; a range thumb crosses the other | `audit:Slider/accessibility` |
+| FR2                 | `Slider.test.tsx`, `themingTargets.test.ts`, generated probe theme, and Chromium                                                                                                                                                                                                                                                                                                | Root, horizontal/vertical control, disabled control, track, and thumb         | A target class/state is missing, undocumented, or placed outside its owning anatomy.                                                                                  | `audit:Slider/theming`       |
+| FR3                 | Source and consumer-doc review                                                                                                                                                                                                                                                                                                                                                  | Filled range, marks, labels, adjacent text value                              | A missing target is inaccurately documented as present or intentionally permanent.                                                                                    | `audit:Slider/theming`       |
+| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only                                                                                                                                                                                                                                                                                          | Label, status, value tooltip, disabled reason                                 | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage.                                                  | `audit:Slider/anatomy`       |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                                                                                                                                   | Canonical anatomy and four current local targets                              | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                                                                    | `audit:Slider/theming`       |
 
 The focused Slider suite asserts the `slider-control` target's orientation and
 disabled state. Source/metadata guards cover all four target declarations. The
@@ -224,6 +241,15 @@ consumer-recognizable part, so it carries `slider-control`. `Thumb` remains
 separate anatomy and continues to carry `slider-thumb`. This adds no default
 behavior or styling change.
 
+### DEC-2 — Each thumb is an APG slider, and horizontal arrows follow the track
+
+**Reference:** `component:Slider/DEC-2`
+**Decider:** `cixzhang`, `2026-10-13`
+
+A thumb already plays the slider role as one composite control, so it carries the pattern's value properties and its whole keyboard model (AR1). The horizontal arrows follow the track's painted direction because a key that moves the thumb against the way it travels on screen is a defect, not a convention; the vertical arrows and Up/Down are direction-free.
+
+Rejected: keeping ArrowRight as "increase" under RTL; a Tab stop or arrow model per range thumb that differs from the single thumb.
+
 ## Open questions
 
 - **OQ1 — After a joint ProgressBar and Slider family audit, should any shared

package/src/Slider/Slider.test.tsx

@@ -510,6 +510,69 @@ describe('Slider', () => {
     expect(handleChangeEnd).toHaveBeenCalledWith([0.2, 0.7]);
   });
 
+  it('End reaches an off-grid max from a non-zero min, and Home still reaches min', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onChangeEnd = vi.fn();
+    // From min 1 with step 3 the grid is 1, 4, …, 100; max 101 is off it.
+    render(
+      <Slider
+        label="Zoom"
+        min={1}
+        max={101}
+        step={3}
+        value={49}
+        onChange={onChange}
+        onChangeEnd={onChangeEnd}
+      />,
+    );
+    const thumb = screen.getByRole('slider');
+    thumb.focus();
+
+    await user.keyboard('{End}');
+    expect(onChange).toHaveBeenLastCalledWith(101);
+    expect(onChangeEnd).toHaveBeenLastCalledWith(101);
+
+    await user.keyboard('{Home}');
+    expect(onChange).toHaveBeenLastCalledWith(1);
+    expect(onChangeEnd).toHaveBeenLastCalledWith(1);
+  });
+
+  it('End lands on max when max is off the step grid, while arrows still snap', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    function Owner() {
+      const [value, setValue] = useState(48);
+      return (
+        <Slider
+          label="Zoom"
+          min={0}
+          max={100}
+          step={3}
+          value={value}
+          onChange={(next: number) => {
+            onChange(next);
+            setValue(next);
+          }}
+        />
+      );
+    }
+    render(<Owner />);
+    const thumb = screen.getByRole('slider');
+    thumb.focus();
+
+    await user.keyboard('{End}');
+    expect(onChange).toHaveBeenLastCalledWith(100);
+
+    // ORD1 for arrows and Page keys is unchanged: from max (100, off the
+    // grid) ArrowLeft targets 97 and snaps to 96; from 96 PageUp targets 126
+    // and clamps to 100, the bound.
+    await user.keyboard('{ArrowLeft}');
+    expect(onChange).toHaveBeenLastCalledWith(96);
+    await user.keyboard('{PageUp}');
+    expect(onChange).toHaveBeenLastCalledWith(100);
+  });
+
   it('fires onChangeEnd on keyboard Home/End with correct value', async () => {
     const user = userEvent.setup();
     const handleChangeEnd = vi.fn();
@@ -708,6 +771,77 @@ describe('Slider', () => {
     gcsSpy.mockRestore();
   });
 
+  it('follows the mirrored track under RTL: ArrowLeft increases, ArrowRight decreases, Up/Down unchanged', () => {
+    const handleChange = vi.fn();
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        min={0}
+        max={100}
+        step={1}
+        valueDisplay="none"
+        onChange={handleChange}
+      />,
+    );
+    const thumb = screen.getByRole('slider');
+    const track = thumb.parentElement!;
+    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);
+      });
+
+    fireEvent.keyDown(thumb, {key: 'ArrowLeft'});
+    expect(handleChange).toHaveBeenLastCalledWith(51);
+    fireEvent.keyDown(thumb, {key: 'ArrowRight'});
+    expect(handleChange).toHaveBeenLastCalledWith(49);
+    fireEvent.keyDown(thumb, {key: 'ArrowUp'});
+    expect(handleChange).toHaveBeenLastCalledWith(51);
+    fireEvent.keyDown(thumb, {key: 'ArrowDown'});
+    expect(handleChange).toHaveBeenLastCalledWith(49);
+
+    gcsSpy.mockRestore();
+  });
+
+  it('keeps ArrowLeft decreasing on a vertical track under RTL', () => {
+    const handleChange = vi.fn();
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        min={0}
+        max={100}
+        step={1}
+        orientation="vertical"
+        valueDisplay="none"
+        onChange={handleChange}
+      />,
+    );
+    const thumb = screen.getByRole('slider');
+    const track = thumb.parentElement!;
+    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);
+      });
+
+    fireEvent.keyDown(thumb, {key: 'ArrowLeft'});
+    expect(handleChange).toHaveBeenLastCalledWith(49);
+    fireEvent.keyDown(thumb, {key: 'ArrowRight'});
+    expect(handleChange).toHaveBeenLastCalledWith(51);
+
+    gcsSpy.mockRestore();
+  });
+
   // --- Mark label click snapping ---
 
   it('clicking a mark label snaps to that mark value, not pointer position', () => {

package/src/Slider/Slider.tsx

@@ -668,11 +668,18 @@ export function Slider({ref, ...props}: SliderProps) {
   );
 
   const updateValue = useCallback(
-    (thumbIndex: number, newVal: number) => {
+    (thumbIndex: number, newVal: number, snap = true) => {
       if (isDisabled) {
         return;
       }
-      const clamped = clamp(snapToStep(newVal, min, step), min, max);
+      // Home and End pass the bound itself (`snap: false`). The step grid is
+      // anchored at `min`, so Home always landed there; `max` may lie off the
+      // grid (max 100 with step 3 snapped End to 99, not 100).
+      const clamped = clamp(
+        snap ? snapToStep(newVal, min, step) : newVal,
+        min,
+        max,
+      );
 
       if (isRange) {
         const currentValues = [...values] as [number, number];
@@ -827,12 +834,22 @@ export function Slider({ref, ...props}: SliderProps) {
       const currentVal = values[thumbIndex];
       let newVal: number;
 
+      // On a horizontal track the keyboard follows the track's direction:
+      // under RTL the value grows toward the left, so ArrowLeft increases and
+      // ArrowRight decreases (APG Slider). Up/Down and a vertical track are
+      // direction-free.
+      const towardMax =
+        isHorizontal && isRtlElement(trackRef.current)
+          ? 'ArrowLeft'
+          : 'ArrowRight';
+      const towardMin = towardMax === 'ArrowLeft' ? 'ArrowRight' : 'ArrowLeft';
+
       switch (e.key) {
-        case 'ArrowRight':
+        case towardMax:
         case 'ArrowUp':
           newVal = currentVal + step;
           break;
-        case 'ArrowLeft':
+        case towardMin:
         case 'ArrowDown':
           newVal = currentVal - step;
           break;
@@ -853,8 +870,13 @@ export function Slider({ref, ...props}: SliderProps) {
       }
 
       e.preventDefault();
-      const clamped = clamp(snapToStep(newVal, min, step), min, max);
-      updateValue(thumbIndex, newVal);
+      const toBound = e.key === 'Home' || e.key === 'End';
+      const clamped = clamp(
+        toBound ? newVal : snapToStep(newVal, min, step),
+        min,
+        max,
+      );
+      updateValue(thumbIndex, newVal, !toBound);
 
       // Compute exact post-update values so onChangeEnd reports the correct
       // value even before React batches the state update.
@@ -876,6 +898,7 @@ export function Slider({ref, ...props}: SliderProps) {
     },
     [
       isDisabled,
+      isHorizontal,
       isRange,
       values,
       step,