@astryxdesign/core 0.7.6-canary.df8928a → 0.7.6-canary.e0548a6

package/dist/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAUhD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA8FlB;yBAhHe,WAAW"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAUhD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA8FlB;yBAhHe,WAAW"}

package/dist/AlertDialog/AlertDialog.js

@@ -27,9 +27,11 @@ import { Text } from "../Text/Text.js";
 import { Button } from "../Button/Button.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/useTranslator.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/AlertDialog/AlertDialog.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const SMALL_SCREEN_QUERY = '(max-width: 640px)';
 const styles = {
   action: {
@@ -87,7 +89,7 @@ export function AlertDialog({
   'data-testid': testId,
   ...rest
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const cancelLabel = cancelLabelFromProps ?? t('@astryx.alertDialog.cancel');
   const titleId = useId();
   const descriptionId = useId();

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAqND,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAykBf;yBAxlBe,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+ChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuOD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAgxBf;yBA/xBe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -23,11 +23,15 @@ import React from 'react';
 import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, focusVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Layout } from "../Layout/Layout.js";
 import { LayoutHeader } from "../Layout/LayoutHeader.js";
 import { LayoutPanel } from "../Layout/LayoutPanel.js";
 import { LayoutContent } from "../Layout/LayoutContent.js";
+import { LayoutAreaContext } from "../Layout/LayoutAreaContext.js";
+import { LayoutDividerContext } from "../Layout/LayoutDividerContext.js";
+import { DEFAULT_LAYOUT_SLOTS, LayoutSlotsContext } from "../Layout/LayoutSlotsContext.js";
+import { layoutReset } from "../Layout/layoutReset.js";
 import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
 import { MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS } from "../MobileNav/MobileNav.js";
 import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
@@ -38,15 +42,19 @@ import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
 import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
 import { AppShellMobileContext } from "./AppShellMobileContext.js";
 import { mergeProps, isRenderable } from "../utils/index.js";
-import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { focusOutlineProps, focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
 import { useThemeDefinition } from "../theme/useTheme.js";
 import { DEFAULT_WIDTH_BREAKPOINTS } from "../theme/themeAdaptations.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { attachScrollKeyboardDelegation } from "../hooks/scrollKeyboardDelegation.js";
+import { observeMainOverflow } from "./observeMainOverflow.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/AppShell/AppShell.generated.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
   mode,
@@ -168,6 +176,14 @@ const styles = {
     kI3sdo: "x1uvtmcs",
     $$css: true
   },
+  mainElevatedCorner: {
+    krdFHd: "x9a4xmf",
+    $$css: true
+  },
+  mainScrollRegionInset: {
+    kInvED: "x1wfwxd8 x1nw7mhf",
+    $$css: true
+  },
   contentBgSurface: {
     kWkggS: "x10xzikg",
     $$css: true
@@ -260,7 +276,7 @@ export function AppShell({
   ref,
   ...rest
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const activeTheme = useThemeDefinition();
   // =========================================================================
   // Parse mobileNav prop — normalize to config, custom element, or disabled
@@ -332,9 +348,81 @@ export function AppShell({
   const handleSkipLinkClick = useCallback(() => {
     document.getElementById(MAIN_CONTENT_ID)?.focus();
   }, []);
+
+  // Main draws its focus ring only for focus a Tab press moved onto it, and
+  // keeps it for as long as that focus stays, even once the content fits.
+  // Programmatic focus (the skip link, a script's focus() on a route change)
+  // draws none (FR4), even after keyboard input, where :focus-visible alone
+  // would match. See the effect below for how a Tab move is told apart.
+  const [isTabFocus, setIsTabFocus] = useState(false);
+  // A window or tab switch blurs main without moving focus off it: main stays
+  // the document's active element, and focus comes back to it with no Tab
+  // press. The ring holds across that round trip; any real focus move ends it.
+  const isMainAwayRef = useRef(false);
+  const handleMainBlur = useCallback(event => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (document.activeElement === event.currentTarget) {
+      isMainAwayRef.current = true;
+      return;
+    }
+    isMainAwayRef.current = false;
+    setIsTabFocus(false);
+  }, []);
   const isFill = height === 'fill';
   const isAuto = height === 'auto';
 
+  // With `fill`, main is the page's scroller. While its content overflows it
+  // must be reachable from the keyboard even when nothing inside it is
+  // focusable (AST-025 FR12): it joins the tab order, and Tab entry moves on
+  // to its first link or button when it has one. Only `fill` observes main
+  // (PR1); LayoutContent keeps owning main's overflow and styles.
+  const [isMainOverflowing, setIsMainOverflowing] = useState(false);
+  const isMainScrollRegion = isFill && isMainOverflowing;
+  // Main's node is owned through a ref, never React state. Under `fill` its
+  // overflow is observed while the node is attached, and while main is a
+  // scroll region the keyboard delegation is attached to it. The ref callback
+  // changes with `fill`, so switching modes detaches and re-attaches main in
+  // the same commit; a detached or replaced node releases both before the new
+  // node takes over.
+  const mainNodeRef = useRef(null);
+  const mainOverflowRef = useRef(null);
+  const mainDelegationRef = useRef(null);
+  const isMainScrollRegionRef = useRef(isMainScrollRegion);
+  const syncMainDelegation = useCallback(() => {
+    const node = isMainScrollRegionRef.current ? mainNodeRef.current : null;
+    const current = mainDelegationRef.current;
+    if (current?.node === node) {
+      return;
+    }
+    current?.release();
+    mainDelegationRef.current = node == null ? null : {
+      node,
+      release: attachScrollKeyboardDelegation(node, node)
+    };
+  }, []);
+  const setMainNode = useCallback(node => {
+    mainNodeRef.current = node;
+    const observed = isFill ? node : null;
+    const current = mainOverflowRef.current;
+    if (current?.node !== observed) {
+      current?.stop();
+      mainOverflowRef.current = observed == null ? null : {
+        node: observed,
+        stop: observeMainOverflow(observed, setIsMainOverflowing)
+      };
+      if (observed == null) {
+        setIsMainOverflowing(false);
+      }
+    }
+    syncMainDelegation();
+  }, [isFill, syncMainDelegation]);
+  useEffect(() => {
+    isMainScrollRegionRef.current = isMainScrollRegion;
+    syncMainDelegation();
+  }, [isMainScrollRegion, syncMainDelegation]);
+
   // Nav style derived values
   const hasBanner = isRenderable(banner);
   const hasTopNav = isRenderable(topNav);
@@ -459,6 +547,9 @@ export function AppShell({
   // (`component:SideNav` FR6).
   const railRef = useRef(null);
   const mainRef = useRef(null);
+  // Main's node goes to the glide above and to the overflow observation
+  // that, under `fill`, makes main a keyboard stop.
+  const mainRefs = useMergedRefs(mainRef, setMainNode);
   const backdropRef = useRef(null);
   const contentLayout = useAnimatedLayout({
     containerRef: shellRef
@@ -617,17 +708,104 @@ export function AppShell({
   // Build main content
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
+  // While main is a keyboard stop, a Tab keydown anywhere in the document
+  // (capture, so Shift+Tab from the page start counts too) marks the next
+  // focus move, and so does the window's focus event for keyboard focus that
+  // enters the document from outside (Tab or Shift+Tab from the page
+  // embedding this one), where the browser's own `:focus-visible` then tells
+  // a key from a pointer. A mark counts only once its event's dispatch has
+  // finished uncancelled (`eventPhase === 0`): the browser's own focus move
+  // follows that dispatch in the same task, while a focus() a page's handler
+  // calls during it is programmatic and draws no ring (FR4). The marks expire
+  // on a zero-delay timer, so a cancelled Tab, a Tab out of the document or a
+  // window focus with nothing focused leaves nothing for a later focus().
+  useEffect(() => {
+    if (!isMainScrollRegion) {
+      return;
+    }
+    let tabKeydown = null;
+    let windowFocus = null;
+    let expiry;
+    const expireMarks = () => {
+      clearTimeout(expiry);
+      expiry = setTimeout(() => {
+        tabKeydown = null;
+        windowFocus = null;
+      }, 0);
+    };
+    const onKeyDown = event => {
+      tabKeydown = event.key === 'Tab' ? event : null;
+      windowFocus = null;
+      expireMarks();
+    };
+    const onPointerDown = () => {
+      tabKeydown = null;
+      windowFocus = null;
+    };
+    const onWindowFocus = event => {
+      windowFocus = event;
+      expireMarks();
+    };
+    const onFocusIn = event => {
+      // Still dispatching: this focus move is a handler's focus(), so it
+      // reads no mark and leaves the mark for the browser's own move.
+      const tabDone = tabKeydown != null && tabKeydown.eventPhase === 0;
+      const focusDone = windowFocus != null && windowFocus.eventPhase === 0;
+      const arrivedByTab = tabDone && tabKeydown?.defaultPrevented === false;
+      const enteredDocument = focusDone;
+      if (tabDone) {
+        tabKeydown = null;
+      }
+      if (focusDone) {
+        windowFocus = null;
+      }
+      const main = mainNodeRef.current;
+      const isMain = event.target != null && event.target === main;
+      if (isMainAwayRef.current) {
+        // Focus comes back after a window or tab switch (main keeps the ring
+        // it had), or lands elsewhere (main's ring is over).
+        isMainAwayRef.current = false;
+        if (isMain && !arrivedByTab) {
+          return;
+        }
+        if (!isMain) {
+          setIsTabFocus(false);
+          return;
+        }
+      }
+      if (isMain) {
+        setIsTabFocus(arrivedByTab || enteredDocument && main.matches(':focus-visible'));
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('focusin', onFocusIn, true);
+    window.addEventListener('focus', onWindowFocus);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('focusin', onFocusIn, true);
+      window.removeEventListener('focus', onWindowFocus);
+      clearTimeout(expiry);
+    };
+  }, [isMainScrollRegion]);
+
+  // Tab focus on main draws the ring until main loses focus; programmatic
+  // focus never does (FR4).
+  const drawsMainFocusRing = isTabFocus;
   const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
-    ref: mainRef,
+    ref: mainRefs,
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID
     // Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
     // browsers won't move focus to the div when the skip link is activated.
+    // A keyboard stop only while it scrolls overflowing content.
     ,
-    tabIndex: -1,
+    tabIndex: isMainScrollRegion ? 0 : -1,
     isScrollable: isFill,
-    xstyle: [contentAreaStyle, styles.mainFocusTarget],
+    onBlur: handleMainBlur,
+    xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
     children: children
   });
 
@@ -691,40 +869,52 @@ export function AppShell({
   }) : undefined;
   return /*#__PURE__*/_jsx(AppShellMobileContext, {
     value: mobileContextValue,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsx("div", {
       ...rest,
       ref: useMergedRefs(ref, shellRef),
       "data-testid": dataTestId,
       ...mergeProps(themeProps('app-shell', {
         variant
-      }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("a", {
-        href: `#${MAIN_CONTENT_ID}`,
-        onClick: handleSkipLinkClick,
-        ...focusOutlineProps.focusVisible(styles.skipLink),
-        "data-testid": "skip-to-content",
-        children: t('@astryx.appShell.skipToContent')
-      }), /*#__PURE__*/_jsx(Layout, {
-        height: height,
-        padding: 0,
-        header: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [headerContent, autoMobileTopBar]
-        }),
-        start: sideNavContent,
-        content: mainContent
-      }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
-        mode: isMobileNavActivityVisible ? 'visible' : 'hidden',
-        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
-          value: "drawer",
-          children: sideNav
-        }), hasTopNav && /*#__PURE__*/_jsx(TopNavMobileContentContext, {
-          value: drawerMobileContentValue,
-          children: /*#__PURE__*/_jsx(TopNavRenderContext, {
-            value: "drawer",
-            children: topNav
+      }), stylex.props(styles.root,
+      // A layout root (FR18): nothing an ancestor Layout, Card or
+      // Section publishes reaches the shell (component:Layout FR8).
+      layoutReset, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
+      children: /*#__PURE__*/_jsx(LayoutAreaContext, {
+        value: null,
+        children: /*#__PURE__*/_jsx(LayoutSlotsContext, {
+          value: DEFAULT_LAYOUT_SLOTS,
+          children: /*#__PURE__*/_jsxs(LayoutDividerContext, {
+            value: null,
+            children: [/*#__PURE__*/_jsx("a", {
+              href: `#${MAIN_CONTENT_ID}`,
+              onClick: handleSkipLinkClick,
+              ...focusOutlineProps.focusVisible(styles.skipLink),
+              "data-testid": "skip-to-content",
+              children: t('@astryx.appShell.skipToContent')
+            }), /*#__PURE__*/_jsx(Layout, {
+              height: height,
+              padding: 0,
+              header: /*#__PURE__*/_jsxs(_Fragment, {
+                children: [headerContent, autoMobileTopBar]
+              }),
+              start: sideNavContent,
+              content: mainContent
+            }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
+              mode: isMobileNavActivityVisible ? 'visible' : 'hidden',
+              children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
+                value: "drawer",
+                children: sideNav
+              }), hasTopNav && /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+                value: drawerMobileContentValue,
+                children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+                  value: "drawer",
+                  children: topNav
+                })
+              })]
+            })]
           })
-        })]
-      })]
+        })
+      })
     })
   });
 }

