@astryxdesign/core 0.2.0-canary.77b3b61 → 0.2.0-canary.79cf94a

package/dist/Lightbox/Lightbox.d.ts

@@ -65,8 +65,8 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
      */
     onIndexChange?: (index: number) => void;
     /**
-     * Enable zoom on double-click (images only).
-     * When zoomed, drag to pan.
+     * Enable zoom on double-click, or Enter/Space/`+`/`-` via keyboard
+     * (images only). When zoomed, drag or use arrow keys to pan.
      * @default false
      */
     hasZoom?: boolean;
@@ -81,7 +81,9 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
  *
  * Supports single image and gallery modes. In gallery mode, provides
  * prev/next navigation via buttons and arrow keys. Optionally supports
- * zoom (double-click to toggle 2x) and pan (drag when zoomed).
+ * zoom (double-click, Enter/Space on the image, or `+`/`-` to toggle 2x)
+ * and pan (drag or arrow keys when zoomed; arrows navigate the gallery
+ * when not zoomed).
  *
  * Uses the native `<dialog>` element with `showModal()` for focus
  * trapping and top-layer placement. Dismiss via Escape, close button,

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwVf;yBAxWe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA6JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAyYf;yBAzZe,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -85,12 +85,28 @@ const dynamicStyles = {
   }]
 };
 
+/**
+ * Pan distance (px) per arrow-key press while zoomed. Offsets move the
+ * viewport in the arrow's direction — pressing ArrowRight reveals content to
+ * the right, so the image itself shifts left (negative x), matching how
+ * scrolling and pointer-drag panning feel.
+ */
+const KEYBOARD_PAN_STEP = 50;
+const KEYBOARD_PAN_OFFSETS = {
+  ArrowLeft: [KEYBOARD_PAN_STEP, 0],
+  ArrowRight: [-KEYBOARD_PAN_STEP, 0],
+  ArrowUp: [0, KEYBOARD_PAN_STEP],
+  ArrowDown: [0, -KEYBOARD_PAN_STEP]
+};
+
 /**
  * A fullscreen overlay for viewing images at full resolution.
  *
  * Supports single image and gallery modes. In gallery mode, provides
  * prev/next navigation via buttons and arrow keys. Optionally supports
- * zoom (double-click to toggle 2x) and pan (drag when zoomed).
+ * zoom (double-click, Enter/Space on the image, or `+`/`-` to toggle 2x)
+ * and pan (drag or arrow keys when zoomed; arrows navigate the gallery
+ * when not zoomed).
  *
  * Uses the native `<dialog>` element with `showModal()` for focus
  * trapping and top-layer placement. Dismiss via Escape, close button,
@@ -266,8 +282,49 @@ export function Lightbox({
     }
   }, [canNext, index, setIndex]);
 
-  // Keyboard navigation
+  // Zoom: double-click, Enter/Space on the image, or +/- keys toggle 1x ↔ 2x.
+  // Zoom changes are silent to assistive tech (only the transform changes), so
+  // mirror them in the polite live region, including a hint that arrow keys
+  // pan while zoomed.
+  const applyZoom = useCallback(next => {
+    if (!hasZoom || isVideo || next === zoom) {
+      return;
+    }
+    setZoom(next);
+    setPan({
+      x: 0,
+      y: 0
+    });
+    announce(next > 1 ? t('@astryx.lightbox.zoomedIn') : t('@astryx.lightbox.zoomedOut'));
+  }, [hasZoom, isVideo, zoom, announce, t]);
+  const handleDoubleClick = useCallback(() => {
+    applyZoom(zoom === 1 ? 2 : 1);
+  }, [applyZoom, zoom]);
+
+  // Keyboard navigation. While zoomed, arrows pan the image (matching common
+  // lightbox conventions); when not zoomed they navigate the gallery.
   const handleKeyDown = useCallback(e => {
+    if (hasZoom && !isVideo) {
+      if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        applyZoom(2);
+        return;
+      }
+      if (e.key === '-') {
+        e.preventDefault();
+        applyZoom(1);
+        return;
+      }
+      if (zoom > 1 && KEYBOARD_PAN_OFFSETS[e.key] !== undefined) {
+        e.preventDefault();
+        const [dx, dy] = KEYBOARD_PAN_OFFSETS[e.key];
+        setPan(prev => ({
+          x: prev.x + dx,
+          y: prev.y + dy
+        }));
+        return;
+      }
+    }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
       goToPrev();
@@ -275,27 +332,15 @@ export function Lightbox({
       e.preventDefault();
       goToNext();
     }
-  }, [goToPrev, goToNext]);
+  }, [hasZoom, isVideo, zoom, applyZoom, goToPrev, goToNext]);
 
-  // Zoom: double-click toggles 1x ↔ 2x
-  const handleDoubleClick = useCallback(() => {
-    if (!hasZoom) {
-      return;
-    }
-    if (zoom === 1) {
-      setZoom(2);
-      setPan({
-        x: 0,
-        y: 0
-      });
-    } else {
-      setZoom(1);
-      setPan({
-        x: 0,
-        y: 0
-      });
+  // Enter/Space on the focused image wrapper (role="button") toggles zoom.
+  const handleImageKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleDoubleClick();
     }
-  }, [hasZoom, zoom]);
+  }, [handleDoubleClick]);
 
   // Pan: mouse drag when zoomed
   const handlePointerDown = useCallback(e => {
@@ -335,6 +380,7 @@ export function Lightbox({
     };
   }, [isDragging]);
   const isZoomed = zoom > 1;
+  const isZoomTarget = hasZoom && !isVideo;
   const imageTransform = zoom === 1 ? null : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;
   if (!currentItem) {
     return null;
@@ -397,34 +443,66 @@ export function Lightbox({
           className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
         },
         children: [/*#__PURE__*/_jsx("div", {
-          ref: imageWrapperRef,
+          ref: imageWrapperRef
+          // The wrapper is a keyboard-operable zoom toggle when zoom is
+          // enabled: Enter/Space toggles, aria-pressed reflects state.
+          ,
+          role: isZoomTarget ? 'button' : undefined,
+          tabIndex: isZoomTarget ? 0 : undefined,
+          "aria-pressed": isZoomTarget ? isZoomed : undefined,
+          "aria-label": isZoomTarget ? t('@astryx.lightbox.zoom') : undefined,
           ...{
             0: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j"
             },
+            8: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+            },
             4: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1huxd7x x2dt3px"
             },
