@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Lightbox/Lightbox.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Lightbox.tsx
- * @input Uses React, native dialog, StyleX, IconButton, theme tokens, layerTextReset, layerStructureReset
+ * @input Uses React, native dialog, StyleX, IconButton, theme tokens, layerTextReset, layerStructureReset,
+ *   isRtlElement (gallery arrow keys follow the rendered direction)
  * @output Exports Lightbox component, LightboxProps, LightboxMedia
  * @position Core implementation; consumed by index.ts
  *
@@ -31,11 +32,13 @@ import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
 import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
+import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { isRtlElement } from "../hooks/isRtlElement.js";
 /**
  * Media type for lightbox items.
  */
@@ -53,7 +56,7 @@ const styles = {
     kVAEAm: "xixxii4",
     kpwlN0: "x10a8y8t",
     kzqmXN: "xn9wirt",
-    kZKoxP: "x1dr59a3",
+    kZKoxP: "x1gvbg2u",
     ks0D6T: "x1x1rfll",
     kskxy: "x7ab17h",
     kogj98: "x1ghz6dp",
@@ -157,7 +160,9 @@ const KEYBOARD_PAN_OFFSETS = {
  * 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
+ * prev/next navigation via buttons and arrow keys; the arrow keys follow
+ * the writing direction (in RTL, ArrowLeft goes to the next item, like the
+ * Next button on the left). Optionally supports
  * 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).
@@ -298,10 +303,12 @@ export function Lightbox({
     }) : t('@astryx.lightbox.imagePosition', position));
   }, [index, isOpen, announce, mediaArray, t]);
 
-  // Open/close dialog
+  // Open/close dialog. The dialog renders only with an item, so a viewer
+  // opened before its first item arrives opens when that item does.
+  const hasItem = currentItem != null;
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;
-    if (!dialog) {
+    if (!dialog || !hasItem) {
       return;
     }
     if (isOpen && !dialog.open) {
@@ -313,7 +320,7 @@ export function Lightbox({
         triggerElementRef.current.focus();
       }
     }
-  }, [isOpen]);
+  }, [isOpen, hasItem]);
   const handleClose = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
