@astryxdesign/core 0.7.2-canary.fe2c655 → 0.7.2

package/dist/FormLayout/FormLayoutContext.js

@@ -19,9 +19,9 @@ import { createLayerScopedContext as createContext } from "../Layer/layerScopedC
  * Direction of form field arrangement.
  *
  * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
- * - `'horizontal'` — Fields arrange left-to-right, wrapping when needed.
- * - `'horizontal-labels'` — Fields stack vertically but labels sit to the left
- *   of their inputs (settings/admin panel pattern).
+ * - `'horizontal'` — Fields occupy one `1fr` grid track per child in logical inline order.
+ * - `'horizontal-labels'` — Fields stack vertically while labels sit beside
+ *   their inputs on the inline-start side (settings/admin panel pattern).
  */
 
 /**

package/dist/Grid/Grid.d.ts

@@ -21,13 +21,14 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
 /**
  * Column configuration for Grid.
  *
- * A number means exactly N equal columns at every width; it never reflows, so
- * `columns={4}` on a phone renders four narrow tracks. For columns that reflow
+ * A number means exactly N `1fr` tracks at every width; it never reflows, so
+ * `columns={4}` on a phone renders four narrow tracks. A child's minimum
+ * content can widen its track beyond an equal fraction. For columns that reflow
  * on small screens, use the object form: `{minWidth: 240, max: 4}` renders at
  * most four columns, each at least 240px, and fewer when the container is
  * narrower.
  *
- * - `number` — exactly N equal-width columns (e.g. `columns={3}`); never reflows
+ * - `number` — exactly N `1fr` tracks (e.g. `columns={3}`); never reflows
  * - `object` — responsive columns based on minimum child width:
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
@@ -46,10 +47,10 @@ export interface GridProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
     /**
-     * Column configuration. A number is exactly N equal columns and never
-     * reflows; for columns that reflow on small screens, use
-     * `{minWidth, max}`.
-     * - `number` — exactly N equal-width columns at every width
+     * Column configuration. A number creates exactly N `1fr` tracks and never
+     * reflows; a child's minimum content may widen its track. For columns that
+     * reflow on small screens, use `{minWidth, max}`.
+     * - `number` — exactly N `1fr` tracks at every width
      * - `{minWidth, max?, repeat?}` — responsive columns with a px floor and an
      *   optional cap
      *

package/dist/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA6EX;yBA/Fe,IAAI"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA6EX;yBA/Fe,IAAI"}

package/dist/Grid/Grid.js

@@ -26,13 +26,14 @@ import { themeProps } from "../utils/themeProps.js";
 /**
  * Column configuration for Grid.
  *
- * A number means exactly N equal columns at every width; it never reflows, so
- * `columns={4}` on a phone renders four narrow tracks. For columns that reflow
+ * A number means exactly N `1fr` tracks at every width; it never reflows, so
+ * `columns={4}` on a phone renders four narrow tracks. A child's minimum
+ * content can widen its track beyond an equal fraction. For columns that reflow
  * on small screens, use the object form: `{minWidth: 240, max: 4}` renders at
  * most four columns, each at least 240px, and fewer when the container is
  * narrower.
  *
- * - `number` — exactly N equal-width columns (e.g. `columns={3}`); never reflows
+ * - `number` — exactly N `1fr` tracks (e.g. `columns={3}`); never reflows
  * - `object` — responsive columns based on minimum child width:
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
@@ -368,6 +369,7 @@ export function Grid({
   const columnsVariant = typeof columns === 'number' ? columns : typeof columns === 'object' ? undefined : undefined;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
+    ...props,
     ...mergeProps(themeProps('grid', {
       columns: columnsVariant,
       gap,
@@ -377,7 +379,6 @@ export function Grid({
       ...style,
       ...inlineStyle
     }),
-    ...props,
     children: children
   });
 }

package/dist/Grid/GridSpan.d.ts

@@ -18,7 +18,7 @@ export interface GridSpanProps extends BaseProps<HTMLDivElement> {
     /**
      * Number of columns to span, or 'full' to span all columns.
      * - Number: `grid-column: span N`
-     * - 'full': `grid-column: 1 / -1` (spans entire row)
+     * - 'full': `grid-column: 1 / -1` (spans all explicit columns)
      */
     columns?: number | 'full';
     /**

package/dist/Grid/GridSpan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAwBf;yBAjCe,QAAQ"}
+{"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAwBf;yBAjCe,QAAQ"}

package/dist/Grid/GridSpan.js

@@ -21,6 +21,7 @@ const baseStyles = {
   span: {
     k7Eaqz: "xeuugli",
     k1xSpc: "xrvj5dj",
+    kumcoG: "x1mkdm3x",
     kZKoxP: "x5yr21d",
     $$css: true
   }

package/dist/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,EACX,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC;AAQ/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAkGd;yBAtHe,OAAO"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,EACX,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC;AAQ/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAsGd;yBA1He,OAAO"}

package/dist/Heading/Heading.js

@@ -105,9 +105,11 @@ export function Heading({
   // the closed built-in StyleX maps with an unknown name.
   const builtinType = type && isBuiltinHeadingType(type) ? type : undefined;
 
-  // Truncation detection
+  // Truncation detection. Only the tooltip reads the measured overflow, so
+  // with the tooltip off the text is clipped by CSS alone and nothing is
+  // measured or observed.
   const truncation = useTruncation({
-    maxLines
+    maxLines: hasTruncateTooltip === false ? 0 : maxLines
   });
 
   // Tooltip for truncated text

package/dist/Item/Item.d.ts

@@ -22,7 +22,7 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-export type ItemAlign = 'center' | 'start';
+export type ItemAlign = 'center' | 'start' | 'first-line';
 export type ItemDensity = 'compact' | 'balanced' | 'spacious';
 /**
  * How a swipe action looks: ordinary, the one you mean, the dangerous one.
@@ -111,7 +111,11 @@ export interface ItemProps extends BaseProps<HTMLElement> {
      */
     endContent?: ReactNode;
     /**
-     * Vertical alignment of the start/end content slots.
+     * Vertical alignment of the start/end content slots. `center` centers each
+     * slot on the whole text block; `start` lines up slot tops with the text's
+     * top; `first-line` centers each slot on the label's first line, so a small
+     * mark (a status dot, a radio, a timestamp) stays level with the first line
+     * of a wrapped label. A slot taller than that line moves the text down.
      * @default 'center'
      */
     align?: ItemAlign;

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}

