@astryxdesign/core 0.3.0 → 0.4.0-canary.41f53a0

package/src/Chat/ChatSendButton.tsx

@@ -24,6 +24,7 @@ import {useIcon} from '../Icon';
 import {useChatComposerContext} from './ChatContext';
 
 import type {BaseProps} from '../BaseProps';
+import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -117,9 +118,7 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
       isDisabled={!isStopShown && isDisabled}
       onClick={isStopShown ? onStop : handleSend}
       {...rest}
-      {...themeProps('chat-send-button')}
-      className={className}
-      style={style}
+      {...mergeProps(themeProps('chat-send-button'), {className}, style)}
       xstyle={[styles.root, xstyle]}
     />
   );

package/src/Chat/ChatToolCalls.test.tsx

@@ -216,4 +216,39 @@ describe('ChatToolCalls', () => {
     expect(region).toHaveTextContent('searchCode');
     expect(region).toHaveTextContent('readFile');
   });
+
+  it('compensates the grouped rows overhang on the clip boundary so the hover background is not cut off', () => {
+    render(
+      <ChatToolCalls
+        defaultIsExpanded={true}
+        calls={[
+          {name: 'bash', status: 'complete'},
+          {name: 'read', status: 'complete'},
+        ]}
+      />,
+    );
+    const regionId = screen.getByRole('button').getAttribute('aria-controls');
+    const groupContent = document.getElementById(regionId as string);
+    // groupContentInner is the overflow:hidden clip boundary required for the
+    // grid height animation; its direct child (`list`) pulls itself outward
+    // by a negative inline margin so each row's hover background can overhang
+    // the text column without widening the layout. Without a matching
+    // padding/negative-margin pair on groupContentInner itself, that overhang
+    // extends past the clip boundary and gets cut off (#4830) instead of
+    // being absorbed the same way it is for a single, unwrapped call row.
+    const groupContentInner = groupContent!.firstElementChild as HTMLElement;
+    const list = groupContentInner.firstElementChild as HTMLElement;
+    // jsdom's getComputedStyle doesn't resolve StyleX's generated atomic
+    // classes here, so assert on the classes directly instead. StyleX emits
+    // one atomic class per distinct property+value pair, so identical
+    // paddingInline/marginInline values on two elements always produce the
+    // exact same class names — if groupContentInner mirrors list's
+    // padding/margin pair, their class lists intersect on (at least) those
+    // two classes; if the fix is missing, groupContentInner only has its own
+    // unrelated overflow/minHeight classes and shares nothing with list.
+    const innerClasses = new Set(groupContentInner.className.split(' '));
+    const listClasses = new Set(list.className.split(' '));
+    const shared = [...listClasses].filter(c => innerClasses.has(c));
+    expect(shared.length).toBeGreaterThanOrEqual(2);
+  });
 });

package/src/Chat/ChatToolCalls.tsx

