@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/SideNav/SideNav.tsx

@@ -18,7 +18,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {
@@ -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.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavCollapseButton',

package/src/SideNav/SideNavCollapseButton.tsx

@@ -14,7 +14,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/index.ts
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
@@ -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/SideNavHeading.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavHeading',

package/src/SideNav/SideNavHeading.tsx

@@ -16,7 +16,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {useMemo, useRef, type ReactNode} from 'react';

package/src/SideNav/SideNavItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavItem',

package/src/SideNav/SideNavItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {
@@ -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/SideNav/SideNavSection.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SideNavSection',

package/src/SideNav/SideNavSection.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import React, {useId, type ReactNode} from 'react';

package/src/Skeleton/Skeleton.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Skeleton',
@@ -61,7 +61,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Skeleton',
   displayName: 'Skeleton',
@@ -110,7 +110,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Skeleton/Skeleton.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Skeleton} from './Skeleton';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 describe('Skeleton', () => {
   it('renders a placeholder element', () => {
@@ -23,3 +24,18 @@ describe('Skeleton', () => {
     expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the placeholder stays visible under Windows High Contrast', () => {
+    render(<Skeleton width={200} height={20} data-testid="sk" />);
+    const css = getForcedColorsRules();
+    // The painted fill is stripped to Canvas (invisible); GrayText is a
+    // system color, so it survives forcing.
+    expect(css).toContain('background-color: graytext;');
+    // The resting 0.25 opacity is lifted so the static placeholder reads.
+    expect(css).toContain('opacity: 1;');
+  });
+});

package/src/Skeleton/Skeleton.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Skeleton/Skeleton.doc.mjs
  * - /packages/core/src/Skeleton/index.ts
  * - /apps/storybook/stories/Skeleton.stories.tsx
- * - /packages/cli/templates/blocks/components/Skeleton/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Skeleton/ (showcase blocks)
  */
 
 import type {BaseProps} from '../BaseProps';
@@ -55,8 +55,20 @@ const styles = stylex.create({
     backgroundColor: {
       default: colorVars['--color-skeleton'],
       '@media (prefers-contrast: more)': `color-mix(in srgb, ${colorVars['--color-skeleton']}, ${colorVars['--color-text-primary']} 30%)`,
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the placeholder invisible. GrayText is a system
+      // color, so it survives forcing and keeps the placeholder visible
+      // (WCAG 1.4.11). Listed after prefers-contrast so it wins when both
+      // media features are active.
+      '@media (forced-colors: active)': 'GrayText',
+    },
+    opacity: {
+      default: 0.25,
+      // The resting 0.25 opacity would render GrayText nearly invisible on
+      // Canvas; full opacity keeps the static placeholder perceivable (the
+      // fade animation still pulses when motion is allowed).
+      '@media (forced-colors: active)': 1,
     },
-    opacity: 0.25,
   },
   animate: {
     animationDirection: 'alternate',

package/src/Slider/Slider.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Slider',
@@ -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',
@@ -168,7 +174,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Slider',
   displayName: 'Slider',
@@ -322,7 +328,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

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', () => {