package/dist/Item/Item.js

@@ -108,6 +108,10 @@ const styles = {
     kGNEyG: "x1cy8zhl",
     $$css: true
   },
+  alignFirstLine: {
+    kGNEyG: "x1pha0wt",
+    $$css: true
+  },
   interactive: {
     kkrTdU: "x1ypdohk x16khyan",
     k1ekBW: "x15406qy",
@@ -359,8 +363,13 @@ export function Item({
   const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
       ...{
-        className: "x3psx0u x78zum5"
-      },
+        0: {
+          className: "x3psx0u x78zum5"
+        },
+        1: {
+          className: "x3psx0u x78zum5 x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
+        }
+      }[!!(align === 'first-line') << 0],
       children: startContent
     }), hasParentRole || isDelegate ?
     /*#__PURE__*/
@@ -444,10 +453,16 @@ export function Item({
         0: {
           className: "x3psx0u x78zum5 xvc5jky"
         },
+        2: {
+          className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
+        },
         1: {
           className: "x3psx0u x78zum5 xvc5jky xbyyjgo"
+        },
+        3: {
+          className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp xbyyjgo"
         }
-      }[!!isDisabled << 0],
+      }[!!(align === 'first-line') << 1 | !!isDisabled << 0],
       children: endContent
     })]
   });
