@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/BottomSheet/useSheetGestures.ts

@@ -4,72 +4,51 @@
 
 /**
  * @file useSheetGestures.ts
- * @input Uses React (useCallback, useEffect, useMemo, useRef, useState)
- * @output Exports useSheetGestures hook and its option/result types
- * @position Internal to BottomSheet; not exported from the core entry point
- *
- * Drag + snap machinery for the bottom sheet. Tracks a pointer drag down the
- * block axis, translates the sliding surface live, and on release settles to
- * the detent nearest where the sheet would coast to at the finger's speed, or
- * dismisses when that is past the dismiss line. A slow drag projects onto
- * itself and places; a throw continues past the finger. This is the core
- * behavior split the sheet needs: DRAG places, SWIPE closes.
- *
- * A settled detent is split across two properties: `settledLayoutOffset` is
- * the part the scrolling area gives up as layout height, and the remainder is
- * a transform. Gestures and snaps only ever move the transform, so they stay
- * on the compositor; layout height changes at rest, in one transition-free
- * render whose visible geometry is identical. A peek detent — a stop that is
- * only a sliver of the sheet — keeps the full height and slides below the
- * viewport instead of reflowing to that sliver.
- *
- * A live drag writes that transform straight to the sheet element, once per
- * input sample, and renders nothing: React state changes when the drag begins
- * and ends, and in between only when the layout split changes (a drag that
- * crosses above its base detent restores the full height). The live offset
- * is readable through `activeOffsetRef`. The host owns the element's
- * transform outside a drag and writes the resting value after each commit,
- * so a settle animates from wherever the finger left the sheet.
- *
- * Those are pixels, and the stops behind them are relative to the viewport, so
- * a sheet at rest re-resolves its detent on `resize` / `orientationchange`,
- * and whenever the host swaps the snap points, and re-anchors to the new
- * geometry without animating. The detent it returns to is tracked by index:
- * the pixels stop meaning the same thing when the viewport changes, the stop
- * the user chose does not.
- *
- * On touch, the scrolling body hands the gesture to the sheet at a scroll
- * edge — once every scroller under the finger, a box nested inside the body
- * and the body itself, is at the edge the pull opposes (see
- * scrollChainUnder). Two shapes, because the browser only offers one of them
- * a choice: a
- * finger that lands on an edge and pulls away from it promotes by cancelling
- * the first, still-cancelable touchmove; a finger that scrolls INTO the end of
- * the content mid-gesture cannot, since the browser has committed the gesture
- * to scrolling and every remaining event is non-cancelable. The second shape
- * needs no cancelling — the scroller is clamped at its end, so there is
- * nothing left to scroll — and instead anchors at the point where the content
- * ran out and drives the sheet from the travel beyond it.
- *
- * Every gesture here is one finger. A second finger is a pinch, and pinch-zoom
- * belongs to the browser (WCAG 1.4.4): the surfaces declare `pinch-zoom` in
- * their `touch-action`, and a second finger — on either surface, in either
- * order — ends any drag in flight or armed (yieldToPinch), as does the
- * browser cancelling a handle drag to take the pinch. The sheet returns to
- * its detent and the pinch zooms the page.
- *
- * Kept private to BottomSheet: a dismiss edge + detents on a bottom-anchored
- * surface are inherently sheet concepts. It is not a general primitive and is
- * intentionally not exported.
- *
- * SSR-safe: no window/document access at module scope; all measurement
- * happens inside handlers. Respects prefers-reduced-motion by skipping the
- * settle transition.
+ * @input React hooks
+ * @output useSheetGestures hook, its option/result types, and the height and
+ *   end-inset formats a host renders for the layout split
+ * @position Internal to BottomSheet; not exported from the core entry point.
+ *   A dismiss edge and detents on a bottom-anchored surface are sheet
+ *   concepts, so this is not a general primitive.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/useSheetGestures.test.ts
  */
 