@@ -321,7 +328,10 @@ export function Lightbox({
     shouldDismissOnCloseRequest
   } = useLayerDismissal({
     isActive: isOpen,
-    onDismiss: handleClose
+    onDismiss: handleClose,
+    // The dialog's document is this layer's: rendered into an iframe or a
+    // Picture-in-Picture window, it ranks with the layers opened inside it.
+    getContainer: () => dialogRef.current
   });
 
   // The native `cancel` event is the browser's own close-watcher firing: an
@@ -389,6 +399,12 @@ export function Lightbox({
 
   // Keyboard navigation. While zoomed, arrows pan the image (matching common
   // lightbox conventions); when not zoomed they navigate the gallery.
+  //
+  // Gallery arrows follow the rendered direction, resolved at keydown: in RTL
+  // the Next button sits on the left, so ArrowLeft goes to the next item and
+  // ArrowRight to the previous one. Panning stays physical in both directions:
+  // the image itself is not mirrored, so ArrowRight still reveals what is to
+  // its right.
   const handleKeyDown = useCallback(e => {
     if (hasZoom && !isVideo) {
       if (e.key === '+' || e.key === '=') {
@@ -411,12 +427,14 @@ export function Lightbox({
         return;
       }
     }
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      goToPrev();
-    } else if (e.key === 'ArrowRight') {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       e.preventDefault();
-      goToNext();
+      const towardEnd = e.key === 'ArrowRight' !== isRtlElement(dialogRef.current);
+      if (towardEnd) {
+        goToNext();
+      } else {
+        goToPrev();
+      }
     }
   }, [hasZoom, isVideo, zoom, applyZoom, goToPrev, goToNext]);
 
@@ -486,89 +504,93 @@ export function Lightbox({
     ...mergeProps(themeProps('lightbox'), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.dialog, overlayPaddingReset.reset, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsx(LayerDepthProvider, {
-      children: /*#__PURE__*/_jsx(LayerContentBoundary, {
-        children: /*#__PURE__*/_jsxs("div", {
-          ref: containerRef,
-          ...{
-            className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
-          },
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "close",
-              size: "sm",
-              color: "inherit"
-            }),
-            label: t('@astryx.lightbox.close'),
-            variant: "ghost",
-            onClick: handleClose,
-            xstyle: [styles.closeButton, styles.controlButton]
-          }), isGallery && /*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronLeft",
-              size: "sm",
-              color: "inherit",
-              xstyle: rtlStyles.mirror
-            }),
-            label: t('@astryx.lightbox.previous'),
-            variant: "ghost",
-            isDisabled: !canPrev,
-            onClick: goToPrev,
-            xstyle: [styles.navButton, styles.navPrev, styles.controlButton]
-          }), /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {
+        dialogRef: dialogRef,
+        isOpen: isOpen,
+        children: /*#__PURE__*/_jsx(LayerContentBoundary, {
+          children: /*#__PURE__*/_jsxs("div", {
+            ref: containerRef,
             ...{
-              className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
+              className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
             },
-            children: [/*#__PURE__*/_jsx("div", {
-              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,
-              ...stylex.props(styles.imageWrapper, isZoomTarget && focusOutlineStyles.focusVisible, !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable, !isVideo && isZoomed && styles.imageWrapperZoomed, !isVideo && isDragging && styles.imageWrapperDragging),
-              onDoubleClick: isVideo ? undefined : handleDoubleClick,
-              onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
-              onPointerDown: isVideo ? undefined : handlePointerDown,
-              children: isVideo ? /*#__PURE__*/_jsx("video", {
-                src: currentItem.src,
-                "aria-label": currentItem.alt,
-                controls: true,
-                autoPlay: hasAutoPlay,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "close",
+                size: "sm",
+                color: "inherit"
+              }),
+              label: t('@astryx.lightbox.close'),
+              variant: "ghost",
+              onClick: handleClose,
+              xstyle: [styles.closeButton, styles.controlButton]
+            }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "chevronLeft",
+                size: "sm",
+                color: "inherit",
+                xstyle: rtlStyles.mirror
+              }),
+              label: t('@astryx.lightbox.previous'),
+              variant: "ghost",
+              isDisabled: !canPrev,
+              onClick: goToPrev,
+              xstyle: [styles.navButton, styles.navPrev, styles.controlButton]
+            }), /*#__PURE__*/_jsxs("div", {
+              ...{
+                className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
+              },
+              children: [/*#__PURE__*/_jsx("div", {
+                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,
+                ...stylex.props(styles.imageWrapper, isZoomTarget && focusOutlineStyles.focusVisible, !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable, !isVideo && isZoomed && styles.imageWrapperZoomed, !isVideo && isDragging && styles.imageWrapperDragging),
+                onDoubleClick: isVideo ? undefined : handleDoubleClick,
+                onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
+                onPointerDown: isVideo ? undefined : handlePointerDown,
+                children: isVideo ? /*#__PURE__*/_jsx("video", {
+                  src: currentItem.src,
+                  "aria-label": currentItem.alt,
+                  controls: true,
+                  autoPlay: hasAutoPlay,
+                  ...{
+                    className: "x193iq5w xmz0i5r x19kjcj4 x1a2a7pz"
+                  }
+                }) : /*#__PURE__*/_jsx("img", {
+                  src: currentItem.src,
+                  alt: currentItem.alt,
+                  draggable: false,
+                  ...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
+                })
+              }), currentItem.caption && /*#__PURE__*/_jsx("div", {
                 ...{
-                  className: "x193iq5w xmz0i5r x19kjcj4 x1a2a7pz"
-                }
-              }) : /*#__PURE__*/_jsx("img", {
-                src: currentItem.src,
-                alt: currentItem.alt,
-                draggable: false,
-                ...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
-              })
-            }), currentItem.caption && /*#__PURE__*/_jsx("div", {
+                  className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
+                },
+                children: currentItem.caption
+              })]
+            }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "chevronRight",
+                size: "sm",
+                color: "inherit",
+                xstyle: rtlStyles.mirror
+              }),
+              label: t('@astryx.lightbox.next'),
+              variant: "ghost",
+              isDisabled: !canNext,
+              onClick: goToNext,
+              xstyle: [styles.navButton, styles.navNext, styles.controlButton]
+            }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
               ...{
-                className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
+                className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
               },
-              children: currentItem.caption
+              children: [index + 1, " / ", mediaArray.length]
             })]
-          }), isGallery && /*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronRight",
-              size: "sm",
-              color: "inherit",
-              xstyle: rtlStyles.mirror
-            }),
-            label: t('@astryx.lightbox.next'),
-            variant: "ghost",
-            isDisabled: !canNext,
-            onClick: goToNext,
-            xstyle: [styles.navButton, styles.navNext, styles.controlButton]
-          }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
-            ...{
-              className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
-            },
-            children: [index + 1, " / ", mediaArray.length]
-          })]
+          })
         })
       })
     })

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LightboxKeyboard.a11y.browser.spec.d.ts.map

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxKeyboard.a11y.browser.spec.d.ts","sourceRoot":"","sources":["../../src/Lightbox/LightboxKeyboard.a11y.browser.spec.ts"],"names":[],"mappings":""}

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.js

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
+
+/**
+ * @file LightboxKeyboard.a11y.browser.spec.ts
+ * @input Built Lightbox stories (LTR and the RTL story global) and real
+ *   Chromium/WebKit keyboard input
+ * @output Browser evidence that the gallery's Left/Right arrow keys move in
+ *   the direction of the matching on-screen button, in both directions
+ * @position Cross-browser proof for Lightbox's direction-aware gallery keys
+ *   (design:bidirectionality DR6, DR11)
+ */
+
+import { expect, test } from '@playwright/test';
+import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+// Opens the gallery story at its second photo ("2 / 4").
+async function openGallery(page, direction) {
+  // The story's photos are remote; the keys do not need them to load.
+  await page.route(/picsum\.photos/, async route => route.abort());
+  await page.goto(`${storybook.origin}/iframe.html?id=core-lightbox--gallery&viewMode=story${direction === 'rtl' ? '&globals=direction:rtl' : ''}`);
+  await page.getByRole('img', {
+    name: 'Mountain lake'
+  }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText('2 / 4');
+  const previous = page.getByRole('button', {
+    name: 'Previous'
+  });
+  const next = page.getByRole('button', {
+    name: 'Next'
+  });
+  return {
+    dialog,
+    previous,
+    next
+  };
+}
+async function centerX(locator) {
+  const box = await locator.boundingBox();
+  if (box == null) {
+    throw new Error('no box');
+  }
+  return box.x + box.width / 2;
+}
+for (const direction of ['ltr', 'rtl']) {
+  test(`${direction}: each arrow key moves toward the button on its side`, async ({
+    page
+  }) => {
+    const {
+      dialog,
+      previous,
+      next
+    } = await openGallery(page, direction);
+    const nextIsOnTheLeft = (await centerX(next)) < (await centerX(previous));
+    // The buttons swap sides in RTL; the keys must follow them.
+    expect(nextIsOnTheLeft).toBe(direction === 'rtl');
+    const towardNext = nextIsOnTheLeft ? 'ArrowLeft' : 'ArrowRight';
+    const towardPrevious = nextIsOnTheLeft ? 'ArrowRight' : 'ArrowLeft';
+    await page.keyboard.press(towardNext);
+    await expect(dialog).toContainText('3 / 4');
+    await page.keyboard.press(towardPrevious);
+    await page.keyboard.press(towardPrevious);
+    await expect(dialog).toContainText('1 / 4');
+    // At the start of the range the key toward Previous does nothing, like
+    // the disabled button it matches.
+    await page.keyboard.press(towardPrevious);
+    await expect(dialog).toContainText('1 / 4');
+  });
+}

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LightboxViewport.a11y.browser.spec.d.ts.map

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxViewport.a11y.browser.spec.d.ts","sourceRoot":"","sources":["../../src/Lightbox/LightboxViewport.a11y.browser.spec.ts"],"names":[],"mappings":""}

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
+
+/**
+ * @file LightboxViewport.a11y.browser.spec.ts
+ * @input The built Lightbox default story and the stylesheet rules the open
+ *   viewer matches, in Chromium and WebKit
+ * @output Browser evidence that the viewer is as tall as the dynamic viewport,
+ *   so a mobile browser's toolbar never covers its bottom
+ * @position Cross-browser proof for Lightbox's full-screen sizing
+ */
+
+import { expect, test } from '@playwright/test';
+import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+test('the viewer is as tall as the dynamic viewport, so a toolbar never covers its bottom', async ({
+  page
+}) => {
+  // The story's photo is remote; the sizing does not need it to load.
+  await page.route(/picsum\.photos/, async route => route.abort());
+  await page.goto(`${storybook.origin}/iframe.html?id=core-lightbox--default&viewMode=story`);
+  await page.getByRole('button', {
+    name: 'Open lightbox'
+  }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  // Mobile Safari's 100vh is the large viewport, measured with its toolbars
+  // retracted, so a viewer that tall runs under the bottom toolbar and hides a
+  // gallery's caption (iOS 26.2, iPhone 17 Pro: 714 pt visible, the caption
+  // at 718–754). The dynamic viewport is the visible height. No desktop or
+  // emulated engine shrinks it, so this reads the height the viewer declares.
+  const declared = await dialog.evaluate(element => {
+    const heights = [];
+    const walk = rules => {
+      for (const rule of Array.from(rules)) {
+        if (rule instanceof CSSStyleRule) {
+          if (rule.style.height !== '' && element.matches(rule.selectorText)) {
+            heights.push(rule.style.height);
+          }
+        } else if ('cssRules' in rule) {
+          walk(rule.cssRules);
+        }
+      }
+    };
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        walk(sheet.cssRules);
+      } catch {
+        // A cross-origin stylesheet's rules are unreadable and not ours.
+      }
+    }
+    return {
+      heights,
+      supported: CSS.supports('height', '100dvh')
+    };
+  });
+  expect(declared.supported).toBe(true);
+  expect(declared.heights).toContain('100dvh');
+});

package/dist/List/List.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file List.tsx
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
- *   and ListContext with the row edge treatment
+ *   and ListContext with the row edge treatment. Numbered rows share one
+ *   intrinsic marker column, including when a counter changes digit count.
  * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
  *   types
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx

package/dist/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAKvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwEX;yBAvFe,IAAI"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAKvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyEX;yBAxFe,IAAI"}

