@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/SizeContext/SizeContext.test.tsx

@@ -1,226 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file SizeContext.test.tsx
- * @input Uses vitest, @testing-library/react, SizeContext module
- * @output Characterization tests for SizeContext / useSize / SizeProvider
- * @position Testing; validates the size-cascade resolution contract
- *
- * SYNC: When SizeContext.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {renderHook, render, screen} from '@testing-library/react';
-import {createElement, type ReactNode} from 'react';
-import {
-  SizeContext,
-  SizeProvider,
-  useSize,
-  type ElementSize,
-} from './SizeContext';
-
-/**
- * Wrap children in a SizeProvider set to `size`. Passing `null` mimics
- * "no container is providing a size".
- */
-function withProvider(size: ElementSize | null) {
-  return function Wrapper({children}: {children: ReactNode}) {
-    return <SizeProvider value={size}>{children}</SizeProvider>;
-  };
-}
-
-describe('SizeContext', () => {
-  describe('context identity', () => {
-    it('defaults to null when read outside any provider', () => {
-      const {result} = renderHook(() => useSize());
-      // No provider + no prop + no explicit default → the 'md' fallback.
-      expect(result.current).toBe('md');
-    });
-
-    it('exposes a displayName for devtools', () => {
-      expect(SizeContext.displayName).toBe('SizeContext');
-    });
-
-    it('SizeProvider is the context Provider itself', () => {
-      expect(SizeProvider).toBe(SizeContext.Provider);
-    });
-  });
-
-  describe('useSize — resolution priority', () => {
-    it('returns the default "md" with no prop and no provider', () => {
-      const {result} = renderHook(() => useSize());
-      expect(result.current).toBe('md');
-    });
-
-    it('honors an explicit defaultSize when neither prop nor context is set', () => {
-      const {result} = renderHook(() => useSize(undefined, 'lg'));
-      expect(result.current).toBe('lg');
-    });
-
-    it('returns the explicit size prop when provided', () => {
-      const {result} = renderHook(() => useSize('sm'));
-      expect(result.current).toBe('sm');
-    });
-
-    it('prop wins over the explicit default', () => {
-      const {result} = renderHook(() => useSize('sm', 'lg'));
-      expect(result.current).toBe('sm');
-    });
-
-    it('inherits the size from an enclosing provider when no prop is passed', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('lg');
-    });
-
-    it('prop wins over the inherited provider size', () => {
-      const {result} = renderHook(() => useSize('sm'), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('sm');
-    });
-
-    it('inherited context wins over the explicit default fallback', () => {
-      const {result} = renderHook(() => useSize(undefined, 'sm'), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('lg');
-    });
-
-    it('falls back to default when the provider value is explicitly null', () => {
-      const {result} = renderHook(() => useSize(undefined, 'sm'), {
-        wrapper: withProvider(null),
-      });
-      expect(result.current).toBe('sm');
-    });
-
-    it('falls back to "md" when provider is null and no default is given', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider(null),
-      });
-      expect(result.current).toBe('md');
-    });
-  });
-
-  describe('useSize — every standard ElementSize resolves', () => {
-    const sizes: ElementSize[] = ['sm', 'md', 'lg'];
-
-    it.each(sizes)('resolves explicit prop "%s"', size => {
-      const {result} = renderHook(() => useSize(size));
-      expect(result.current).toBe(size);
-    });
-
-    it.each(sizes)('resolves inherited provider "%s"', size => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider(size),
-      });
-      expect(result.current).toBe(size);
-    });
-  });
-
-  describe('useSize — nested providers', () => {
-    it('resolves to the nearest provider', () => {
-      function Nested({children}: {children: ReactNode}) {
-        return (
-          <SizeProvider value="sm">
-            <SizeProvider value="lg">{children}</SizeProvider>
-          </SizeProvider>
-        );
-      }
-      const {result} = renderHook(() => useSize(), {wrapper: Nested});
-      expect(result.current).toBe('lg');
-    });
-
-    it('a prop still overrides the nearest provider', () => {
-      function Nested({children}: {children: ReactNode}) {
-        return (
-          <SizeProvider value="sm">
-            <SizeProvider value="lg">{children}</SizeProvider>
-          </SizeProvider>
-        );
-      }
-      const {result} = renderHook(() => useSize('md'), {wrapper: Nested});
-      expect(result.current).toBe('md');
-    });
-  });
-
-  describe('useSize — generic (non-ElementSize) values', () => {
-    it('supports a custom string union via the type parameter', () => {
-      type Custom = 'compact' | 'comfortable';
-      const {result} = renderHook(() =>
-        useSize<Custom>('compact', 'comfortable'),
-      );
-      expect(result.current).toBe('compact');
-    });
-
-    it('returns the custom default when no prop is given', () => {
-      type Custom = 'compact' | 'comfortable';
-      const {result} = renderHook(() =>
-        useSize<Custom>(undefined, 'comfortable'),
-      );
-      expect(result.current).toBe('comfortable');
-    });
-
-    it('empty-string prop is a real value and does NOT fall through to default', () => {
-      // '' ?? x === '' because nullish coalescing only catches null/undefined.
-      const {result} = renderHook(() => useSize('' as ElementSize, 'lg'));
-      expect(result.current).toBe('');
-    });
-  });
-
-  describe('integration — components consuming the cascade', () => {
-    function SizedProbe({size}: {size?: ElementSize}) {
-      const resolved = useSize(size);
-      return <span data-testid="probe">{resolved}</span>;
-    }
-
-    it('a child with no size prop reads the container size', () => {
-      render(
-        <SizeProvider value="lg">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
-    });
-
-    it('sibling children resolve independently against the same provider', () => {
-      render(
-        <SizeProvider value="lg">
-          <span data-testid="a">
-            <SizedProbe />
-          </span>
-          <span data-testid="b">
-            <SizedProbe size="sm" />
-          </span>
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('a')).toHaveTextContent('lg');
-      expect(screen.getByTestId('b')).toHaveTextContent('sm');
-    });
-
-    it('re-renders with the new size when the provider value changes', () => {
-      const {rerender} = render(
-        <SizeProvider value="sm">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('sm');
-
-      rerender(
-        <SizeProvider value="lg">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
-    });
-
-    it('works with createElement (no JSX) call form', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: ({children}: {children: ReactNode}) =>
-          createElement(SizeProvider, {value: 'sm'}, children),
-      });
-      expect(result.current).toBe('sm');
-    });
-  });
-});

