@astryxdesign/core 0.5.1 → 0.5.2-canary.1917581

package/dist/Popover/usePopover.js

@@ -22,6 +22,7 @@ import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
+import { FOCUSABLE_SELECTOR } from "../hooks/focusableSelector.js";
 import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
@@ -29,6 +30,24 @@ import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
 import { stableClassName } from "../naming.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FALLBACK_CLOSE_SELECTOR = '[data-astryx-popover-fallback-close]';
+function attemptFocus(element) {
+  try {
+    element.focus();
+  } catch {
+    // Ignore non-focusable elements; the caller will try the next target.
+  }
+  return document.activeElement === element;
+}
+function focusFirstContentControl(container) {
+  const focusable = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(element => element.closest(FALLBACK_CLOSE_SELECTOR) == null);
+  for (const element of focusable) {
+    if (attemptFocus(element)) {
+      return true;
+    }
+  }
+  return false;
+}
 const styles = {
   surface: {
     kWkggS: "x1prclbq",
@@ -39,6 +58,7 @@ const styles = {
   },
   contentWrapper: {
     kVAEAm: "x1n2onr6",
+    kI3sdo: "x1a2a7pz",
     $$css: true
   },
   closeButtonWrapper: {
@@ -129,6 +149,7 @@ function usePopoverImplementation(options = {}) {
 
   // Track whether to skip auto-focus for the current open event
   const skipAutoFocusRef = useRef(false);
+  const focusTargetRef = useRef('first');
 
   // Core layer for popover positioning
   const layer = useLayerInternal({
@@ -148,20 +169,40 @@ function usePopoverImplementation(options = {}) {
     isActive: layer.isOpen,
     onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined
   });
+  const focusInitialTarget = useCallback(() => {
+    const container = contentRef.current;
+    if (!container) {
+      return;
+    }
+    if (focusFirstContentControl(container)) {
+      return;
+    }
+    if (role === 'dialog') {
+      attemptFocus(container);
+      return;
+    }
+    focusFirst();
+  }, [contentRef, focusFirst, role]);
 
   // Auto-focus first element when popover opens (unless skipped)
   useEffect(() => {
     if (layer.isOpen && hasAutoFocus && !skipAutoFocusRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready
       requestAnimationFrame(() => {
-        focusFirst();
+        const container = contentRef.current;
+        if (focusTargetRef.current === 'container' && role === 'dialog' && container) {
+          attemptFocus(container);
+        } else {
+          focusInitialTarget();
+        }
       });
     }
-    // Reset the skip flag after the effect runs
+    // Reset per-open focus preferences after the popover closes.
     if (!layer.isOpen) {
       skipAutoFocusRef.current = false;
+      focusTargetRef.current = 'first';
     }
-  }, [layer.isOpen, hasAutoFocus, focusFirst]);
+  }, [contentRef, layer.isOpen, hasAutoFocus, focusInitialTarget, role]);
 
   // Combined ref for trigger element (layer anchor + our ref)
   const triggerRef = useCallback(el => {
@@ -172,20 +213,22 @@ function usePopoverImplementation(options = {}) {
   // Show function with optional skipAutoFocus
   const show = useCallback(showOptions => {
     skipAutoFocusRef.current = showOptions?.skipAutoFocus ?? false;
+    focusTargetRef.current = showOptions?.focusTarget ?? 'first';
     layer.show();
   }, [layer]);
 
   // Toggle function
-  const toggle = useCallback(() => {
+  const toggleWithOptions = useCallback(showOptions => {
     if (layer.wasJustDismissed()) {
       return;
     }
     if (layer.isOpen) {
       layer.hide();
     } else {
-      show();
+      show(showOptions);
     }
   }, [layer, show]);
+  const toggle = useCallback(() => toggleWithOptions(), [toggleWithOptions]);
 
   // ARIA attributes for the trigger
   const triggerProps = {
@@ -210,11 +253,13 @@ function usePopoverImplementation(options = {}) {
         role: role === 'dialog' ? 'dialog' : undefined,
         "aria-modal": role === 'dialog' && isModal ? true : undefined,
         "aria-label": role === 'dialog' ? dialogLabel : undefined,
+        tabIndex: role === 'dialog' ? -1 : undefined,
         ...mergeProps({
           ...surfaceProps,
           className: surfaceClassName
         }, stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle), className, style),
         children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
+          "data-astryx-popover-fallback-close": "",
           ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
           children: /*#__PURE__*/_jsx(Button, {
             variant: "secondary",
@@ -235,6 +280,7 @@ function usePopoverImplementation(options = {}) {
     show,
     hide: layer.hide,
     toggle,
+    toggleWithOptions,
     wasJustDismissed: layer.wasJustDismissed,
     isOpen: layer.isOpen,
     id: layer.id,
@@ -245,6 +291,7 @@ function usePopoverImplementation(options = {}) {
 export function usePopover(options = {}) {
   const {
     wasJustDismissed: _,
+    toggleWithOptions: __,
     ...popover
   } = usePopoverImplementation(options);
   return popover;

package/dist/Toast/useToastGesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToastGesture.d.ts","sourceRoot":"","sources":["../../src/Toast/useToastGesture.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAWxE,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAoB3C,UAAU,sBAAsB;IAC9B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,CAClB,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,KACd,OAAO,CAAC;CACd;AAED,UAAU,oBAAoB;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAcD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,aAAa,EACb,UAAU,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,GACnB,EAAE,sBAAsB,GAAG,qBAAqB,CA4QhD"}
+{"version":3,"file":"useToastGesture.d.ts","sourceRoot":"","sources":["../../src/Toast/useToastGesture.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAWxE,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAsB3C,UAAU,sBAAsB;IAC9B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,CAClB,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,KACd,OAAO,CAAC;CACd;AAED,UAAU,oBAAoB;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAcD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,aAAa,EACb,UAAU,EACV,WAAW,EACX,OAAO,EACP,kBAAkB,GACnB,EAAE,sBAAsB,GAAG,qBAAqB,CA+ThD"}

package/dist/Toast/useToastGesture.js

@@ -62,6 +62,7 @@ export function useToastGesture({
     }
     const surfaceSize = Math.max(root.getBoundingClientRect().height, 1);
     gestureRef.current = {
+      source: point.source,
       pointerId: point.pointerId,
       startX: point.clientX,
       startY: point.clientY,
@@ -77,7 +78,7 @@ export function useToastGesture({
   const moveGesture = useCallback((point, preventDefault, releaseCapture) => {
     const state = gestureRef.current;
     const root = rootRef.current;
-    if (!state || !root || point.pointerId !== state.pointerId) {
+    if (!state || !root || point.source !== state.source || point.pointerId !== state.pointerId) {
       return;
     }
     const deltaX = point.clientX - state.startX;
@@ -111,7 +112,7 @@ export function useToastGesture({
   const endGesture = useCallback(point => {
     const state = gestureRef.current;
     const root = rootRef.current;
-    if (!state || !root || point.pointerId !== state.pointerId) {
+    if (!state || !root || point.source !== state.source || point.pointerId !== state.pointerId) {
       return;
     }
     const travel = Math.max(0, (point.clientY - state.startY) * state.direction);
@@ -120,6 +121,10 @@ export function useToastGesture({
     gestureRef.current = null;
     root.style.removeProperty('transition-duration');
     if (isDismissed) {
+      // The exit animation owns the final translation. Clear the live-drag
+      // transform/fade/scale first so a standalone Toast does not remain
+      // partially translated or faded after its dismiss callback fires.
+      clearTransientStyles(root);
       root.style.setProperty('--_toast-swipe-exit-y', state.direction === 1 ? SWIPE_EXIT_DISTANCE : `calc(-1 * ${SWIPE_EXIT_DISTANCE})`);
       dismiss();
       return;
@@ -130,7 +135,12 @@ export function useToastGesture({
     }
   }, [dismiss, resumeTimer]);
   const handlePointerDown = useCallback(event => {
-    if (event.pointerType === 'pen' && (event.button == null || event.button === 0) && beginGesture(event, event.target)) {
+    if (event.pointerType === 'pen' && (event.button == null || event.button === 0) && beginGesture({
+      source: 'pen',
+      pointerId: event.pointerId,
+      clientX: event.clientX,
+      clientY: event.clientY
+    }, event.target)) {
       rootRef.current?.setPointerCapture?.(event.pointerId);
     }
   }, [beginGesture]);
@@ -138,17 +148,27 @@ export function useToastGesture({
     if (event.pointerType !== 'pen') {
       return;
     }
-    moveGesture(event, () => event.preventDefault(), () => rootRef.current?.releasePointerCapture?.(event.pointerId));
+    moveGesture({
+      source: 'pen',
+      pointerId: event.pointerId,
+      clientX: event.clientX,
+      clientY: event.clientY
+    }, () => event.preventDefault(), () => rootRef.current?.releasePointerCapture?.(event.pointerId));
   }, [moveGesture]);
   const handlePointerUp = useCallback(event => {
     if (event.pointerType !== 'pen') {
       return;
     }
     rootRef.current?.releasePointerCapture?.(event.pointerId);
-    endGesture(event);
+    endGesture({
+      source: 'pen',
+      pointerId: event.pointerId,
+      clientX: event.clientX,
+      clientY: event.clientY
+    });
   }, [endGesture]);
   const handlePointerCancel = useCallback(event => {
-    if (event.pointerType === 'pen' && gestureRef.current?.pointerId === event.pointerId) {
+    if (event.pointerType === 'pen' && gestureRef.current?.source === 'pen' && gestureRef.current?.pointerId === event.pointerId) {
       resetGesture(true);
     }
   }, [resetGesture]);
@@ -158,21 +178,34 @@ export function useToastGesture({
       return;
     }
     const point = touch => ({
+      source: 'touch',
       pointerId: touch.identifier,
       clientX: touch.clientX,
       clientY: touch.clientY
     });
     const changedTouch = event => {
-      const pointerId = gestureRef.current?.pointerId;
+      const state = gestureRef.current;
+      const pointerId = state?.source === 'touch' ? state.pointerId : null;
       return pointerId == null ? undefined : [...event.changedTouches].find(touch => touch.identifier === pointerId);
     };
     const handleTouchStart = event => {
-      const touch = event.touches.length === 1 ? event.changedTouches[0] : null;
-      if (touch) {
+      if (event.touches?.length !== 1) {
+        // A second contact means the browser may be handling pinch zoom or
+        // two-finger scrolling. Abandon any accepted one-finger swipe before
+        // touchmove can suppress that native gesture.
+        resetGesture(true);
+        return;
+      }
+      const touch = event.changedTouches[0];
+      if (touch != null) {
         beginGesture(point(touch), event.target);
       }
     };
     const handleTouchMove = event => {
+      if (event.touches?.length !== 1) {
+        resetGesture(true);
+        return;
+      }
       const touch = changedTouch(event);
       if (touch) {
         moveGesture(point(touch), () => {
@@ -183,6 +216,10 @@ export function useToastGesture({
       }
     };
     const handleTouchEnd = event => {
+      if (event.touches.length > 0) {
+        resetGesture(true);
+        return;
+      }
       const touch = changedTouch(event);
       if (touch) {
         endGesture(point(touch));

package/dist/astryx.css

@@ -1012,6 +1012,7 @@
   .xkd40ry:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--spacing-1))}
   .x3kzqx6:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--spacing-2))}
   .xmequkd:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(var(--spacing-1) * -1)}
+  .xxeicf8:not(#\#):not(#\#):not(#\#){margin-inline-end:max(var(--spacing-4),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
   .xnur1sd:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--spacing-1)}
   .x1c9tiao:not(#\#):not(#\#):not(#\#){margin-inline-end:var(--x-marginInlineEnd)}
   .x1qfufaz:not(#\#):not(#\#):not(#\#){margin-inline-start:-8px}
@@ -1022,6 +1023,7 @@
   .x1wim8z0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
   .x1s1akpx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-2))}
   .x1xrm450:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
+  .x47fqr9:not(#\#):not(#\#):not(#\#){margin-inline-start:max(var(--spacing-4),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
   .x12vn87o:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_tree-indent,0px)}
   .xladpz9:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-0-5)}
   .x11g1kdw:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-1)}
@@ -1331,6 +1333,7 @@
   .xbt4iw:focus-within:not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .xo74pv5:focus-within:not(#\#):not(#\#):not(#\#){position:static}
   .x1mqgsch:is([data-astryx-scrolling]):not(#\#):not(#\#):not(#\#){scrollbar-width:none}
+  .x8ppqj.x8ppqj:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(.98)}
   .xaafvuh:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(0deg)}
   .x1nxqau:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(90deg)}
   .xgtlewx:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1)}
@@ -1555,6 +1558,7 @@
   .x6h7pi7:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
   .x1cdrix3:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--radius-chat))}
   .xdrfirk:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--spacing-1-5))}
+  .x1kps3mo:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:max(var(--spacing-4),env(safe-area-inset-bottom,0px))}
   .xlstkdb:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-0-5)}
   .x14cgwvg:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-1)}
   .x1p37lm5:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--spacing-2)}
@@ -1572,6 +1576,7 @@
   .x1c40v9y:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--spacing-1-5))}
   .x1ajqlyv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--spacing-2))}
   .x1233pnv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc((1em * var(--text-body-leading) - 6px) / 2)}
+  .xsoubt3:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:max(var(--spacing-4),env(safe-area-inset-top,0px))}
   .xjc2qm6:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-0-5)}
   .xcsaf9d:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-1)}
   .xtbrsbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--spacing-2)}