@@ -134,6 +134,10 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
+  },
+  // Rides on the chevron <Icon> (via `xstyle`), next to the rotation it
+  // animates, so one element carries both the transform and the theme target.
+  chevronTransition: {
     transition: {
       default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
       '@media (prefers-reduced-motion: reduce)': 'none',
@@ -156,6 +160,18 @@ const styles = stylex.create({
   groupContentInner: {
     overflow: 'hidden',
     minHeight: 0,
+    // `list` (and, within it, each `callRowClickable` row) overhangs its own
+    // content box by `--spacing-1` on each inline edge via a negative margin,
+    // so its hover background can extend past the text column without
+    // widening the layout — `list`'s own matching paddingInline absorbs the
+    // row-level overhang, but `list`'s negative margin then overhangs *this*
+    // element's box by the same amount, and this is the clip boundary the
+    // grid height animation needs `overflow: hidden` for. Mirror the same
+    // padding/negative-margin pair here so that overhang is absorbed too,
+    // instead of clipped — matching the ungrouped single-call row, which has
+    // no such wrapper to clip it.
+    paddingInline: spacingVars['--spacing-1'],
+    marginInline: `calc(-1 * ${spacingVars['--spacing-1']})`,
   },
   list: {
     display: 'flex',
@@ -273,10 +289,6 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
-    transition: {
-      default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
-      '@media (prefers-reduced-motion: reduce)': 'none',
-    },
     marginInlineStart: 'auto',
   },
   callDetailContent: {
@@ -451,12 +463,16 @@ function CallRow({call}: {call: ChatToolCallItem}) {
         <span {...stylex.props(styles.callDuration)}>{call.duration}</span>
       )}
       {hasDetail && (
-        <span
-          {...stylex.props(
-            styles.callDetailChevron,
-            isDetailOpen && styles.chevronExpanded,
-          )}>
-          <Icon icon="chevronDown" size="xsm" color="inherit" />
+        <span {...stylex.props(styles.callDetailChevron)}>
+          <Icon
+            icon="chevronDown"
+            size="xsm"
+            color="inherit"
+            xstyle={[
+              styles.chevronTransition,
+              isDetailOpen && styles.chevronExpanded,
+            ]}
+          />
         </span>
       )}
     </div>
@@ -627,12 +643,16 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
             </>
           )}
         </span>
-        <span
-          {...stylex.props(
-            styles.chevron,
-            isExpanded && styles.chevronExpanded,
-          )}>
-          <Icon icon="chevronDown" size="xsm" color="inherit" />
+        <span {...stylex.props(styles.chevron)}>
+          <Icon
+            icon="chevronDown"
+            size="xsm"
+            color="inherit"
+            xstyle={[
+              styles.chevronTransition,
+              isExpanded && styles.chevronExpanded,
+            ]}
+          />
         </span>
       </div>
 

package/src/Chat/useTriggerMenu.tsx

@@ -110,10 +110,6 @@ const styles = stylex.create({
   popoverSurface: {
     minWidth: '180px',
   },
-  popoverGap: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-  },
   item: {
     boxSizing: 'border-box',
     display: 'flex',
@@ -711,7 +707,8 @@ export function useTriggerMenu(
       {
         placement: 'above',
         alignment: 'start',
-        xstyle: [styles.popoverSurface, styles.popoverGap],
+        offset: spacingVars['--spacing-1'],
+        xstyle: styles.popoverSurface,
       },
     );
   }, [popover, listboxId, state, selectItem, getItemId, t]);

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -131,7 +131,8 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'checkbox-indicator'},
     ],
   },
   usage: {
@@ -206,7 +207,8 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'checkbox-indicator'},
     ],
   },
 };

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -13,8 +13,11 @@ 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 {CheckboxInput} from './CheckboxInput';
+import {Theme} from '../theme/Theme';
+import {defineTheme} from '../theme/defineTheme';
 import {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {FOCUS_OUTLINE_PARTS} from '../utils/focusOutline.stylex';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -542,6 +545,38 @@ describe('CheckboxInput', () => {
       expect(data.get('terms')).toBe('on');
     });
 
+    it('does not block form submission when required and disabled with a disabledMessage', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={false}
+            onChange={() => {}}
+            isRequired
+            isDisabled
+            disabledMessage="Terms are managed by your administrator"
+          />
+        </form>,
+      );
+      expect(container.querySelector('form')!.checkValidity()).toBe(true);
+    });
+
+    it('still blocks submission when required and unchecked but enabled', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={false}
+            onChange={() => {}}
+            isRequired
+          />
+        </form>,
+      );
+      expect(container.querySelector('form')!.checkValidity()).toBe(false);
+    });
+
     it('is excluded from form data when disabled, even with a disabledMessage', () => {
       const {container} = render(
         <form>
@@ -599,3 +634,88 @@ describe('forced colors (WCAG 1.4.11)', () => {
     expect(getForcedColorsRules()).toContain('color: canvastext;');
   });
 });
+
+// The control's native input is `opacity: 0`, so the visible focus indicator
+// has to land on the indicator beside it — which is themeable, third-party
+// code. If drawing the ring were the indicator's job, a replacement that
+// simply doesn't would ship a control with no visible focus (WCAG 2.4.7), and
+// that is the default: our own sample replacement destructures
+// {state, size, isDisabled} and drops the rest.
+//
+// So the owner paints it, on the indicator's own element, at focus time. The
+// shape is right because `outline` follows that element's border-radius, and
+// no cooperation is required.
+describe('focus ring ownership (WCAG 2.4.7)', () => {
+  /** What a theme author plausibly writes: state in, picture out. */
+  const BareIndicator = ({state}: {state: string}) => (
+    <span aria-hidden="true" data-testid="bare-indicator">
+      {state === 'checked' ? 'x' : ''}
+    </span>
+  );
+
+  const bareTheme = defineTheme({
+    name: 'bare-indicator-theme',
+    indicators: {checkbox: BareIndicator},
+  });
+
+  /**
+   * The element the ring is painted on: the indicator slot's only child — the
+   * indicator's own root, whatever a theme renders there.
+   */
+  const indicatorOf = (container: HTMLElement) => {
+    const input = container.querySelector('input[type="checkbox"]');
+    const slot = input?.nextElementSibling;
+    return slot?.firstElementChild as HTMLElement;
+  };
+
+  const focusInput = (container: HTMLElement) => {
+    const input = container.querySelector(
+      'input[type="checkbox"]',
+    ) as HTMLInputElement;
+    // A keydown first, so jsdom's :focus-visible heuristic sees keyboard
+    // modality — the ring is deliberately keyboard-only, and a bare
+    // fireEvent.focus() reads as a pointer focus. Same approach as the
+    // TreeList focus test.
+    fireEvent.keyDown(document.body, {key: 'Tab'});
+    input.focus();
+    fireEvent.focus(input);
+    return input;
+  };
+
+  it('paints the ring on the built-in indicator', () => {
+    const {container} = render(
+      <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
+    );
+    focusInput(container);
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
+  });
+
+  it('paints it on a replacement that forwards nothing', () => {
+    const {container} = render(
+      <Theme theme={bareTheme}>
+        <CheckboxInput label="Accept" value={false} onChange={() => {}} />
+      </Theme>,
+    );
+
+    // The replacement really took effect, and really is bare.
+    const replaced = screen.getByTestId('bare-indicator');
+    expect(replaced.className).toBe('');
+    // ...and it still gets a ring, because the owner drew it.
+    focusInput(container);
+    expect(replaced.style.outlineStyle).toBe(FOCUS_OUTLINE_PARTS.outlineStyle);
+  });
+
+  it('clears the ring on blur', () => {
+    const {container} = render(
+      <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
+    );
+    const input = focusInput(container);
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
+    fireEvent.blur(input);
+    expect(indicatorOf(container).style.outlineStyle).toBe('');
+  });
+});

package/src/CheckboxInput/CheckboxInput.tsx

@@ -21,6 +21,7 @@ import {
   useCallback,
   use,
   useOptimistic,
+  useRef,
   useTransition,
   type ChangeEvent,
   type FocusEvent,
@@ -31,12 +32,9 @@ import {
   colorVars,
   spacingVars,
   radiusVars,
-  durationVars,
-  easeVars,
   typographyVars,
   typeScaleVars,
   fontWeightVars,
-  borderVars,
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -47,7 +45,9 @@ import type {InputStatus} from '../Field/types';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps, mergeRefs} from '../utils';
-import {checkboxScope} from './checkbox.markers.stylex';
+import {indicatorScope} from '../Indicator/indicator.markers.stylex';
+import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
+import {useIndicator} from '../Indicator';
 import {themeProps} from '../utils/themeProps';
 import {CheckboxListContext} from '../CheckboxList/CheckboxListContext';
 
@@ -68,6 +68,12 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
+  // Holds only the indicator, so the focus ring has one unambiguous target.
+  // `display: contents` adds no box of its own — the indicator keeps whatever
+  // layout relationship it already had with the wrapper.
+  indicatorSlot: {
+    display: 'contents',
+  },
   input: {
     position: 'absolute',
     margin: 0,
@@ -79,113 +85,6 @@ const styles = stylex.create({
   inputDisabled: {
     cursor: 'not-allowed',
   },
-  checkbox: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: radiusVars['--radius-inner'],
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
-  checkboxFocus: {
-    outline: {
-      default: 'none',
-      [stylex.when.ancestor(':has(:focus-visible)', checkboxScope)]:
-        `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: null,
-      [stylex.when.ancestor(':has(:focus-visible)', checkboxScope)]: '2px',
-    },
-  },
-  // State-dependent colors with ancestor hover behavior
-  checkboxUnchecked: {
-    // Foreground for the inherit-shade loading spinner (reads currentColor):
-    // brand accent on the light surface fill.
-    color: colorVars['--color-accent'],
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-border-emphasized']}, ${colorVars['--color-tint-hover']} 20%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-background-surface'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-background-surface']}, ${colorVars['--color-tint-hover']} 5%)`,
-      },
-    },
-  },
-  checkboxChecked: {
-    // Foreground for the inherit-shade loading spinner (reads currentColor):
-    // on-accent color against the accent fill.
-    color: colorVars['--color-on-accent'],
-    borderColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-  },
-  checkboxDisabled: {
-    opacity: 0.5,
-    borderColor: {
-      default: colorVars['--color-border'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': colorVars['--color-border'],
-      },
-    },
-  },
-  checkboxDisabledUnchecked: {
-    backgroundColor: {
-      default: colorVars['--color-background-muted'],
-      [stylex.when.ancestor(':hover', checkboxScope)]: {
-        '@media (hover: hover)': colorVars['--color-background-muted'],
-      },
-    },
-  },
-  checkmark: {
-    display: 'none',
-    color: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) does not reliably force an SVG
-      // stroke painted with currentColor, so the check stays the same white as
-      // the flattened (Canvas) box fill — a white check on a white box.
-      // CanvasText keeps it perceivable on the Canvas box, matching the
-      // indeterminate mark (WCAG 1.4.11).
-      '@media (forced-colors: active)': 'CanvasText',
-    },
-  },
-  checkmarkVisible: {
-    display: 'block',
-  },
-  indeterminateMark: {
-    display: 'none',
-    backgroundColor: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) strips painted backgrounds,
-      // which would make the indeterminate bar invisible; CanvasText keeps it
-      // perceivable on the Canvas box fill (WCAG 1.4.11). The checkmark carries
-      // the matching CanvasText treatment on its own style.
-      '@media (forced-colors: active)': 'CanvasText',
-    },
-    borderRadius: radiusVars['--radius-full'],
-  },
-  indeterminateMarkVisible: {
-    display: 'block',
-  },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -211,39 +110,6 @@ const wrapperSizeStyles = stylex.create({
   },
 });
 