package/src/Skeleton/Skeleton.spec.md

@@ -1,184 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:Skeleton
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-25
-owners: [cixzhang]
-review_triggers: [public-api, behavior, layout, theming, accessibility]
-verified_by:
-  [
-    packages/core/src/Skeleton/Skeleton.test.tsx,
-    packages/core/src/theme/themingTargets.test.ts,
-    apps/storybook/stories/Skeleton.stories.tsx,
-    scripts/check-knowledge.mjs,
-  ]
-modules: []
-families: []
-design_specs: []
-architecture:
-  [architecture:component-theming-surface, architecture:public-component-api]
-contributing: []
-system_specs: [spec:AST-009]
----
-
-# Skeleton component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                               |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Public contract         | A placeholder block with `width`, `height`, `radius`, and a stagger `index`.                                                                           |
-| Behavior                | The block is hidden from assistive technology, waits one second, then pulses its opacity in ten steps; reduced motion keeps it static.                 |
-| End-user impact         | Sighted users see the shape of content that is loading; screen-reader users are not given empty placeholders; high-contrast users still see the block. |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                           |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. No implementation gap is recorded.                                          |
-| Review checks           | Reject an exposed-by-default placeholder, a `steps()` timing function, a pulse under reduced motion, or a block that disappears under forced colors.   |
-| Governing rules         | `architecture:component-theming-surface/INV2`; `architecture:public-component-api/INV5,INV6,INV8`.                                                     |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-Skeleton stands in for content while it loads, so a page keeps its layout and
-shows where content will appear. It owns the placeholder's shape, paint, pulse,
-and its exclusion from the accessibility tree.
-
-## Compatibility and migration
-
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public prop, default, DOM,
-  styling, or target output changes
-- Controlled/uncontrolled behavior: not applicable; Skeleton holds no state
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Ownership boundary
-
-**Owns**
-
-- The placeholder block, its `skeleton` theming target, size, and radius.
-- Its paint in normal, increased-contrast, and forced-color modes.
-- The delayed, staggered opacity pulse and its reduced-motion suppression.
-- Its default exclusion from the accessibility tree.
-
-**Does not own / non-goals**
-
-- The surrounding region's loading state, busy semantics, layout, and when real
-  content replaces the placeholder — owned by the product callsite.
-- Indeterminate progress without a known shape — owned by
-  `component:Spinner`.
-
-## Public concepts
-
-| Concept | Closed values or states                                 | Meaning                                             | Availability by variant/orientation/state | Default | Owner                | Stability | Invalid-value behavior                      |
-| ------- | ------------------------------------------------------- | --------------------------------------------------- | ----------------------------------------- | ------- | -------------------- | --------- | ------------------------------------------- |
-| Size    | `width` and `height`: a number of pixels or a CSS value | The block's dimensions.                             | Always                                    | `100%`  | `component:Skeleton` | Stable    | A string passes through as CSS.             |
-| Radius  | `none`, `0`, `1`, `2`, `3`, `4`, `rounded`              | Corner radius from the radius scale.                | Always                                    | `3`     | `component:Skeleton` | Stable    | TypeScript rejects other values.            |
-| Stagger | non-negative integer `index`                            | Delays the pulse so sequential placeholders ripple. | Always                                    | `0`     | `component:Skeleton` | Stable    | Any number is applied in the delay formula. |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                   | Basis                    |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1 | Skeleton renders one childless `div` carrying the `skeleton` target, sized by `width` and `height` (numbers in pixels, strings as CSS), default `100%` each.                                                                                                                                                                                                                                                | Current source and tests |
-| FR2 | `radius` maps `none` to no radius, `0` to `--radius-none`, `1` to `--radius-inner`, `2` to `--radius-element`, `3` and `4` to `--radius-container`, and `rounded` to `--radius-full`; the default is `3`.                                                                                                                                                                                                   | Current source           |
-| FR3 | The block paints `--color-skeleton` at opacity 0.25. Under `prefers-contrast: more` it paints that color mixed 30% toward primary text. Under `forced-colors: active` it paints `GrayText`, which wins over the contrast rule, at full opacity while no pulse runs; with motion allowed the FR4 pulse still varies its opacity.                                                                             | Current source and tests |
-| FR4 | The block pulses its opacity from 0.25 to 0.925 in ten equal held steps and back, alternating indefinitely, each climb and each fall taking `--duration-medium-max` as the theme sets it before `tempo` scales it (`spec:AST-108` FR4), with a linear timing function and no `steps()`. The pulse starts after 1000 ms plus 100 ms times `index`. Under `prefers-reduced-motion: reduce` there is no pulse. | Current source and tests |
-| FR5 | `ref` reaches the block. Supported DOM, ARIA, data, and event props, including `data-testid`, reach the block after the default `aria-hidden`; `xstyle`, `className`, and `style` merge in that order after component styles.                                                                                                                                                                               | Current source and tests |
-
-### Allowed variation
-
-- **AV1 — Theme paint.** A theme may change the block's visual properties through
-  `skeleton` without changing its anatomy or accessibility exclusion.
-- **AV2 — Shape.** Width, height, and radius vary per callsite to match the
-  content they stand in for.
-
-### Representative states
-
-| State             | Required invariant                                                                                                | Allowed variation |
-| ----------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------- |
-| Default           | `aria-hidden` block at 0.25 opacity, pulsing after one second.                                                    | Size and radius.  |
-| Staggered         | Each block's pulse starts 100 ms after the previous index.                                                        | Number of blocks. |
-| Reduced motion    | Static block at 0.25 opacity.                                                                                     | —                 |
-| Forced colors     | `GrayText` block at full opacity while no pulse runs; with motion allowed the FR4 pulse varies its opacity (AR2). | —                 |
-| Exposed by caller | `aria-hidden={false}` reaches the block.                                                                          | —                 |
-
-### Transformation and precedence order
-
-- **ORD1 — Paint.** Default skeleton color → increased-contrast mix → forced
-  colors `GrayText`.
-- **ORD2 — Attributes.** `aria-hidden="true"` and `data-testid` → component
-  class → component styles → `xstyle` → `className` → `style` → caller props.
-
-### Performance and resources
-
-- **PR1 — Off-main-thread pulse.** The pulse changes only opacity and uses no
-  stepped timing function, so supported engines can run it without main-thread
-  repaint. Skeleton adds no listener, observer, or timer.
-
-## Accessibility contract
-
-- **AR1 — Hidden by default.** The block is `aria-hidden="true"`, so
-  assistive technology does not announce empty placeholders; a caller may pass
-  `aria-hidden={false}`. The surrounding region conveys busy state.
-- **AR2 — Forced-color and increased-contrast paint.** The placeholder is
-  decorative. In forced-color mode it paints `GrayText` so it stays visible
-  where the browser would strip its fill, at full opacity while no pulse runs;
-  with motion allowed the FR4 pulse still varies its opacity from 0.25 to
-  0.925. Under increased contrast its color moves 30% toward the primary text
-  color.
-- **AR3 — Reduced motion.** The pulse is removed when the reader asks for
-  reduced motion.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                       | Representation authority       | Hierarchy role | Component contract |
-| ---------------- | -------------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
-| Placeholder      | Previews the shape of loading content with a soft pulse. | Current source and public docs | Supporting     | FR1–FR4, AR1–AR3   |
-
-### Theming anatomy
-
-<!-- anatomy-theming:v1 -->
-
-```json
-{
-  "Placeholder": {"target": "skeleton"}
-}
-```
-
-## Family and system relationships
-
-- `architecture:component-theming-surface` owns target qualification for the
-  `skeleton` target.
-- `architecture:public-component-api` owns ref, passthrough, and styling-input
-  rules; FR5 applies them to the block.
-
-## Verification map
-
-| Contract            | Verification                                                          | Representative states                             | Mutation or failure expectation                                                                                                                                                                                                                                               | Audit section            |
-| ------------------- | --------------------------------------------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1, FR5, AR1       | `Skeleton.test.tsx` render and a11y tests                             | Default; caller `aria-hidden={false}`             | Removing the block, the default `aria-hidden`, or the caller override fails. Gap: no test covers the ref, the default `100%` size, or the styling-input order.                                                                                                                | `audit:Skeleton/a11y`    |
-| FR4, PR1, AR3       | `Skeleton.test.tsx` pulse suite                                       | Compiled keyframes and timing                     | A `steps()` timing function or changed opacity steps fails. Gap: the duration, opacity-only keyframes, the start delay, the per-index stagger, and the reduced-motion removal have no automated check.                                                                        | `audit:Skeleton/motion`  |
-| FR3, AR2            | `Skeleton.test.tsx` forced-colors suite                               | Forced colors                                     | Dropping the `GrayText` or full-opacity override from the compiled CSS fails. Gap: the increased-contrast mix, and which rule wins when both media features apply, have no automated check, forced-colors rendering, including the pulse there, is not verified in a browser. | `audit:Skeleton/a11y`    |
-| FR1–FR3             | `Skeleton.stories.tsx` Shapes and StaggeredList fixtures in a browser | Radii `rounded`, `3`, `2`, `none`; staggered list | Gap: no unit test asserts size, radius, or the increased-contrast paint, and no fixed story renders radius `0`, `1`, or `4` or increased-contrast mode; other values are visible only in the rendered fixtures.                                                               | `audit:Skeleton/layout`  |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                         | Canonical anatomy and current target              | Missing, extra, prefixed, or stale mappings fail repository validation.                                                                                                                                                                                                       | `audit:Skeleton/theming` |
-| AR1                 | Accessibility-tree evidence (`spec:AST-009` FR3)                      | Default and exposed placeholder                   | Gap: no accessibility-tree check proves the placeholder is absent from the tree; the unit test asserts the attribute.                                                                                                                                                         | `audit:Skeleton/a11y`    |
-
-## Decision log
-
-None recorded. The record describes shipped behavior.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables/examples, current audit
-results, implementation steps, or family/system rules. It links to their owners.

