@astryxdesign/core 0.4.2 → 0.4.3-canary.0a9618e

package/src/MultiSelector/MultiSelector.tsx

@@ -71,7 +71,7 @@ import {
   getSelectableOptions,
 } from '../Selector/utils';
 import {useMultiCombobox} from './hooks';
-import {getInputARIA, mergeProps} from '../utils';
+import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {useAnnounce} from '../hooks/useAnnounce';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -1182,6 +1182,15 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           }
         }}
         onKeyDown={e => {
+          // An in-progress IME composition uses these same keys (Enter to
+          // commit the candidate, Escape/Arrows to navigate the candidate
+          // window); the composing keydown fires before compositionend, so
+          // without this guard a Korean/Japanese/Chinese user committing a
+          // syllable with Enter would instead toggle the highlighted option.
+          // See utils/ime.ts.
+          if (isImeKeyEvent(e.nativeEvent)) {
+            return;
+          }
           // Arrow keys navigate options; Enter toggles; Escape closes.
           // Space and Home/End are left to the input (type a space / move
           // the caret) per the APG editable combobox; PageUp/PageDown are

package/src/NumberInput/NumberInput.test.tsx

@@ -1340,6 +1340,24 @@ describe('NumberInput stepping', () => {
     expect(onChange).toHaveBeenLastCalledWith(4);
   });
 
+  it('does not step or commit on a composing keydown (IME)', () => {
+    const onChange = vi.fn();
+    render(<NumberInput label="Amount" value={5} onChange={onChange} />);
+    const input = screen.getByRole('spinbutton');
+
+    // The field is type="text", so an IME composes into it. Enter commits the
+    // candidate and the arrows walk the candidate window; neither should reach
+    // the stepping or commit paths. Both signals a browser may report.
+    fireEvent.keyDown(input, {key: 'ArrowUp', isComposing: true});
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 229});
+    fireEvent.keyDown(input, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenLastCalledWith(6);
+  });
+
   it('lets onKeyDown cancel keyboard stepping', () => {
     const onChange = vi.fn();
     const onKeyDown = vi.fn((event: React.KeyboardEvent<HTMLInputElement>) =>

package/src/NumberInput/NumberInput.tsx

@@ -169,7 +169,7 @@ export type {
   InputStatus as NumberInputStatus,
   InputStatusType as NumberInputStatusType,
 } from '../Field';
-import {mergeProps, mergeRefs} from '../utils';
+import {isImeKeyEvent, mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -746,6 +746,14 @@ export function NumberInput({
   // Handle keyboard events
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // The field is type="text" for formatted display, so an IME can compose
+      // into it: Enter commits the candidate and the arrows walk the candidate
+      // window. The composing keydown fires before compositionend, so without
+      // this guard those keystrokes would commit or step the value instead.
+      // See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       const hasModifier = e.altKey || e.ctrlKey || e.metaKey || e.shiftKey;
       if (!hasModifier && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         onKeyDown?.(e);

package/src/PowerSearch/PowerSearch.test.tsx

@@ -158,6 +158,41 @@ describe('PowerSearch', () => {
     expect(screen.getByRole('combobox')).toHaveFocus();
   });
 
+  describe('token value truncation (#4759)', () => {
+    it('truncates token values by characters, not code units', () => {
+      const truncConfig: PowerSearchConfig = {
+        name: 'trunc',
+        fields: [
+          {
+            key: 'status',
+            label: 'Status',
+            operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
+          },
+        ],
+      };
+      // 14 emoji = 28 code units but 14 user-perceived characters.
+      // adjustedMaxLength = max(15 - 'Status'.length - 'is'.length, 10) = 10,
+      // so the value truncates only past 13 characters, cutting at 10.
+      render(
+        <PowerSearch
+          config={truncConfig}
+          filters={[
+            {
+              field: 'status',
+              operator: 'is',
+              value: {type: 'string', value: '\u{1F600}'.repeat(14)},
+            },
+          ]}
+          onChange={() => {}}
+          maxTokenLength={15}
+        />,
+      );
+      expect(
+        screen.getByText('\u{1F600}'.repeat(10) + '...'),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('startIcon', () => {
     it('does not render a start icon when omitted', () => {
       render(<PowerSearch config={config} filters={[]} onChange={() => {}} />);
@@ -425,11 +460,15 @@ describe('PowerSearch', () => {
   });
 });
 
-
 describe('PowerSearch statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -439,7 +478,13 @@ describe('PowerSearch statusVariant forwarding', () => {
 
   it('forwards statusVariant="detached" to the underlying Field status', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',

package/src/PowerSearch/PowerSearch.tsx

@@ -54,6 +54,7 @@ import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
+import {truncateCharacters} from '../utils/characters';
 import {useTranslator} from '../i18n';
 import type {
   PowerSearchConfig,
@@ -117,7 +118,9 @@ const resultCountStyles = stylex.create({
 });
 
 function truncateString(value: string, limit: number): string {
-  return value.length > limit + 3 ? value.slice(0, limit) + '...' : value;
+  // Same semantics as before — strings within limit + 3 pass through, longer
+  // ones cut to limit + '...' — but counted in characters, not code units.
+  return truncateCharacters(value, limit + 3, '...');
 }
 
 function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -20,7 +20,7 @@ import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
-import {isImeKeyEvent} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';

package/src/PowerSearch/formatFilterValue.test.ts

@@ -62,6 +62,28 @@ describe('formatFilterValue', () => {
         'abcde',
       );
     });
+
+    it('truncates by characters, never splitting an emoji (#4759)', () => {
+      // Four surrogate-pair emoji: 8 code units, 4 user-perceived characters.
+      // The exact-string assertion also proves no surrogate pair was split.
+      const out = fmt(
+        {type: 'string'},
+        {type: 'string', value: '\u{1F600}'.repeat(4)},
+        3,
+      );
+      expect(out).toBe('\u{1F600}'.repeat(2) + ELLIPSIS);
+    });
+
+    it('keeps multi-unit characters within maxLength intact (#4759)', () => {
+      // Three emoji are 6 code units but only 3 user-perceived characters.
+      expect(
+        fmt(
+          {type: 'string'},
+          {type: 'string', value: '\u{1F600}'.repeat(3)},
+          3,
+        ),
+      ).toBe('\u{1F600}'.repeat(3));
+    });
   });
 
   describe('integer / float', () => {

package/src/PowerSearch/formatFilterValue.ts

@@ -13,12 +13,10 @@
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {TranslatorFn} from '../i18n';
+import {truncateCharacters} from '../utils/characters';
 
 function truncate(str: string, maxLength: number): string {
-  if (str.length <= maxLength) {
-    return str;
-  }
-  return str.slice(0, maxLength - 1) + '\u2026';
+  return truncateCharacters(str, maxLength);
 }
 
 function formatEnumLabel(

package/src/Selector/Selector.test.tsx

@@ -1000,6 +1000,39 @@ describe('Selector', () => {
       ).toBeInTheDocument();
     });
 
+    it('does not select the highlighted option on a composing Enter (IME)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          onChange={onChange}
+          hasSearch
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      const search = screen.getByRole('combobox', h);
+      // Filter to Banana and highlight it so an unguarded Enter would commit a
+      // selection.
+      await user.type(search, 'ban');
+      await user.keyboard('{ArrowDown}');
+      expect(search).toHaveAttribute('aria-activedescendant');
+
+      // The browser fires this composing keydown for the Enter that commits an
+      // IME candidate (isComposing: true, or the legacy keyCode 229) before
+      // compositionend writes the syllable. It must NOT be read as "select the
+      // highlighted option".
+      fireEvent.keyDown(search, {key: 'Enter', isComposing: true});
+      expect(onChange).not.toHaveBeenCalled();
+      fireEvent.keyDown(search, {key: 'Enter', keyCode: 229});
+      expect(onChange).not.toHaveBeenCalled();
+
+      // A real, non-composing Enter still selects the highlighted option.
+      fireEvent.keyDown(search, {key: 'Enter'});
+      expect(onChange).toHaveBeenCalledWith('Banana');
+    });
+
     describe('result announcements', () => {
       it('announces the match count politely while searching', async () => {
         const user = userEvent.setup();

package/src/Selector/Selector.tsx

@@ -72,7 +72,7 @@ import {
 import {useCombobox, useSelectedItemOffset} from './hooks';
 import {useTypeahead} from '../hooks/useTypeahead';
 import {SelectorOption} from './SelectorOption';
-import {getInputARIA, mergeProps} from '../utils';
+import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -1055,6 +1055,15 @@ export function Selector<T extends SelectorOptionType>(
           }
         }}
         onKeyDown={e => {
+          // An in-progress IME composition uses these same keys (Enter to
+          // commit the candidate, Escape/Arrows to navigate the candidate
+          // window); the composing keydown fires before compositionend, so
+          // without this guard a Korean/Japanese/Chinese user committing a
+          // syllable with Enter would instead select the highlighted option.
+          // See utils/ime.ts.
+          if (isImeKeyEvent(e.nativeEvent)) {
+            return;
+          }
           // Arrow keys navigate options; Enter selects; Escape closes.
           // Home/End are left to the input for caret movement (APG editable
           // combobox); PageUp/PageDown are the sanctioned substitute for

package/src/Switch/Switch.test.tsx

@@ -262,6 +262,22 @@ describe('Switch', () => {
     expect(screen.getByLabelText('Toggle row')).toBeInTheDocument();
   });
 
+  it('drops the label gap when isLabelHidden so the row is only as wide as the track', () => {
+    const {rerender} = render(
+      <Switch
+        label="Toggle row"
+        isLabelHidden
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const row = screen.getByRole('switch').parentElement!.parentElement!;
+    expect(getComputedStyle(row).gap).toMatch(/^0(px)?$/);
+
+    rerender(<Switch label="Toggle row" value={false} onChange={() => {}} />);
+    expect(getComputedStyle(row).gap).not.toMatch(/^0(px)?$/);
+  });
+
   it('keeps description linked via aria-describedby when isLabelHidden', () => {
     render(
       <Switch

package/src/Switch/Switch.tsx

@@ -135,6 +135,12 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
   },
+  // A hidden label is sr-only, so its wrapper is a zero-width flex item — the
+  // row gap would still be painted beside the track, making the field box
+  // wider than the control it contains. Matches CheckboxInput.
+  containerLabelHidden: {
+    gap: 0,
+  },
   containerSpread: {
     justifyContent: 'space-between',
     width: '100%',
@@ -655,6 +661,7 @@ export function Switch({
         }}
         {...stylex.props(
           styles.container,
+          isLabelHidden && styles.containerLabelHidden,
           labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
         )}>

package/src/Table/Table.test.tsx

@@ -95,6 +95,12 @@ describe('columnUtils', () => {
     it('handles single character', () => {
       expect(capitalize('a')).toBe('A');
     });
+
+    it('uppercases an astral-plane letter without splitting it (#4759)', () => {
+      // Deseret 𐐨 (U+10428) uppercases to 𐐀 (U+10400); charAt(0) would grab
+      // half the surrogate pair and leave the string unchanged.
+      expect(capitalize('\u{10428}pple')).toBe('\u{10400}pple');
+    });
   });
 
   describe('generateColumns', () => {

package/src/Table/columnUtils.ts

@@ -13,6 +13,7 @@
 
 import type {CSSProperties, ReactNode} from 'react';
 import type {TableColumn, ProportionalWidth, PixelWidth} from './types';
+import {firstCharacter} from '../utils/characters';
 
 /** Default minimum width (in px) for proportional columns. */
 export const DEFAULT_MIN_COLUMN_WIDTH = 120;
@@ -168,7 +169,8 @@ export function capitalize(str: string): string {
   if (str.length === 0) {
     return str;
   }
-  return str.charAt(0).toUpperCase() + str.slice(1);
+  const first = firstCharacter(str);
+  return first.toUpperCase() + str.slice(first.length);
 }
 
 /**

package/src/TextArea/TextArea.doc.mjs

@@ -105,7 +105,7 @@ export const docs = {
       name: 'maxLength',
       type: 'number',
       description:
-        'Maximum number of characters allowed. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced.',
+        'Maximum number of characters allowed, counted as user-perceived characters — an emoji or flag sequence counts as one. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced. Consumers validating the limit should count with characterCount (exported from the package) so enforcement matches the displayed count.',
     },
     {
       name: 'status',

package/src/TextArea/TextArea.test.tsx

@@ -504,6 +504,33 @@ describe('TextArea', () => {
       expect(screen.getByRole('textbox')).not.toHaveAttribute('maxlength');
     });
 
+    it('counts user-perceived characters, not code units (#4759)', () => {
+      // Two surrogate-pair emoji: 4 code units, but 2 user-perceived characters.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}\u{1F600}'}
+          onChange={() => {}}
+          maxLength={5}
+        />,
+      );
+      expect(screen.getByText('2/5')).toBeInTheDocument();
+    });
+
+    it('measures the over-limit state in characters (#4759)', () => {
+      // Three ZWJ family emoji: 33 code units, 3 user-perceived characters.
+      const family = '\u{1F468}‍\u{1F469}‍\u{1F467}‍\u{1F466}';
+      render(
+        <TextArea
+          label="Description"
+          value={family.repeat(3)}
+          onChange={() => {}}
+          maxLength={2}
+        />,
+      );
+      expect(screen.getByText('3/2')).toBeInTheDocument();
+    });
+
     it('counter updates as user types (controlled)', async () => {
       const user = userEvent.setup();
       function Wrapper() {
@@ -570,6 +597,51 @@ describe('TextArea', () => {
       });
     });
 
+    it('announces zone transitions using character counts (#4759)', async () => {
+      function Wrapper() {
+        const [val, setVal] = useState('x'.repeat(7));
+        return (
+          <TextArea
+            label="Description"
+            value={val}
+            onChange={setVal}
+            maxLength={10}
+          />
+        );
+      }
+      render(<Wrapper />);
+      // Appending two emoji makes 9 characters (11 code units): near the limit
+      // with 1 remaining. Code-unit counting would call this over the limit
+      // and announce assertively instead.
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: {value: 'x'.repeat(7) + '\u{1F600}\u{1F600}'},
+      });
+      const politeRegion = () =>
+        document.querySelector('[data-astryx-live-region="polite"]');
+      const assertiveRegion = () =>
+        document.querySelector('[data-astryx-live-region="assertive"]');
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('1 character remaining');
+      });
+      expect(assertiveRegion()).not.toHaveTextContent('over the limit');
+    });
+
+    it('does not flag over-limit while characters fit, even when code units exceed (#4759)', () => {
+      // Three emoji: 6 code units but 3 user-perceived characters — within a
+      // maxLength of 4, so no error state anywhere.
+      render(
+        <TextArea
+          label="Description"
+          value={'\u{1F600}'.repeat(3)}
+          onChange={() => {}}
+          maxLength={4}
+        />,
+      );
+      const counter = screen.getByText('3/4');
+      expect(counter.querySelector('svg')).toBeNull();
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+    });
+
     it('shows a non-color over-limit indicator icon when exceeded', () => {
       const {container} = render(
         <TextArea

package/src/TextArea/TextArea.tsx

@@ -22,6 +22,7 @@ import {
   useTransition,
   useRef,
   useCallback,
+  useMemo,
   type ChangeEvent,
   type ClipboardEvent,
   type FocusEvent,
@@ -53,6 +54,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {characterCount} from '../utils/characters';
 import {useTranslator} from '../i18n';
 
 const COUNTER_WARNING_THRESHOLD = 0.8;
@@ -312,10 +314,13 @@ export interface TextAreaProps extends Omit<
    */
   onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
   /**
-   * Maximum number of characters allowed.
-   * When set, displays a character counter below the textarea.
+   * Maximum number of characters allowed, counted as user-perceived
+   * characters — an emoji or flag sequence counts as one. When set,
+   * displays a character counter below the textarea.
    * Does not enforce the limit natively — the counter shows error styling
-   * when exceeded, and the consumer can validate via onChange.
+   * when exceeded, and the consumer can validate via onChange. Validate with
+   * `characterCount` (exported from this package) rather than `value.length`
+   * so enforcement matches the displayed count.
    */
   maxLength?: number;
   /**
@@ -482,7 +487,11 @@ export function TextArea({
       return;
     }
     const newValue = e.target.value;
-    announceCounter(newValue.length);
+    // Guarded here, not just inside announceCounter, so textareas without a
+    // maxLength never pay for segmenting the whole value on each keystroke.
+    if (maxLength != null) {
+      announceCounter(characterCount(newValue));
+    }
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
       startTransition(async () => {
@@ -492,6 +501,15 @@ export function TextArea({
     }
   };
 
+  // Counter semantics count user-perceived characters, so an emoji or flag
+  // sequence counts as one character, not its code units.
+  // Only measured when a counter exists — segmentation is O(value length),
+  // and memoized so re-renders that keep the same value skip it entirely.
+  const valueLength = useMemo(
+    () => (maxLength != null ? characterCount(optimisticValue) : 0),
+    [maxLength, optimisticValue],
+  );
+
   const effectivelyDisabled = isDisabled || isBusy;
 
   // Focus textarea when clicking anywhere on the wrapper (icons, padding, etc.)
@@ -583,7 +601,7 @@ export function TextArea({
           aria-required={isRequired && !isOptional ? 'true' : undefined}
           aria-invalid={
             status?.type === 'error' ||
-            (maxLength != null && optimisticValue.length > maxLength)
+            (maxLength != null && valueLength > maxLength)
               ? 'true'
               : undefined
           }
@@ -614,15 +632,15 @@ export function TextArea({
             id={counterID}
             {...stylex.props(
               styles.counter,
-              optimisticValue.length > maxLength && styles.counterError,
+              valueLength > maxLength && styles.counterError,
             )}>
-            {optimisticValue.length > maxLength && (
+            {valueLength > maxLength && (
               // Non-color cue so the over-limit state isn't conveyed by the red
               // color alone (WCAG 1.4.1). Decorative — the count text and the
               // live-region announcement carry the meaning.
               <Icon icon="warning" size="sm" />
             )}
-            {optimisticValue.length}/{maxLength}
+            {valueLength}/{maxLength}
           </div>
         )}
       </div>

package/src/TimeInput/TimeInput.test.tsx

@@ -42,6 +42,29 @@ describe('TimeInput', () => {
     expect(screen.getByPlaceholderText('Pick a time')).toBeInTheDocument();
   });
 
+  it('does not step the time on a composing ArrowUp/ArrowDown (IME)', () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText('Time');
+
+    // An IME candidate window navigates with the arrows; a composing keydown
+    // (isComposing / legacy keyCode 229) must not step the time value.
+    fireEvent.keyDown(input, {key: 'ArrowUp', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps the time by one minute.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('14:31');
+  });
+
   it('displays formatted time in 12h format', () => {
     render(
       <TimeInput

package/src/TimeInput/TimeInput.tsx

@@ -55,6 +55,7 @@ import {
   formatDisplayTime24h,
   formatISOTime,
   adjustTime,
+  isImeKeyEvent,
   isTimeInRange,
   mergeProps,
   mergeRefs,
@@ -530,6 +531,13 @@ export function TimeInput({
   // Handle keyboard navigation on input
   const handleInputKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
+      // window uses those same arrows to navigate candidates, so guard the
+      // composing keydown (fires before compositionend) to avoid stealing them
+      // mid-composition. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       // Arrow-key adjustment mutates the value; block it while showing a
       // disabled reason (the input keeps focusability via aria-disabled).
       if (isDisabled) {

package/src/Tooltip/useTooltip.tsx

@@ -28,6 +28,7 @@ import {
 } from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {themeProps} from '../utils/themeProps';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   colorVars,
   radiusVars,
@@ -454,7 +455,9 @@ export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
       if (e.key !== 'Escape') {
         return;
       }
-      if (e.isComposing || e.keyCode === 229) {
+      if (isImeKeyEvent(e)) {
+        // Ignore Escape that is committing/cancelling an IME composition;
+        // see utils/ime.ts for why.
         return;
       }
       clearTimeouts();

package/src/TreeList/TreeList.doc.mjs

@@ -24,7 +24,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},
@@ -104,7 +104,7 @@ export const docsZh = {
   group: 'TreeList',
   theming: {
     targets: [
-      {className: 'astryx-tree-list', visualProps: ['density']},
+      {className: 'astryx-tree-list', visualProps: ['density', 'variant']},
       {className: 'astryx-tree-list-item', visualProps: ['density'], states: ['selected', 'disabled']},
       {className: 'astryx-tree-list-chevron', states: ['state']},
       {className: 'astryx-tree-list-item-label', states: ['selected']},

package/src/TreeList/TreeList.tsx

@@ -332,7 +332,7 @@ export function TreeList({
       ref={ref}
       data-testid={testId}
       {...mergeProps(
-        themeProps('tree-list', {density}),
+        themeProps('tree-list', {density, variant}),
         stylex.props(styles.root, xstyle),
         className,
         style,