@astryxdesign/core 0.1.9 → 0.2.0-canary.0e01213

package/src/Carousel/Carousel.tsx

@@ -41,8 +41,9 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {useLayer} from '../Layer';
 import {useScrollOverflow} from '../hooks/useScrollOverflow';
+import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -166,10 +167,16 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   buttonPillStart: {
-    transform: 'translateX(-50%)',
+    transform: {
+      default: 'translateX(-50%)',
+      ':is([dir="rtl"] *)': 'translateX(50%)',
+    },
   },
   buttonPillEnd: {
-    transform: 'translateX(50%)',
+    transform: {
+      default: 'translateX(50%)',
+      ':is([dir="rtl"] *)': 'translateX(-50%)',
+    },
   },
   buttonHidden: {
     opacity: 0,
@@ -347,7 +354,11 @@ export function Carousel({
       typeof window.matchMedia === 'function' &&
       window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     el.scrollBy({
-      left: direction * Math.max(amount, itemWidth),
+      // `direction` is the logical intent (-1 = toward content start, +1 =
+      // toward content end). Under RTL the scroll axis is inverted (start is
+      // scrollLeft 0, the end is negative), so flip the physical delta sign.
+      left:
+        (isRtlElement(el) ? -1 : 1) * direction * Math.max(amount, itemWidth),
       behavior: prefersReducedMotion ? 'auto' : 'smooth',
     });
   }, []);
@@ -425,7 +436,11 @@ export function Carousel({
                 !overflowStart && styles.buttonHidden,
               )}>
               <Button
-                icon={<Icon icon="chevronLeft" size="xsm" />}
+                icon={
+                  <span {...stylex.props(rtlStyles.mirror)}>
+                    <Icon icon="chevronLeft" size="xsm" />
+                  </span>
+                }
                 label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
                 size="sm"
@@ -446,7 +461,11 @@ export function Carousel({
                 !overflowEnd && styles.buttonHidden,
               )}>
               <Button
-                icon={<Icon icon="chevronRight" size="xsm" />}
+                icon={
+                  <span {...stylex.props(rtlStyles.mirror)}>
+                    <Icon icon="chevronRight" size="xsm" />
+                  </span>
+                }
                 label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"
                 size="sm"

package/src/Center/Center.doc.mjs

@@ -36,6 +36,24 @@ export const docs = {
       type: 'SizeValue',
       description: 'Minimum container height (px or CSS value).',
     },
+    {
+      name: 'padding',
+      type: 'SpacingStep',
+      description:
+        'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Stack, Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
+    },
+    {
+      name: 'paddingInline',
+      type: 'SpacingStep',
+      description:
+        'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
+    },
+    {
+      name: 'paddingBlock',
+      type: 'SpacingStep',
+      description:
+        'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
+    },
     {
       name: 'isInline',
       type: 'boolean',
@@ -95,6 +113,22 @@ export const docsZh = {
     {name: 'axis', type: "'both' | 'horizontal' | 'vertical'", description: '居中的方向。', default: "'both'"},
     {name: 'width', type: 'number | string', description: '容器宽度（px 或 CSS 值）。'},
     {name: 'height', type: 'number | string', description: '容器高度（px 或 CSS 值）。'},
+    {
+      name: 'padding',
+      type: 'SpacingStep',
+      description:
+        '所有方向的内边距，使用间距刻度（0、0.5、1、1.5、2、3、4、5、6、8、10）。与 Stack、Card、LayoutContent 和 LayoutPanel 的 padding 属性一致。在 JSX 中使用数字表达式 e.g. padding={3}。',
+    },
+    {
+      name: 'paddingInline',
+      type: 'SpacingStep',
+      description: '行内（水平）内边距，使用间距刻度。两者同时设置时在行内轴上覆盖 padding。',
+    },
+    {
+      name: 'paddingBlock',
+      type: 'SpacingStep',
+      description: '块（垂直）内边距，使用间距刻度。两者同时设置时在块轴上覆盖 padding。',
+    },
     {name: 'isInline', type: 'boolean', description: '使用 inline-flex（适用于文本/图标）。', default: 'false'},
     {name: 'children', type: 'ReactNode', description: '要居中的内容。'},
     {
@@ -134,6 +168,10 @@ export const docsDense = {
     axis: 'centering direction(s)',
     width: 'container width (px or CSS)',
     height: 'container height (px or CSS)',
+    padding:
+      'inner padding on all sides (spacing step: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10)',
+    paddingInline: 'inline (horizontal) padding; overrides padding on that axis',
+    paddingBlock: 'block (vertical) padding; overrides padding on that axis',
     isInline: 'use inline-flex for text/icons',
     children: 'content to center',
     xstyle: 'StyleX styles for layout (margins, positioning, sizing); must be stylex.create() value',

package/src/Center/Center.test.tsx

@@ -82,6 +82,81 @@ describe('Center', () => {
     expect(element).toBeInTheDocument();
   });
 
+  it('applies a class when padding is set', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const withPadding = screen.getByTestId('center').className;
+    expect(withPadding).not.toBe('');
+    expect(withPadding).not.toBe(baseline);
+  });
+
+  it('accepts paddingInline and paddingBlock without error', () => {
+    render(
+      <Center paddingInline={4} paddingBlock={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center')).toBeInTheDocument();
+  });
+
+  it('lets paddingInline/paddingBlock override padding on their axis', () => {
+    // padding sets both axes; paddingInline overrides the inline axis. The
+    // component should render without conflict and carry a class.
+    render(
+      <Center padding={2} paddingInline={5} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe('');
+  });
+
+  it('applies a class for explicit padding={0} (zero is a valid spacing step)', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center padding={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('leaves the default className unchanged when no padding props are set', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    // Opting in changes the className...
+    rerender(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+    // ...and dropping the prop restores the exact default output.
+    rerender(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).toBe(baseline);
+  });
+
   it('renders as inline-flex when isInline is true', () => {
     render(
       <Center isInline data-testid="center">

package/src/Center/Center.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Center.tsx
- * @input Uses React, StyleX for centering styles
+ * @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding
  * @output Exports Center component and CenterProps
  * @position Center component for centering children horizontally/vertically
  *
@@ -18,7 +18,11 @@
 import type {ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
-import type {SizeValue} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
+import {
+  paddingInlineStyles,
+  paddingBlockStyles,
+} from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 
@@ -90,6 +94,26 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
    */
   minHeight?: SizeValue;
 
+  /**
+   * Inner padding on all sides, using the spacing scale.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   *
+   * Matches the `padding` prop on `Stack`, `Card`, `LayoutContent`, and `LayoutPanel`.
+   */
+  padding?: SpacingStep;
+
+  /**
+   * Inline (horizontal) padding, using the spacing scale.
+   * Overrides `padding` on the inline axis when both are set.
+   */
+  paddingInline?: SpacingStep;
+
+  /**
+   * Block (vertical) padding, using the spacing scale.
+   * Overrides `padding` on the block axis when both are set.
+   */
+  paddingBlock?: SpacingStep;
+
   /**
    * Whether to make the container inline-flex (useful for text/icons).
    * @default false
@@ -121,6 +145,9 @@ export function Center({
   height,
   maxWidth,
   minHeight,
+  padding,
+  paddingInline,
+  paddingBlock,
   isInline = false,
   children,
   xstyle,
@@ -129,6 +156,11 @@ export function Center({
   ref,
   ...props
 }: CenterProps) {
+  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
+  // / `paddingBlock` take precedence on their own axis when provided.
+  const resolvedPaddingInline = paddingInline ?? padding;
+  const resolvedPaddingBlock = paddingBlock ?? padding;
+
   const stylexProps = mergeProps(
     themeProps('center', {axis}),
     stylex.props(
@@ -141,6 +173,9 @@ export function Center({
         maxWidth ?? null,
         minHeight ?? null,
       ),
+      resolvedPaddingInline != null &&
+        paddingInlineStyles[resolvedPaddingInline],
+      resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
       xstyle,
     ),
     className,

package/src/Chat/ChatComposer.doc.mjs

@@ -60,7 +60,7 @@ export const docs = {
       name: 'elevation',
       type: "'none' | 'low'",
       description:
-        "Resting elevation of the composer body. `low` (the default) keeps today's raised look — low at rest, bumping to med on hover / focus. `none` flattens it and draws a border with the same rest / hover / focus treatment as a text input (emphasized border → accent on focus, matching inset rings).",
+        "Resting elevation of the composer body. `low` (the default) keeps today's raised look: low at rest, bumping to med on hover / focus. `none` flattens it and draws a border with the same rest / hover / focus treatment as a text input (emphasized border → accent on focus, matching inset rings).",
       default: "'low'",
     },
     {
@@ -109,7 +109,7 @@ export const docs = {
     {
       name: 'input',
       type: 'ReactNode',
-      description: 'Slot: custom input element. Replaces the default input. Use ChatComposerInput for trigger menus/tokens, or wire any input (plain textarea, rich editor) to the composition contract via useChatComposerContext() — read value/onChange/onSubmit/canSend and register a focus control on inputControlRef so body-click-to-focus works.',
+      description: 'Slot: custom input element. Replaces the default input. Use ChatComposerInput for trigger menus/tokens, or wire any input (plain textarea, rich editor) to the composition contract via useChatComposerContext(): read value/onChange/onSubmit/canSend and register a focus control on inputControlRef so body-click-to-focus works.',
       slotElements: [
         {
           __element: 'TextInput',

package/src/Chat/ChatComposerInput.doc.mjs

@@ -83,7 +83,7 @@ export const docs = {
     {
       name: 'onKeyDown',
       type: '(event) => void',
-      description: 'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected — Enter never submits mid-composition.',
+      description: 'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected; Enter never submits mid-composition.',
     },
   ],
 };

package/src/Chat/ChatComposerInput.tsx

@@ -238,8 +238,8 @@ const styles = stylex.create({
   placeholder: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     pointerEvents: 'none',
     color: colorVars['--color-text-secondary'],
     fontSize: {

package/src/Chat/ChatDictationButton.tsx

@@ -26,6 +26,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -110,13 +111,18 @@ export function ChatDictationButton({
   style,
   ...rest
 }: ChatDictationButtonProps) {
+  const t = useTranslator();
+
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
   }
 
   const {isListening, bands, volume: rawVolume} = dictation;
   const accessibleLabel =
-    label ?? (isListening ? 'Stop dictation' : 'Start dictation');
+    label ??
+    (isListening
+      ? t('@astryx.chatDictationButton.stopDictation')
+      : t('@astryx.chatDictationButton.startDictation'));
 
   // Boost each band for visibility — quiet speech (0-10%) maps to full visual range
   const boostedBands = bands.map(b => Math.min(Math.pow(b / 0.2, 0.5), 1));

package/src/Chat/ChatLayout.test.tsx

@@ -103,6 +103,63 @@ describe('ChatLayout', () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// Self-scroll layout contract (#2573)
+//
+// jsdom has no layout, so these assert the class-level CSS intent: the root
+// must be a flex column whose message area flexes (grow, no shrink) instead
+// of forcing minHeight: 100%. With minHeight: 100% the in-flow sticky dock
+// added its full height on top of the message area, so the root always
+// overflowed by exactly the dock height (phantom scrollbar). Real-layout
+// geometry was verified in a browser; see the PR for measurements.
+// ---------------------------------------------------------------------------
+
+describe('ChatLayout — self-scroll layout contract (#2573)', () => {
+  it('root is a flex column so the dock height is part of the 100%', () => {
+    render(
+      <ChatLayout composer={<div>composer</div>} data-testid="layout">
+        <div>msg</div>
+      </ChatLayout>,
+    );
+    const root = screen.getByTestId('layout');
+    expect(root).toHaveStyle({display: 'flex', flexDirection: 'column'});
+  });
+
+  it('message area flexes to fill leftover space instead of minHeight: 100%', () => {
+    render(
+      <ChatLayout composer={<div>composer</div>} data-testid="layout">
+        <div>msg</div>
+      </ChatLayout>,
+    );
+    const messageArea = screen.getByTestId('layout')
+      .firstElementChild as HTMLElement;
+    expect(messageArea).toHaveStyle({flexGrow: '1', flexShrink: '0'});
+    // minHeight: 100% is the phantom-scrollbar bug — it must not come back.
+    expect(getComputedStyle(messageArea).minHeight).not.toBe('100%');
+  });
+
+  it('dock is sticky in self-scroll mode and fixed with an external scrollRef', () => {
+    const {rerender} = render(
+      <ChatLayout composer={<div>composer</div>} data-testid="layout">
+        <div>msg</div>
+      </ChatLayout>,
+    );
+    const dock = screen.getByTestId('layout').lastElementChild as HTMLElement;
+    expect(dock).toHaveStyle({position: 'sticky'});
+
+    const scrollRef = {current: document.documentElement};
+    rerender(
+      <ChatLayout
+        composer={<div>composer</div>}
+        data-testid="layout"
+        scrollRef={scrollRef}>
+        <div>msg</div>
+      </ChatLayout>,
+    );
+    expect(dock).toHaveStyle({position: 'fixed'});
+  });
+});
+
 // ---------------------------------------------------------------------------
 // First-fill scroll positioning
 //

package/src/Chat/ChatLayout.tsx

@@ -12,6 +12,13 @@
  * Provides the scroll container ref and content ref, renders the
  * scroll-to-bottom button, frosted glass dock, and message area.
  *
+ * Layout contract: the root is a flex column. The message area flexes
+ * (grow 1, shrink 0) to fill the space the dock doesn't need; the sticky
+ * dock keeps its natural height in flow. Short content therefore fills
+ * exactly 100% with no overflow, and long content grows past the root so
+ * self-scroll mode scrolls (#2573). In external-scrollRef mode the dock
+ * is position: fixed (out of flow) and the message area fills the root.
+ *
  * Density (compact/balanced/spacious) is controlled via a prop with
  * 'balanced' as the default. No JS measurement or ResizeObserver needed.
  * The container-type on root enables container queries in child components.
@@ -100,6 +107,13 @@ const styles = stylex.create({
     containerType: 'inline-size',
     minHeight: 0,
     flex: 1,
+    // Flex column so the sticky dock's natural height is part of the 100%:
+    // messageArea flexes to fill the leftover space instead of forcing
+    // minHeight: 100% on its own. Without this, the in-flow sticky dock
+    // adds its full height on top of the 100% message area and the root
+    // always overflows by exactly the dock height (#2573).
+    display: 'flex',
+    flexDirection: 'column',
   },
   rootScrollable: {
     overflowY: 'auto',
@@ -116,7 +130,11 @@ const styles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
     marginInline: 'auto',
-    minHeight: '100%',
+    // Fill the space the dock doesn't need (grow), but never shrink below
+    // content height — long content must overflow the root so it scrolls.
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto',
     paddingBlockEnd: spacingVars['--spacing-6'],
     width: '100%',
     maxWidth: '100%',
@@ -134,11 +152,14 @@ const styles = stylex.create({
   // --- Dock container ---
   dockContainer: {
     bottom: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     zIndex: 0,
     isolation: 'isolate',
     pointerEvents: 'none',
+    // Keep the sticky dock at its natural height as a flex item.
+    // (Inert in fixed mode — position: fixed takes it out of flex layout.)
+    flexShrink: 0,
   },
   dockContainerFixed: {
     position: 'fixed',
@@ -150,8 +171,8 @@ const styles = stylex.create({
   blurLayer: {
     position: 'absolute',
     bottom: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     pointerEvents: 'none',
     backdropFilter: 'blur(12px)',
     WebkitBackdropFilter: 'blur(12px)',

package/src/Chat/ChatMessageBubble.tsx

@@ -160,27 +160,32 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     color: colorVars['--color-text-primary'],
   },
-  // Grouped bubble corners — assistant (left side tight)
+  // Grouped bubble corners — assistant (inline-start side tight).
+  // Logical radii so the tail follows reading direction: inline-start is the
+  // left edge under LTR and the right edge under RTL (assistant tucks toward
+  // the start of the line in both directions).
   groupFirstAssistant: {
-    borderBottomLeftRadius: radiusVars['--radius-inner'],
+    borderEndStartRadius: radiusVars['--radius-inner'],
   },
   groupMiddleAssistant: {
-    borderTopLeftRadius: radiusVars['--radius-inner'],
-    borderBottomLeftRadius: radiusVars['--radius-inner'],
+    borderStartStartRadius: radiusVars['--radius-inner'],
+    borderEndStartRadius: radiusVars['--radius-inner'],
   },
   groupLastAssistant: {
-    borderTopLeftRadius: radiusVars['--radius-inner'],
+    borderStartStartRadius: radiusVars['--radius-inner'],
   },
-  // Grouped bubble corners — user (right side tight)
+  // Grouped bubble corners — user (inline-end side tight).
+  // Logical radii: inline-end is the right edge under LTR and the left edge
+  // under RTL (user tucks toward the end of the line in both directions).
   groupFirstUser: {
-    borderBottomRightRadius: radiusVars['--radius-inner'],
+    borderEndEndRadius: radiusVars['--radius-inner'],
   },
   groupMiddleUser: {
-    borderTopRightRadius: radiusVars['--radius-inner'],
-    borderBottomRightRadius: radiusVars['--radius-inner'],
+    borderStartEndRadius: radiusVars['--radius-inner'],
+    borderEndEndRadius: radiusVars['--radius-inner'],
   },
   groupLastUser: {
-    borderTopRightRadius: radiusVars['--radius-inner'],
+    borderStartEndRadius: radiusVars['--radius-inner'],
   },
 });
 

package/src/Chat/ChatSystemMessage.test.tsx

@@ -28,6 +28,11 @@ describe('ChatSystemMessage', () => {
     expect(screen.getByText('Today')).toBeTruthy();
   });
 
+  it('exposes the divider variant label as the separator accessible name', () => {
+    render(<ChatSystemMessage variant="divider">Today</ChatSystemMessage>);
+    expect(screen.getByRole('separator')).toHaveAccessibleName('Today');
+  });
+
   it('renders icon', () => {
     render(
       <ChatSystemMessage icon={<span data-testid="icon">*</span>}>

package/src/Chat/ChatToolCalls.tsx

@@ -37,6 +37,7 @@ import {Icon, type IconName} from '../Icon';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -363,6 +364,7 @@ function getToolCallKey(call: ChatToolCallItem): string {
 // =============================================================================
 
 function CallRow({call}: {call: ChatToolCallItem}) {
+  const t = useTranslator();
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
@@ -414,7 +416,11 @@ function CallRow({call}: {call: ChatToolCallItem}) {
           // as real text so it reaches screen readers, keyboard, and touch
           // users. Rendering it inside the row also folds it into the
           // accessible name of expandable (role="button") rows.
-          <VisuallyHidden>{`Error: ${call.errorMessage}`}</VisuallyHidden>
+          <VisuallyHidden>
+            {t('@astryx.chatToolCalls.error', {
+              message: call.errorMessage ?? '',
+            })}
+          </VisuallyHidden>
         )}
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
@@ -498,6 +504,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
  * ```
  */
 export function ChatToolCalls(props: ChatToolCallsProps) {
+  const t = useTranslator();
   const {
     calls,
     label: _customLabel,
@@ -580,7 +587,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
               <Icon icon="wrench" size="sm" color="inherit" />
             </span>
             <span {...stylex.props(styles.groupLabel)}>
-              {calls.length} tool calls
+              {t('@astryx.chatToolCalls.groupLabel', {count: calls.length})}
             </span>
           </>
         ) : (

package/src/Chat/useTriggerMenu.tsx

@@ -125,7 +125,7 @@ const styles = stylex.create({
     outline: 'none',
     backgroundColor: 'transparent',
     border: 'none',
-    textAlign: 'left' as const,
+    textAlign: 'start' as const,
     fontFamily: typographyVars['--font-family-body'],
     fontSize: typeScaleVars['--text-body-size'],
     lineHeight: typeScaleVars['--text-body-leading'],

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -121,6 +121,12 @@ export const docs = {
       description:
         'Status indicator. Displays a colored message box below the checkbox and sets aria-invalid for errors.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
   ],
   theming: {
     targets: [

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -13,6 +13,7 @@ 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 {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -543,3 +544,25 @@ describe('CheckboxInput', () => {
     });
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so this asserts that the
+// compiled output includes the forced-colors rule; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles a forced-colors fill so the indeterminate mark survives Windows High Contrast', () => {
+    render(
+      <CheckboxInput label="All" value="indeterminate" onChange={() => {}} />,
+    );
+    // The painted indeterminate bar would be stripped to Canvas (invisible);
+    // CanvasText keeps it perceivable.
+    expect(getForcedColorsRules()).toContain('background-color: canvastext;');
+  });
+
+  it('compiles a forced-colors color so the checkmark survives Windows High Contrast', () => {
+    render(<CheckboxInput label="Accept" value={true} onChange={() => {}} />);
+    // The check strokes with currentColor; forced colors leaves it the same
+    // white as the flattened box, so it needs its own CanvasText color to stay
+    // perceivable on the Canvas box.
+    expect(getForcedColorsRules()).toContain('color: canvastext;');
+  });
+});