@astryxdesign/core 0.7.7 → 0.7.8-canary.0d54fd3

package/src/BottomSheet/BottomSheet.tsx

@@ -517,6 +517,7 @@ function StandaloneBottomSheet({
   const stackViewRef = useRef(stackView);
   stackViewRef.current = stackView;
   const scrimWriteRef = useRef<BottomSheetScrimWrite>({frame: null});
+  // Releases the pending scrim write frame on unmount.
   useEffect(() => () => cancelScrimWrite(scrimWriteRef.current), []);
   const writeScrim = useCallback(
     (opacity: '0' | '1') =>

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -255,6 +255,10 @@ const styles = stylex.create({
     // surface behind the pill itself, fading out across the lower half so the
     // content emerging below has no visible cut line.
     backgroundImage: `linear-gradient(to bottom, ${colorVars['--color-background-surface']} 60%, transparent)`,
+    // WebKit can draw this bar under the scrolling body's own layer while the
+    // sheet's transform animates, so the pill vanishes until the sheet rests.
+    // A layer of its own keeps it above the body.
+    willChange: 'transform',
     // Drags are the handle's; a pinch still zooms the page (WCAG 1.4.4).
     touchAction: 'pinch-zoom',
     cursor: {
@@ -418,6 +422,7 @@ function waitForTransition(
 
   let done = false;
   let timer: ReturnType<typeof setTimeout> | null = null;
+  let backstopMs = 0;
   const finish = () => {
     if (done) {
       return;
@@ -431,9 +436,24 @@ function waitForTransition(
     complete();
   };
   const handleTransitionEnd = (event: TransitionEvent) => {
-    if (event.target === element && event.propertyName === propertyName) {
-      finish();
+    if (event.target !== element || event.propertyName !== propertyName) {
+      return;
+    }
+    // The engine cancels a transition whose end value changes mid-flight. A
+    // percentage transform does when the closing frame moves the height by a
+    // fraction of a pixel. A replacement runs on from where it was. That one
+    // ends the motion, not the cancel.
+    if (
+      event.type === 'transitioncancel' &&
+      hasRunningTransition(element, propertyName)
+    ) {
+      if (timer != null) {
+        clearTimeout(timer);
+        timer = setTimeout(finish, backstopMs);
+      }
+      return;
     }
+    finish();
   };
   element.addEventListener('transitionend', handleTransitionEnd);
   element.addEventListener('transitioncancel', handleTransitionEnd);
@@ -484,7 +504,8 @@ function waitForTransition(
     return () => {};
   }
 
-  timer = setTimeout(finish, transitionMs + TRANSITION_BACKSTOP_BUFFER_MS);
+  backstopMs = transitionMs + TRANSITION_BACKSTOP_BUFFER_MS;
+  timer = setTimeout(finish, backstopMs);
   return () => {
     if (timer != null) {
       clearTimeout(timer);
@@ -494,6 +515,19 @@ function waitForTransition(
   };
 }
 
+// Whether a CSS transition of `propertyName` still runs on `element`.
+function hasRunningTransition(
+  element: HTMLElement,
+  propertyName: string,
+): boolean {
+  return (element.getAnimations?.() ?? []).some(
+    animation =>
+      (animation as Animation & {transitionProperty?: string})
+        .transitionProperty === propertyName &&
+      (animation.playState === 'running' || animation.playState === 'paused'),
+  );
+}
+
 function parseTransitionTime(value: string): number | null {
   const normalizedValue = value.trim();
   if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalizedValue)) {
@@ -676,6 +710,8 @@ export function BottomSheetPanel({
   const isCoarseCrossFade = useMediaQuery(REDUCED_MOTION_COARSE_QUERY);
   const isCrossFade =
     isCoarseCrossFade || (isReducedMotion && isDismissedByTouchDrag);
+  // Syncs the motion with the panel's CSS transition. The motion completes when
+  // that transition ends.
   useLayoutEffect(() => {
     if (motion == null) {
       return;

package/src/BottomSheet/BottomSheetSwitcher.tsx

@@ -358,6 +358,7 @@ export function BottomSheetSwitcher({
   const stackViewRef = useRef(stackView);
   stackViewRef.current = stackView;
   const scrimWriteRef = useRef<BottomSheetScrimWrite>({frame: null});
+  // Releases the pending scrim write frame on unmount.
   useEffect(() => () => cancelScrimWrite(scrimWriteRef.current), []);
   // What the flow's place in the stack was when it left the registry: its
   // depth and the open sheet beneath it. React runs the registration
@@ -564,6 +565,9 @@ export function BottomSheetSwitcher({
     presentationCounterRef.current += 1;
     presentationOrderRef.current.set(sheetId, presentationCounterRef.current);
   }, []);
+  // Syncs document focus with the flow's visibility. When the flow hides, focus
+  // goes to the opener, to the sheet now on top, or to the target of the
+  // registry.
   useLayoutEffect(() => {
     if (isFlowVisible) {
       if (!hasScrim) {
@@ -694,6 +698,7 @@ export function BottomSheetSwitcher({
       unregister();
     };
   }, [hasScrim, isFlowVisible, onBeforeSheetPresent]);
+  // Syncs the open state of this flow in the sheet stack registry.
   useLayoutEffect(() => {
     if (isFlowVisible && hasScrim) {
       setBottomSheetOpen(stackKeyRef.current, isFlowOpen);

package/src/BottomSheet/useMobileKeyboard.ts

@@ -148,6 +148,8 @@ export function useMobileKeyboard({
     }
   }, [isEnabled, isSheetTraveling, sheetRef]);
 
+  // Syncs the on-screen keyboard with the sheet. When a presented sheet closes,
+  // the focused field blurs, so the keyboard closes.
   useEffect(() => {
     if (!isEnabled || !isPresented || isOpen) {
       return;
@@ -165,6 +167,8 @@ export function useMobileKeyboard({
     }
   }, [isEnabled, isOpen, isPresented, sheetRef]);
 
+  // Syncs the body's end inset with the visual viewport, so the on-screen
+  // keyboard does not cover the body.
   useEffect(() => {
     const body = bodyRef.current;
     const sheet = sheetRef.current;

package/src/BottomSheet/useSheetGestures.ts

@@ -699,6 +699,8 @@ export function useSheetGestures({
   const sheetElRef = useRef<HTMLElement | null>(null);
   const bodyNodeRef = useRef<HTMLElement | null>(null);
   const observerRef = useRef<ResizeObserver | null>(null);
+  // Syncs the browser layout with the transform reset, then ends the
+  // scroll-area reconcile one frame later.
   useLayoutEffect(() => {
     if (!isScrollAreaReconciling) {
       return;
@@ -738,7 +740,9 @@ export function useSheetGestures({
         }
         return;
       }
-      recordSheetHeight(node.getBoundingClientRect().height);
+      // No measure here: reading the height while the sheet mounts forces a
+      // layout in the middle of the open. The observer's first report comes
+      // after the browser's own layout, before the first paint.
       const ro = new ResizeObserver(entries => {
         const entry = entries[0];
         if (entry) {
@@ -756,6 +760,7 @@ export function useSheetGestures({
     },
     [recordSheetHeight],
   );
+  // Releases the height observer on unmount.
   useEffect(() => () => observerRef.current?.disconnect(), []);
 
   // Reset to the tallest detent each time the sheet re-opens.
@@ -907,6 +912,8 @@ export function useSheetGestures({
     resolveDetents,
   ]);
 
+  // Syncs window resize and orientation listeners with `isOpen`. Each event
+  // anchors the sheet to its settled detent again.
   useEffect(() => {
     if (!isOpen || typeof window === 'undefined') {
       return;
@@ -1024,6 +1031,8 @@ export function useSheetGestures({
     [prepareScrollAreaSettle, resolveDetents],
   );
 
+  // Syncs window blur and document visibilitychange listeners with `isOpen`. A
+  // blur or a hidden page cancels a drag.
   useEffect(() => {
     // Only an open sheet can be dragged; a closed one listens to nothing.
     if (!isOpen) {

package/src/Button/Button.tsx

@@ -53,6 +53,7 @@ import {iconBoxSizeStyles, type IconSize} from '../Icon/IconSize.stylex';
 import {EDGE_COMP_ATTR} from '../Layout/edgeCompensation.stylex';
 import {useSize} from '../SizeContext/SizeContext';
 import {useButtonGroup} from '../ButtonGroup/ButtonGroupContext';
+import {PressGroupContext} from '../hooks/pressGroupContext';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext';
 import {
@@ -77,6 +78,12 @@ import {isRenderable} from '../utils/isRenderable';
 
 registerEnglishFallback(english);
 
+/**
+ * Written by the press controller or a group's tracker while a press is
+ * believed. Typed `string`, so StyleX reads it as a computed key.
+ */
+const PRESSED_ON: string = '[data-astryx-press="on"]';
+
 /**
  * Base button styles
  * Pseudo-classes are nested within properties per StyleX recommendation:
@@ -138,7 +145,19 @@ const styles = stylex.create({
         default: 'scale(0.98)',
         '@media (pointer: coarse)': 'scale(1)',
       },
-      '[data-astryx-press="on"]': 'scale(0.98)',
+      [PRESSED_ON]: 'scale(0.98)',
+    },
+  },
+  // A tracked action's own `:active` image paints nothing: the tracker paints
+  // the action under the pointer, which need not be the one pressed first.
+  trackedOverlay: {
+    backgroundSize: {default: null, [`:active:not(${PRESSED_ON})`]: '0 0'},
+  },
+  // A tracked action's press is painted by its group's tracker alone.
+  pressableTracked: {
+    transform: {
+      default: 'scale(1)',
+      [PRESSED_ON]: 'scale(0.98)',
     },
   },
   inactive: {
@@ -147,7 +166,7 @@ const styles = stylex.create({
     transform: {
       default: 'none',
       ':active': 'none',
-      '[data-astryx-press="on"]': 'none',
+      [PRESSED_ON]: 'none',
     },
   },
   disabled: {
@@ -160,7 +179,7 @@ const styles = stylex.create({
     backgroundImage: {
       default: 'none',
       ':active': 'none',
-      '[data-astryx-press="on"]': 'none',
+      [PRESSED_ON]: 'none',
     },
   },
   iconOnly: {
@@ -632,6 +651,7 @@ export function Button({
   const t = useComponentTranslator();
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
+  const isGroupTracked = use(PressGroupContext);
   const inputGroup = useInputGroup();
 
   const [isPending, startTransition] = useTransition();
@@ -760,11 +780,13 @@ export function Button({
     sizeStyles[size],
     isIconOnly && styles.iconOnly,
     interactionOverlayStyles.backgroundImage,
+    isGroupTracked && styles.trackedOverlay,
     buttonDisabled && styles.inactive,
     isTrueDisabled && styles.disabled,
     useAriaDisabled && styles.ariaDisabled,
     renderAsLink && styles.link,
-    !buttonGroup && styles.pressable,
+    !buttonGroup &&
+      (isGroupTracked ? styles.pressableTracked : styles.pressable),
     buttonGroup &&
       (buttonGroup.orientation === 'horizontal'
         ? groupStyles.horizontal

package/src/Calendar/Calendar.tsx

@@ -61,12 +61,16 @@ import {
   plainDateWeekFieldName,
   DATE_FORMAT_WITH_WEEKDAY,
 } from '../utils/plainDate';
-import {plainDateFormatStandaloneMonthYear} from '../utils/plainDate';
+import {
+  plainDateFormatDayNumber,
+  plainDateFormatStandaloneMonthYear,
+} from '../utils/plainDate';
 import {mergeProps, composeEventHandlers, rtlStyles} from '../utils';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {getInitialFocusDate} from './getInitialFocusDate';
+import {getWeekdayHeaders} from './getWeekdayHeaderNames';
 import {
   computeDayCellState,
   computeRangeRounding,
@@ -104,8 +108,8 @@ import english from '../i18n/generated-english/Calendar/Calendar.generated';
 
 registerEnglishFallback(english);
 
-/** How a month navigation moves the focused day: by its row offset in days, or by whole months. */
-type NavigationUnit = 'days' | 'months';
+/** How a month navigation moves the focused day: by its row offset in days, or by whole months or years. */
+type NavigationUnit = 'days' | 'months' | 'years';
 
 /** Imperative handle for Calendar handleRef */
 export interface CalendarHandle {
@@ -518,13 +522,14 @@ export function Calendar({ref, ...props}: CalendarProps) {
         !(minDateForKeys && plainDateIsBefore(pd, minDateForKeys)) &&
         !(maxDateForKeys && plainDateIsAfter(pd, maxDateForKeys));
       let targetPd: PlainDate;
-      if (unit === 'months') {
-        // A page targets the same day of the month a month away (clamped to
-        // that month's length). Past `min`/`max` nothing moves; a month with
-        // no enabled day is no destination either, the same as an arrow with
-        // no enabled day in its direction; a target disabled by a constraint
-        // lands on that month's first enabled day instead.
-        const candidate = plainDateAddMonths(currentPd, delta);
+      if (unit === 'months' || unit === 'years') {
+        // A page or a year step keeps the day of the month and clamps it to the
+        // target month's length. A month with no enabled day is no target, the
+        // same as for an arrow.
+        const candidate = plainDateAddMonths(
+          currentPd,
+          unit === 'years' ? delta * 12 : delta,
+        );
         if (!inRange(candidate)) {
           return;
         }
@@ -851,19 +856,15 @@ function MonthGrid({
   const year = month.year;
 
   // Use hooks for days generation and constraints
-  const {days, weeks, dayNames} = useCalendarDays({
+  const {days, weeks} = useCalendarDays({
     year,
     month: month.month,
     weekStartsOn,
     hasVariableRowCount,
   });
   const dayNameHeaders = useMemo(
-    () =>
-      dayNames.map((name, offset) => ({
-        dayOfWeek: ((weekStartsOn + offset) % 7) as DayOfWeek,
-        name,
-      })),
-    [dayNames, weekStartsOn],
+    () => getWeekdayHeaders(locale, weekStartsOn),
+    [locale, weekStartsOn],
   );
 
   const rangeAnchor = useMemo(
@@ -961,20 +962,27 @@ function MonthGrid({
     [getFocusedDate, onNavigateNext],
   );
 
-  // Handle PageUp/PageDown
-  const handlePageUp = useCallback(() => {
-    const focusedDate = getFocusedDate();
-    if (focusedDate) {
-      onNavigatePrevious?.(focusedDate, 1, 'months');
-    }
-  }, [getFocusedDate, onNavigatePrevious]);
+  // PageUp/PageDown move by a month, and with Shift by a year (APG date
+  // picker dialog).
+  const handlePageUp = useCallback(
+    (e: React.KeyboardEvent) => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate) {
+        onNavigatePrevious?.(focusedDate, 1, e.shiftKey ? 'years' : 'months');
+      }
+    },
+    [getFocusedDate, onNavigatePrevious],
+  );
 
-  const handlePageDown = useCallback(() => {
-    const focusedDate = getFocusedDate();
-    if (focusedDate) {
-      onNavigateNext?.(focusedDate, 1, 'months');
-    }
-  }, [getFocusedDate, onNavigateNext]);
+  const handlePageDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate) {
+        onNavigateNext?.(focusedDate, 1, e.shiftKey ? 'years' : 'months');
+      }
+    },
+    [getFocusedDate, onNavigateNext],
+  );
 
   // Grid focus navigation.
   //
@@ -1155,7 +1163,7 @@ function MonthGrid({
                 <div
                   role="rowheader"
                   {...stylex.props(monthGridStyles.weekNumber)}>
-                  {weekNum}
+                  {plainDateFormatDayNumber(weekNum, locale)}
                 </div>
               )}
               {week.map((day, dayIndex) => {
@@ -1422,7 +1430,7 @@ function DayCell({
             state.effectivelyDisabled && dayCellTheme.dayDisabled,
           ),
         )}>
-        {dayNumber}
+        {plainDateFormatDayNumber(dayNumber, locale)}
       </button>
     </div>
   );

package/src/Calendar/getWeekdayHeaderNames.ts

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file getWeekdayHeaderNames.ts
+ * @input Generated CLDR weekday header table and the shared date formatter
+ * @output Private resolver for one locale's weekday header row
+ * @position Package-internal pure utility for the Calendar grid and the
+ *   DateInput and DateTimeInput bottom sheets; not exported from the package
+ */
+
+import {characterCount} from '../utils/characters';
+import type {DayOfWeek} from '../utils/dateTypes';
+import {plainDateWeekdayNames} from '../utils/plainDate';
+import {
+  weekdayHeaderNamesByLocale,
+  type WeekdayHeaderNames,
+} from './weekdayHeaderNames.generated';
+
+const weekdayNamesByLocale: Readonly<Record<string, WeekdayHeaderNames>> =
+  weekdayHeaderNamesByLocale;
+const englishWeekdayNames = weekdayNamesByLocale.en;
+
+/** The longest abbreviated name a header row takes; the generator uses the same. */
+export const MAX_ABBREVIATED_HEADER_LENGTH = 4;
+
+function fitsHeader(names: ReadonlyArray<string>): boolean {
+  return names.every(
+    name => characterCount(name) <= MAX_ABBREVIATED_HEADER_LENGTH,
+  );
+}
+
+/**
+ * A language with no generated row keeps its own words. `Intl` has no CLDR
+ * short width, so names too long for the column fall to the narrow width.
+ */
+function sundayFirstNames(locale: string): ReadonlyArray<string> {
+  let parsed: Intl.Locale;
+  try {
+    parsed = new Intl.Locale(locale);
+  } catch {
+    return englishWeekdayNames;
+  }
+  const generated =
+    weekdayNamesByLocale[parsed.baseName] ??
+    weekdayNamesByLocale[parsed.language];
+  if (generated != null) {
+    return generated;
+  }
+  const abbreviated = plainDateWeekdayNames(parsed.baseName);
+  if (abbreviated == null) {
+    return englishWeekdayNames;
+  }
+  if (fitsHeader(abbreviated)) {
+    return abbreviated;
+  }
+  return (
+    plainDateWeekdayNames(parsed.baseName, 'narrow') ?? englishWeekdayNames
+  );
+}
+
+/** One weekday header cell: its day of week (a stable key, since narrow names repeat) and its name. */
+export interface WeekdayHeader {
+  dayOfWeek: DayOfWeek;
+  name: string;
+}
+
+/**
+ * The seven weekday headers for a locale, in column order for the week that
+ * starts on `weekStartsOn`. Unicode extensions are ignored.
+ */
+export function getWeekdayHeaders(
+  locale: string,
+  weekStartsOn: DayOfWeek = 0,
+): WeekdayHeader[] {
+  const names = sundayFirstNames(locale);
+  return Array.from({length: 7}, (_, offset) => {
+    const dayOfWeek = ((weekStartsOn + offset) % 7) as DayOfWeek;
+    return {dayOfWeek, name: names[dayOfWeek]};
+  });
+}
+
+/** The names alone, in the same order as `getWeekdayHeaders`. */
+export function getWeekdayHeaderNames(
+  locale: string,
+  weekStartsOn: DayOfWeek = 0,
+): string[] {
+  return getWeekdayHeaders(locale, weekStartsOn).map(header => header.name);
+}

package/src/Calendar/hooks/useCalendarDays.ts

@@ -22,7 +22,7 @@ import {
   plainDateAddDays,
 } from '../../utils/plainDate';
 import {useLocale} from '../../i18n';
-import {getStandaloneShortWeekdayNames} from '../getStandaloneShortWeekdayNames';
+import {getWeekdayHeaderNames} from '../getWeekdayHeaderNames';
 
 /**
  * Represents a single day in the calendar grid.
@@ -111,15 +111,10 @@ export function useCalendarDays(
     };
   }, [year, month, weekStartsOn, hasVariableRowCount]);
 
-  // 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 = getStandaloneShortWeekdayNames(locale);
-    return Array.from(
-      {length: 7},
-      (_, index) => names[(index + weekStartsOn) % 7],
-    );
-  }, [locale, weekStartsOn]);
+  const dayNames = useMemo(
+    () => getWeekdayHeaderNames(locale, weekStartsOn),
+    [locale, weekStartsOn],
+  );
 
   // Generate days array
   const days = useMemo(() => {

package/src/Calendar/{standaloneShortWeekdayNames.generated.ts → weekdayHeaderNames.generated.ts}

@@ -5,7 +5,7 @@
  * Do not edit by hand. Run `pnpm generate:cldr-weekdays` instead.
  */
 
-export type StandaloneShortWeekdayNames = readonly [
+export type WeekdayHeaderNames = readonly [
   string,
   string,
   string,
@@ -15,36 +15,36 @@ export type StandaloneShortWeekdayNames = readonly [
   string,
 ];
 
-export const standaloneShortWeekdayNamesByLocale = {
+export const weekdayHeaderNamesByLocale = {
   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'],
+  de: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  el: ['Κυρ', 'Δευ', 'Τρί', 'Τετ', 'Πέμ', 'Παρ', 'Σάβ'],
+  en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  es: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
   fi: ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
-  fr: ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'],
+  fr: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
   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ø.'],
+  no: ['søn.', 'man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.'],
   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â.'],
+  ro: ['dum.', 'lun.', 'mar.', 'mie.', 'joi', 'vin.', 'sâm.'],
   ru: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
-  sr: ['не', 'по', 'ут', 'ср', 'че', 'пе', 'су'],
-  sv: ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö'],
-  tr: ['Pa', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
+  sr: ['нед', 'пон', 'уто', 'сре', 'чет', 'пет', 'суб'],
+  sv: ['sön', 'mån', 'tis', 'ons', 'tors', 'fre', 'lör'],
+  tr: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
   uk: ['нд', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
   vi: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
   zh: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-  'zh-TW': ['日', '一', '二', '三', '四', '五', '六'],
-} as const satisfies Readonly<Record<string, StandaloneShortWeekdayNames>>;
+  'zh-TW': ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
+} as const satisfies Readonly<Record<string, WeekdayHeaderNames>>;

package/src/Carousel/Carousel.tsx

@@ -369,6 +369,7 @@ export function Carousel({
     lightDismiss: false,
   });
 
+  // Syncs the layer with `hasButtons`.
   useEffect(() => {
     if (hasButtons) {
       layer.show();

package/src/Chat/ChatComposerInput.tsx

@@ -68,6 +68,7 @@ import {
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import {withholdCallerHandlers} from '../utils/disabledInteraction';
 import type {EnterKeyHint} from '../Field/textEntryTraits';
 import {
   registerEnglishFallback,
@@ -390,13 +391,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
   } = props;
   // Keep focus/blur observation available, but do not forward activation or
   // editing callbacks from the disabled root (including capture handlers).
-  const rootProps = isDisabled
-    ? Object.fromEntries(
-        Object.entries(rest).filter(
-          ([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key),
-        ),
-      )
-    : rest;
+  const rootProps = withholdCallerHandlers(rest, isDisabled);
   const label = labelFromProps ?? t('@astryx.chat.composerInput.label');
   const placeholder =
     placeholderFromProps ??
@@ -529,6 +524,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     };
   }, [inputControlRef, focusEditableAtEnd]);
 
+  // Syncs the contentEditable DOM with the controlled `value`.
   useEffect(() => {
     if (controlledValue === undefined || !editableRef.current) {
       return;
@@ -650,6 +646,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         }
       : triggerMenu.ariaProps;
 
+  // Syncs the trigger menu's pending searches with `isDisabled`.
   useEffect(() => {
     if (isDisabled && triggerMenu.state.isActive) {
       // Reset also cancels pending searches, so late results cannot reopen

package/src/Chat/ChatMessageList.tsx

@@ -265,7 +265,8 @@ export function ChatMessageList({
     children !== false &&
     !(Array.isArray(children) && children.length === 0);
 
-  // IntersectionObserver for scroll-to-top infinite scroll
+  // Syncs an IntersectionObserver on the top sentinel with `scrollToTopAction`.
+  // The action runs when the sentinel comes into view.
   useEffect(() => {
     const scrollContainer = layoutContext?.scrollContainerRef?.current;
     if (!scrollToTopAction || !sentinelRef.current) {

package/src/Chat/useChatDictation.ts

@@ -395,6 +395,7 @@ export function useChatDictation(
     [userTransform],
   );
 
+  // Releases the audio analyser and the animation frame on unmount.
   useEffect(() => {
     return () => {
       analyserRef.current?.cleanup();

package/src/Chat/useChatNewMessages.ts

@@ -121,7 +121,7 @@ export function useChatNewMessages({
     [attach, detach],
   );
 
-  // Cleanup on unmount
+  // Releases the new-message tracking on unmount.
   useEffect(() => {
     return () => detach();
   }, [detach]);