@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/dist/Layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,OAAO,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAC5C,YAAY,EACV,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AACpD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,GACd,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,UAAU,CAAC;AAC1D,YAAY,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,YAAY,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,UAAU,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Layout/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAC,mBAAmB,EAAC,MAAM,8BAA8B,CAAC;AAGjE,OAAO,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAC5C,YAAY,EACV,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AACpD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,GACd,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,UAAU,CAAC;AAC1D,YAAY,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,YAAY,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AAE7D,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,UAAU,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC"}

package/dist/Layout/index.js

@@ -15,7 +15,7 @@
 export { container } from "./container.stylex.js";
 // Overlay padding-variable reset (applied on overlay roots so the container
 // padding system does not cross a fixed/top-layer boundary)
-export { overlayPaddingReset } from "./padding.stylex.js";
+export { overlayPaddingReset } from "./overlayPaddingReset.stylex.js";
 
 // Edge compensation utility
 export { edgeCompSlot, EDGE_COMP_ATTR } from "./edgeCompensation.stylex.js";

package/dist/Layout/layoutReset.js

@@ -18,7 +18,7 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
-import { overlayPaddingReset } from "./padding.stylex.js";
+import { overlayPaddingReset } from "./overlayPaddingReset.stylex.js";
 const resetBeyondOverlays = {
   root: {
     "--layout-content-width": "x1vpwbdg",

package/dist/Layout/overlayPaddingReset.stylex.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @file overlayPaddingReset.stylex.ts
+ * @input Uses @stylexjs/stylex
+ * @output overlayPaddingReset: the container padding boundary at an overlay's root
+ * @position Layout utility, re-exported by padding.stylex.ts and Layout/index.ts.
+ *   Its own module so an overlay's eager code (useLayer) imports it without
+ *   padding.stylex.ts: a lazily loaded overlay that uses the container padding
+ *   styles there then keeps them out of the eager chunk it shares with this
+ *   module.
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Padding-variable reset for overlay roots (Dialog, BottomSheet, Drawer,
+ * MobileNav, Lightbox, and every layer surface).
+ *
+ * ## Why an overlay needs this
+ *
+ * The container padding system talks to descendants through inherited custom
+ * properties: a padded container announces its padding, and children read the
+ * value either to apply it or to cancel it with a negative margin
+ * (`Section`, `Divider`, `Layout`, `Table`).
+ *
+ * Inheritance follows the DOM, but an overlay leaves its parent's visual box —
+ * a fixed/top-layer `<dialog>` is a DOM descendant of the padded page while
+ * being nowhere near it on screen. It inherits values describing padding that
+ * is not there, and its content compensates against phantom space: a `Section`
+ * inside a 640px sheet rendered 672px wide and hung off both edges.
+ *
+ * Two families leak, and they need opposite treatments:
+ *
+ * - `--container-padding-*` -> `0px`. Descendants SUBTRACT these (bleed
+ *   margins). The overlay root has no padding of its own to escape, so the
+ *   honest answer is zero. Nested containers that do set padding (a Dialog's
+ *   content wrapper) re-announce their own values below this point, so
+ *   legitimate edge-to-edge bleed inside the overlay is unaffected.
+ * - `--layout-padding-*` and `--_section-padding-propagated` -> `initial`.
+ *   Descendants ADD these, so zeroing them would strip padding rather than
+ *   restore it. `initial` makes each guaranteed-invalid, so readers fall
+ *   through their own `var(…, fallback)` chain and land on the theme default —
+ *   which is what an overlay at the top of the tree should show.
+ *
+ * `initial` is also why propagation moved off `--astryx-section-padding`: that
+ * name is public theme surface, set at the theme root, and making it invalid
+ * here would blank the theme's own section padding inside every overlay.
+ *
+ * Apply on the overlay's outermost styled element.
+ *
+ * @example
+ * ```
+ * <dialog {...stylex.props(styles.dialog, overlayPaddingReset.reset)} />
+ * ```
+ */
+export declare const overlayPaddingReset: Readonly<{
+    readonly reset: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "0px">;
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "0px">;
+        readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", "0px">;
+        readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", "0px">;
+        readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", "initial">;
+        readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", "initial">;
+        readonly '--layout-padding-own-outer-x': stylex.StyleXClassNameFor<"--layout-padding-own-outer-x", "initial">;
+        readonly '--layout-padding-own-outer-y': stylex.StyleXClassNameFor<"--layout-padding-own-outer-y", "initial">;
+        readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", "initial">;
+        readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", "initial">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "initial">;
+    }>;
+}>;
+//# sourceMappingURL=overlayPaddingReset.stylex.d.ts.map

package/dist/Layout/overlayPaddingReset.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPaddingReset.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/overlayPaddingReset.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;EAgB9B,CAAC"}

package/dist/Layout/overlayPaddingReset.stylex.js

@@ -0,0 +1,72 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file overlayPaddingReset.stylex.ts
+ * @input Uses @stylexjs/stylex
+ * @output overlayPaddingReset: the container padding boundary at an overlay's root
+ * @position Layout utility, re-exported by padding.stylex.ts and Layout/index.ts.
+ *   Its own module so an overlay's eager code (useLayer) imports it without
+ *   padding.stylex.ts: a lazily loaded overlay that uses the container padding
+ *   styles there then keeps them out of the eager chunk it shares with this
+ *   module.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Padding-variable reset for overlay roots (Dialog, BottomSheet, Drawer,
+ * MobileNav, Lightbox, and every layer surface).
+ *
+ * ## Why an overlay needs this
+ *
+ * The container padding system talks to descendants through inherited custom
+ * properties: a padded container announces its padding, and children read the
+ * value either to apply it or to cancel it with a negative margin
+ * (`Section`, `Divider`, `Layout`, `Table`).
+ *
+ * Inheritance follows the DOM, but an overlay leaves its parent's visual box —
+ * a fixed/top-layer `<dialog>` is a DOM descendant of the padded page while
+ * being nowhere near it on screen. It inherits values describing padding that
+ * is not there, and its content compensates against phantom space: a `Section`
+ * inside a 640px sheet rendered 672px wide and hung off both edges.
+ *
+ * Two families leak, and they need opposite treatments:
+ *
+ * - `--container-padding-*` -> `0px`. Descendants SUBTRACT these (bleed
+ *   margins). The overlay root has no padding of its own to escape, so the
+ *   honest answer is zero. Nested containers that do set padding (a Dialog's
+ *   content wrapper) re-announce their own values below this point, so
+ *   legitimate edge-to-edge bleed inside the overlay is unaffected.
+ * - `--layout-padding-*` and `--_section-padding-propagated` -> `initial`.
+ *   Descendants ADD these, so zeroing them would strip padding rather than
+ *   restore it. `initial` makes each guaranteed-invalid, so readers fall
+ *   through their own `var(…, fallback)` chain and land on the theme default —
+ *   which is what an overlay at the top of the tree should show.
+ *
+ * `initial` is also why propagation moved off `--astryx-section-padding`: that
+ * name is public theme surface, set at the theme root, and making it invalid
+ * here would blank the theme's own section padding inside every overlay.
+ *
+ * Apply on the overlay's outermost styled element.
+ *
+ * @example
+ * ```
+ * <dialog {...stylex.props(styles.dialog, overlayPaddingReset.reset)} />
+ * ```
+ */
+export const overlayPaddingReset = {
+  reset: {
+    "--container-padding-inline-start": "xrhngw9",
+    "--container-padding-inline-end": "xjsfl84",
+    "--container-padding-block-start": "x1047aw6",
+    "--container-padding-block-end": "xax9j7h",
+    "--layout-padding-outer-x": "xdt8ak2",
+    "--layout-padding-outer-y": "x1rs4lu4",
+    "--layout-padding-own-outer-x": "x1vii845",
+    "--layout-padding-own-outer-y": "xojybgt",
+    "--layout-padding-inner-x": "x1qfll2g",
+    "--layout-padding-inner-y": "xyvxpqs",
+    "--_section-padding-propagated": "x1f17rg1",
+    $$css: true
+  }
+};

package/dist/Layout/padding.stylex.d.ts

@@ -1,87 +1,19 @@
 /**
  * @file padding.stylex.ts
  * @input Uses @stylexjs/stylex, spacing from theme
- * @output StyleX styles for numeric padding prop on layout components
+ * @output StyleX styles for numeric padding prop on layout components, the
+ *   container padding variables, and (re-exported) paddingStyles and
+ *   overlayPaddingReset
  * @position Layout utility; used by Card, Section, and Layout sub-components
  */
 import * as stylex from '@stylexjs/stylex';
 import type { SpacingStep } from '../utils/types.js';
+export { paddingStyles } from './paddingStyles.stylex.js';
+export { overlayPaddingReset } from './overlayPaddingReset.stylex.js';
 /**
  * Maps numeric SpacingStep values to SpacingToken keys used by the container system.
  */
 export declare const spacingStepToToken: Record<SpacingStep, string>;
-/**
- * Padding styles for all sides using spacing tokens.
- * Each key applies uniform padding to all four sides.
- */
-export declare const paddingStyles: Readonly<{
-    readonly 0: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0rem">;
-    }>;
-    readonly 0.5: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.125rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.125rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.125rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.125rem">;
-    }>;
-    readonly 1: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.25rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.25rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.25rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.25rem">;
-    }>;
-    readonly 1.5: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.375rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.375rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.375rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.375rem">;
-    }>;
-    readonly 2: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.5rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.5rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.5rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.5rem">;
-    }>;
-    readonly 3: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.75rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.75rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.75rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.75rem">;
-    }>;
-    readonly 4: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1rem">;
-    }>;
-    readonly 5: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1.25rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1.25rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1.25rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1.25rem">;
-    }>;
-    readonly 6: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1.5rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1.5rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1.5rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1.5rem">;
-    }>;
-    readonly 8: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "2rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "2rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "2rem">;
-    }>;
-    readonly 10: Readonly<{
-        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "2.5rem">;
-        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "2.5rem">;
-        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2.5rem">;
-        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "2.5rem">;
-    }>;
-}>;
 /**
  * Container padding inline CSS variable styles for edge compensation.
  * Sets --container-padding-inline-start and --container-padding-inline-end so
@@ -684,60 +616,4 @@ export declare const sectionPaddingPropagationStyles: Readonly<{
         readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "2.5rem">;
     }>;
 }>;
-/**
- * Padding-variable reset for overlay roots (Dialog, BottomSheet, Drawer,
- * MobileNav, Lightbox, and every layer surface).
- *
- * ## Why an overlay needs this
- *
- * The container padding system talks to descendants through inherited custom
- * properties: a padded container announces its padding, and children read the
- * value either to apply it or to cancel it with a negative margin
- * (`Section`, `Divider`, `Layout`, `Table`).
- *
- * Inheritance follows the DOM, but an overlay leaves its parent's visual box —
- * a fixed/top-layer `<dialog>` is a DOM descendant of the padded page while
- * being nowhere near it on screen. It inherits values describing padding that
- * is not there, and its content compensates against phantom space: a `Section`
- * inside a 640px sheet rendered 672px wide and hung off both edges (#5208).
- *
- * Two families leak, and they need opposite treatments:
- *
- * - `--container-padding-*` -> `0px`. Descendants SUBTRACT these (bleed
- *   margins). The overlay root has no padding of its own to escape, so the
- *   honest answer is zero. Nested containers that do set padding (a Dialog's
- *   content wrapper) re-announce their own values below this point, so
- *   legitimate edge-to-edge bleed inside the overlay is unaffected.
- * - `--layout-padding-*` and `--_section-padding-propagated` -> `initial`.
- *   Descendants ADD these, so zeroing them would strip padding rather than
- *   restore it. `initial` makes each guaranteed-invalid, so readers fall
- *   through their own `var(…, fallback)` chain and land on the theme default —
- *   which is what an overlay at the top of the tree should show.
- *
- * `initial` is also why propagation moved off `--astryx-section-padding`: that
- * name is public theme surface, set at the theme root, and making it invalid
- * here would blank the theme's own section padding inside every overlay.
- *
- * Apply on the overlay's outermost styled element.
- *
- * @example
- * ```
- * <dialog {...stylex.props(styles.dialog, overlayPaddingReset.reset)} />
- * ```
- */
-export declare const overlayPaddingReset: Readonly<{
-    readonly reset: Readonly<{
-        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "0px">;
-        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "0px">;
-        readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", "0px">;
-        readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", "0px">;
-        readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", "initial">;
-        readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", "initial">;
-        readonly '--layout-padding-own-outer-x': stylex.StyleXClassNameFor<"--layout-padding-own-outer-x", "initial">;
-        readonly '--layout-padding-own-outer-y': stylex.StyleXClassNameFor<"--layout-padding-own-outer-y", "initial">;
-        readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", "initial">;
-        readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", "initial">;
-        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "initial">;
-    }>;
-}>;
 //# sourceMappingURL=padding.stylex.d.ts.map