+// A drag moves the sheet live. On release it settles to the detent nearest
+// where the sheet would coast at the finger's speed, or it dismisses past the
+// dismiss line. So a slow drag places and a throw closes.
+//
+// A settled detent is split in two: `settledLayoutOffset` is the layout
+// height that the scrolling area gives up, and the rest is a transform.
+// Gestures and snaps move only the transform, on the compositor. The layout
+// height changes at rest, in one transition-free render with the same visible
+// geometry. A peek detent keeps the full height and slides below the
+// viewport.
+//
+// A live drag writes the transform to the element for each input sample and
+// renders nothing. A drag that crosses above its base detent changes the
+// transform, the height and the end inset, which only look right together.
+// The move writes all three in one task, so they paint in one frame. The host
+// writes the resting values after each commit, so a settle animates from
+// where the finger left the sheet.
+//
+// A resting sheet re-resolves its detent by index on a resize, an
+// orientation change, or new snap points, and re-anchors without animating.
+// The pixels change meaning when the viewport changes, but the chosen stop
+// does not.
+//
+// On touch, the body hands the gesture to the sheet when every scroller under
+// the finger is at the edge that the pull opposes (see scrollChainUnder). A
+// finger that lands on an edge and pulls away cancels the first touchmove. A
+// finger that scrolls into the end mid-gesture cannot cancel, so it anchors
+// where the content ran out and drives the sheet from the travel beyond it.
+//
+// A second finger is a pinch, and pinch-zoom belongs to the browser (WCAG
+// 1.4.4). The surfaces declare `pinch-zoom` in `touch-action`, and a second
+// finger ends any drag (yieldToPinch). There is no module-scope DOM access,
+// so the hook is SSR-safe. Reduced motion skips the settle transition.
+
 import {
   useCallback,
   useEffect,
@@ -145,18 +124,10 @@ const OVERSCROLL_MAX = 48;
 // the scroll, large enough that a swipe merely coming to rest on the last pixel
 // doesn't start a drag on jitter.
 const CONTENT_END_HANDOFF_SLOP = 4;
-// How far a finger resting on the body must travel before the pull becomes a
-// sheet drag rather than a tap.
-//
-// This used to be zero: any downward movement promoted. A finger is never
-// still, so tapping a control inside the sheet drifted a pixel or two and
-// started a drag -- which suppresses the panel's transition, correctly, for as
-// long as the sheet is tracking the finger. The close that the tap triggered
-// then landed inside that window and cut instead of animating. A deliberate
-// pull was unaffected; only a tap, and only a tap inside the sheet, since the
-// scrim is outside the body and arms nothing.
-//
-// 8px is the conventional tap slop, a shade over iOS's own recognizer, and
+// How far a finger resting on the body moves before the pull becomes a drag.
+// A finger is never still. With no slop, a tap on a control in the sheet
+// started a drag, which turns off the panel's transition, so the close that
+// the tap caused cut instead of animating. 8px is the usual tap slop and is
 // well under what a real pull covers in its first frames.
 const DRAG_PROMOTION_SLOP = 8;
 
@@ -206,6 +177,28 @@ function preservationInsetForOffset(
   return Math.max(0, baseOffset - targetOffset - naturalEndGap);
 }
 
+/**
+ * The sheet's height, in px, while it is in motion or rests with a layout
+ * split: the fully open height less the part the scrolling area gives up.
+ * The host renders it and a live drag writes it; one format keeps the two
+ * identical, so the render that follows a written value changes nothing.
+ */
+export function sheetLayoutHeight(
+  sheetHeight: number,
+  layoutOffset: number,
+): string {
+  return `${Math.max(0, sheetHeight - Math.max(0, layoutOffset))}px`;
+}
+
+/**
+ * The scrolling area's end padding that preserves its scroll position across
+ * a height change, or nothing when there is none to add. Shared by the host's
+ * render and a live drag's write for the same reason as sheetLayoutHeight.
+ */
+export function scrollPreservationPadding(inset: number): string | undefined {
+  return inset > 0 ? `${inset}px` : undefined;
+}
+
 function renderedBlockEndPadding(element: HTMLElement): number {
   const value = Number.parseFloat(getComputedStyle(element).paddingBlockEnd);
   return Number.isFinite(value) ? value : 0;
@@ -242,9 +235,10 @@ function isBlockScroller(element: HTMLElement): boolean {
  * renders its dialog as a descendant of the host's body, so its pointer and
  * touch events bubble through the host's gesture listeners. That gesture is
  * the layer's own: the host must neither arm a drag on it nor take pointer
- * capture for it, which would cancel the drag the layer's own handle began
- * (`component:BottomSheet` FR7: a swipe reaches only the top sheet of a
- * stack; FR6: a covered sheet is blocked).
+ * the layer's own: the host must neither arm a drag on it nor take pointer
+ * capture for it, which would cancel the drag the layer's own handle began.
+ * A swipe reaches only the top sheet of a stack, and a covered sheet is
+ * blocked.
  */
 export function isInsideNestedLayer(
   target: EventTarget | null,
@@ -368,6 +362,14 @@ export interface UseSheetGesturesOptions {
    * on the dismiss overshoot. Lets the owner mirror it onto the scrim.
    */
   onScrimOpacity?: (opacity: number) => void;
+  /**
+   * Whether the host draws the sheet at a fixed height of its own (a caller's
+   * height) rather than the layout-split height. A drag across the base
+   * detent then writes only the transform and the end inset, and leaves the
+   * element's height to the host.
+   * @default false
+   */
+  hasFixedHeight?: boolean;
 }
 
 export interface SheetContentProps {
@@ -439,9 +441,8 @@ export interface UseSheetGesturesResult {
    * touch drag (a finger's swipe or fling past the dismiss line). True from
    * the release until the sheet is open again; false for a dismissal from a
    * control, Escape, the scrim or code, and for a mouse or pen drag. Under
-   * reduced motion a transition a touch drag's release starts cross-fades on
-   * every pointer (`design:reduced-motion` DR2), so the exit's motion needs
-   * to know.
+   * reduced motion, a transition that a touch drag's release starts
+   * cross-fades on every pointer, so the exit's motion needs to know.
    */
   isDismissedByTouchDrag: boolean;
   /**
@@ -508,6 +509,7 @@ export function useSheetGestures({
   snapHeights,
   onSnap,
   onScrimOpacity,
+  hasFixedHeight = false,
 }: UseSheetGesturesOptions): UseSheetGesturesResult {
   const [dragOffset, setDragOffset] = useState(0);
   const [settledOffset, setSettledOffset] = useState(0);
@@ -657,11 +659,13 @@ export function useSheetGestures({
   const canDismissRef = useRef(canDismiss);
   const onSnapRef = useRef(onSnap);
   const onScrimOpacityRef = useRef(onScrimOpacity);
+  const hasFixedHeightRef = useRef(hasFixedHeight);
   useEffect(() => {
     onDismissRef.current = onDismiss;
     canDismissRef.current = canDismiss;
     onSnapRef.current = onSnap;
     onScrimOpacityRef.current = onScrimOpacity;
+    hasFixedHeightRef.current = hasFixedHeight;
   });
 
   // Live drag bookkeeping (refs so pointermove doesn't churn renders).
@@ -807,12 +811,9 @@ export function useSheetGestures({
     return {offsets, peekOffset: peekOffsetFor(offsets, visibleSheetHeight)};
   }, []);
 
-  // The height the sheet WOULD have fully open, right now. While it rests at a
-  // resizing detent the element carries a pixel height computed for whatever
-  // the viewport was then, so measuring it directly just reads that stale
-  // number back. Drop the inline height for the measurement and put it back in
-  // the same synchronous block — the browser cannot paint in between, so this
-  // is invisible — and the natural CSS budget is what gets measured.
+  // The fully open height right now. At a resizing detent the element has a
+  // stale pixel height. So drop the inline height, measure, and put it back in
+  // the same synchronous block. The browser cannot paint in between.
   const measureFullyOpenHeight = useCallback((): number => {
     const element = sheetElRef.current;
     if (!element) {
@@ -828,18 +829,12 @@ export function useSheetGestures({
     return height;
   }, []);
 
-  // Detents are viewport fractions, but a settled sheet holds them as pixels:
-  // an offset to translate by, and a layout height to render. Both are read
-  // once, at gesture time. Without this, a viewport change leaves the sheet
-  // frozen at the old pixel geometry — a "half height" sheet showing 75% of a
-  // shorter window, a peek detent whose slide-down is taller than the whole
-  // window (so the sheet leaves the screen while its dialog stays modal), and
-  // a stale fully-open height for the next drag to overshoot past.
-  //
-  // Re-resolve the SAME detent — by index, the one thing that survives the
-  // units changing — against the new geometry, and re-anchor without
-  // animating: the geometry moved, not the user's finger, so there is no
-  // gesture to continue and nothing to ease.
+  // A settled sheet holds its viewport-fraction detents as pixels, read at
+  // gesture time. Without this, a viewport change freezes the old geometry: a
+  // half-height sheet shows 75% of a shorter window, or a peek slides past the
+  // whole window while the dialog stays modal. So re-resolve the same detent
+  // by index and re-anchor without animating, because the geometry moved, not
+  // the finger.
   const reanchorToSettledDetent = useCallback(() => {
     // A closed sheet re-anchors on its way back open; a live drag re-measures
     // on its own, and a settle in flight owns the layout until it lands.
@@ -954,6 +949,31 @@ export function useSheetGestures({
     [],
   );
 
+  // A live drag's layout split moved. The transform written beside this call
+  // is only correct on the new split, so the height and end inset that pair
+  // with it go to the elements in the same task. They are the values the host
+  // renders from the state this move also sets, in the same format, so its
+  // commit, whenever it lands, leaves them as they are. If the drag ends
+  // before that commit, the host's post-commit write puts the resting values
+  // back, since React sees no change from what it committed before the drag.
+  // A host with a fixed height of its own renders that height throughout and
+  // never restores a written one, so its height is not written.
+  const writeLiveLayout = useCallback(
+    (sheetHeight: number, layoutOffset: number) => {
+      const element = sheetElRef.current;
+      // Unmeasured, the host renders no height to pair with.
+      if (element != null && sheetHeight > 0 && !hasFixedHeightRef.current) {
+        element.style.height = sheetLayoutHeight(sheetHeight, layoutOffset);
+      }
+      const body = bodyNodeRef.current;
+      if (body != null) {
+        body.style.paddingBlockEnd =
+          scrollPreservationPadding(scrollPreservationInsetRef.current) ?? '';
+      }
+    },
+    [],
+  );
+
   const cancelDrag = useCallback(
     (target?: HTMLElement) => {
       const state = dragStateRef.current;
@@ -1262,23 +1282,28 @@ export function useSheetGestures({
       state.renderedOffset = next;
       state.layoutOffset = layoutOffset;
       activeOffsetRef.current = next;
+      updateScrollPreservationInset(
+        preservationInsetForOffset(
+          state.baseLayoutOffset,
+          layoutOffset,
+          state.naturalEndGap,
+        ),
+      );
       writeLiveTransform(next, layoutOffset);
       if (hasLayoutChanged) {
-        // The layout split moved: the host renders the new height, reading
-        // the offset it has to pair with it from state.
+        // The layout split moved. The new height and end inset are written
+        // with the transform, in this task: a render scheduled normally can
+        // commit after the next paint, and the transform alone on the old
+        // height would put the sheet the whole split away from the finger
+        // for that frame. The host still renders them from state, reading
+        // the offset it has to pair with the height from here.
+        writeLiveLayout(state.height, layoutOffset);
         setDragOffset(next);
       }
       if (!state.hasTraveled && next !== state.baseOffset) {
         state.hasTraveled = true;
         setIsTraveling(true);
       }
-      updateScrollPreservationInset(
-        preservationInsetForOffset(
-          state.baseLayoutOffset,
-          layoutOffset,
-          state.naturalEndGap,
-        ),
-      );
 
       // Mirror the scrim to the live drag: full at/above the mid detent,
       // fading to hidden as it collapses onto the peek detent and through the
@@ -1295,7 +1320,12 @@ export function useSheetGestures({
         scrimOpacityForOffset(next, offsets, dismissOffset, peekOffset),
       );
     },
-    [resolveDetents, updateScrollPreservationInset, writeLiveTransform],
+    [
+      resolveDetents,
+      updateScrollPreservationInset,
+      writeLiveLayout,
+      writeLiveTransform,
+    ],
   );
 
   const endDrag = useCallback(
@@ -1760,7 +1790,7 @@ export function useSheetGestures({
         // is the panel's own stylesheet's to honor (its transform transition
         // collapses under the preference), not an inline `none` here: the
         // shorthand would also silence the panel's opacity transition, the
-        // cross-fade `design:reduced-motion` DR2 asks for on a coarse pointer.
+        // reduced-motion cross-fade on a coarse pointer.
         transition:
           isOpen && (isDragging || isScrollAreaReconciling)
             ? 'none'

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -527,7 +527,7 @@ function BreadcrumbMenuTrigger({
   // The menu's rows move focus with the last input
   // (`architecture:interaction-modality` INV1); this menu has no press model
   // to activate the tracking they read, so it activates it itself.
-  useInteractionModalityTracking();
+  const {ref: modalityRef} = useInteractionModalityTracking();
 
   const popover = usePopover({
     hasLightDismiss: true,
@@ -646,6 +646,7 @@ function BreadcrumbMenuTrigger({
         ref={useMergedRefs(
           ref as React.Ref<HTMLButtonElement>,
           buttonRef,
+          modalityRef,
           popover.triggerRef,
         )}
         type="button"

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -23,8 +23,14 @@ import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 import type {BreadcrumbsVariantMap} from './index';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Breadcrumbs/Breadcrumbs.generated';
+
+registerEnglishFallback(english);
 
 // =============================================================================
 // Variant type
@@ -139,7 +145,7 @@ export function Breadcrumbs({
   ref,
   ...rest
 }: BreadcrumbsProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.breadcrumbs.label');
   const ctxValue = useMemo<BreadcrumbContextValue>(
     () => ({variant, separator}),

package/src/Button/Button.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Button.tsx
- * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator), group contexts
+ * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useComponentTranslator), group contexts
  * @output Exports Button component, ButtonProps, ButtonVariant types
  * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
  *
@@ -65,8 +65,14 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useTranslator} from '../i18n/useTranslator';
 import type {ButtonVariantMap} from './index';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Button/Button.generated';
+
+registerEnglishFallback(english);
 
 /**
  * Base button styles
@@ -463,8 +469,14 @@ const loadingStyles = stylex.create({
  * popover is never an in-flow member — it is `display: none` until shown, then
  * promoted to the top layer. Context layers also retain an inert `<template>`
  * marker so they can re-resolve their JSX position. Neither element is a group
- * member, so "last member" is: no following element sibling besides those two
- * pieces of layer infrastructure.
+ * member, so "last member" is: no following element sibling besides those
+ * pieces of layer infrastructure — the last sibling that is not one of them.
+ *
+ * Written as `:nth-last-child(1 of …)`, not `:not(:has(~ …))`: the stylesheet
+ * is global, and WebKit re-evaluates a sibling-relative `:has()` against every
+ * earlier sibling on each insertion, so filling any container on the page
+ * became quadratic (ButtonGroup FR3). A member is never layer infrastructure,
+ * so being the last such sibling is the same as having none after it.
  *
  * Reading it the other way round — marking the *buttons* and testing for a
  * marked sibling — is the trap: it silently reclassifies anything it doesn't
@@ -480,7 +492,8 @@ const loadingStyles = stylex.create({
  * The leading edge still uses `:first-child` — a member's button always precedes
  * its own layer, so the first button is genuinely `:first-child`.
  */
-const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
+const IS_LAST_ITEM =
+  ':nth-last-child(1 of :not([popover]):not(template):not(dialog))';
 
 const groupStyles = stylex.create({
   horizontal: {
@@ -598,7 +611,7 @@ export function Button({
   ...props
 }: ButtonProps): ReactNode {
   const pressFeedback = usePressFeedback();
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
   const inputGroup = useInputGroup();

package/src/Calendar/Calendar.tsx

@@ -60,8 +60,8 @@ import {
   plainDateFormat,
   plainDateWeekFieldName,
   DATE_FORMAT_WITH_WEEKDAY,
-  DATE_FORMAT_MONTH_YEAR,
 } from '../utils/plainDate';
+import {plainDateFormatStandaloneMonthYear} from '../utils/plainDate';
 import {mergeProps, composeEventHandlers, rtlStyles} from '../utils';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
@@ -94,8 +94,15 @@ import type {
 } from '../utils/dateTypes';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
-import {useLocale, useTranslator} from '../i18n';
+import {useLocale} from '../i18n';
 import {VisuallyHidden} from '../VisuallyHidden';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+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';
@@ -249,7 +256,7 @@ function firstEnabledDayOfMonth(
  * ```
  */
 export function Calendar({ref, ...props}: CalendarProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const {
     handleRef,
@@ -389,14 +396,15 @@ export function Calendar({ref, ...props}: CalendarProps) {
   );
 
   // Format month header
-  const monthYearLabel = useMemo(() => {
-    if (numberOfMonths === 1) {
-      return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR, locale);
-    }
-    return visibleMonths
-      .map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR, locale))
-      .join(' – ');
-  }, [visibleMonths, numberOfMonths, locale]);
+  // Each month is its own stand-alone label, so each starts with a capital
+  // where the locale capitalizes one (FR1).
+  const monthYearLabel = useMemo(
+    () =>
+      visibleMonths
+        .map(m => plainDateFormatStandaloneMonthYear(m, locale))
+        .join(' – '),
+    [visibleMonths, locale],
+  );
 
   // Announce the newly visible month to screen readers whenever it changes.
   // The visible month label (`<span>`) carries no live semantics, so paging the
@@ -1087,7 +1095,7 @@ function MonthGrid({
 
   // Month label for announcements
   const monthLabel = useMemo(() => {
-    return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR, locale);
+    return plainDateFormatStandaloneMonthYear(month, locale);
   }, [month, locale]);
 
   return (
@@ -1252,7 +1260,7 @@ function DayCell({
   onDayClick,
   onDayHover,
 }: DayCellProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const locale = useLocale();
   const pressable = usePressFeedback();
   const {date, isOutside, dayNumber} = day;

package/src/Calendar/hooks/useCalendarNavigation.ts

@@ -22,9 +22,8 @@ import {
   plainDateSetFirstOfMonth,
   plainDateAddMonths,
   plainDateAddDays,
-  plainDateFormat,
-  DATE_FORMAT_MONTH_YEAR,
 } from '../../utils/plainDate';
+import {plainDateFormatStandaloneMonthYear} from '../../utils/plainDate';
 import {useLocale} from '../../i18n';
 
 /**
@@ -135,14 +134,14 @@ export function useCalendarNavigation(
   }, [baseMonth, numberOfMonths]);
 
   // Format month header
-  const monthYearLabel = useMemo(() => {
-    if (numberOfMonths === 1) {
-      return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR, locale);
-    }
-    return visibleMonths
-      .map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR, locale))
-      .join(' – ');
-  }, [visibleMonths, numberOfMonths, locale]);
+  // Each month is its own stand-alone label (Calendar FR1).
+  const monthYearLabel = useMemo(
+    () =>
+      visibleMonths
+        .map(m => plainDateFormatStandaloneMonthYear(m, locale))
+        .join(' – '),
+    [visibleMonths, locale],
+  );
 
   // Navigate to previous/next month
   const navigateMonth = useCallback(

package/src/Carousel/Carousel.tsx

@@ -51,9 +51,15 @@ import type {BaseProps} from '../BaseProps';
 import {mergeProps, rtlStyles} from '../utils';
 import type {SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/Carousel/Carousel.generated';
+
+registerEnglishFallback(english);
 /**
  * Imperative control surface for the Carousel, accessed via the `handleRef`
  * prop. Methods drive the same native-scroll machinery as the built-in
@@ -340,7 +346,7 @@ export function Carousel({
   'data-testid': testId,
   ...htmlProps
 }: CarouselProps) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const ariaLabel = ariaLabelFromProps ?? t('@astryx.carousel.label');
   const scrollElRef = useRef<HTMLElement | null>(null);
   const startButtonRef = useRef<HTMLButtonElement>(null);

package/src/Center/Center.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Center/Center.doc.mjs
- * - /packages/core/src/Center/Center.spec.md
+ * - /docs/specs/components/Center/Center.spec.md
  * - /packages/core/src/Center/Center.test.tsx
  * - /apps/storybook/stories/Center.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Center/ (showcase blocks)