package/dist/List/List.js

@@ -5,7 +5,8 @@
 /**
  * @file List.tsx
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
- *   and ListContext with the row edge treatment
+ *   and ListContext with the row edge treatment. Numbered rows share one
+ *   intrinsic marker column, including when a counter changes digit count.
  * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
  *   types
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
@@ -41,6 +42,12 @@ const styles = {
     kXHlph: "x101abm8",
     $$css: true
   },
+  numberColumns: {
+    k1xSpc: "x78zum5 x1tx5i3l",
+    kumcoG: "x16lqc3j",
+    k1C7PZ: "xak3so",
+    $$css: true
+  },
   reachesContainerPadding: {
     keTefX: "xojxgvx",
     k71WvV: "x1fcf3bl",
@@ -152,7 +159,7 @@ export function List({
     ...mergeProps(themeProps('list', {
       density,
       listStyle
-    }), stylex.props(styles.list, hasDividers && styles.withDividers, reachesContainerPadding && styles.reachesContainerPadding, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
+    }), stylex.props(styles.list, isOrdered && styles.numberColumns, hasDividers && styles.withDividers, reachesContainerPadding && styles.reachesContainerPadding, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
     children: children
   });
   if (header == null) {

package/dist/List/ListContext.d.ts

@@ -4,7 +4,8 @@
  * @output Exports ListContext for sharing density, dividers, the row edge
  *   treatment, and marker style between List and ListItem, and
  *   ListMarkerScope, which sets the marker for the items inside it, or a
- *   task item's checkbox in its place
+ *   task item's checkbox in its place, and whether their List has a marker
+ *   gutter whose outside counters keep the ordinary themed text inset
  * @position Internal context; consumed by List.tsx and ListItem.tsx
  */
 import { type ReactNode } from 'react';