package/src/Skeleton/Skeleton.test.tsx

@@ -1,148 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {Skeleton} from './Skeleton';
-import {
-  getAllInjectedCss,
-  getForcedColorsRules,
-} from '../__tests__/forcedColors';
-
-/** The declarations the element's atomic classes carry, as `prop: value`. */
-function declarationsOf(el: Element, css: string): string[] {
-  const out: string[] = [];
-  for (const cls of Array.from(el.classList)) {
-    const re = new RegExp(`\\.${cls}\\b[^{]*\\{([^}]*)\\}`, 'g');
-    for (const match of css.matchAll(re)) {
-      out.push(
-        ...match[1]
-          .split(';')
-          .map(d => d.trim())
-          .filter(Boolean),
-      );
-    }
-  }
-  return out;
-}
-
-/** The whole `@keyframes <name> { … }` rule, braces matched. */
-function keyframesRule(css: string, name: string): string {
-  const start = css.search(new RegExp(`@keyframes ${name}\\b`, 'i'));
-  expect(start).toBeGreaterThanOrEqual(0);
-  let depth = 0;
-  for (let i = css.indexOf('{', start); i < css.length; i += 1) {
-    if (css[i] === '{') {
-      depth += 1;
-    }
-    if (css[i] === '}' && --depth === 0) {
-      return css.slice(start, i + 1);
-    }
-  }
-  throw new Error(`unterminated @keyframes ${name}`);
-}
-
-/** The named animation's opacity keyframes as [offset 0..1, opacity], in order. */
-function opacityKeyframes(css: string, name: string): [number, number][] {
-  return Array.from(
-    keyframesRule(css, name).matchAll(/([\d.]+)%\s*\{\s*opacity:\s*([\d.]+)/g),
-    m => [Number(m[1]) / 100, Number(m[2])] as [number, number],
-  );
-}
-
-/** Opacity at iteration progress x, linear between keyframes. */
-function opacityAt(frames: [number, number][], x: number): number {
-  for (let i = 1; i < frames.length; i += 1) {
-    const [x0, y0] = frames[i - 1];
-    const [x1, y1] = frames[i];
-    if (x <= x1) {
-      return x1 === x0 ? y1 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0);
-    }
-  }
-  return frames[frames.length - 1][1];
-}
-
-describe('Skeleton', () => {
-  it('renders a placeholder element', () => {
-    render(<Skeleton width={200} height={20} data-testid="sk" />);
-    expect(screen.getByTestId('sk')).toBeInTheDocument();
-  });
-
-  it('is hidden from assistive tech by default (complex-20)', () => {
-    render(<Skeleton width={200} height={20} data-testid="sk" />);
-    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('allows the aria-hidden default to be overridden', () => {
-    render(
-      <Skeleton width={200} height={20} data-testid="sk" aria-hidden={false} />,
-    );
-    // Consumer opt-out: not hidden when explicitly set false.
-    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
-  });
-});
-
-describe('pulse', () => {
-  function pulse() {
-    render(<Skeleton width={200} height={20} data-testid="sk" />);
-    const css = getAllInjectedCss();
-    const declarations = declarationsOf(screen.getByTestId('sk'), css);
-    const value = (prop: string) =>
-      declarations
-        .filter(d => d.startsWith(`${prop}:`))
-        .map(d => d.slice(prop.length + 1).trim());
-    return {css, value};
-  }
-
-  // WebKit runs no animation with a steps() timing function on the
-  // compositor, so a stepped pulse would freeze in Safari while a script runs.
-  it('keeps steps() out of the timing function so every engine can composite it', () => {
-    const {css, value} = pulse();
-    expect(value('animation-timing-function')).toEqual(['linear']);
-    expect(value('animation-direction')).toEqual(['alternate']);
-    expect(value('animation-iteration-count')).toEqual(['infinite']);
-    const name = value('animation-name').find(v => v !== 'none');
-    expect(name).toBeTruthy();
-    const rule = keyframesRule(css, name ?? '');
-    expect(rule).toMatch(/opacity/);
-    expect(rule).not.toMatch(/steps\(|animation-timing-function/);
-  });
-
-  it('climbs and falls through the same ten opacity steps at the same times', () => {
-    const {css, value} = pulse();
-    const name = value('animation-name').find(v => v !== 'none') ?? '';
-    const frames = opacityKeyframes(css, name);
-    expect(frames[0]).toEqual([0, 0.25]);
-    // The previous pulse: 0.25 → 1 through steps(10, end), played back down
-    // by `alternate`. Sample each tenth away from its edges.
-    for (let step = 0; step < 10; step += 1) {
-      for (const within of [0.02, 0.5, 0.98]) {
-        const x = (step + within) / 10;
-        const expected = 0.25 + 0.75 * (step / 10);
-        expect(opacityAt(frames, x)).toBeCloseTo(expected, 6);
-      }
-    }
-    // Each change between steps takes 0.01% of an iteration.
-    for (let i = 1; i < frames.length; i += 1) {
-      const [x0, y0] = frames[i - 1];
-      const [x1, y1] = frames[i];
-      if (y1 !== y0) {
-        expect(x1 - x0).toBeCloseTo(0.0001, 6);
-      }
-    }
-  });
-});
-
-// 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/Slider/Slider.fr10.test.tsx

@@ -1,93 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect, vi} from 'vitest';
-import {fireEvent, render, screen} from '@testing-library/react';
-import {createRef} from 'react';
-import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
-import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
-import {Slider, type SliderProps} from './Slider';
-
-describe('Slider props type (family:input-fields FR10)', () => {
-  it('accepts container* and control* and no root styling', () => {
-    expectFieldInputProps<SliderProps>();
-  });
-});
-
-describeFieldInputParts('Slider', {
-  renderMember: props => (
-    <Slider label="Volume" value={50} onChange={() => {}} {...props} />
-  ),
-  getControl: () => screen.getByRole('slider'),
-  inGroup: false,
-});
-
-describe('Slider range mode prop targets', () => {
-  it('forwards base props and ref to the role="group" control', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(
-      <Slider
-        label="Price"
-        value={[20, 80]}
-        onChange={() => {}}
-        ref={ref}
-        data-testid="price"
-        aria-details="price-help"
-      />,
-    );
-    const group = screen.getByRole('group', {name: 'Price'});
-    expect(ref.current).toBe(group);
-    expect(group).toHaveAttribute('data-testid', 'price');
-    expect(group).toHaveAttribute('aria-details', 'price-help');
-  });
-
-  it('calls a consumer onPointerDown after its own press handling', () => {
-    const onPointerDown = vi.fn();
-    render(
-      <Slider
-        label="Volume"
-        value={50}
-        onChange={() => {}}
-        onPointerDown={onPointerDown}
-      />,
-    );
-    const control = document.querySelector<HTMLElement>(
-      '.astryx-slider-control',
-    )!;
-    fireEvent.pointerDown(control, {pointerId: 1, clientX: 10, clientY: 5});
-    expect(onPointerDown).toHaveBeenCalledOnce();
-  });
-});
-
-describe("Slider keeps a caller's aria-labelledby", () => {
-  it('names the thumb by its label and then the caller ids', () => {
-    render(
-      <>
-        <span id="caller-name">Speaker</span>
-        <Slider
-          label="Volume"
-          value={50}
-          onChange={() => {}}
-          aria-labelledby="caller-name"
-        />
-      </>,
-    );
-    expect(
-      screen.getByRole('slider', {name: 'Volume Speaker'}),
-    ).toBeInTheDocument();
-  });
-
-  it('names the range group by its label and then the caller ids', () => {
-    render(
-      <>
-        <span id="caller-name">USD</span>
-        <Slider
-          label="Price"
-          value={[20, 80]}
-          onChange={() => {}}
-          aria-labelledby="caller-name"
-        />
-      </>,
-    );
-    expect(screen.getByRole('group', {name: 'Price USD'})).toBeInTheDocument();
-  });
-});