@@ -494,7 +509,7 @@ export function Item({
     ...mergeProps(themeProps('item', {
       density,
       align
-    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
+    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
     role: role,
     onClick: rootOnClick,
     children: [/*#__PURE__*/_jsx(ItemDescriptionContext, {

package/dist/List/List.d.ts

@@ -1,8 +1,9 @@
 /**
  * @file List.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
- *   with optional inline edge compensation
- * @output Exports List component, ListProps, ListDensity, ListStyle types
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
+ *   and ListContext with the row edge treatment
+ * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
+ *   types
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -14,8 +15,8 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import { type ListDensity, type ListMarkerStyle } from './ListContext';
-export { type ListDensity, type ListMarkerStyle as ListStyle, } from './ListContext';
+import { type ListDensity, type ListEdge, type ListMarkerStyle } from './ListContext';
+export { type ListDensity, type ListEdge, type ListMarkerStyle as ListStyle, } from './ListContext';
 export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLUListElement | HTMLOListElement>;
@@ -37,16 +38,38 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
      */
     hasDividers?: boolean;
     /**
-     * Compensates for each item's built-in inline inset, up to the container
-     * padding available on each edge. Use "inline" to bring row content toward
-     * sibling content such as a section heading. Content aligns when the
-     * container padding is at least the item inset; smaller padding leaves
-     * some inset uncompensated.
-     * The cancelling margin reads the same variable the items derive their
-     * inline padding from, so it tracks density and theme padding overrides
-     * automatically. Hover and selection backgrounds still extend past the
-     * text by the inset.
-     * Omit to leave item positions unchanged.
+     * Where each row's text, dividers, and hover and selection backgrounds sit,
+     * relative to the list's edges and the container around it.
+     * - 'padded': text sits inside each row's padding, so it starts a little in
+     *   from a heading above the list and backgrounds have room around it
+     * - 'flush': rows drop their side padding, so text starts on the heading's
+     *   line and dividers and backgrounds stop at the row's content, with no
+     *   room beyond it on either side. Works anywhere. Suits static rows
+     * - 'outset': text sits on the heading's line, and dividers and backgrounds
+     *   reach a little past it into the container's padding. Suits interactive
+     *   rows in a container
+     * - 'bleed': text sits on the heading's line, and dividers and backgrounds
+     *   reach the container's edges with square corners, like Table rows in a
+     *   Card
+     *
+     * A row's first content is what lines up with the heading: its marker,
+     * icon, or avatar when it has one, otherwise its label. 'outset' and
+     * 'bleed' reach into the padding of the nearest container that shares its
+     * padding: a Card, Section, Dialog, or BottomSheet, or a transparent
+     * container such as a Layout region with explicit padding or a padded
+     * ScrollableArea. Place the List directly in that container's padding:
+     * padding that Stack, Center, or your own styles add in between is not
+     * counted. Drawers and the automatic padding of LayoutContent and
+     * LayoutPanel aren't supported yet. With no such container, including in a Popover, they look
+     * like 'padded'. In a container with less padding than the rows' own, text
+     * starts a little after the heading's line. A theme's inline padding on `item` replaces the row
+     * padding of every value, including the zero padding of 'flush'.
+     * @default 'padded'
+     */
+    edge?: ListEdge;
+    /**
+     * @deprecated Use `edge="outset"`, which this sets. Still works; `edge`
+     * wins when both are set. `astryx upgrade` rewrites existing usage.
      */
     edgeCompensation?: 'inline';
     /**
@@ -77,9 +100,10 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
  * dividers, marker styles, and an optional header.
  *
- * Set `edgeCompensation="inline"` to compensate for the items' inline inset
- * up to the container padding available on each edge, for alignment with
- * sibling content such as a section heading.
+ * Set `edge` to choose where row text, dividers, and backgrounds sit: inside
+ * each row's padding (`padded`, the default), at the list's edges (`flush`),
+ * on a heading's line with backgrounds reaching into the container's padding
+ * (`outset`), or reaching the container's edges like Table rows (`bleed`).
  *
  * @example
  * ```
@@ -91,9 +115,12 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
  *   <ListItem label="First step" />
  *   <ListItem label="Second step" />
  * </List>
+ * <List edge="flush" hasDividers>
+ *   <ListItem label="Solstice Mug" description="Ceramic, 12 oz" />
+ * </List>
  * ```
  */
-export declare function List({ children, density, hasDividers, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
+export declare function List({ children, density, hasDividers, edge: edgeProp, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
 export declare namespace List {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;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,eAAe,EACrB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,KAAK,WAAW,EAChB,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;;;;;;;;;;;OAWG;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;AA6CD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,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,+BA4DX;yBA1Ee,IAAI"}
+{"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"}

package/dist/List/List.js

@@ -4,9 +4,10 @@
 
 /**
  * @file List.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
- *   with optional inline edge compensation
- * @output Exports List component, ListProps, ListDensity, ListStyle types
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
+ *   and ListContext with the row edge treatment
+ * @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
+ *   types
  * @position Core implementation; consumed by index.ts, tested by List.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -23,6 +24,7 @@ import { spacingVars } from "../theme/tokens.stylex.js";
 import { ListContext } from "./ListContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -39,6 +41,12 @@ const styles = {
     kXHlph: "x101abm8",
     $$css: true
   },
+  reachesContainerPadding: {
+    keTefX: "xojxgvx",
+    k71WvV: "x1fcf3bl",
+    kzqmXN: "xx6qvi6",
+    $$css: true
+  },
   withDividers: {
     kOIVth: "xxhr3t",
     $$css: true
@@ -68,9 +76,10 @@ const dynamicStyles = {
  * Renders semantic `<ul>` or `<ol>` elements with configurable density,
  * dividers, marker styles, and an optional header.
  *
- * Set `edgeCompensation="inline"` to compensate for the items' inline inset
- * up to the container padding available on each edge, for alignment with
- * sibling content such as a section heading.
+ * Set `edge` to choose where row text, dividers, and backgrounds sit: inside
+ * each row's padding (`padded`, the default), at the list's edges (`flush`),
+ * on a heading's line with backgrounds reaching into the container's padding
+ * (`outset`), or reaching the container's edges like Table rows (`bleed`).
  *
  * @example
  * ```
@@ -82,12 +91,16 @@ const dynamicStyles = {
  *   <ListItem label="First step" />
  *   <ListItem label="Second step" />
  * </List>
+ * <List edge="flush" hasDividers>
+ *   <ListItem label="Solstice Mug" description="Ceramic, 12 oz" />
+ * </List>
  * ```
  */
 export function List({
   children,
   density = 'balanced',
   hasDividers = false,
+  edge: edgeProp,
   edgeCompensation,
   header,
   listStyle = 'none',
@@ -102,12 +115,17 @@ export function List({
   const headerId = useId();
   const isOrdered = listStyle === 'decimal';
   const Tag = isOrdered ? 'ol' : 'ul';
+  // Plain use of the deprecated prop is reported by its @deprecated type;
+  // development warns only when the two names conflict (spec:AST-017 FR29).
+  useDevWarning('List', '`edge` and the deprecated `edgeCompensation` are both set; `edge` wins. ' + 'Remove `edgeCompensation`. `astryx upgrade` rewrites existing usage.', edgeProp != null && edgeCompensation != null);
+  const edge = edgeProp ?? (edgeCompensation === 'inline' ? 'outset' : 'padded');
+  const reachesContainerPadding = edge === 'outset' || edge === 'bleed';
   const contextValue = useMemo(() => ({
     density,
     hasDividers,
-    listStyle,
-    edgeCompensation
-  }), [density, hasDividers, listStyle, edgeCompensation]);
+    edge,
+    listStyle
+  }), [density, hasDividers, edge, listStyle]);
   const listElement = /*#__PURE__*/_jsx(Tag, {
     ref: ref
     // Consumer props first: everything the component sets for itself below
@@ -134,7 +152,7 @@ export function List({
     ...mergeProps(themeProps('list', {
       density,
       listStyle
-    }), stylex.props(styles.list, hasDividers && styles.withDividers, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
+    }), 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),
     children: children
   });
   if (header == null) {

package/dist/List/ListContext.d.ts

@@ -1,8 +1,8 @@
 /**
  * @file ListContext.tsx
  * @input Layer-scoped React context
- * @output Exports ListContext for sharing density, dividers, marker style,
- *   and optional inline edge compensation between List and ListItem, and
+ * @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
  * @position Internal context; consumed by List.tsx and ListItem.tsx
@@ -10,6 +10,11 @@
 import { type ReactNode } from 'react';
 export type ListDensity = 'compact' | 'balanced' | 'spacious';
 export type ListMarkerStyle = 'none' | 'disc' | 'decimal' | 'circle';
+/**
+ * Where each row's content and its lines and backgrounds sit relative to the
+ * list's edges and the padding of the container around the list.
+ */
+export type ListEdge = 'padded' | 'flush' | 'outset' | 'bleed';
 /**
  * Every marker ListItem draws: the public styles, and the square, letter,
  * and roman markers Markdown's nested lists use (spec:AST-061 DEC-6).
@@ -24,8 +29,8 @@ export interface ListTaskMarker {
 export interface ListContextValue {
     density: ListDensity;
     hasDividers: boolean;
+    edge: ListEdge;
     listStyle: ListMarkerStyle;
-    edgeCompensation?: 'inline';
     /**
      * The marker items draw instead of the one `listStyle` names, set by
      * ListMarkerScope; internal. Ignored when `listStyle` is `'none'`.

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,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,SAAS,EAAE,eAAe,CAAC;IAC3B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B;;;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;;;;;;;;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"}

package/dist/List/ListContext.js

@@ -5,8 +5,8 @@
 /**
  * @file ListContext.tsx
  * @input Layer-scoped React context
- * @output Exports ListContext for sharing density, dividers, marker style,
- *   and optional inline edge compensation between List and ListItem, and
+ * @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
  * @position Internal context; consumed by List.tsx and ListItem.tsx
@@ -14,6 +14,11 @@
 import { use, useMemo } from 'react';
 import { createLayerScopedContext as createContext } from "../Layer/layerScopedContext.js";
 
+/**
+ * Where each row's content and its lines and backgrounds sit relative to the
+ * list's edges and the padding of the container around the list.
+ */
+
 /**
  * Every marker ListItem draws: the public styles, and the square, letter,
  * and roman markers Markdown's nested lists use (spec:AST-061 DEC-6).

package/dist/List/ListItem.d.ts

@@ -1,8 +1,9 @@
 /**
  * @file ListItem.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation,
- *   CheckboxInput, and the marker or task checkbox a ListMarkerScope sets
- *   (Markdown's nested lists and the task items of mixed lists)
+ * @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)
  * @output Exports ListItem component, ListItemProps type
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
  *
@@ -18,10 +19,17 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { ItemSwipeActions, ItemSwipeBehavior } from '../Item';
+import type { ItemAlign, ItemSwipeActions, ItemSwipeBehavior } from '../Item';
 export interface ListItemProps extends BaseProps<HTMLLIElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLLIElement>;
+    /**
+     * Vertical alignment of the start and end content against the label,
+     * forwarded to Item. Use `first-line` to keep the start and end content level with the
+     * first line of a wrapped label.
+     * @default 'center'
+     */
+    align?: ItemAlign;
     /**
      * Primary text label for the item.
      *
@@ -113,7 +121,7 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
  * <ListItem label="Docs" href="/docs" target="_blank" rel="noreferrer" />
  * ```
  */
-export declare function ListItem({ label, description, startContent, endContent, onClick, interactiveRef, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
+export declare function ListItem({ label, description, startContent, endContent, onClick, interactiveRef, href, target, rel, isDisabled, isSelected, align, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
 export declare namespace ListItem {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAOjE,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;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;AA0ID;;;;;;;;;;;;;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,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BAuEf;yBAxFe,QAAQ"}
+{"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"}

package/dist/List/ListItem.js

@@ -4,9 +4,10 @@
 
 /**
  * @file ListItem.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, List edge compensation,
- *   CheckboxInput, and the marker or task checkbox a ListMarkerScope sets
- *   (Markdown's nested lists and the task items of mixed lists)
+ * @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)
  * @output Exports ListItem component, ListItemProps type
  * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
  *
@@ -43,9 +44,19 @@ const styles = {
     kAmcRD: "xfrknyr",
     $$css: true
   },
-  inlineEdgeCompensation: {
-    keTefX: "x1t1czy8",
-    k71WvV: "x1cphv78",
+  edgeFlush: {
+    "--_item-inset-inline": "x1nwg5ib",
+    $$css: true
+  },
+  edgeOutset: {
+    keTefX: "xch736x",
+    k71WvV: "x2gtn1o",
+    $$css: true
+  },
+  edgeBleed: {
+    kZCmMZ: "xua885n",
+    kwRFfy: "x1pyz5s7",
+    kaIpWk: "x2u8bby",
     $$css: true
   },
   withDivider: {
@@ -155,6 +166,7 @@ export function ListItem({
   rel,
   isDisabled = false,
   isSelected = false,
+  align,
   xstyle,
   className,
   style,
@@ -164,8 +176,8 @@ export function ListItem({
   const ctx = use(ListContext);
   const density = ctx?.density ?? 'balanced';
   const hasDividers = ctx?.hasDividers ?? false;
+  const edge = ctx?.edge ?? 'padded';
   const listStyle = ctx?.listStyle ?? 'none';
-  const edgeCompensation = ctx?.edgeCompensation;
   const hasMarkers = listStyle !== 'none';
   // ListMarkerScope may name another marker for this item.
   const markerKind = listStyle === 'none' ? null : ctx?.marker ?? listStyle;
@@ -208,8 +220,9 @@ export function ListItem({
     rel: rel,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    align: align,
     density: density,
-    xstyle: [hasMarkers && styles.withCounter, hasDividers && styles.withDivider, hasDividers && embeddedStyles.noRadius, edgeCompensation === 'inline' && styles.inlineEdgeCompensation, xstyle],
+    xstyle: [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