@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/Table/plugins/sortable/useTableSortableState.tsx

@@ -18,10 +18,8 @@
  */
 
 import {useState, useMemo, useCallback, useRef} from 'react';
-import type {
-  TableSortState,
-  UseTableSortableConfig,
-} from './useTableSortable';
+import type {TableSortState, UseTableSortableConfig} from './useTableSortable';
+import {useCollator} from '../../../i18n/useCollator';
 
 // =============================================================================
 // Comparator Types
@@ -104,14 +102,16 @@ export interface UseTableSortableStateConfig<
    * two row items. Comparators should sort ascending — the hook flips the
    * sign for descending.
    *
-   * For keys not in this map, the hook falls back to `localeCompare` with
-   * `{ numeric: true }` on the stringified values.
+   * For keys not in this map, the hook falls back to an `Intl.Collator`
+   * comparison (`{numeric: true}`) on the stringified values, bound to the
+   * active `InternationalizationProvider` locale.
    *
    * @example
    * ```
+   * const collator = useCollator({numeric: true});
    * comparators: {
    *   age: (a, b) => a.age - b.age,
-   *   name: (a, b) => a.name.localeCompare(b.name),
+   *   name: (a, b) => collator.compare(a.name, b.name),
    * }
    * ```
    */
@@ -164,6 +164,7 @@ function defaultCompare<T extends Record<string, unknown>>(
   a: T,
   b: T,
   sortKey: string,
+  collator: Intl.Collator,
 ): number {
   const aVal = a[sortKey];
   const bVal = b[sortKey];
@@ -171,8 +172,10 @@ function defaultCompare<T extends Record<string, unknown>>(
   // null/undefined/NaN sort to the end. NaN must not reach the numeric fast
   // path: a NaN comparator result reads as "equal" to Array.sort, which makes
   // the comparator inconsistent and corrupts the order of the other rows.
-  const aMissing = aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
-  const bMissing = bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
+  const aMissing =
+    aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
+  const bMissing =
+    bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
   if (aMissing && bMissing) {
     return 0;
   }
@@ -188,14 +191,9 @@ function defaultCompare<T extends Record<string, unknown>>(
     return aVal - bVal;
   }
 
-  // string comparison with numeric collation
-  return toSortableString(aVal).localeCompare(
-    toSortableString(bVal),
-    undefined,
-    {
-      numeric: true,
-    },
-  );
+  // string comparison with numeric collation, bound to the provider locale
+  // via useCollator() rather than a raw localeCompare(value, locale) call.
+  return collator.compare(toSortableString(aVal), toSortableString(bVal));
 }
 
 // =============================================================================
@@ -208,7 +206,8 @@ function sortData<
 >(
   data: T[],
   sortState: TableSortState<TSortKey>,
-  comparators?: Partial<Record<TSortKey, TableSortComparator<T>>>,
+  comparators: Partial<Record<TSortKey, TableSortComparator<T>>> | undefined,
+  collator: Intl.Collator,
 ): T[] {
   if (sortState.length === 0) {
     return data;
@@ -218,7 +217,9 @@ function sortData<
     for (const entry of sortState) {
       const {sortKey, direction} = entry;
       const customCmp = comparators?.[sortKey];
-      const cmp = customCmp ? customCmp(a, b) : defaultCompare(a, b, sortKey);
+      const cmp = customCmp
+        ? customCmp(a, b)
+        : defaultCompare(a, b, sortKey, collator);
 
       if (cmp !== 0) {
         return direction === 'ascending' ? cmp : -cmp;
@@ -265,6 +266,7 @@ export function useTableSortableState<
     allowUnsortedState,
     isMultiSortEnabled,
   } = config;
+  const collator = useCollator({numeric: true});
 
   // Internal state (used in uncontrolled mode)
   const [internalSort, setInternalSort] =
@@ -287,14 +289,15 @@ export function useTableSortableState<
 
   // Sorted data — memoized on sort state + data identity
   const sortedData = useMemo(
-    () => sortData(data, sort, comparatorsRef.current),
-    [data, sort],
+    () => sortData(data, sort, comparatorsRef.current, collator),
+    [data, sort, collator],
   );
 
   // applySort — lets consumers sort arbitrary data with the current state
   const applySort = useCallback(
-    (inputData: T[]): T[] => sortData(inputData, sort, comparatorsRef.current),
-    [sort],
+    (inputData: T[]): T[] =>
+      sortData(inputData, sort, comparatorsRef.current, collator),
+    [sort, collator],
   );
 
   // Config ready for useTableSortable

package/src/Table/plugins/tree/useTableTreeData.tsx

@@ -242,7 +242,10 @@ const treeStyles = stylex.create({
     background: 'transparent',
     border: 'none',
     borderRadius: radiusVars['--radius-inner'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     color: colorVars['--color-icon-secondary'],
     transitionProperty: 'color, background-color',
     transitionDuration: '150ms',
@@ -251,11 +254,11 @@ const treeStyles = stylex.create({
     // Match IconButton ghost hover: subtle overlay background
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       color: colorVars['--color-icon-primary'],
     },
   },
@@ -296,7 +299,10 @@ const treeStyles = stylex.create({
   },
   /** Whole-row-click expansion: signal the row is interactive. */
   clickableRow: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
 });
 

package/src/TextArea/TextArea.doc.mjs

@@ -105,7 +105,7 @@ export const docs = {
       name: 'maxLength',
       type: 'number',
       description:
-        '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.',
+        '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.tsx

@@ -108,7 +108,7 @@ const styles = stylex.create({
     resize: 'vertical',
   },
   textareaDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   // Reserve start padding so text clears the start icon.
   // inline inset + 16px icon (sm) + 8px gap

package/src/TextInput/TextInput.tsx

@@ -71,7 +71,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
 });
 

package/src/Thumbnail/Thumbnail.tsx

@@ -159,7 +159,10 @@ const styles = stylex.create({
     color: colorVars['--color-icon-secondary'],
   },
   interactive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   // Hover/pressed overlay — the exact same treatment as ClickableCard and
   // SelectableCard. A transparent `::after` tints on hover/press instead of
@@ -183,14 +186,17 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
   },
   interactiveButton: {
     all: 'unset',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     display: 'block',
     width: '100%',
     height: '100%',

package/src/TimeInput/TimeInput.tsx

@@ -102,7 +102,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   inputInvalid: {
     color: colorVars['--color-text-secondary'],

package/src/Timestamp/Timestamp.test.tsx

@@ -257,6 +257,26 @@ describe('Timestamp', () => {
 
   // --- Standard display formats ---
 
+  it('updates absolute output when the provider locale changes', () => {
+    const value = '2026-01-25T12:00:00Z';
+    const timestamp = (locale: string) => (
+      <InternationalizationProvider locale={locale}>
+        <Timestamp
+          value={value}
+          format="date_long"
+          hasTooltip={false}
+          data-testid="ts"
+        />
+      </InternationalizationProvider>
+    );
+
+    const {rerender} = render(timestamp('en-US'));
+    expect(screen.getByTestId('ts')).toHaveTextContent('January 25, 2026');
+
+    rerender(timestamp('de-DE'));
+    expect(screen.getByTestId('ts')).toHaveTextContent('25. Januar 2026');
+  });
+
   it('renders date format', () => {
     render(
       <Timestamp value="2026-02-19T17:00:00Z" format="date" data-testid="ts" />,
@@ -441,7 +461,7 @@ describe('Timestamp', () => {
     );
 
     const longTz =
-      new Intl.DateTimeFormat(undefined, {timeZoneName: 'long'})
+      new Intl.DateTimeFormat('en', {timeZoneName: 'long'})
         .formatToParts(oneHourAgo)
         .find(p => p.type === 'timeZoneName')?.value ?? '';
     expect(longTz).not.toBe('');
@@ -462,7 +482,7 @@ describe('Timestamp', () => {
     );
 
     const tzPart = (form: 'short' | 'long') =>
-      new Intl.DateTimeFormat(undefined, {timeZoneName: form})
+      new Intl.DateTimeFormat('en', {timeZoneName: form})
         .formatToParts(date)
         .find(p => p.type === 'timeZoneName')?.value ?? '';
     const text = screen.getByTestId('ts').textContent ?? '';
@@ -673,7 +693,7 @@ describe('Timestamp', () => {
       // no-break spaces that jest-dom's matcher normalization would break on.
       const normalize = (s: string) => s.replace(/\s+/g, ' ');
       const datetime = new Date(el.getAttribute('datetime') ?? '');
-      const expected = new Intl.DateTimeFormat(undefined, {
+      const expected = new Intl.DateTimeFormat('en', {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
@@ -789,7 +809,7 @@ describe('Timestamp', () => {
       const datetime = new Date(
         screen.getByTestId('ts').getAttribute('datetime') ?? '',
       );
-      const expected = new Intl.DateTimeFormat(undefined, {
+      const expected = new Intl.DateTimeFormat('en', {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
@@ -1252,7 +1272,7 @@ describe('Timestamp', () => {
             data-testid="ts"
           />,
         );
-        const [line] = formatTooltipLines(new Date(VALUE), [{format}]);
+        const [line] = formatTooltipLines(new Date(VALUE), [{format}], 'en');
         expect(line.value).toBe(screen.getByTestId('ts').textContent);
       },
     );
@@ -1275,10 +1295,10 @@ describe('Timestamp', () => {
       );
       const date = new Date(VALUE);
       const tzPart = (form: 'short' | 'long') =>
-        new Intl.DateTimeFormat(undefined, {timeZoneName: form})
+        new Intl.DateTimeFormat('en', {timeZoneName: form})
           .formatToParts(date)
           .find(p => p.type === 'timeZoneName')?.value ?? '';
-      const [line] = formatTooltipLines(date, [{format: 'full'}]);
+      const [line] = formatTooltipLines(date, [{format: 'full'}], 'en');
       expect(screen.getByTestId('ts').getAttribute('aria-label')).toBe(
         line.value.replace(tzPart('short'), tzPart('long')),
       );

package/src/Timestamp/Timestamp.tsx

@@ -23,6 +23,7 @@ import type {TextType, TextSize, TextColor, TextWeight} from '../theme/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {formatInstant} from './formatInstant';
@@ -419,6 +420,7 @@ export function Timestamp({
   'data-testid': testId,
 }: TimestampProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const timeRef = useRef<HTMLTimeElement>(null);
   const [now, setNow] = useState(() => new Date());
 
@@ -448,16 +450,18 @@ export function Timestamp({
       : effectiveFormat === 'relative_short'
         ? getRelativeTimeShortString(date, now)
         : isAbsoluteFormat(effectiveFormat)
-          ? formatInstant(date, effectiveFormat, {isTimezoneShown})
+          ? formatInstant(date, effectiveFormat, locale, {isTimezoneShown})
           : '';
 
   // Full absolute text for the tooltip (visible — keeps the compact timezone
   // abbreviation) and for the AT-facing aria-label, which spells the timezone
   // out in full: abbreviations like "PST" or "GMT+2" are unexpanded
   // abbreviations to a screen-reader user (WCAG 3.1.4).
-  const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
+  const fullAbsoluteText = isValidDate
+    ? formatInstant(date, 'full', locale)
+    : '';
   const ariaLabelText = isValidDate
-    ? formatInstant(date, 'full', {timeZoneNameStyle: 'long'})
+    ? formatInstant(date, 'full', locale, {timeZoneNameStyle: 'long'})
     : '';
 
   // Live updates
@@ -506,7 +510,7 @@ export function Timestamp({
   const lines: ReadonlyArray<TimestampTooltipLine> =
     entries === undefined
       ? [{value: fullAbsoluteText, isCopyable: true}]
-      : formatTooltipLines(date, entries);
+      : formatTooltipLines(date, entries, locale);
 
   const timestampProps = mergeProps(
     themeProps('timestamp', {format: effectiveFormat}),

package/src/Timestamp/formatInstant.ts

@@ -30,6 +30,7 @@
  */
 
 import {SHARED_DATE_FORMAT_OPTIONS, getTimeZoneParts} from '../utils/plainDate';
+import type {Locale} from '../i18n/types';
 import type {TimestampFormat} from './Timestamp';
 
 // =============================================================================
@@ -159,12 +160,13 @@ function getWallClock(date: Date, timeZone: string | undefined): WallClock {
 /**
  * Renders one instant in one absolute format.
  *
- * Pure: the same arguments always produce the same string for a given host
+ * Pure: the same arguments always produce the same string for the requested
  * locale (and, when no `timeZone` is given, host zone).
  */
 export function formatInstant(
   date: Date,
   format: InstantFormat,
+  locale: Locale,
   {
     timeZone,
     isTimezoneShown = false,
@@ -176,39 +178,39 @@ export function formatInstant(
 
   switch (format) {
     case 'full':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...FULL_OPTIONS,
         timeZoneName: timeZoneNameStyle,
         ...zone,
       }).format(date);
 
     case 'date':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date,
         ...zone,
       }).format(date);
 
     case 'date_long':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date_long,
         ...zone,
       }).format(date);
 
     case 'date_weekday':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date_weekday,
         ...zone,
       }).format(date);
 
     case 'date_time':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...DATE_TIME_OPTIONS,
         ...zoneName,
         ...zone,
       }).format(date);
 
     case 'time':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...TIME_OPTIONS,
         ...zoneName,
         ...zone,

package/src/Timestamp/tooltipEntries.test.ts

@@ -16,12 +16,17 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {SHARED_DATE_FORMAT_OPTIONS} from '../utils/plainDate';
-import {formatTooltipLines} from './tooltipEntries';
+import {formatTooltipLines as formatTooltipLinesForLocale} from './tooltipEntries';
+
+const formatTooltipLines = (
+  date: Parameters<typeof formatTooltipLinesForLocale>[0],
+  entries: Parameters<typeof formatTooltipLinesForLocale>[1],
+) => formatTooltipLinesForLocale(date, entries, 'en-US');
 
 /** 2026-02-19T17:00:00Z — chosen so several zones land on different dates. */
 const INSTANT = new Date('2026-02-19T17:00:00Z');
 
-const LOCAL_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const LOCAL_ZONE = Intl.DateTimeFormat('en-US').resolvedOptions().timeZone;
 
 describe('formatTooltipLines', () => {
   // --- Explicit zones: exact, locale-free, TZ-agnostic ---
@@ -86,7 +91,7 @@ describe('formatTooltipLines', () => {
       for (const timezoneID of ['UTC', 'Asia/Tokyo']) {
         const [line] = formatTooltipLines(INSTANT, [{timezoneID, format}]);
         expect(line.value).toBe(
-          new Intl.DateTimeFormat(undefined, {
+          new Intl.DateTimeFormat('en-US', {
             ...SHARED_DATE_FORMAT_OPTIONS[format],
             timeZone: timezoneID,
           }).format(INSTANT),
@@ -208,7 +213,7 @@ describe('formatTooltipLines', () => {
       {format: 'date_time'},
       {format: 'system_date_time'},
     ]);
-    const localName = new Intl.DateTimeFormat(undefined, {
+    const localName = new Intl.DateTimeFormat('en-US', {
       timeZoneName: 'short',
     })
       .formatToParts(INSTANT)
@@ -230,7 +235,7 @@ describe('formatTooltipLines', () => {
     // aria-describedby, and that element's accessible name is the LOCAL
     // absolute time. A lone foreign-zone line with no marker is therefore
     // announced right after a local time, with nothing to say it is not one.
-    const zoneName = new Intl.DateTimeFormat(undefined, {
+    const zoneName = new Intl.DateTimeFormat('en-US', {
       timeZone: 'Asia/Tokyo',
       timeZoneName: 'short',
     })
@@ -248,7 +253,7 @@ describe('formatTooltipLines', () => {
     // The consumer never named a zone, so there is nothing to disambiguate
     // against — this must stay as bare as the visible text is by default.
     const [line] = formatTooltipLines(INSTANT, [{format: 'date_time'}]);
-    const localName = new Intl.DateTimeFormat(undefined, {
+    const localName = new Intl.DateTimeFormat('en-US', {
       timeZoneName: 'short',
     })
       .formatToParts(INSTANT)

package/src/Timestamp/tooltipEntries.ts

@@ -24,6 +24,7 @@
 import {devWarn} from '../utils/devWarning';
 import {formatInstant} from './formatInstant';
 import type {InstantFormat} from './formatInstant';
+import type {Locale} from '../i18n/types';
 
 // =============================================================================
 // Types
@@ -130,7 +131,9 @@ function resolveTimezoneID(timezoneID: string | undefined): string | undefined {
   // degrade to the viewer's zone and say so, mirroring how an unparseable
   // `value` is handled in Timestamp.tsx.
   try {
-    new Intl.DateTimeFormat(undefined, {timeZone: timezoneID});
+    // Locale does not affect time-zone identifier validity; pin one so this
+    // validation path stays explicit and deterministic.
+    new Intl.DateTimeFormat('en-US', {timeZone: timezoneID});
   } catch {
     if (!warnedTimezoneIDs.has(timezoneID)) {
       warnedTimezoneIDs.add(timezoneID);
@@ -202,6 +205,7 @@ function shouldShowZoneName(
 export function formatTooltipLines(
   date: Date,
   entries: ReadonlyArray<TimestampTooltipEntry>,
+  locale: Locale,
 ): ReadonlyArray<TimestampTooltipLine> {
   const resolved = entries.map(entry => resolveTimezoneID(entry.timezoneID));
   const hasMultipleZones = new Set(resolved.map(zoneKey)).size > 1;
@@ -213,7 +217,7 @@ export function formatTooltipLines(
     return {
       ...(entry.label === undefined ? {} : {label: entry.label}),
       isCopyable: entry.isCopyable ?? false,
-      value: formatInstant(date, format, {
+      value: formatInstant(date, format, locale, {
         timeZone,
         isTimezoneShown: shouldShowZoneName(
           format,

package/src/Toast/Toast.tsx

@@ -92,9 +92,10 @@ export interface ToastProps {
  * Individual toast notification.
  *
  * Renders with inverted surface colors for the default variant,
- * and error-inverted for the error variant. Uses MediaTheme
- * to set the correct token context for children. Pauses auto-dismiss
- * on hover and focus.
+ * and error-inverted for the error variant. Applies MediaTheme for that
+ * surface, unless the painted colors make the chosen side unreadable —
+ * a theme is free to define an "inverted" background that is not.
+ * Pauses auto-dismiss on hover and focus.
  *
  * @example
  * ```
@@ -196,10 +197,11 @@ export function Toast({
   }, [onDismiss]);
 
   const isError = type === 'error';
-  // Determine media mode: inverted surface is always dark in light mode,
-  // always light in dark mode. Error toast is always on a dark surface.
+  // The surface is *usually* dark in light mode and light in dark mode, but a
+  // theme can define --color-background-inverted as anything — so the mode is
+  // measured, not assumed. This is only the pre-measurement fallback.
   const {mode} = useTheme();
-  const mediaMode = isError || mode === 'light' ? 'dark' : 'light';
+  const fallbackMediaMode = isError || mode === 'light' ? 'dark' : 'light';
 
   return (
     <div
@@ -218,7 +220,7 @@ export function Toast({
           isExiting && styles.exiting,
         ),
       )}>
-      <MediaTheme mode={mediaMode}>
+      <MediaTheme mode="auto" fallback={fallbackMediaMode}>
         <div {...stylex.props(styles.inner)}>
           <div {...stylex.props(styles.content)}>{body}</div>
 

package/src/Token/Token.tsx

@@ -136,20 +136,23 @@ const styles = stylex.create({
     minWidth: 0,
   },
   interactive: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-image',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
   },
   disabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
     pointerEvents: 'none' as const,
   },
@@ -166,7 +169,10 @@ const styles = stylex.create({
   },
   invisibleButton: {
     all: 'unset',
-    cursor: 'inherit',
+    cursor: {
+      default: 'inherit',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     font: 'inherit',
     color: 'inherit',
     outline: 'none',
@@ -181,7 +187,10 @@ const styles = stylex.create({
     position: 'relative',
     padding: 0,
     marginInlineEnd: `calc(-1 * ${spacingVars['--spacing-1']})`,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-full'],
     width: '16px',
     height: '16px',

package/src/Tokenizer/Tokenizer.tsx

@@ -224,7 +224,10 @@ const styles = stylex.create({
     position: 'relative',
     flexWrap: 'wrap',
     gap: spacingVars['--spacing-1'],
-    cursor: 'text',
+    cursor: {
+      default: 'text',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     height: 'auto',
   },
   wrapperWithTokens: {