package/dist/Layout/padding.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padding.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/padding.stylex.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAY1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmExB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C1C,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mCAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY9C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY5C,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYvC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C9B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C7B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYjC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,oCAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY/C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY7C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYhC,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY1C,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;EAgB9B,CAAC"}
+{"version":3,"file":"padding.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/padding.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAC,mBAAmB,EAAC,MAAM,8BAA8B,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAY1D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C1C,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mCAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY9C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY5C,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYvC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C9B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C7B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYnC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYjC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,oCAAoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY/C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY7C,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYlC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYhC,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY1C,CAAC"}

package/dist/Layout/padding.stylex.js

@@ -3,13 +3,21 @@
 /**
  * @file padding.stylex.ts
  * @input Uses @stylexjs/stylex, spacing from theme
- * @output StyleX styles for numeric padding prop on layout components
+ * @output StyleX styles for numeric padding prop on layout components, the
+ *   container padding variables, and (re-exported) paddingStyles and
+ *   overlayPaddingReset
  * @position Layout utility; used by Card, Section, and Layout sub-components
  */
 
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
+// In their own modules so an overlay's eager code imports them without this
+// one, and a lazily loaded overlay that uses the container padding styles
+// below keeps those out of the chunk it shares with that code.
+export { paddingStyles } from "./paddingStyles.stylex.js";
+export { overlayPaddingReset } from "./overlayPaddingReset.stylex.js";
+
 /**
  * Maps numeric SpacingStep values to SpacingToken keys used by the container system.
  */