@@ -42,17 +43,28 @@ export interface ListContextValue {
      * `'none'`.
      */
     task?: ListTaskMarker;
+    /**
+     * Whether the List has Markdown's outside-marker gutter, set by
+     * ListMarkerScope; internal. Its number column keeps the ordinary themed
+     * width, while whole counters may paint toward inline-start beyond it.
+     * Markdown sets this on its non-swipe numbered rows and allows outside ink
+     * on their List, so its text starts match RichText without a width threshold.
+     */
+    hasMarkerGutter?: boolean;
 }
 export declare const ListContext: import("react").Context<ListContextValue | null>;
 /**
  * Draws `marker` on the List items inside it, in place of the marker their
  * List's `listStyle` names, or `task`'s read-only checkbox in place of either;
- * internal, for Markdown's nested lists and task items in mixed lists. Outside
- * a List, or in a List without markers, it changes nothing.
+ * internal, for Markdown's nested lists and task items in mixed lists. With
+ * `hasMarkerGutter`, counters keep the ordinary marker column and may paint
+ * outside it toward inline-start. Outside a List, or in a List without markers, it
+ * changes nothing.
  */
-export declare function ListMarkerScope({ marker, task, children, }: {
+export declare function ListMarkerScope({ marker, task, hasMarkerGutter, children, }: {
     readonly marker: ListMarker;
     readonly task?: ListTaskMarker;
+    readonly hasMarkerGutter?: boolean;
     readonly children: ReactNode;
 }): ReactNode;
 //# sourceMappingURL=ListContext.d.ts.map

package/dist/List/ListContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAE3E,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAGxE;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,GAAG,SAAS,CAWZ"}
+{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,UAAU,GACpB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,CAAC;AAE3E,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAGxE;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,IAAI,EACJ,eAAuB,EACvB,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,GAAG,SAAS,CAYZ"}

package/dist/List/ListContext.js

@@ -8,7 +8,8 @@
  * @output Exports ListContext for sharing density, dividers, the row edge
  *   treatment, and marker style between List and ListItem, and
  *   ListMarkerScope, which sets the marker for the items inside it, or a
- *   task item's checkbox in its place
+ *   task item's checkbox in its place, and whether their List has a marker
+ *   gutter whose outside counters keep the ordinary themed text inset
  * @position Internal context; consumed by List.tsx and ListItem.tsx
  */
 import { use, useMemo } from 'react';
@@ -32,20 +33,24 @@ ListContext.displayName = 'ListContext';
 /**
  * Draws `marker` on the List items inside it, in place of the marker their
  * List's `listStyle` names, or `task`'s read-only checkbox in place of either;
- * internal, for Markdown's nested lists and task items in mixed lists. Outside
- * a List, or in a List without markers, it changes nothing.
+ * internal, for Markdown's nested lists and task items in mixed lists. With
+ * `hasMarkerGutter`, counters keep the ordinary marker column and may paint
+ * outside it toward inline-start. Outside a List, or in a List without markers, it
+ * changes nothing.
  */
 export function ListMarkerScope({
   marker,
   task,
+  hasMarkerGutter = false,
   children
 }) {
   const context = use(ListContext);
   const value = useMemo(() => context == null ? null : {
     ...context,
     marker,
-    task
-  }, [context, marker, task]);
+    task,
+    hasMarkerGutter
+  }, [context, marker, task, hasMarkerGutter]);
   return value == null ? children : /*#__PURE__*/_jsx(ListContext, {
     value: value,
     children: children

package/dist/List/ListItem.d.ts

@@ -3,7 +3,13 @@
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, the List row edge
  *   treatment, CheckboxInput, and the marker or task checkbox a
  *   ListMarkerScope sets (Markdown's nested lists and the task items of mixed
- *   lists)
+ *   lists), and Item's private exact-marker formatting scope for numbered
+ *   rows. Number markers stay on one line in the List's shared column,
+ *   keeping every sibling's text and nested list on the same start line;
+ *   they end on one line too, right-aligned with tabular figures, and hang
+ *   into the row's inline inset before they widen that column. Markdown's
+ *   outside counters keep the themed column and may paint beyond it, matching
+ *   RichText's native outside markers without a finite width threshold.
  * @output Exports ListItem component, ListItemProps type
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
  *

package/dist/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAS1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAO5E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC;;;;OAIG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAwJD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA4Ef;yBA9Fe,QAAQ"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAe,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAO5E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC;;;;OAIG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAoMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA8Ff;yBAhHe,QAAQ"}