@@ -1585,6 +1590,7 @@
   .x1xiyphd:not(#\#):not(#\#):not(#\#):not(#\#){max-height:240px}
   .xuyqlj2:not(#\#):not(#\#):not(#\#):not(#\#){max-height:300px}
   .xbhvqqn:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100% - var(--spacing-3))}
+  .xtm2925:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100vh - var(--spacing-4) - var(--spacing-4));max-height:calc(100dvb - max(var(--spacing-4),env(safe-area-inset-top,0px)) - max(var(--spacing-4),env(safe-area-inset-bottom,0px)))}
   .x14bu9tk:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(92dvh + 48px)}
   .xpnbb6b:not(#\#):not(#\#):not(#\#):not(#\#){max-height:min(480px,calc(100vh - 32px))}
   .x7ab17h:not(#\#):not(#\#):not(#\#):not(#\#){max-height:none}
@@ -1604,6 +1610,8 @@
   .x11gisft:not(#\#):not(#\#):not(#\#):not(#\#){max-width:640px}
   .x1ap80js:not(#\#):not(#\#):not(#\#):not(#\#){max-width:800px}
   .xq8v1hd:not(#\#):not(#\#):not(#\#):not(#\#){max-width:90%}
+  .xbd96yr:not(#\#):not(#\#):not(#\#):not(#\#){max-width:calc(100% - var(--spacing-4));max-width:calc(100% - max(var(--spacing-4),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}
+  .xs2v1xk:not(#\#):not(#\#):not(#\#):not(#\#){max-width:calc(100vw - var(--spacing-4) - var(--spacing-4));max-width:calc(100vi - max(var(--spacing-4),env(safe-area-inset-left,0px)) - max(var(--spacing-4),env(safe-area-inset-right,0px)))}
   .xl6temz:not(#\#):not(#\#):not(#\#):not(#\#){max-width:max(80%,280px)}
   .x1m1aaou:not(#\#):not(#\#):not(#\#):not(#\#){max-width:min(960px,calc(100dvw - var(--spacing-4)))}
   .x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
@@ -1641,6 +1649,8 @@
   .x900493:not(#\#):not(#\#):not(#\#):not(#\#){min-width:48px}
   .x13n9wmd:not(#\#):not(#\#):not(#\#):not(#\#){min-width:4ch}
   .xfvyar9:not(#\#):not(#\#):not(#\#):not(#\#){min-width:60px}
+  .x1ks9poc:not(#\#):not(#\#):not(#\#):not(#\#){min-width:anchor-size(width);min-width:min(anchor-size(width),calc(100% - var(--spacing-4)));min-width:min(anchor-size(width),calc(100% - max(var(--spacing-4),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))))}
+  .xagy28z:not(#\#):not(#\#):not(#\#):not(#\#){min-width:anchor-size(width);min-width:min(anchor-size(width),calc(100vw - var(--spacing-4) - var(--spacing-4)));min-width:min(anchor-size(width),calc(100vi - max(var(--spacing-4),env(safe-area-inset-left,0px)) - max(var(--spacing-4),env(safe-area-inset-right,0px))))}
   .xrzjruh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:anchor-size(width)}
   .x8wyhu6:not(#\#):not(#\#):not(#\#):not(#\#){min-width:calc(anchor-size(width) + 16px)}
   .x1pshirs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:fit-content}

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AA8BA;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAgFD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,CA6NvB"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AA8BA;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAgFD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrE;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CAAC,CAAC,CAAC,CA0OvB"}

package/dist/hooks/useFocusTrap.js

@@ -321,6 +321,18 @@ export function useFocusTrap(options) {
         }
         const first = focusable[0];
         const last = focusable[focusable.length - 1];
+        if (document.activeElement === container) {
+          // Programmatic initial focus can sit on the trap container itself
+          // (for example a dialog panel with no content controls). Move into
+          // the tabbable cycle instead of letting Tab escape to the page.
+          event.preventDefault();
+          if (event.shiftKey) {
+            last.focus();
+          } else {
+            first.focus();
+          }
+          return;
+        }
         if (event.shiftKey) {
           // Shift+Tab: if on first element, wrap to last
           if (document.activeElement === first) {

package/dist/i18n/InternationalizationContext.d.ts

@@ -1,9 +1,11 @@
+import { getResolve } from './resolve';
 import type { Locale, MessagesByLocale, Overrides } from './types';
 export interface InternationalizationContextValue {
     locale: Locale;
     direction: 'ltr' | 'rtl';
     messages: MessagesByLocale;
     overrides?: Overrides;
+    translate: ReturnType<typeof getResolve>;
 }
 /**
  * Default value falls through to the shipped en catalog in resolve().

package/dist/i18n/InternationalizationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternationalizationContext.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationContext.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,2DAKpC,CAAC"}
+{"version":3,"file":"InternationalizationContext.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationContext.ts"],"names":[],"mappings":"AAyBA,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;CAC1C;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,2DAMpC,CAAC"}

package/dist/i18n/InternationalizationContext.js

@@ -22,6 +22,7 @@
  * - /packages/core/src/i18n/index.ts
  */
 import { createContext } from 'react';
+import { getResolve } from "./resolve.js";
 /**
  * Default value falls through to the shipped en catalog in resolve().
  * A consumer that doesn't render a provider still gets English defaults.
@@ -29,6 +30,7 @@ import { createContext } from 'react';
 export const InternationalizationContext = /*#__PURE__*/createContext({
   locale: 'en',
   direction: 'ltr',
-  messages: {}
+  messages: {},
+  translate: getResolve('en', {})
 });
 InternationalizationContext.displayName = 'InternationalizationContext';

package/dist/i18n/InternationalizationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternationalizationProvider.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,QAAQ,GACT,EAAE,iCAAiC,+BAWnC;yBAjBe,4BAA4B"}
+{"version":3,"file":"InternationalizationProvider.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,QAAQ,GACT,EAAE,iCAAiC,+BAiBnC;yBAvBe,4BAA4B"}

package/dist/i18n/InternationalizationProvider.js

@@ -21,6 +21,7 @@
 import { useMemo } from 'react';
 import { InternationalizationContext } from "./InternationalizationContext.js";
 import { getLocaleDirection } from "./getLocaleDirection.js";
+import { getResolve } from "./resolve.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Provides locale + additional messages + overrides to all astryx
@@ -38,7 +39,8 @@ export function InternationalizationProvider({
     locale,
     direction,
     messages: messages ?? {},
-    overrides
+    overrides,
+    translate: getResolve(locale, messages ?? {}, overrides)
   }), [locale, direction, messages, overrides]);
   return /*#__PURE__*/_jsx(InternationalizationContext, {
     value: value,

package/dist/i18n/resolve.d.ts

@@ -13,7 +13,7 @@ import type { Locale, MessagesByLocale, Overrides } from './types';
  * shipped en catalog separately as the final source-of-truth.
  */
 export declare function resolveLocaleChain(locale: Locale): Locale[];
-export declare function resolve(key: string, values: Record<string, unknown> | undefined, locale: Locale, messages: MessagesByLocale, overrides: Overrides | undefined): string;
+export declare function getResolve(locale: Locale, messages: MessagesByLocale, overrides?: Overrides): (key: string, values: Record<string, unknown> | undefined) => string;
 /**
  * Reset internal caches. Test-only.
  * @internal

package/dist/i18n/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/i18n/resolve.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAU,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAwB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAc3D;AAsCD,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC3C,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,SAAS,GAAG,SAAS,GAC/B,MAAM,CA0BR;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/i18n/resolve.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAU,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAwB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAc3D;AAkCD,wBAAgB,UAAU,CACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,CAAC,EAAE,SAAS,IAIb,KAAK,MAAM,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,YA0BjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}

package/dist/i18n/resolve.js

@@ -69,55 +69,54 @@ export function resolveLocaleChain(locale) {
   }
   return chain;
 }
-function lookup(key, locale, messages, overrides) {
+function getLookup(locale, messages, overrides) {
+  const lookup = {};
   const chain = resolveLocaleChain(locale);
-
   // 1 + 2. Overrides (most specific to least specific in the chain)
   if (overrides !== undefined) {
     for (const tag of chain) {
-      const value = overrides[tag]?.[key];
-      if (value !== undefined) {
-        return value;
+      if (overrides[tag]) {
+        for (const [key, value] of Object.entries(overrides[tag])) {
+          if (lookup[key] === undefined && value !== null) {
+            lookup[key] = value;
+          }
+        }
       }
     }
   }
-
-  // 3 + 4. Shipped catalogs (most specific to least specific)
   for (const tag of chain) {
-    const entry = messages[tag]?.[key];
-    if (entry !== undefined) {
-      return entry.defaultMessage;
+    if (messages[tag]) {
+      for (const [key, value] of Object.entries(messages[tag])) {
+        if (lookup[key] === undefined && value?.defaultMessage !== null) {
+          lookup[key] = value?.defaultMessage;
+        }
+      }
     }
   }
-
-  // 5. Shipped en catalog — always present
-  const enEntry = EN_CATALOG[key];
-  if (enEntry !== undefined) {
-    return enEntry.defaultMessage;
-  }
-
-  // 6. Nothing found
-  return null;
+  return lookup;
 }
-export function resolve(key, values, locale, messages, overrides) {
-  const result = lookup(key, locale, messages, overrides);
-  if (result === null) {
-    // Fires ONLY when a key is missing from every source including the
-    // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
-    // Fallback to `en` from a non-en locale is expected and stays silent,
-    // matching the FormatJS / i18next default.
-    warnOnce(`astryx-i18n:${locale}::${key}`, 'astryx-i18n', `missing key: ${key} (locale: ${locale})`);
-    return key;
-  }
-  if (values === undefined) {
-    // Static string — skip the parser entirely for the common case
-    return result;
-  }
-  const formatted = getFormatter(result, locale).format(values);
-  // IntlMessageFormat.format returns string | (string | React elements) — we
-  // only ever pass string values so it will be a string; assert for the type
-  // system.
-  return formatted;
+export function getResolve(locale, messages, overrides) {
+  const lookup = getLookup(locale, messages, overrides);
+  return (key, values) => {
+    const result = lookup[key] ?? EN_CATALOG[key]?.defaultMessage;
+    if (result === undefined) {
+      // Fires ONLY when a key is missing from every source including the
+      // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
+      // Fallback to `en` from a non-en locale is expected and stays silent,
+      // matching the FormatJS / i18next default.
+      warnOnce(`astryx-i18n:${locale}::${key}`, 'astryx-i18n', `missing key: ${key} (locale: ${locale})`);
+      return key;
+    }
+    if (values === undefined) {
+      // Static string — skip the parser entirely for the common case
+      return result;
+    }
+    const formatted = getFormatter(result, locale).format(values);
+    // IntlMessageFormat.format returns string | (string | React elements) — we
+    // only ever pass string values so it will be a string; assert for the type
+    // system.
+    return formatted;
+  };
 }
 
 /**

package/dist/i18n/useTranslator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslator.d.ts","sourceRoot":"","sources":["../../src/i18n/useTranslator.ts"],"names":[],"mappings":"AAyBA,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC;AAEZ;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAO5C"}
+{"version":3,"file":"useTranslator.d.ts","sourceRoot":"","sources":["../../src/i18n/useTranslator.ts"],"names":[],"mappings":"AAwBA,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC;AAEZ;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAG5C"}

package/dist/i18n/useTranslator.js

@@ -18,9 +18,8 @@
  * - /packages/core/src/i18n/index.ts
  * - /packages/core/src/i18n/t.client.ts
  */
-import { use, useCallback } from 'react';
+import { use } from 'react';
 import { InternationalizationContext } from "./InternationalizationContext.js";
-import { resolve } from "./resolve.js";
 /**
  * Returns a translator function bound to the current provider's locale.
  * Safe to call from event handlers and effects.
@@ -35,5 +34,5 @@ import { resolve } from "./resolve.js";
  */
 export function useTranslator() {
   const ctx = use(InternationalizationContext);
-  return useCallback((key, values) => resolve(key, values, ctx.locale, ctx.messages, ctx.overrides), [ctx.locale, ctx.messages, ctx.overrides]);
+  return ctx.translate;
 }

package/locales/af-ZA.json

@@ -623,10 +623,6 @@
     "defaultMessage": "Kies 'n datum",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Kies datum",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(maak in nuwe oortjie oop)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/ar-SA.json

@@ -651,10 +651,6 @@
     "defaultMessage": "حدّد تاريخًا",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "اختر التاريخ",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(يُفتح في علامة تبويب جديدة)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/ca-ES.json

@@ -643,10 +643,6 @@
     "defaultMessage": "Selecciona una data",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Tria una data",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(s’obre en una pestanya nova)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/cs-CZ.json

@@ -647,10 +647,6 @@
     "defaultMessage": "Vyberte datum",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Zvolit datum",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(otevře se na nové kartě)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/da-DK.json

@@ -639,10 +639,6 @@
     "defaultMessage": "Vælg en dato",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Vælg dato",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(åbner i ny fane)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."