-const checkboxSizeStyles = stylex.create({
-  sm: {
-    width: 20,
-    height: 20,
-  },
-  md: {
-    width: 24,
-    height: 24,
-  },
-});
-
-const checkmarkSizeStyles = stylex.create({
-  sm: {
-    width: 12,
-    height: 12,
-  },
-  md: {
-    width: 14,
-    height: 14,
-  },
-});
-
-const indeterminateSizeStyles = stylex.create({
-  sm: {
-    width: 10,
-    height: 2,
-  },
-  md: {
-    width: 12,
-    height: 2,
-  },
-});
-
 export type CheckboxInputSize = keyof typeof wrapperSizeStyles;
 
 export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
@@ -443,9 +309,17 @@ export function CheckboxInput({
     isEnabled: showsDisabledMessage,
   });
 
+  // The checkbox visual is an indicator: a theme can restyle it through the
+  // `checkbox` target or replace the component outright.
+  const CheckboxControl = useIndicator('checkbox');
+  // The ring is drawn on the indicator itself: the native input is
+  // `opacity: 0`, and only the indicator's own element can shape the outline
+  // to match it. See useIndicatorFocusRing.
+  const indicatorRef = useRef<HTMLSpanElement>(null);
+  const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
+
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
-  const isCheckedOrIndeterminate = isChecked || isIndeterminate;
 
   // Sync the native indeterminate DOM property (can't be set via JSX
   // attribute). On a native checkbox this is the authoritative way to expose
