@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/src/Calendar/hooks/useCalendarDays.ts

@@ -4,7 +4,7 @@
 
 /**
  * @file useCalendarDays.ts
- * @input Uses React useMemo, PlainDate utilities
+ * @input Uses React context via use(), useMemo, PlainDate utilities, generated CLDR weekday data
  * @output Exports useCalendarDays hook for generating calendar day grids
  * @position Calendar-specific hook; used by Calendar
  *
@@ -12,7 +12,7 @@
  * - /packages/core/src/Calendar/hooks/index.ts
  */
 
-import {useMemo} from 'react';
+import {use, useMemo} from 'react';
 import type {DayOfWeek, ISODateString} from '../../utils/dateTypes';
 import {
   type PlainDate,
@@ -21,6 +21,8 @@ import {
   plainDateDayOfWeek,
   plainDateAddDays,
 } from '../../utils/plainDate';
+import {InternationalizationContext} from '../../i18n/InternationalizationContext';
+import {getStandaloneShortWeekdayNames} from '../getStandaloneShortWeekdayNames';
 
 /**
  * Represents a single day in the calendar grid.
@@ -84,6 +86,7 @@ export function useCalendarDays(
   options: UseCalendarDaysOptions,
 ): UseCalendarDaysReturn {
   const {year, month, weekStartsOn = 0, hasVariableRowCount = false} = options;
+  const {locale} = use(InternationalizationContext);
 
   // Calculate grid structure
   const gridInfo = useMemo(() => {
@@ -108,15 +111,15 @@ export function useCalendarDays(
     };
   }, [year, month, weekStartsOn, hasVariableRowCount]);
 
-  // Generate day names
+  // Generated strings avoid Date anchors, so weekday headers cannot shift with
+  // the runtime timezone. Keep numeric indices as the rotation source of truth.
   const dayNames = useMemo(() => {
-    const names = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-    const rotated: string[] = [];
-    for (let i = 0; i < 7; i++) {
-      rotated.push(names[(i + weekStartsOn) % 7]);
-    }
-    return rotated;
-  }, [weekStartsOn]);
+    const names = getStandaloneShortWeekdayNames(locale);
+    return Array.from(
+      {length: 7},
+      (_, index) => names[(index + weekStartsOn) % 7],
+    );
+  }, [locale, weekStartsOn]);
 
   // Generate days array
   const days = useMemo(() => {

package/src/Calendar/hooks/useCalendarNavigation.ts

@@ -12,7 +12,7 @@
  * - /packages/core/src/Calendar/hooks/index.ts
  */
 
-import {useState, useMemo, useCallback} from 'react';
+import {use, useState, useMemo, useCallback} from 'react';
 import type {ISODateString} from '../../utils/dateTypes';
 import {
   type PlainDate,
@@ -25,6 +25,7 @@ import {
   plainDateFormat,
   DATE_FORMAT_MONTH_YEAR,
 } from '../../utils/plainDate';
+import {InternationalizationContext} from '../../i18n';
 
 /**
  * Configuration for calendar navigation
@@ -98,6 +99,7 @@ export function useCalendarNavigation(
     onFocusDateChange,
     numberOfMonths = 1,
   } = options;
+  const {locale} = use(InternationalizationContext);
 
   // Pending focus target after month navigation
   const [pendingFocus, setPendingFocus] = useState<ISODateString | null>(null);
@@ -135,12 +137,12 @@ export function useCalendarNavigation(
   // Format month header
   const monthYearLabel = useMemo(() => {
     if (numberOfMonths === 1) {
-      return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR);
+      return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR, locale);
     }
     return visibleMonths
-      .map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR))
+      .map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR, locale))
       .join(' – ');
-  }, [visibleMonths, numberOfMonths]);
+  }, [visibleMonths, numberOfMonths, locale]);
 
   // Navigate to previous/next month
   const navigateMonth = useCallback(

package/src/Calendar/standaloneShortWeekdayNames.generated.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @generated by scripts/generate-cldr-weekdays.mjs from Unicode CLDR 48.2.0.
+ * Do not edit by hand. Run `pnpm generate:cldr-weekdays` instead.
+ */
+
+export type StandaloneShortWeekdayNames = readonly [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+];
+
+export const standaloneShortWeekdayNamesByLocale = {
+  af: ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.'],
+  ar: ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'],
+  'ar-SA': ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'],
+  ca: ['dg.', 'dl.', 'dt.', 'dc.', 'dj.', 'dv.', 'ds.'],
+  cs: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
+  da: ['sø.', 'ma.', 'ti.', 'on.', 'to.', 'fr.', 'lø.'],
+  de: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+  el: ['Κυ', 'Δε', 'Τρ', 'Τε', 'Πέ', 'Πα', 'Σά'],
+  en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  es: ['DO', 'LU', 'MA', 'MI', 'JU', 'VI', 'SA'],
+  fi: ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+  fr: ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'],
+  he: ['א׳', 'ב׳', 'ג׳', 'ד׳', 'ה׳', 'ו׳', 'ש׳'],
+  hu: ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
+  it: ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+  ja: ['日', '月', '火', '水', '木', '金', '土'],
+  ko: ['일', '월', '화', '수', '목', '금', '토'],
+  nl: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+  no: ['sø.', 'ma.', 'ti.', 'on.', 'to.', 'fr.', 'lø.'],
+  pl: ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob'],
+  pt: ['dom.', 'seg.', 'ter.', 'qua.', 'qui.', 'sex.', 'sáb.'],
+  'pt-PT': ['dom.', 'seg.', 'ter.', 'qua.', 'qui.', 'sex.', 'sáb.'],
+  ro: ['du.', 'lu.', 'ma.', 'mi.', 'joi', 'vi.', 'sâ.'],
+  ru: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+  sr: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
+  sv: ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö'],
+  tr: ['Pa', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
+  uk: ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+  vi: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
+  zh: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+  'zh-TW': ['日', '一', '二', '三', '四', '五', '六'],
+} as const satisfies Readonly<Record<string, StandaloneShortWeekdayNames>>;

package/src/Calendar/styles.ts

@@ -254,7 +254,7 @@ export const dayCellTheme = stylex.create({
     backgroundColor: 'transparent',
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
@@ -281,7 +281,7 @@ export const dayCellTheme = stylex.create({
     color: colorVars['--color-on-accent'],
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
@@ -292,7 +292,7 @@ export const dayCellTheme = stylex.create({
     opacity: 0.3,
     backgroundImage: {
       default: 'none',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': 'none',
       },
     },

package/src/Center/Center.doc.mjs

@@ -48,12 +48,36 @@ export const docs = {
       description:
         'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
     },
+    {
+      name: 'paddingInlineStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+    },
+    {
+      name: 'paddingInlineEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+    },
     {
       name: 'paddingBlock',
       type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description:
         'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
     },
+    {
+      name: 'paddingBlockStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+    },
+    {
+      name: 'paddingBlockEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+    },
     {
       name: 'isInline',
       type: 'boolean',
@@ -124,11 +148,31 @@ export const docsZh = {
       type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: '行内（水平）内边距，使用间距刻度。两者同时设置时在行内轴上覆盖 padding。',
     },
+    {
+      name: 'paddingInlineStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内起始内边距，使用间距刻度（LTR 中为左侧，RTL 中为右侧）。仅在该边上覆盖 paddingInline 和 padding。',
+    },
+    {
+      name: 'paddingInlineEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内结束内边距，使用间距刻度（LTR 中为右侧，RTL 中为左侧）。仅在该边上覆盖 paddingInline 和 padding。',
+    },
     {
       name: 'paddingBlock',
       type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: '块（垂直）内边距，使用间距刻度。两者同时设置时在块轴上覆盖 padding。',
     },
+    {
+      name: 'paddingBlockStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '块起始（顶部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。',
+    },
+    {
+      name: 'paddingBlockEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '块结束（底部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。',
+    },
     {name: 'isInline', type: 'boolean', description: '使用 inline-flex（适用于文本/图标）。', default: 'false'},
     {name: 'children', type: 'ReactNode', description: '要居中的内容。'},
     {
@@ -171,7 +215,11 @@ export const docsDense = {
     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',
+    paddingInlineStart: 'inline-start padding (left in LTR); overrides paddingInline/padding on that edge',
+    paddingInlineEnd: 'inline-end padding (right in LTR); overrides paddingInline/padding on that edge',
     paddingBlock: 'block (vertical) padding; overrides padding on that axis',
+    paddingBlockStart: 'block-start (top) padding; overrides paddingBlock/padding on that edge',
+    paddingBlockEnd: 'block-end (bottom) padding; overrides paddingBlock/padding on that edge',
     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

@@ -13,6 +13,22 @@ import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Center} from './Center';
 
+/**
+ * The functional class output, as an order-insensitive set. StyleX's dev
+ * runtime also emits readable debug classes naming the style object a
+ * declaration came from ("padding__paddingBlockStyles.2"); those record
+ * provenance rather than applied CSS and survive even when the declaration
+ * they name loses a merge, so they are dropped here.
+ */
+function classSet(el: HTMLElement): Set<string> {
+  return new Set(
+    el.className
+      .split(' ')
+      .filter(Boolean)
+      .filter(c => !c.includes('__') && !c.includes('.')),
+  );
+}
+
 describe('Center', () => {
   it('renders and centers children (both axes by default)', () => {
     render(
@@ -207,4 +223,146 @@ describe('Center', () => {
     const element = screen.getByTestId('center');
     expect(element.tagName).toBe('DIV');
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingBlockStart/paddingBlockEnd override only their own edge', () => {
+    // padding={4} + paddingBlockStart={2} must equal spelling every edge out:
+    // both inline edges and the block-end edge stay at 4.
+    const {rerender} = render(
+      <Center padding={4} paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInline={4}
+        paddingBlockStart={2}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {rerender} = render(
+      <Center paddingBlock={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingBlockStart={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('leaves padding/paddingBlock output unchanged when no edge prop is set', () => {
+    const {rerender} = render(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const uniform = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInline={3} paddingBlock={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(uniform).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingInlineStart/paddingInlineEnd override only their own edge', () => {
+    const {rerender} = render(
+      <Center padding={4} paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInlineStart={2}
+        paddingInlineEnd={4}
+        paddingBlock={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {rerender} = render(
+      <Center paddingInline={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInlineStart={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('resolves all four edges independently', () => {
+    // One prop per edge, each a different step: the four-edge spelling and the
+    // shorthand-plus-overrides spelling must agree.
+    const {rerender} = render(
+      <Center
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const explicit = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        padding={4}
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(explicit).toEqual(classSet(screen.getByTestId('center')));
+  });
 });

package/src/Center/Center.tsx

@@ -18,8 +18,10 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {
-  paddingInlineStyles,
-  paddingBlockStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
 } from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
@@ -106,12 +108,38 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
    */
   paddingInline?: SpacingStep;
 
+  /**
+   * Inline-start padding, using the spacing scale. Logical: the left edge in
+   * LTR, the right edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineStart?: SpacingStep;
+
+  /**
+   * Inline-end padding, using the spacing scale. Logical: the right edge in
+   * LTR, the left edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineEnd?: SpacingStep;
+
   /**
    * Block (vertical) padding, using the spacing scale.
    * Overrides `padding` on the block axis when both are set.
    */
   paddingBlock?: SpacingStep;
 
+  /**
+   * Block-start (top) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockStart?: SpacingStep;
+
+  /**
+   * Block-end (bottom) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockEnd?: SpacingStep;
+
   /**
    * Whether to make the container inline-flex (useful for text/icons).
    * @default false
@@ -145,7 +173,11 @@ export function Center({
   minHeight,
   padding,
   paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   isInline = false,
   children,
   xstyle,
@@ -154,10 +186,14 @@ 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;
+  // Resolve padding to per-edge values. Most specific wins, per edge:
+  // edge prop -> axis prop -> `padding`.
+  const resolvedPaddingInlineStart =
+    paddingInlineStart ?? paddingInline ?? padding;
+  const resolvedPaddingInlineEnd = paddingInlineEnd ?? paddingInline ?? padding;
+  const resolvedPaddingBlockStart =
+    paddingBlockStart ?? paddingBlock ?? padding;
+  const resolvedPaddingBlockEnd = paddingBlockEnd ?? paddingBlock ?? padding;
 
   const stylexProps = mergeProps(
     themeProps('center', {axis}),
@@ -171,9 +207,14 @@ export function Center({
         maxWidth ?? null,
         minHeight ?? null,
       ),
-      resolvedPaddingInline != null &&
-        paddingInlineStyles[resolvedPaddingInline],
-      resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
+      resolvedPaddingInlineStart != null &&
+        paddingInlineStartStyles[resolvedPaddingInlineStart],
+      resolvedPaddingInlineEnd != null &&
+        paddingInlineEndStyles[resolvedPaddingInlineEnd],
+      resolvedPaddingBlockStart != null &&
+        paddingBlockStartStyles[resolvedPaddingBlockStart],
+      resolvedPaddingBlockEnd != null &&
+        paddingBlockEndStyles[resolvedPaddingBlockEnd],
       xstyle,
     ),
     className,

package/src/Chat/ChatComposer.tsx

@@ -273,7 +273,9 @@ const elevationStyles = stylex.create({
   low: {
     boxShadow: {
       default: shadowVars['--shadow-low'],
-      ':hover': {'@media (hover: hover)': shadowVars['--shadow-med']},
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
+        '@media (hover: hover)': shadowVars['--shadow-med'],
+      },
     },
     ':focus-within': {
       boxShadow: shadowVars['--shadow-med'],
@@ -292,9 +294,10 @@ const elevationStyles = stylex.create({
     padding: `calc(var(--_chat-composer-padding) - ${borderVars['--border-width']})`,
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
+        },
       ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
     },
   },

package/src/Chat/ChatToolCalls.tsx

@@ -197,7 +197,7 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-1'],
     marginInline: `calc(-1 * ${spacingVars['--spacing-1']})`,
     '@media (hover: hover)': {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },

package/src/Chat/{useChatDictation.test.ts → useChatDictation.test.tsx}

@@ -1,7 +1,9 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+import type {ReactNode} from 'react';
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {renderHook, act} from '@testing-library/react';
+import {InternationalizationProvider} from '../i18n';
 import {useSpeechRecognition} from './useSpeechRecognition';
 import {useChatDictation} from './useChatDictation';
 
@@ -50,8 +52,7 @@ let originalSR: unknown;
 
 beforeEach(() => {
   lastInstance = null;
-  originalSR = (window as unknown as Record<string, unknown>)
-    .SpeechRecognition;
+  originalSR = (window as unknown as Record<string, unknown>).SpeechRecognition;
   (window as unknown as Record<string, unknown>).SpeechRecognition =
     MockSRConstructor;
 });
@@ -85,6 +86,28 @@ describe('useSpeechRecognition', () => {
     expect(result.current.isSupported).toBe(true);
   });
 
+  it('uses the provider locale by default and preserves an explicit override', () => {
+    const wrapper = ({children}: {children: ReactNode}) => (
+      <InternationalizationProvider locale="fr-FR">
+        {children}
+      </InternationalizationProvider>
+    );
+    const provider = renderHook(() => useSpeechRecognition(), {wrapper});
+
+    act(() => {
+      provider.result.current.start();
+    });
+    expect(lastInstance?.lang).toBe('fr-FR');
+
+    const explicit = renderHook(() => useSpeechRecognition({lang: 'ja-JP'}), {
+      wrapper,
+    });
+    act(() => {
+      explicit.result.current.start();
+    });
+    expect(lastInstance?.lang).toBe('ja-JP');
+  });
+
   it('starts and sets isListening', () => {
     const {result} = renderHook(() => useSpeechRecognition());
 
@@ -145,9 +168,7 @@ describe('useSpeechRecognition', () => {
     const onStart = vi.fn();
     const onEnd = vi.fn();
 
-    const {result} = renderHook(() =>
-      useSpeechRecognition({onStart, onEnd}),
-    );
+    const {result} = renderHook(() => useSpeechRecognition({onStart, onEnd}));
 
     act(() => {
       result.current.start();
@@ -194,9 +215,7 @@ describe('useSpeechRecognition', () => {
   it('handles interim results and updates interimTranscript', () => {
     const onTranscript = vi.fn();
 
-    const {result} = renderHook(() =>
-      useSpeechRecognition({onTranscript}),
-    );
+    const {result} = renderHook(() => useSpeechRecognition({onTranscript}));
 
     act(() => {
       result.current.start();
@@ -294,9 +313,7 @@ describe('useChatDictation', () => {
     const onStart = vi.fn();
     const onEnd = vi.fn();
 
-    const {result} = renderHook(() =>
-      useChatDictation({onStart, onEnd}),
-    );
+    const {result} = renderHook(() => useChatDictation({onStart, onEnd}));
 
     act(() => {
       result.current.start();
@@ -312,9 +329,7 @@ describe('useChatDictation', () => {
   it('handles final transcript via onResult', () => {
     const onResult = vi.fn();
 
-    const {result} = renderHook(() =>
-      useChatDictation({onResult}),
-    );
+    const {result} = renderHook(() => useChatDictation({onResult}));
 
     act(() => {
       result.current.start();

package/src/Chat/useChatDictation.ts

@@ -22,7 +22,7 @@ import {useSpeechRecognition} from './useSpeechRecognition';
 // =============================================================================
 
 export interface UseChatDictationOptions {
-  /** BCP-47 language tag. @default navigator.language */
+  /** BCP-47 language tag. @default InternationalizationProvider locale */
   lang?: string;
   /** Whether recognition continues until explicitly stopped. @default true */
   continuous?: boolean;