@astryxdesign/core 0.2.0 → 0.3.0-canary.041a0ef

package/src/Resizable/ResizeHandle.tsx

@@ -17,6 +17,10 @@
  * Pill placement uses a single stylex dynamic style that accepts a direction
  * multiplier (-1 or 1). The pill element has its own themeProps
  * ('resize-handle-pill') so themes can target size/shape directly.
+ *
+ * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
+ * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
+ * "Collapsed" aria-valuetext announces the real state.
  */
 
 import {useCallback, useEffect, useRef, useState} from 'react';
@@ -30,7 +34,8 @@ import {
   radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -90,14 +95,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: null,
-      ':focus-visible': spacingVars['--spacing-0-5'],
-    },
   },
   // Overlay mode — absolutely positioned inside the parent panel
   // instead of being a sibling in flex flow. Used when the handle
@@ -167,11 +164,8 @@ const styles = stylex.create({
     cursor: 'row-resize',
   },
   // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
-  // the divider itself. Anchored logically so it centers in both directions.
-  hitAreaCenteredX: {
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
-  },
+  // the divider itself. Inline centering comes from rtlStyles.centerInline at
+  // the call site (correct in LTR and RTL); this block owns only the block axis.
   hitAreaCenteredY: {
     insetBlockStart: '50%',
     transform: 'translateY(-50%)',
@@ -188,8 +182,6 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
-    insetInlineStart: '50%',
-    transform: 'translate(-50%, -50%)',
   },
   pillHorizontal: {
     width: 3,
@@ -519,12 +511,23 @@ export function ResizeHandle({
   }, []);
 
   // --- ARIA ---
-  const ariaValueNow = resizable ? resizable._size : undefined;
+  // When collapsed the panel's real size (0) sits below aria-valuemin, which
+  // is invalid per WCAG 4.1.2. Clamp aria-valuenow to the minimum and announce
+  // the true state via aria-valuetext instead; the valuetext is removed as
+  // soon as the panel expands so the numeric value reads again.
+  const isCollapsed = resizable?._isCollapsed ?? false;
+  const ariaValueNow = resizable
+    ? isCollapsed
+      ? Math.max(resizable._size, resizable._minSizePx)
+      : resizable._size
+    : undefined;
   const ariaValueMin = resizable ? resizable._minSizePx : undefined;
   const ariaValueMax =
     resizable && resizable._maxSizePx !== Infinity
       ? resizable._maxSizePx
       : undefined;
+  const ariaValueText =
+    resizable && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
 
   return (
     <div
@@ -534,6 +537,7 @@ export function ResizeHandle({
       aria-valuenow={ariaValueNow}
       aria-valuemin={ariaValueMin}
       aria-valuemax={ariaValueMax}
+      aria-valuetext={ariaValueText}
       aria-label={label}
       aria-disabled={isDisabled || undefined}
       tabIndex={isDisabled ? -1 : 0}
@@ -543,7 +547,7 @@ export function ResizeHandle({
       data-resizing={isDragging || undefined}
       {...mergeProps(
         themeProps('resize-handle'),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.handle,
           isOverlay && styles.overlay,
           isOverlay &&
@@ -586,7 +590,7 @@ export function ResizeHandle({
           // construction so the two stay aligned in LTR and RTL alike.
           hitBiasDir == null
             ? isHorizontal
-              ? styles.hitAreaCenteredX
+              ? rtlStyles.centerInline('0px')
               : styles.hitAreaCenteredY
             : isHorizontal
               ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
@@ -609,14 +613,15 @@ export function ResizeHandle({
             stylex.props(
               styles.pill,
               isHorizontal ? styles.pillHorizontal : styles.pillVertical,
-              effectiveSide !== 'center' &&
-                (isHorizontal
+              effectiveSide === 'center'
+                ? rtlStyles.centerInline('-50%')
+                : isHorizontal
                   ? dynamicStyles.pillOffsetX(
                       effectiveSide === 'start' ? -1 : 1,
                     )
                   : dynamicStyles.pillOffsetY(
                       effectiveSide === 'start' ? -1 : 1,
-                    )),
+                    ),
               isAlwaysVisible ? styles.pillVisible : styles.pillHidden,
               isInteracting && !isDragging && styles.pillHover,
               isDragging && styles.pillActive,

package/src/Resizable/useResizable.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useResizable',
   displayName: 'useResizable',
@@ -87,7 +87,7 @@ export const docs = {
   category: 'layout',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description: 'Adds drag-to-resize behavior to layout regions. Supports single-/multi-region configs w/ snap points, collapsible panels, localStorage persistence, cascade resize ordering.',
   paramDescriptions: {

package/src/Section/Section.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: 'Section',
@@ -86,7 +86,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Section',
   displayName: 'Section',
@@ -168,7 +168,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Page-level container for grouping content into regions. Use INSTEAD of Card for settings panels, form groups, and page sections.',

package/src/Section/Section.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Section/Section.doc.mjs (props table, features)
  * - /packages/core/src/Section/index.ts (exports if types change)
  * - /apps/storybook/stories/Section.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Section/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Section/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -33,25 +33,7 @@ import {
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
-
-/**
- * Extensible variant map for Section.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Section' {
- *   interface SectionVariantMap {
- *     'elevated': true;
- *   }
- * }
- * ```
- */
-export interface SectionVariantMap {
-  section: true;
-  transparent: true;
-  muted: true;
-}
+import type {SectionVariantMap} from './index';
 
 /**
  * Visual variant for the section.

package/src/Section/index.ts

@@ -11,9 +11,24 @@
  * SYNC: When modified, update /packages/core/src/Section/Section.doc.mjs
  */
 
+/**
+ * Extensible variant map for Section.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Section' {
+ *   interface SectionVariantMap {
+ *     'elevated': true;
+ *   }
+ * }
+ * ```
+ */
+export interface SectionVariantMap {
+  section: true;
+  transparent: true;
+  muted: true;
+}
+
 export {Section} from './Section';
-export type {
-  SectionProps,
-  SectionVariant,
-  SectionVariantMap,
-} from './Section';
+export type {SectionProps, SectionVariant} from './Section';

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

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -14,6 +14,10 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {SegmentedControl} from './SegmentedControl';
 import {SegmentedControlItem} from './SegmentedControlItem';
+import {
+  getAllInjectedCss,
+  getForcedColorsRules,
+} from '../__tests__/forcedColors';
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -780,3 +784,27 @@ describe('SegmentedControl container handler forwarding', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+// 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 selected segment survives Windows High Contrast', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+    const css = getForcedColorsRules();
+    // The painted surface fill and shadow are stripped; Highlight/
+    // HighlightText marks the selected segment.
+    expect(css).toContain('background-color: highlight;');
+    expect(css).toContain('color: highlighttext;');
+    // The segment is a <button>; without opting out of UA remapping it keeps
+    // the native ButtonFace surface and ignores the Highlight fill, leaving
+    // HighlightText text on a white surface. forced-color-adjust: none makes
+    // both render as authored.
+    expect(getAllInjectedCss()).toContain('forced-color-adjust: none;');
+  });
+});

package/src/SegmentedControl/SegmentedControl.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
- * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
 import React, {useMemo, useCallback, type ReactNode} from 'react';

package/src/SegmentedControl/SegmentedControlItem.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: 'SegmentedControlItem',

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
- * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
@@ -32,6 +32,7 @@ import type {SegmentedControlSize} from './SegmentedControlContext';
 import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -85,14 +86,6 @@ const styles = stylex.create({
     transitionProperty: 'color, background-color, box-shadow',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   hover: {
     backgroundColor: {
@@ -103,9 +96,27 @@ const styles = stylex.create({
     },
   },
   selected: {
-    color: colorVars['--color-text-primary'],
+    // Forced colors (Windows High Contrast) strips the painted surface fill
+    // and box shadow, which would leave the selected segment with no state
+    // indication beyond font weight. Highlight/HighlightText is the platform
+    // convention for a selected item (WCAG 1.4.11).
+    //
+    // forced-color-adjust must be `none` here: the segment is a <button>, and
+    // the UA keeps native form-control colors (ButtonFace surface) for it under
+    // forced colors, ignoring the authored Highlight fill — the label kept its
+    // HighlightText color, giving white text on a white surface. Opting the
+    // selected segment out of UA remapping makes both the Highlight surface and
+    // the HighlightText label render as authored, restoring figure-ground.
+    forcedColorAdjust: 'none',
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
     fontWeight: fontWeightVars['--font-weight-semibold'],
-    backgroundColor: colorVars['--color-background-surface'],
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'Highlight',
+    },
     boxShadow: shadowVars['--shadow-low'],
   },
   disabled: {
@@ -222,7 +233,7 @@ export function SegmentedControlItem({
           selected: isSelected ? 'selected' : null,
           disabled: isItemDisabled ? 'disabled' : null,
         }),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.base,
           sizeStyles[size],
           isFill && styles.fill,

package/src/SelectableCard/SelectableCard.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: 'SelectableCard',
   displayName: 'Selectable Card',
@@ -12,6 +12,7 @@ export const docs = {
     bestPractices: [
       {guidance: true, description: 'Use for plan pickers, filter chips, or option grids.'},
       {guidance: true, description: 'For single-select track one ID; for multi-select use a Set.'},
+      {guidance: true, description: 'When focused, toggle selection with Space or Enter.'},
       {guidance: false, description: 'Use for navigation; use ClickableCard for that.'},
     ],
     anatomy: [
@@ -54,7 +55,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Card toggling between selected/unselected states w/ accent border. For navigation use ClickableCard instead.',
   usage: {
@@ -62,6 +63,7 @@ export const docsDense = {
     bestPractices: [
       {guidance: true, description: 'Use for plan pickers, filter chips, option grids.'},
       {guidance: true, description: 'For single-select track one ID; for multi-select use a Set.'},
+      {guidance: true, description: 'When focused, toggle selection with Space or Enter.'},
       {guidance: false, description: 'Use for navigation; use ClickableCard instead.'},
     ],
   },

package/src/SelectableCard/SelectableCard.test.tsx

@@ -108,6 +108,61 @@ describe('SelectableCard', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it('calls onChange with true when Enter is pressed on the checkbox (unselected)', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={false} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with false when Enter is pressed on the checkbox (selected)', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={true} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).toHaveBeenCalledWith(false);
+  });
+
+  it('does not toggle on Enter when disabled', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard
+        label="Disabled"
+        isSelected={false}
+        onChange={handleChange}
+        isDisabled>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Disabled'});
+    fireEvent.keyDown(checkbox, {key: 'Enter'});
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('toggles exactly once on Space (native), not doubled by the Enter handler', () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectableCard label="Test" isSelected={false} onChange={handleChange}>
+        Content
+      </SelectableCard>,
+    );
+    const checkbox = screen.getByRole('checkbox', {name: 'Test'});
+    // Space activates the native checkbox, firing a single change event.
+    fireEvent.click(checkbox);
+    fireEvent.keyDown(checkbox, {key: ' '});
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
   describe('elevation', () => {
     const noop = () => {};
 

package/src/SelectableCard/SelectableCard.tsx

@@ -12,9 +12,9 @@
  * - /packages/core/src/SelectableCard/SelectableCard.doc.mjs (props table, features)
  * - /packages/core/src/SelectableCard/index.ts (exports if types change)
  * - /apps/storybook/stories/SelectableCard.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
- * - /packages/cli/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
+ * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
  *
  * Composes Card for all visual styling. Adds selection state with
  * an inset box-shadow (zero layout jitter) and useClickableContainer
@@ -22,6 +22,7 @@
  *
  * A hidden <input type="checkbox"> inside the card provides the accessible
  * role, label, and checked state — the card surface itself has no role/tabIndex.
+ * Space toggles it natively; Enter is wired up as an additional toggle key.
  *
  * For static display, use Card.
  * For navigation or action cards, use ClickableCard.
@@ -30,6 +31,7 @@
 import {
   type ReactNode,
   type MouseEvent,
+  type KeyboardEvent,
   useRef,
   useCallback,
   type Ref,
@@ -44,6 +46,7 @@ import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -56,13 +59,6 @@ const styles = stylex.create({
     transitionProperty: 'box-shadow, border-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outlineOffset: '2px',
-  },
-  focusWithin: {
-    ':has(:focus-visible)': {
-      outline: `2px solid ${colorVars['--color-accent']}`,
-      outlineOffset: '2px',
-    },
   },
   // Hover overlay — guarded by @media (hover: hover) so touch devices
   // don't show a stuck hover state. Active/pressed state works everywhere.
@@ -311,6 +307,19 @@ export function SelectableCard({
     [isDisabled, isSelected, onChange],
   );
 
+  // The focusable control is a native checkbox, which toggles on Space but
+  // ignores Enter. Add Enter as an extra toggle key; Space keeps its native
+  // handling, so we deliberately do not toggle on Space here (would double).
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!isDisabled && event.key === 'Enter') {
+        event.preventDefault();
+        onChange(!isSelected);
+      }
+    },
+    [isDisabled, isSelected, onChange],
+  );
+
   const {onClick, onMouseUp} = useClickableContainer({
     containerRef,
     interactiveRef,
@@ -346,12 +355,13 @@ export function SelectableCard({
           variant,
           selected: isSelected ? 'true' : 'false',
         }),
-        {className: classNameProp, style},
+        focusOutlineProps.focusWithin(),
+        classNameProp,
+        style,
       )}
       xstyle={
         [
           styles.interactive,
-          styles.focusWithin,
           isSelected && selectedStyleForVariant(variant),
           !isDisabled && styles.overlay,
           !isDisabled && styles.hoverOnPointer,
@@ -369,6 +379,7 @@ export function SelectableCard({
         aria-label={label}
         disabled={isDisabled}
         onChange={() => onChange(!isSelected)}
+        onKeyDown={handleKeyDown}
         {...stylex.props(styles.srOnly)}
       />
       {children}