@@ -27,90 +35,6 @@ export const spacingStepToToken = {
   10: 'spacing10'
 };
 
-/**
- * Padding styles for all sides using spacing tokens.
- * Each key applies uniform padding to all four sides.
- */
-export const paddingStyles = {
-  "0": {
-    kZCmMZ: "x18gyask",
-    kwRFfy: "x1s0aq8i",
-    kLKAdn: "x1ydh6w3",
-    kGO01o: "x1l20ajd",
-    $$css: true
-  },
-  "1": {
-    kZCmMZ: "x1vsv5vr",
-    kwRFfy: "x1nryj5t",
-    kLKAdn: "xfsso4q",
-    kGO01o: "xy143xn",
-    $$css: true
-  },
-  "2": {
-    kZCmMZ: "x12gdq22",
-    kwRFfy: "x1djylfy",
-    kLKAdn: "x1xye8es",
-    kGO01o: "x1wesfrj",
-    $$css: true
-  },
-  "3": {
-    kZCmMZ: "x126nfab",
-    kwRFfy: "x1t818jl",
-    kLKAdn: "x1vlblms",
-    kGO01o: "xvmdzux",
-    $$css: true
-  },
-  "4": {
-    kZCmMZ: "x1rey3nv",
-    kwRFfy: "xnjyzlh",
-    kLKAdn: "x1oa1p4a",
-    kGO01o: "x1awphl8",
-    $$css: true
-  },
-  "5": {
-    kZCmMZ: "x1blguxw",
-    kwRFfy: "xdbrk9v",
-    kLKAdn: "xx7rijo",
-    kGO01o: "x1hk98q",
-    $$css: true
-  },
-  "6": {
-    kZCmMZ: "x31w388",
-    kwRFfy: "x1we12cn",
-    kLKAdn: "x1adxfkp",
-    kGO01o: "xjpqqx5",
-    $$css: true
-  },
-  "8": {
-    kZCmMZ: "x1j3hnjz",
-    kwRFfy: "x1q91b2g",
-    kLKAdn: "xoxd1wu",
-    kGO01o: "x2oz4g1",
-    $$css: true
-  },
-  "10": {
-    kZCmMZ: "xqp078j",
-    kwRFfy: "x160ivqr",
-    kLKAdn: "xk6660b",
-    kGO01o: "x2izi54",
-    $$css: true
-  },
-  "0.5": {
-    kZCmMZ: "x138rykx",
-    kwRFfy: "x1le3yxw",
-    kLKAdn: "xbx876j",
-    kGO01o: "xij103a",
-    $$css: true
-  },
-  "1.5": {
-    kZCmMZ: "xfti1ec",
-    kwRFfy: "x17hk9do",
-    kLKAdn: "x1kwdpsa",
-    kGO01o: "x1opdxmq",
-    $$css: true
-  }
-};
-
 /**
  * Container padding inline CSS variable styles for edge compensation.
  * Sets --container-padding-inline-start and --container-padding-inline-end so
@@ -878,62 +802,4 @@ export const sectionPaddingPropagationStyles = {
     "--_section-padding-propagated": "xxa843v",
     $$css: true
   }
-};
-
-/**
- * Padding-variable reset for overlay roots (Dialog, BottomSheet, Drawer,
- * MobileNav, Lightbox, and every layer surface).
- *
- * ## Why an overlay needs this
- *
- * The container padding system talks to descendants through inherited custom
- * properties: a padded container announces its padding, and children read the
- * value either to apply it or to cancel it with a negative margin
- * (`Section`, `Divider`, `Layout`, `Table`).
- *
- * Inheritance follows the DOM, but an overlay leaves its parent's visual box —
- * a fixed/top-layer `<dialog>` is a DOM descendant of the padded page while
- * being nowhere near it on screen. It inherits values describing padding that
- * is not there, and its content compensates against phantom space: a `Section`
- * inside a 640px sheet rendered 672px wide and hung off both edges (#5208).
- *
- * Two families leak, and they need opposite treatments:
- *
- * - `--container-padding-*` -> `0px`. Descendants SUBTRACT these (bleed
- *   margins). The overlay root has no padding of its own to escape, so the
- *   honest answer is zero. Nested containers that do set padding (a Dialog's
- *   content wrapper) re-announce their own values below this point, so
- *   legitimate edge-to-edge bleed inside the overlay is unaffected.
- * - `--layout-padding-*` and `--_section-padding-propagated` -> `initial`.
- *   Descendants ADD these, so zeroing them would strip padding rather than
- *   restore it. `initial` makes each guaranteed-invalid, so readers fall
- *   through their own `var(…, fallback)` chain and land on the theme default —
- *   which is what an overlay at the top of the tree should show.
- *
- * `initial` is also why propagation moved off `--astryx-section-padding`: that
- * name is public theme surface, set at the theme root, and making it invalid
- * here would blank the theme's own section padding inside every overlay.
- *
- * Apply on the overlay's outermost styled element.
- *
- * @example
- * ```
- * <dialog {...stylex.props(styles.dialog, overlayPaddingReset.reset)} />
- * ```
- */
-export const overlayPaddingReset = {
-  reset: {
-    "--container-padding-inline-start": "xrhngw9",
-    "--container-padding-inline-end": "xjsfl84",
-    "--container-padding-block-start": "x1047aw6",
-    "--container-padding-block-end": "xax9j7h",
-    "--layout-padding-outer-x": "xdt8ak2",
-    "--layout-padding-outer-y": "x1rs4lu4",
-    "--layout-padding-own-outer-x": "x1vii845",
-    "--layout-padding-own-outer-y": "xojybgt",
-    "--layout-padding-inner-x": "x1qfll2g",
-    "--layout-padding-inner-y": "xyvxpqs",
-    "--_section-padding-propagated": "x1f17rg1",
-    $$css: true
-  }
 };

