@astryxdesign/core 0.1.7 → 0.1.8-canary.08a0957

package/src/Carousel/Carousel.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {render, screen, fireEvent} from '@testing-library/react';
 import {Carousel} from './Carousel';
 
 // Mock ResizeObserver (not available in jsdom)
@@ -111,4 +111,99 @@ describe('Carousel', () => {
     expect(left).toBeDisabled();
     expect(right).toBeDisabled();
   });
+
+  describe('Shift + wheel horizontal scroll', () => {
+    // jsdom doesn't lay out elements, so we fake an overflowing scroll
+    // container and capture scrollBy calls.
+    function getScroller() {
+      const region = screen.getByRole('region');
+      return region.firstElementChild as HTMLElement;
+    }
+
+    function makeOverflowing(el: HTMLElement) {
+      Object.defineProperty(el, 'scrollWidth', {
+        value: 500,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+    }
+
+    it('maps Shift + vertical wheel to horizontal scroll', () => {
+      render(
+        <Carousel aria-label="Wheel">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.wheel(scroller, {shiftKey: true, deltaY: 120, deltaX: 0});
+
+      expect(scrollBy).toHaveBeenCalledWith({left: 120, behavior: 'auto'});
+    });
+
+    it('does not translate wheel without Shift held', () => {
+      render(
+        <Carousel aria-label="Wheel">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.wheel(scroller, {shiftKey: false, deltaY: 120, deltaX: 0});
+
+      expect(scrollBy).not.toHaveBeenCalled();
+    });
+
+    it('leaves native horizontal wheel deltas alone', () => {
+      // Trackpads emit deltaX directly — don't double-handle those.
+      render(
+        <Carousel aria-label="Wheel">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.wheel(scroller, {shiftKey: true, deltaY: 120, deltaX: 40});
+
+      expect(scrollBy).not.toHaveBeenCalled();
+    });
+
+    it('does not intercept when there is no horizontal overflow', () => {
+      render(
+        <Carousel aria-label="Wheel">
+          <div>Item 1</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      Object.defineProperty(scroller, 'scrollWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(scroller, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.wheel(scroller, {shiftKey: true, deltaY: 120, deltaX: 0});
+
+      expect(scrollBy).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Carousel/Carousel.tsx

@@ -7,8 +7,9 @@
  * @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
  * @output Exports Carousel component
  * @position Horizontal scroll container with fade-edge overflow indication,
- *   optional prev/next buttons on the top layer, scroll-snap, and a 1px
- *   visual bleed allowance for child selection indicators.
+ *   optional prev/next buttons on the top layer, scroll-snap, a 1px
+ *   visual bleed allowance for child selection indicators, and Shift + wheel
+ *   mapping so mouse users can scroll horizontally.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)
@@ -290,6 +291,31 @@ export function Carousel({
     [scrollRef],
   );
 
+  // Map Shift + vertical wheel to horizontal scroll. Trackpads emit
+  // horizontal deltas natively, but a standard mouse only produces deltaY —
+  // so mouse users can't wheel-scroll a horizontal container. Shift + wheel
+  // is the long-established convention for horizontal scroll containers; we
+  // honor it by translating the vertical delta into a horizontal scroll.
+  //
+  // Only kicks in when Shift is held and the wheel is purely vertical
+  // (deltaX === 0), so native trackpad horizontal scrolling is untouched.
+  const handleWheel = useCallback((event: React.WheelEvent<HTMLDivElement>) => {
+    if (!event.shiftKey || event.deltaY === 0 || event.deltaX !== 0) {
+      return;
+    }
+    const el = scrollElRef.current;
+    if (!el) {
+      return;
+    }
+    // Nothing to scroll horizontally — let the event fall through so the page
+    // can scroll as it normally would.
+    if (el.scrollWidth <= el.clientWidth) {
+      return;
+    }
+    event.preventDefault();
+    el.scrollBy({left: event.deltaY, behavior: 'auto'});
+  }, []);
+
   const scrollBy = useCallback((direction: -1 | 1) => {
     const el = scrollElRef.current;
     if (!el) {
@@ -346,6 +372,7 @@ export function Carousel({
       <div
         ref={composedRef}
         tabIndex={0}
+        onWheel={handleWheel}
         {...stylex.props(
           styles.scroller,
           gapStyles[gap],

package/src/Chat/Chat.doc.mjs

@@ -80,7 +80,7 @@ export const docs = {
       { name: 'Scroll-to-bottom button', required: false, description: 'Appears when the user scrolls up or new messages arrive. Defaults to ChatLayoutScrollButton; pass null to hide or a custom element to override.' },
       { name: 'Composer', required: true, description: 'The input area for sending messages, typically ChatComposer. Docked at the bottom inside the frosted glass layer.' },
       { name: 'Empty state', required: false, description: 'Centered placeholder shown when no messages exist. Use EmptyState for a consistent look.' },
-      { name: 'Avatar', required: false, description: 'A sender avatar rendered beside the message. Typically Avatar with size="small". Hidden for system messages.' },
+      { name: 'Avatar', required: false, description: 'A sender avatar rendered beside the message. Typically Avatar with size="md". Hidden for system messages.' },
       { name: 'Name', required: false, description: 'Sender name above the message body. Place on the bubble when using bubbles, or on the message wrapper for raw content.' },
       { name: 'Content', required: true, description: 'The message body: one or more ChatMessageBubble elements, or any free-form ReactNode like images or tool calls.' },
       { name: 'Metadata', required: false, description: 'Timestamp, delivery status, and footer actions below the message. Place on the last bubble or on the message wrapper.' },

package/src/Chat/ChatLayout.tsx

@@ -276,7 +276,9 @@ export function ChatLayout({
   const defaultScrollButton = (
     <ChatLayoutScrollButton
       isVisible={scroll.isScrolledUp || newMsgs.hasNewMessages}
-      label={newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined}
+      label={
+        newMsgs.hasNewMessages ? t('@astryx.chatLayout.newMessages') : undefined
+      }
       onClick={() => {
         newMsgs.dismiss();
         scroll.scrollToBottom();

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -135,7 +135,9 @@ export function ChatLayoutScrollButton({
         )}>
         <Button
           label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
-          aria-label={label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')}
+          aria-label={
+            label ?? t('@astryx.chatLayoutScrollButton.scrollToBottom')
+          }
           icon={<Icon icon="chevronDown" size="md" />}
           variant="ghost"
           size="md"

package/src/Chat/ChatMessage.tsx

@@ -150,7 +150,7 @@ const styles = stylex.create({
  *
  * @example
  * ```
- * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="small" />}>
+ * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
  *   <ChatMessageBubble>Hello!</ChatMessageBubble>
  *   <ChatMessageMetadata timestamp="2:30 PM" />
  * </ChatMessage>
@@ -222,7 +222,9 @@ export function ChatMessage({
         {...rest}
         ref={ref}
         data-testid={testId}
-        aria-label={!hasName ? t('@astryx.chatMessage.messageFrom', {sender}) : undefined}
+        aria-label={
+          !hasName ? t('@astryx.chatMessage.messageFrom', {sender}) : undefined
+        }
         aria-labelledby={hasName ? nameId : undefined}
         {...mergeProps(
           themeProps('chat-message', {sender, density}),

package/src/Chat/ChatMessageMetadata.tsx

@@ -122,8 +122,7 @@ export function ChatMessageMetadata({
   const sender = msgContext?.sender ?? 'assistant';
 
   const statusConfig = status != null ? STATUS_CONFIG[status] : null;
-  const statusLabel =
-    statusConfig != null ? t(statusConfig.i18nKey) : '';
+  const statusLabel = statusConfig != null ? t(statusConfig.i18nKey) : '';
 
   const hasContent =
     timestamp != null || footer != null || statusConfig != null;

package/src/Chat/ChatSendButton.tsx

@@ -96,7 +96,11 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
   return (
     <Button
       ref={ref}
-      label={isStopShown ? t('@astryx.chatSendButton.stop') : t('@astryx.chatSendButton.send')}
+      label={
+        isStopShown
+          ? t('@astryx.chatSendButton.stop')
+          : t('@astryx.chatSendButton.send')
+      }
       variant={isStopShown ? 'secondary' : 'primary'}
       size={size}
       icon={

package/src/Chat/useTriggerMenu.tsx

@@ -699,7 +699,9 @@ export function useTriggerMenu(
       <div
         id={listboxId}
         role="listbox"
-        aria-label={trigger?.menuLabel ?? t('@astryx.chatTriggerMenu.suggestions')}
+        aria-label={
+          trigger?.menuLabel ?? t('@astryx.chatTriggerMenu.suggestions')
+        }
         {...mergeProps(
           themeProps('trigger-menu'),
           stylex.props(styles.dropdown),

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -113,7 +113,7 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon to display before the label text. See `npx astryx docs icons` for valid semantic names.',
+      description: 'Icon to display before the label text. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'status',

package/src/Citation/Citation.test.tsx

@@ -20,6 +20,7 @@ const probe = stylex.create({
   secondaryText: {color: colorVars['--color-text-secondary']},
   accentText: {color: colorVars['--color-text-accent']},
   badgeBackground: {backgroundColor: colorVars['--color-accent-muted']},
+  pointerCursor: {cursor: 'pointer'},
 });
 
 function atomicClasses(style: (typeof probe)[keyof typeof probe]): string[] {
@@ -118,4 +119,54 @@ describe('Citation', () => {
       expect(el.classList.contains(cls)).toBe(true);
     }
   });
+
+  // The interactive (pointer) treatment is keyed on `source.url`: a citation
+  // with no url is non-interactive and must keep the default cursor.
+  const noUrlSource = {title: 'No link'};
+
+  it('does not use the pointer cursor without a url in the label variant', () => {
+    render(<Citation source={noUrlSource} number={1} data-testid="citation" />);
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.pointerCursor)) {
+      expect(el.classList.contains(cls)).toBe(false);
+    }
+  });
+
+  it('uses the pointer cursor with a url in the label variant', () => {
+    render(<Citation source={source} number={1} data-testid="citation" />);
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.pointerCursor)) {
+      expect(el.classList.contains(cls)).toBe(true);
+    }
+  });
+
+  it('does not use the pointer cursor without a url in the number variant', () => {
+    render(
+      <Citation
+        source={noUrlSource}
+        number={1}
+        variant="number"
+        data-testid="citation"
+      />,
+    );
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.pointerCursor)) {
+      expect(el.classList.contains(cls)).toBe(false);
+    }
+  });
+
+  it('uses the pointer cursor with a url in the number variant', () => {
+    render(
+      <Citation
+        source={source}
+        number={1}
+        variant="number"
+        data-testid="citation"
+      />,
+    );
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.pointerCursor)) {
+      expect(el.classList.contains(cls)).toBe(true);
+    }
+  });
 });

package/src/Citation/Citation.tsx

@@ -61,7 +61,6 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-2'],
     marginInlineStart: spacingVars['--spacing-0-5'],
     textDecoration: 'none',
-    cursor: 'pointer',
     transitionProperty: 'background-color, border-color, color',
     transitionDuration: durationVars['--duration-fast-max'],
     transitionTimingFunction: easeVars['--ease-standard'],
@@ -77,6 +76,9 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     minWidth: 0,
   },
+  labelInteractive: {
+    cursor: 'pointer',
+  },
   labelHover: {
     backgroundColor: {
       ':hover': {
@@ -108,11 +110,13 @@ const styles = stylex.create({
     height: spacingVars['--spacing-5'],
     paddingInline: spacingVars['--spacing-1'],
     textDecoration: 'none',
-    cursor: 'pointer',
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast-max'],
     transitionTimingFunction: easeVars['--ease-standard'],
   },
+  numberInteractive: {
+    cursor: 'pointer',
+  },
   numberHover: {
     backgroundColor: {
       // Explicit default for the same reason as labelHover's color: a
@@ -191,6 +195,7 @@ export function Citation({
           stylex.props(
             styles.number,
             href != null && styles.numberHover,
+            href != null && styles.numberInteractive,
             xstyle,
           ),
           className,
@@ -215,6 +220,7 @@ export function Citation({
           styles.label,
           icon != null && styles.labelWithIcon,
           href != null && styles.labelHover,
+          href != null && styles.labelInteractive,
           xstyle,
         ),
         className,

package/src/CodeBlock/CodeBlock.tsx

@@ -807,7 +807,9 @@ export function CodeBlock({
         e.stopPropagation();
         void handleCopy();
       }}
-      aria-label={copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')}
+      aria-label={
+        copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')
+      }
       {...stylex.props(
         styles.copyButton,
         !showHeader && styles.copyButtonAbsolute,

package/src/Collapsible/Collapsible.doc.mjs

@@ -17,6 +17,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-collapsible', visualProps: ['density']},
+      {className: 'astryx-collapsible-content', visualProps: ['density']},
       {className: 'astryx-collapsible-group', visualProps: ['density']},
     ],
   },
@@ -53,6 +54,12 @@ export const docs = {
       type: 'boolean',
       description: 'Controlled open state.',
     },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: "Disable the item so its trigger can't be toggled (dimmed, aria-disabled, and out of the tab order). Doesn't collapse an already-open item.",
+      default: 'false',
+    },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',

package/src/Collapsible/Collapsible.test.tsx

@@ -72,6 +72,12 @@ describe('Collapsible', () => {
       expect(screen.getByTestId('root')).toHaveClass('astryx-collapsible');
     });
 
+    it('renders the stable astryx-collapsible-content class on the content area', () => {
+      render(<Collapsible trigger="T">c</Collapsible>);
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).toHaveClass('astryx-collapsible-content');
+    });
+
     it('renders a ReactNode trigger, not just a string', () => {
       render(
         <Collapsible trigger={<span data-testid="rich">Rich</span>}>
@@ -240,6 +246,80 @@ describe('Collapsible', () => {
     });
   });
 
+  describe('disabled state', () => {
+    it('marks the trigger aria-disabled and drops it from the tab order', () => {
+      render(
+        <Collapsible trigger="T" isDisabled>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveAttribute('tabindex', '-1');
+      // Never the native disabled attribute — it stays focusable/perceivable.
+      expect(button).not.toBeDisabled();
+    });
+
+    it('is enabled by default (no aria-disabled, stays in tab order)', () => {
+      render(<Collapsible trigger="T">Body</Collapsible>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('does not toggle when the trigger is clicked while disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      await user.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('does not fire onOpenChange while disabled', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+      render(
+        <Collapsible trigger="T" isDisabled onOpenChange={onOpenChange}>
+          Body
+        </Collapsible>,
+      );
+      await user.click(screen.getByRole('button'));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it('does not collapse an already-open item — content stays visible', () => {
+      render(
+        <Collapsible trigger="T" isDisabled defaultIsOpen>
+          Body
+        </Collapsible>,
+      );
+      const content = contentFor(screen.getByRole('button'));
+      expect(content).not.toHaveStyle({display: 'none'});
+    });
+
+    it('does not toggle its group item when disabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <CollapsibleGroup type="single">
+          <Collapsible trigger="A" value="a" isDisabled>
+            Body A
+          </Collapsible>
+          <Collapsible trigger="B" value="b">
+            Body B
+          </Collapsible>
+        </CollapsibleGroup>,
+      );
+      const triggerA = screen.getByRole('button', {name: /A/});
+      await user.click(triggerA);
+      expect(triggerA).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
   describe('prop forwarding', () => {
     it('forwards a ref to the root element', () => {
       const ref = vi.fn();

package/src/Collapsible/Collapsible.tsx

@@ -39,6 +39,7 @@ import {
   durationVars,
   easeVars,
 } from '../theme/tokens.stylex';
+
 import {useCollapsible} from './useCollapsible';
 import {CollapsibleGroupPresentationContext} from './CollapsibleGroupContext';
 import {getIcon} from '../Icon/globalIconRegistry';
@@ -81,6 +82,13 @@ const styles = stylex.create({
     textBoxEdge: 'cap alphabetic',
     textBoxTrim: 'trim-both',
   },
+  // Disabled trigger — non-interactive, dimmed. Native `disabled` on the
+  // button blocks click + keyboard activation; these styles restore the
+  // visual affordance that `all: unset` wipes.
+  triggerDisabled: {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
   // Chevron indicator
   chevron: {
     display: 'inline-flex',
@@ -102,8 +110,17 @@ const styles = stylex.create({
   contentHidden: {
     display: 'none',
   },
+  // Anchors body typography so revealed text renders at the system's body
+  // scale (family/size/weight/leading) instead of inheriting from wherever
+  // the Collapsible is placed. External themes override via the
+  // `astryx-collapsible-content` target.
   content: {
     paddingBlockStart: spacingVars['--spacing-1'],
+    fontFamily: typographyVars['--font-family-body'],
+    fontSize: typeScaleVars['--text-body-size'],
+    fontWeight: typeScaleVars['--text-body-weight'],
+    lineHeight: typeScaleVars['--text-body-leading'],
+    color: colorVars['--color-text-primary'],
   },
   // Group divider chrome — a hairline above every item except the first.
   // The group's wrapper (or 'all' mode) owns the outer edges.
@@ -166,6 +183,17 @@ export interface CollapsibleProps extends BaseProps {
    */
   isOpen?: boolean;
 
+  /**
+   * Whether the collapsible is disabled. A disabled item can't be toggled —
+   * its trigger is non-interactive and dimmed. Following the system-wide
+   * disabled convention, the trigger uses `aria-disabled` (not the native
+   * `disabled` attribute) and drops out of the tab order, staying perceivable
+   * to assistive tech. The content stays in whatever open state it was;
+   * disabling doesn't collapse an already-open item.
+   * @default false
+   */
+  isDisabled?: boolean;
+
   /**
    * Callback when the open state changes.
    */
@@ -225,6 +253,7 @@ export function Collapsible({
   children,
   defaultIsOpen,
   isOpen: controlledIsOpen,
+  isDisabled = false,
   onOpenChange,
   value,
   ref,
@@ -244,6 +273,17 @@ export function Collapsible({
     value,
   });
 
+  // Activation is blocked by this guard rather than the native `disabled`
+  // attribute, so the trigger keeps `aria-disabled` semantics and stays
+  // discoverable. A native `disabled` button would silently swallow events
+  // (e.g. a wrapping tooltip's hover) — the system-wide disabled convention.
+  const handleToggle = () => {
+    if (isDisabled) {
+      return;
+    }
+    toggle();
+  };
+
   const presentation = use(CollapsibleGroupPresentationContext);
   const isDivided = presentation?.hasDividers ?? false;
   const density = presentation?.density ?? null;
@@ -268,12 +308,20 @@ export function Collapsible({
       {...props}>
       <button
         type="button"
-        onClick={toggle}
+        onClick={handleToggle}
+        aria-disabled={isDisabled || undefined}
         aria-expanded={isOpen}
         aria-controls={contentId}
+        // A disabled trigger drops out of the tab order so it isn't a silently
+        // dead tab stop; activation stays blocked by the handleToggle guard,
+        // and aria-disabled keeps the state perceivable to assistive tech —
+        // the system-wide disabled convention (never native `disabled`, which
+        // would swallow events like a wrapping tooltip's hover).
+        tabIndex={isDisabled ? -1 : undefined}
         {...stylex.props(
           styles.trigger,
           density != null && triggerDensity[density],
+          isDisabled && styles.triggerDisabled,
         )}>
         <span {...stylex.props(styles.triggerLabel)}>{trigger}</span>
         <span
@@ -286,10 +334,15 @@ export function Collapsible({
       </button>
       <div
         id={contentId}
-        {...stylex.props(
-          styles.content,
-          density != null && contentDensity[density],
-          !isOpen && styles.contentHidden,
+        {...mergeProps(
+          themeProps('collapsible-content', {
+            density: density ?? undefined,
+          }),
+          stylex.props(
+            styles.content,
+            density != null && contentDensity[density],
+            !isOpen && styles.contentHidden,
+          ),
         )}>
         {presentation != null ? (
           <CollapsibleGroupPresentationContext value={null}>