@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/List/ListItem.js

@@ -7,7 +7,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
  *
@@ -21,7 +27,7 @@
  * - /apps/storybook/stories/List.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
-import { use } from 'react';
+import { use, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -29,6 +35,7 @@ import { ListContext } from "./ListContext.js";
 import { CheckboxInput } from "../CheckboxInput/index.js";
 import { mergeProps } from "../utils/index.js";
 import { Item } from "../Item/index.js";
+import { ItemMarkerColumnsContext } from "../Item/ItemMarkerColumnsContext.js";
 import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
@@ -40,6 +47,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 
 const styles = {
+  numberColumns: {
+    k1xSpc: "x78zum5 x1tx5i3l",
+    kumcoG: "x4w6khx",
+    kBCFzs: "x1osaytk",
+    $$css: true
+  },
   withCounter: {
     kAmcRD: "xfrknyr",
     $$css: true
@@ -74,6 +87,16 @@ const styles = {
 // =============================================================================
 
 const MARKER_DOT_SIZE = 6;
+
+/**
+ * How far a counter wider than its marker reaches toward the row's edge: the
+ * row's whole inline inset, the way a native outside marker hangs into its
+ * list's padding. Up to that width the item's text keeps its usual start; a
+ * wider counter widens the List's shared column instead. It is never
+ * clipped: the inset is inside the row, and the row inside the List's inline
+ * clip. Markdown's outside counters use a separate rule (`gutterHang`).
+ */
+const COUNTER_HANG = 'calc(-1 * var(--_item-inset-inline))';
 const markerStyles = {
   dot: {
     kzqmXN: "x1v4s8kt",
@@ -100,23 +123,37 @@ const markerStyles = {
   },
   number: {
     kSGwAc: "xoi2r2e",
+    k1xSpc: "x78zum5",
+    kjj79g: "x13a6bvl",
     kmuXW: "x2lah0s",
     kMwMTN: "x1tgivj0",
     kGuDYH: "xjm74w1",
     kLWn49: "xw6l6zx",
-    kzqmXN: "x12xnipv",
+    kcqcaj: "xss6m8b",
+    k7Eaqz: "x1x5mvkz",
+    kzqmXN: "x14atkfc",
+    khDVqt: "xuxw1ft",
     $$css: true
   },
   decimal: {
     kgeoSG: "xc2ndz5",
+    kkpA3r: "x1np0n6a",
     $$css: true
   },
   lowerAlpha: {
     kgeoSG: "x1mls8ih",
+    kkpA3r: "x1np0n6a",
     $$css: true
   },
   lowerRoman: {
     kgeoSG: "xdaf9gw",
+    kkpA3r: "x1np0n6a",
+    $$css: true
+  },
+  gutterHang: {
+    kzqmXN: "x12xnipv",
+    kkpA3r: "x46whw4",
+    kIuGQ2: "xtbmc8j",
     $$css: true
   }
 };
@@ -184,7 +221,8 @@ export function ListItem({
 
   // A task item in a list with markers shows its checkbox instead.
   const task = markerKind == null ? undefined : ctx?.task;
-  const marker = task != null ? /*#__PURE__*/_jsx("span", {
+  const hasMarkerGutter = ctx?.hasMarkerGutter === true;
+  const marker = useMemo(() => task != null ? /*#__PURE__*/_jsx("span", {
     ...{
       className: "xqcrz7y x78zum5 x2lah0s x1oms9s6"
     },
@@ -203,9 +241,9 @@ export function ListItem({
       ...stylex.props(markerKind === 'disc' ? markerStyles.dot : markerKind === 'circle' ? markerStyles.circle : markerStyles.square)
     })
   }) : markerKind != null ? /*#__PURE__*/_jsx("span", {
-    ...stylex.props(markerStyles.number, NUMBER_STYLES[markerKind])
-  }) : null;
-  return /*#__PURE__*/_jsx(Item, {
+    ...stylex.props(markerStyles.number, NUMBER_STYLES[markerKind], hasMarkerGutter && markerStyles.gutterHang)
+  }) : null, [task, markerKind, hasMarkerGutter]);
+  const item = /*#__PURE__*/_jsx(Item, {
     as: "li",
     ref: ref,
     marker: marker,
@@ -222,12 +260,18 @@ export function ListItem({
     isSelected: isSelected,
     align: align,
     density: density,
-    xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, edge === 'flush' && styles.edgeFlush, edge === 'outset' && styles.edgeOutset, edge === 'bleed' && styles.edgeBleed, xstyle],
+    xstyle: [listStyle === 'decimal' && styles.numberColumns, hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, edge === 'flush' && styles.edgeFlush, edge === 'outset' && styles.edgeOutset, edge === 'bleed' && styles.edgeBleed, xstyle],
     ...mergeProps(themeProps('list-item'), {
       className,
       style
     }),
     ...restProps
   });
+  // Only numbered rows contribute two cells to List's shared counter grid.
+  // Passing the marker identity keeps this request off unrelated Items in slots.
+  return listStyle === 'decimal' ? /*#__PURE__*/_jsx(ItemMarkerColumnsContext, {
+    value: marker,
+    children: item
+  }) : item;
 }
 ListItem.displayName = 'ListItem';

package/dist/List/ListMarkers.a11y.chromium.spec.d.ts

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

package/dist/List/ListMarkers.a11y.chromium.spec.d.ts.map

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