@@ -498,9 +372,13 @@ export function CheckboxInput({
         {...stylex.props(
           styles.container,
           isLabelHidden && styles.containerLabelHidden,
-          !isDisabled && checkboxScope,
+          // Hover and focus reach the checkbox visual through this ancestor
+          // marker rather than props, so the whole row drives it.
+          !isDisabled && indicatorScope,
         )}>
-        <div {...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size])}>
+        <div
+          {...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size])}
+          {...focusProps}>
           <input
             {...rest}
             ref={mergeRefs(
@@ -520,6 +398,7 @@ export function CheckboxInput({
             // still blocked by the isDisabled guard in onChange below.
             disabled={isDisabled && !isFocusableDisabled}
             aria-disabled={isFocusableDisabled ? 'true' : undefined}
+            form={isFocusableDisabled ? '' : undefined}
             readOnly={isReadOnly}
             required={isRequired}
             onChange={e => {
@@ -547,61 +426,25 @@ export function CheckboxInput({
               isDisabled && styles.inputDisabled,
             )}
           />
-          <div
-            aria-hidden="true"
-            {...mergeProps(
-              themeProps('checkbox', {
-                size,
-                checked: isChecked
-                  ? 'checked'
-                  : isIndeterminate
-                    ? 'indeterminate'
-                    : null,
-                disabled: isDisabled ? 'disabled' : null,
-              }),
-              stylex.props(
-                styles.checkbox,
-                checkboxSizeStyles[size],
-                !isDisabled && styles.checkboxFocus,
-                isCheckedOrIndeterminate
-                  ? styles.checkboxChecked
-                  : styles.checkboxUnchecked,
-                isDisabled && styles.checkboxDisabled,
-                isDisabled &&
-                  !isCheckedOrIndeterminate &&
-                  styles.checkboxDisabledUnchecked,
-              ),
-            )}>
-            {isBusy ? (
-              <Spinner size="sm" shade="inherit" />
-            ) : (
-              <>
-                <svg
-                  viewBox="0 0 10 10"
-                  {...stylex.props(
-                    styles.checkmark,
-                    checkmarkSizeStyles[size],
-                    isChecked && styles.checkmarkVisible,
-                  )}>
-                  <path
-                    d="M8.5 2.5L4 7.5L1.5 5"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    fill="none"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                <div
-                  {...stylex.props(
-                    styles.indeterminateMark,
-                    indeterminateSizeStyles[size],
-                    isIndeterminate && styles.indeterminateMarkVisible,
-                  )}
-                />
-              </>
-            )}
-          </div>
+          {/*
+           * A container holding ONLY the indicator, so the focus ring has an
+           * unambiguous target whatever a theme renders. `display: contents`
+           * keeps it out of layout entirely.
+           */}
+          <span ref={indicatorRef} {...stylex.props(styles.indicatorSlot)}>
+            <CheckboxControl
+              state={
+                isIndeterminate
+                  ? 'indeterminate'
+                  : isChecked
+                    ? 'checked'
+                    : 'unchecked'
+              }
+              size={size}
+              isDisabled={isDisabled}>
+              {isBusy ? <Spinner size="sm" shade="inherit" /> : null}
+            </CheckboxControl>
+          </span>
         </div>
         <div {...stylex.props(styles.labelWrapper)}>
           <FieldLabel