package/dist/AppShell/observeMainOverflow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export declare function observeMainOverflow(main: HTMLElement, onChange: (overflows: boolean) => void): () => void;
+//# sourceMappingURL=observeMainOverflow.d.ts.map

package/dist/AppShell/observeMainOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AAyCA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}

package/dist/AppShell/observeMainOverflow.js

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file observeMainOverflow.ts
+ * @input AppShell's main region under `height="fill"`: its own scroll
+ *   container, holding its content as direct children with no wrapper
+ * @output observeMainOverflow(main, onChange): reports whether main's content
+ *   overflows it on either axis, once at the start and on every change, and
+ *   returns the function that stops observing
+ * @position Internal to AppShell and never exported. AppShell makes main a
+ *   keyboard stop only while it overflows (`spec:AST-025` FR12,
+ *   `component:AppShell` FR4 and PR1). Main has no inner content box, so its
+ *   content grows inside it without resizing it: its direct children's sizes
+ *   are watched instead.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/AppShell/AppShell.tsx
+ * - /packages/core/src/AppShell/observeMainOverflow.test.ts
+ */
+import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
+import { observeMutations } from "../utils/sharedMutationObserver.js";
+import { observeResize } from "../utils/sharedResizeObserver.js";
+
+/**
+ * Main's content: layout attributes, text and children, all the way down.
+ * One shared observer serves every registration with these options.
+ */
+const CONTENT_MUTATIONS = {
+  attributes: true,
+  attributeFilter: ['class', 'dir', 'hidden', 'style'],
+  characterData: true,
+  childList: true,
+  subtree: true
+};
+
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export function observeMainOverflow(main, onChange) {
+  let isActive = true;
+  let frame = null;
+  let overflows = null;
+  const measure = () => {
+    frame = null;
+    if (!isActive) {
+      return;
+    }
+    const computedStyle = getComputedStyle(main);
+    const mapping = getLogicalAxisMapping(computedStyle.writingMode, computedStyle.direction);
+    const inline = measureLogicalScrollAxis(main, 'inline', mapping);
+    const block = measureLogicalScrollAxis(main, 'block', mapping);
+    if (inline == null || block == null) {
+      return;
+    }
+    const next = inline.isScrollable || block.isScrollable;
+    if (next !== overflows) {
+      overflows = next;
+      onChange(next);
+    }
+  };
+  const scheduleMeasure = () => {
+    if (isActive && frame == null) {
+      frame = window.requestAnimationFrame(measure);
+    }
+  };
+
+  // Main keeps its size while its content grows; its children do not. Each
+  // direct child's size is watched, following the children as they change.
+  const childObservers = new Map();
+  const syncChildObservers = () => {
+    const children = new Set(Array.from(main.children));
+    for (const [child, stop] of childObservers) {
+      if (!children.has(child)) {
+        stop();
+        childObservers.delete(child);
+      }
+    }
+    for (const child of children) {
+      if (!childObservers.has(child)) {
+        childObservers.set(child, observeResize(child, scheduleMeasure));
+      }
+    }
+  };
+  const onContentChange = () => {
+    syncChildObservers();
+    scheduleMeasure();
+  };
+  measure();
+  syncChildObservers();
+  const stopObservingMain = observeResize(main, scheduleMeasure);
+  const stopObservingContent = observeMutations(main, CONTENT_MUTATIONS, onContentChange);
+  window.addEventListener('resize', scheduleMeasure);
+  window.visualViewport?.addEventListener('resize', scheduleMeasure);
+  main.addEventListener('load', scheduleMeasure, true);
+  main.addEventListener('transitionend', scheduleMeasure);
+  main.addEventListener('animationend', scheduleMeasure);
+  const fonts = document.fonts;
+  fonts?.addEventListener?.('loadingdone', scheduleMeasure);
+  void fonts?.ready.then(scheduleMeasure);
+  return () => {
+    isActive = false;
+    if (frame != null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    stopObservingMain();
+    stopObservingContent();
+    for (const stop of childObservers.values()) {
+      stop();
+    }
+    childObservers.clear();
+    window.removeEventListener('resize', scheduleMeasure);
+    window.visualViewport?.removeEventListener('resize', scheduleMeasure);
+    main.removeEventListener('load', scheduleMeasure, true);
+    main.removeEventListener('transitionend', scheduleMeasure);
+    main.removeEventListener('animationend', scheduleMeasure);
+    fonts?.removeEventListener?.('loadingdone', scheduleMeasure);
+  };
+}

package/dist/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file Avatar.tsx
  * @input Uses React, HTMLAttributes, ReactNode, useState, useRef; useTooltip
- *   (Tooltip hook) for the optional name-on-hover tooltip; useTranslator (i18n)
+ *   (Tooltip hook) for the optional name-on-hover tooltip; useComponentTranslator (i18n)
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AASD,eAAO,MAAM,WAAW;;;;;;;;;;EAUtB,CAAC;AA2JH,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,KAAgB,EAChB,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA6Vb;yBAjXe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAmCrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AASD,eAAO,MAAM,WAAW;;;;;;;;;;EAUtB,CAAC;AA2JH,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,KAAgB,EAChB,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA6Vb;yBAjXe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -5,7 +5,7 @@
 /**
  * @file Avatar.tsx
  * @input Uses React, HTMLAttributes, ReactNode, useState, useRef; useTooltip
- *   (Tooltip hook) for the optional name-on-hover tooltip; useTranslator (i18n)
+ *   (Tooltip hook) for the optional name-on-hover tooltip; useComponentTranslator (i18n)
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *
@@ -33,7 +33,10 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTooltip } from "../Tooltip/useTooltip.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { useTranslator } from "../i18n/index.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/Avatar/Avatar.generated.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -47,7 +50,6 @@ import { useTranslator } from "../i18n/index.js";
  *
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
 
 /**
@@ -433,7 +435,7 @@ export function Avatar({
   // neither a name nor a labelled status, the avatar is decorative — expose
   // it as `presentation`/`aria-hidden` rather than announcing a meaningless
   // generic "Avatar" (obs-9).
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const nameLabel = meaningfulAlt || meaningfulName;
   // This render can only see a label introspected off a directly-passed
   // element. A status inside a consumer's own wrapper reports through the ref

package/dist/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAczE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,KAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAmE9B;yBAjFe,WAAW"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAoBzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,KAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAmE9B;yBAjFe,WAAW"}

package/dist/AvatarGroup/AvatarGroup.js

@@ -31,12 +31,14 @@ import { mergeProps } from "../utils/index.js";
 import { composeEventHandlers } from "../utils/composeEventHandlers.js";
 import { AvatarGroupContext } from "./AvatarGroupContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/AvatarGroup/AvatarGroup.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const OVERLAP_RATIO = 0.25;
 const styles = {
   root: {
@@ -89,7 +91,7 @@ export function AvatarGroup({
   ref,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const ariaLabel = ariaLabelFromProps ?? t('@astryx.avatarGroup.label');
   const numericSize = resolveSize(size);
   const overlap = Math.round(numericSize * OVERLAP_RATIO);

package/dist/AvatarGroup/AvatarGroupOverflow.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file AvatarGroupOverflow.tsx
- * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
+ * @input Uses React, StyleX, AvatarGroupContext, i18n (useComponentTranslator)
  * @output Exports AvatarGroupOverflow for overflow indicator
  * @position Slot component used inside AvatarGroup
  *

package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAuEtC;yBAhFe,mBAAmB"}
+{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAuEtC;yBAhFe,mBAAmB"}