@astryxdesign/core 0.2.0 → 0.3.0

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',
@@ -174,7 +174,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Slider',
   displayName: 'Slider',
@@ -328,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.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Slider/Slider.test.tsx
  * - /packages/core/src/Slider/index.ts
  * - /apps/storybook/stories/Slider.stories.tsx
- * - /packages/cli/templates/blocks/components/Slider/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Slider/ (showcase blocks)
  */
 
 import {
@@ -40,7 +40,7 @@ import {Tooltip} from '../Tooltip/Tooltip';
 import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -203,8 +203,6 @@ const styles = stylex.create({
     top: 0,
     bottom: 0,
     width: TRACK_SIZE,
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
   },
   filledTrack: {
     position: 'absolute',
@@ -218,8 +216,6 @@ const styles = stylex.create({
   },
   filledTrackVertical: {
     width: TRACK_SIZE,
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
   },
   thumb: {
     position: 'absolute',
@@ -249,10 +245,6 @@ const styles = stylex.create({
       ':is([dir="rtl"] *)': 'translate(50%, -50%)',
     },
   },
-  thumbVertical: {
-    insetInlineStart: '50%',
-    transform: 'translate(-50%, 50%)',
-  },
   thumbHover: {
     backgroundColor: {
       default: colorVars['--color-accent'],
@@ -796,7 +788,9 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(
             styles.thumb,
-            isHorizontal ? styles.thumbHorizontal : styles.thumbVertical,
+            isHorizontal
+              ? styles.thumbHorizontal
+              : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
             !isDisabled && styles.thumbFocusVisible,
             isDisabled && styles.thumbDisabled,
@@ -930,7 +924,9 @@ export function Slider({ref, ...props}: SliderProps) {
               themeProps('slider-track', {orientation}),
               stylex.props(
                 styles.track,
-                isHorizontal ? styles.trackHorizontal : styles.trackVertical,
+                isHorizontal
+                  ? styles.trackHorizontal
+                  : [styles.trackVertical, rtlStyles.centerInline('0px')],
               ),
             )}
           />
@@ -943,7 +939,7 @@ export function Slider({ref, ...props}: SliderProps) {
                 styles.filledTrack,
                 isHorizontal
                   ? styles.filledTrackHorizontal
-                  : styles.filledTrackVertical,
+                  : [styles.filledTrackVertical, rtlStyles.centerInline('0px')],
               ),
               {style: filledStyle},
             )}

package/src/Spinner/Spinner.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: 'Spinner',
@@ -56,7 +56,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Spinner',
   displayName: 'Spinner',
@@ -108,7 +108,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Spinner/Spinner.tsx

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

package/src/Stack/Stack.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: 'Stack',
@@ -268,7 +268,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Stack',
   displayName: 'Stack',
@@ -457,7 +457,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Stack layout primitives for horizontal/vertical sequences using flexbox w/ themed spacing tokens.',
   usage: {

package/src/Stack/Stack.tsx

@@ -9,7 +9,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
  * - /apps/storybook/stories/Stack.stories.tsx
- * - /packages/cli/templates/blocks/components/Stack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Stack/ (showcase blocks)
  */
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';

package/src/Stack/StackItem.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
- * - /packages/cli/templates/blocks/components/Stack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Stack/ (showcase blocks)
  */
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';

package/src/StatusDot/StatusDot.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: 'StatusDot',
@@ -57,7 +57,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'StatusDot',
   displayName: 'Status Dot',
@@ -105,7 +105,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Small colored dot indicator for status display (online/offline, severity, etc).',
   usage: {

package/src/StatusDot/StatusDot.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/StatusDot/StatusDot.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/StatusDot/index.ts (exports if types change)
  * - /apps/storybook/stories/StatusDot.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/StatusDot/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/StatusDot/ (showcase blocks)
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -22,6 +22,7 @@ import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip/Tooltip';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import type {StatusDotVariantMap} from './index';
 
 /**
  * Pulse animation keyframes
@@ -77,27 +78,6 @@ const variants = stylex.create({
   },
 });
 
-/**
- * Extensible variant map for StatusDot.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/StatusDot' {
- *   interface StatusDotVariantMap {
- *     'critical': true;
- *   }
- * }
- * ```
- */
-export interface StatusDotVariantMap {
-  success: true;
-  warning: true;
-  error: true;
-  accent: true;
-  neutral: true;
-}
-
 /**
  * Status dot variant type derived from StatusDotVariantMap.
  * Extensible via module augmentation of StatusDotVariantMap.

package/src/StatusDot/index.ts

@@ -9,9 +9,26 @@
  * @position Entry point for StatusDot; re-exported by /packages/core/src/index.ts
  */
 
+/**
+ * Extensible variant map for StatusDot.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/StatusDot' {
+ *   interface StatusDotVariantMap {
+ *     'critical': true;
+ *   }
+ * }
+ * ```
+ */
+export interface StatusDotVariantMap {
+  success: true;
+  warning: true;
+  error: true;
+  accent: true;
+  neutral: true;
+}
+
 export {StatusDot} from './StatusDot';
-export type {
-  StatusDotProps,
-  StatusDotVariant,
-  StatusDotVariantMap,
-} from './StatusDot';
+export type {StatusDotProps, StatusDotVariant} from './StatusDot';

package/src/Switch/Switch.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: 'Switch',
@@ -141,7 +141,7 @@ export const docs = {
       name: 'labelSpacing',
       type: "'hug' | 'spread'",
       description:
-        'Spacing behavior between label and switch. "hug" places them next to each other; "spread" pushes them to opposite ends of the container (full width). "default" is a deprecated alias for "hug".',
+        'Spacing behavior between label and switch. "hug" places them next to each other; "spread" pushes them to opposite ends of the container (full width).',
       default: "'hug'",
     },
     {
@@ -202,7 +202,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Switch',
   displayName: 'Switch',
@@ -373,7 +373,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Toggle switch for boolean values w/ integrated label support.',
   usage: {
@@ -429,6 +429,6 @@ export const docsDense = {
     labelTooltip: 'Tooltip text in info icon at label end.',
     labelPosition: 'Which side label appears; "start" places before switch.',
     labelSpacing:
-      'Spacing behavior; "hug" places next to each other, "spread" pushes to opposite ends (full width). "default" is deprecated alias for "hug".',
+      'Spacing behavior; "hug" places next to each other, "spread" pushes to opposite ends (full width).',
   },
 };

package/src/Switch/Switch.test.tsx

@@ -13,6 +13,10 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Switch} from './Switch';
+import {
+  getAllInjectedCss,
+  getForcedColorsRules,
+} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -167,6 +171,40 @@ describe('Switch', () => {
     expect(switchEl).toHaveAttribute('aria-describedby', description.id);
   });
 
+  it('toggles when clicking on the description', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <Switch
+        label="Dark mode"
+        description="Switch to a darker color scheme"
+        value={false}
+        onChange={handleChange}
+      />,
+    );
+    await user.click(screen.getByText('Switch to a darker color scheme'));
+    expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+  });
+
+  it('does not fold the description into the switch accessible name', () => {
+    // Description stays a sibling of the <label>, so it must not become part
+    // of the switch's accessible name — it belongs in the accessible
+    // description (aria-describedby) only, to avoid double announcement.
+    render(
+      <Switch
+        label="Dark mode"
+        description="Switch to a darker color scheme"
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const switchEl = screen.getByRole('switch');
+    expect(switchEl).toHaveAccessibleName('Dark mode');
+    expect(switchEl).toHaveAccessibleDescription(
+      'Switch to a darker color scheme',
+    );
+  });
+
   it('is disabled when isDisabled prop is true', () => {
     render(
       <Switch
@@ -581,31 +619,6 @@ describe('Switch', () => {
       expect(getField(explicit)).not.toHaveAttribute('data-label-spacing');
       expect(getField(explicit).className).toBe(getField(implicit).className);
     });
-
-    it("treats the deprecated 'default' value as an alias for hug", () => {
-      const {container: hug} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="hug"
-        />,
-      );
-      const {container: deprecated} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="default"
-        />,
-      );
-      expect(getField(deprecated)).not.toHaveAttribute('data-label-spacing');
-      expect(getField(deprecated).className).toBe(getField(hug).className);
-      // The switch row keeps the hug layout, not the spread justification.
-      expect(getField(deprecated).firstElementChild?.className).toBe(
-        getField(hug).firstElementChild?.className,
-      );
-    });
   });
   describe('form participation', () => {
     it('submits under htmlName when on', () => {
@@ -729,3 +742,36 @@ describe('Switch', () => {
     });
   });
 });
+
+// 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 on/off state survives Windows High Contrast', () => {
+    render(<Switch label="Notifications" value={true} onChange={() => {}} />);
+    const css = getForcedColorsRules();
+    // Track outline (backgrounds are stripped; the border keeps the bounds).
+    expect(css).toContain('border-color: canvastext;');
+    // Off track stays empty; on track uses the selection color.
+    expect(css).toContain('background-color: canvas;');
+    expect(css).toContain('background-color: highlight;');
+    // Thumb fill per state.
+    expect(css).toContain('background-color: canvastext;');
+    expect(css).toContain('background-color: highlighttext;');
+    // Disabled affordance (opacity dimming does not survive forcing).
+    expect(css).toContain('border-color: graytext;');
+  });
+
+  it('gates the hover tint out of forced colors so the thumb stays visible on hover', () => {
+    render(<Switch label="Notifications" value={true} onChange={() => {}} />);
+    // The ancestor-hover tint is a non-system color-mix whose rule outranks the
+    // plain forced-colors track rule. It is gated behind `forced-colors: none`
+    // so it cannot reassert on hover and flatten the Highlight track to white
+    // under the HighlightText thumb (white-on-white).
+    expect(getAllInjectedCss()).toContain(
+      '(hover: hover) and (forced-colors: none)',
+    );
+    // And the tint never leaks into the forced-colors output.
+    expect(getForcedColorsRules()).not.toContain('color-mix');
+  });
+});