+            12: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1huxd7x x2dt3px"
+            },
             2: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
             },
+            10: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
+            },
             6: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
             },
+            14: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
+            },
             1: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            9: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             5: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            13: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             3: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            11: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             7: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
+            },
+            15: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
             }
-          }[!!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
+          }[!!isZoomTarget << 3 | !!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
           onDoubleClick: isVideo ? undefined : handleDoubleClick,
+          onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
           onPointerDown: isVideo ? undefined : handlePointerDown,
           children: isVideo ? /*#__PURE__*/_jsx("video", {
             src: currentItem.src,

package/dist/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiGD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAiVjB;yBAtWe,UAAU"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAMlD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiGD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAoVjB;yBAzWe,UAAU"}

package/dist/Pagination/Pagination.js

@@ -5,7 +5,7 @@
 /**
  * @file Pagination.tsx
  * @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button.
- *   Reads i18n direction via useDirection() to flip the prev/next chevrons under RTL.
+ *   Prev/next chevrons mirror under RTL via the shared rtlStyles.mirror (CSS scaleX), not a JS direction read.
  * @output Exports Pagination component, PaginationProps, PaginationVariant, PaginationSize types
  * @position Core implementation; consumed by index.ts, tested by Pagination.test.tsx
  *
@@ -29,10 +29,9 @@ import { Selector } from "../Selector/index.js";
 import { Text } from "../Text/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useListFocus } from "../hooks/useListFocus.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/useTranslator.js";
-import { useDirection } from "../i18n/useDirection.js";
 
 // =============================================================================
 // Types
@@ -172,12 +171,6 @@ export function Pagination({
   const label = labelFromProps ?? t('@astryx.pagination.label');
   const previousLabel = t('@astryx.pagination.previous');
   const nextLabel = t('@astryx.pagination.next');
-
-  // Directional icons: under RTL, the "previous" control points right and the
-  // "next" control points left. aria-labels stay semantic (unchanged).
-  const direction = useDirection();
-  const previousIcon = direction === 'rtl' ? 'chevronRight' : 'chevronLeft';
-  const nextIcon = direction === 'rtl' ? 'chevronLeft' : 'chevronRight';
   const pageIndicatorsLabel = t('@astryx.pagination.pageIndicators');
   const itemsPerPageLabel = t('@astryx.pagination.itemsPerPage');
 
@@ -482,9 +475,12 @@ export function Pagination({
         label: previousLabel,
         variant: "ghost",
         size: buttonSize,
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: previousIcon,
-          size: isSm ? 'sm' : 'md'
+        icon: /*#__PURE__*/_jsx("span", {
+          ...stylex.props(rtlStyles.mirror),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "chevronLeft",
+            size: isSm ? 'sm' : 'md'
+          })
         }),
         onClick: handlePrevious,
         isDisabled: isDisabled || !hasPrevious,
@@ -493,9 +489,12 @@ export function Pagination({
         label: nextLabel,
         variant: "ghost",
         size: buttonSize,
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: nextIcon,
-          size: isSm ? 'sm' : 'md'
+        icon: /*#__PURE__*/_jsx("span", {
+          ...stylex.props(rtlStyles.mirror),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "chevronRight",
+            size: isSm ? 'sm' : 'md'
+          })
         }),
         onClick: handleNext,
         isDisabled: isDisabled || !hasNext,

package/dist/Table/TableCell.js

@@ -182,7 +182,9 @@ export function TableCell({
   return /*#__PURE__*/_jsx("td", {
     ref: ref,
     ...props,
-    ...mergeProps(themeProps('table-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
+    ...mergeProps(themeProps('table-cell', {
+      density: ctx?.density
+    }), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
     children: content
   });
 }

package/dist/Table/TableHeaderCell.js

@@ -120,7 +120,9 @@ export function TableHeaderCell({
   return /*#__PURE__*/_jsx("th", {
     ref: ref,
     ...props,
-    ...mergeProps(themeProps('table-header-cell'), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
+    ...mergeProps(themeProps('table-header-cell', {
+      density: ctx?.density
+    }), stylex.props(...mergeXStyle(cellStyles, xstyle)), incomingClassName, incomingStyle),
     children: content
   });
 }