package/dist/Layout/paddingStyles.stylex.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @file paddingStyles.stylex.ts
+ * @input Uses @stylexjs/stylex, spacing from theme
+ * @output paddingStyles: uniform padding on all four sides by SpacingStep
+ * @position Layout utility, re-exported by padding.stylex.ts. Its own module so an
+ *   overlay's eager code (usePopover) imports it without padding.stylex.ts:
+ *   a lazily loaded overlay that uses the container padding styles there then
+ *   keeps them out of the eager chunk it shares with this module.
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Padding styles for all sides using spacing tokens.
+ * Each key applies uniform padding to all four sides.
+ */
+export declare const paddingStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0rem">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.125rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.125rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.125rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.125rem">;
+    }>;
+    readonly 1: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.25rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.25rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.25rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.25rem">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.375rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.375rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.375rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.375rem">;
+    }>;
+    readonly 2: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.5rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.5rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.5rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.5rem">;
+    }>;
+    readonly 3: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0.75rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0.75rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0.75rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0.75rem">;
+    }>;
+    readonly 4: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1rem">;
+    }>;
+    readonly 5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1.25rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1.25rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1.25rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1.25rem">;
+    }>;
+    readonly 6: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "1.5rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "1.5rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "1.5rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "1.5rem">;
+    }>;
+    readonly 8: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "2rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "2rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "2rem">;
+    }>;
+    readonly 10: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "2.5rem">;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "2.5rem">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2.5rem">;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "2.5rem">;
+    }>;
+}>;
+//# sourceMappingURL=paddingStyles.stylex.d.ts.map

package/dist/Layout/paddingStyles.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paddingStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/paddingStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmExB,CAAC"}