@astryxdesign/core 0.4.4 → 0.4.5-canary.1fdecb1

package/dist/Item/Item.js

@@ -82,6 +82,15 @@ const styles = {
     kfzvcC: "x47corl",
     $$css: true
   },
+  inlineLabel: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  inlineDescription: {
+    kmuXW: "xs83m0k",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
   label: {
     kMwMTN: "x5tbw38",
     kGuDYH: "xjm74w1",
@@ -174,6 +183,7 @@ export function Item({
   density = 'balanced',
   labelLines,
   descriptionLines,
+  layout = 'stacked',
   onClick,
   interactiveRef,
   href,
@@ -223,13 +233,17 @@ export function Item({
   const isStringLabel = typeof label === 'string';
   const isStringDescription = typeof description === 'string';
   const labelTruncateStyle = labelLines != null ? labelLines === 1 ? styles.labelSingleTruncate : styles.labelMultiTruncate : isStringLabel ? styles.labelSingleTruncate : null;
-  const descriptionTruncateStyle = descriptionLines != null ? descriptionLines === 1 ? styles.descriptionSingleTruncate : styles.descriptionMultiTruncate : isStringDescription ? styles.descriptionSingleTruncate : null;
+
+  // Inline rows are one line by definition, so the description always
+  // ellipsizes there — a ReactNode description cannot wrap the row open.
+  const isInline = layout === 'inline' && description != null;
+  const descriptionTruncateStyle = descriptionLines != null ? descriptionLines === 1 ? styles.descriptionSingleTruncate : styles.descriptionMultiTruncate : isStringDescription || isInline ? styles.descriptionSingleTruncate : null;
   const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("span", {
-      ...stylex.props(styles.label, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
+      ...stylex.props(styles.label, isInline && styles.inlineLabel, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
       children: label
     }), description != null && /*#__PURE__*/_jsx("span", {
-      ...stylex.props(styles.description, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
+      ...stylex.props(styles.description, isInline && styles.inlineDescription, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
       children: description
     })]
   });
@@ -259,10 +273,16 @@ export function Item({
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
         },
+        2: {
+          className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9"
+        },
         1: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h xbyyjgo"
+        },
+        3: {
+          className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
         }
-      }[!!isDisabled << 0],
+      }[!!isInline << 1 | !!isDisabled << 0],
       children: labelAndDescription
     }) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
       href: href,
@@ -274,10 +294,16 @@ export function Item({
         0: {
           className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz"
         },
+        2: {
+          className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9"
+        },
         1: {
           className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz xbyyjgo"
+        },
+        3: {
+          className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
         }
-      }[!!isDisabled << 0],
+      }[!!isInline << 1 | !!isDisabled << 0],
       children: labelAndDescription
     }) : onClick != null ? /*#__PURE__*/_jsx("button", {
       type: "button",
@@ -287,20 +313,32 @@ export function Item({
         0: {
           className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz"
         },
+        2: {
+          className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9"
+        },
         1: {
           className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz xbyyjgo"
+        },
+        3: {
+          className: "xmper1u xln7xf2 x1heor9g x78zum5 x98rzlu xeuugli x1yc453h x1a2a7pz x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
         }
-      }[!!isDisabled << 0],
+      }[!!isInline << 1 | !!isDisabled << 0],
       children: labelAndDescription
     }) : /*#__PURE__*/_jsx("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
         },
+        2: {
+          className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9"
+        },
         1: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h xbyyjgo"
+        },
+        3: {
+          className: "x78zum5 x98rzlu xeuugli x1yc453h x1q0g3np x6s0dn4 x1lfs0n9 xbyyjgo"
         }
-      }[!!isDisabled << 0],
+      }[!!isInline << 1 | !!isDisabled << 0],
       children: labelAndDescription
     }), endContent != null && /*#__PURE__*/_jsx("span", {
       ...{

package/dist/Layer/useLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgDnD;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,SAAS,CAAC;IAChB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACrE;AAmFD;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,GAAE,cAAwB,EACnC,SAAS,GAAE,cAAyB,GACnC,MAAM,CAgBR;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;AAC3E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC"}

package/dist/Layer/useLayer.js

@@ -20,6 +20,7 @@ import { addAnchorName, removeAnchorName } from "./anchorName.js";
 import { resolveLayerPortalTarget } from "./layerHost.js";
 import "../theme/tokens.stylex.js";
 import { typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const _temp = {
   keoZOQ: "x1vhfslr",
@@ -453,7 +454,7 @@ export function useLayer(options) {
       positionTryFallbacks: getPositionTryFallbacks(placement, alignment)
     };
     const offsetStyle = positioning === 'anchor' && offset ? placement === 'above' || placement === 'below' ? styles.offsetBlock(toCssLength(offset)) : styles.offsetInline(toCssLength(offset)) : null;
-    const stylexResult = stylex.props(styles.base, offsetStyle, xstyle);
+    const stylexResult = stylex.props(styles.base, overlayPaddingReset.reset, offsetStyle, xstyle);
     const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
 
     // The marker gives us the actual JSX parent without mounting arbitrary
@@ -496,7 +497,7 @@ export function useLayer(options) {
       top: y,
       left: x
     };
-    const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
+    const stylexResult = stylex.props(styles.base, overlayPaddingReset.reset, styles.fixed, xstyle);
     const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
     return /*#__PURE__*/_jsx("div", {
       ref: popoverRefCallback,

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

@@ -26,8 +26,10 @@
  * }
  * ```
  *
- * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`)
- * are implementation details and must not be referenced by themes.
+ * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`,
+ * `--_section-padding-propagated`) are implementation details and must not be
+ * referenced by themes. They also do not cross an overlay boundary — see
+ * `overlayPaddingReset` in padding.stylex.ts.
  *
  * SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
  */

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

@@ -1 +1 @@
-{"version":3,"file":"container.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/container.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAoJhB;;;GAGG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAuKjE,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;;;;;;;;OAWG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,SAAS,GACV,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyClB"}
+{"version":3,"file":"container.stylex.d.ts","sourceRoot":"","sources":["../../src/Layout/container.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AA0JhB;;;GAGG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAuKjE,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;;;;;;;;;OAWG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,SAAS,GACV,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyClB"}

package/dist/Layout/container.stylex.js

@@ -28,8 +28,10 @@
  * }
  * ```
  *
- * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`)
- * are implementation details and must not be referenced by themes.
+ * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`,
+ * `--_section-padding-propagated`) are implementation details and must not be
+ * referenced by themes. They also do not cross an overlay boundary — see
+ * `overlayPaddingReset` in padding.stylex.ts.
  *
  * SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
  */
@@ -91,7 +93,13 @@ const cardBlockEnd = `var(--astryx-card-padding-block-end, ${cardShorthand})`;
 // Section padding chains: --astryx-* then the next specificity level, terminating
 // at --spacing-4. Built as chained const strings (no function calls) so StyleX
 // can statically analyze them; see naming.ts for the prefix policy.
-const sectionShorthand = `var(--astryx-section-padding, ${SP4})`;
+// `--_section-padding-propagated` (set by an ancestor Section with explicit
+// padding) is read AHEAD of the public theme token, so a propagated value
+// still wins over the theme for nested sections. Splitting the two names is
+// what lets an overlay drop the inherited value at its boundary while keeping
+// the theme's — see `overlayPaddingReset` in padding.stylex.ts.
+const sectionThemeShorthand = `var(--astryx-section-padding, ${SP4})`;
+const sectionShorthand = `var(--_section-padding-propagated, ${sectionThemeShorthand})`;
 const sectionInline = `var(--astryx-section-padding-inline, ${sectionShorthand})`;
 const sectionInlineStart = `var(--astryx-section-padding-inline-start, ${sectionInline})`;
 const sectionInlineEnd = `var(--astryx-section-padding-inline-end, ${sectionInline})`;
@@ -143,35 +151,35 @@ const cardDefaultPaddingStyles = {
 };
 const sectionDefaultPaddingStyles = {
   containerPaddingInlineStart: {
-    "--container-padding-inline-start": "xrgx2ny",
+    "--container-padding-inline-start": "x19lemt0",
     $$css: true
   },
   containerPaddingInlineEnd: {
-    "--container-padding-inline-end": "xyk0j9o",
+    "--container-padding-inline-end": "xu1wldr",
     $$css: true
   },
   containerPaddingBlockStart: {
-    "--container-padding-block-start": "x876hks",
+    "--container-padding-block-start": "xnw7zt4",
     $$css: true
   },
   containerPaddingBlockEnd: {
-    "--container-padding-block-end": "x1u89lk7",
+    "--container-padding-block-end": "xek4msv",
     $$css: true
   },
   layoutPaddingOuterX: {
-    "--layout-padding-outer-x": "x12sptzx",
+    "--layout-padding-outer-x": "x15i0zw9",
     $$css: true
   },
   layoutPaddingOuterY: {
-    "--layout-padding-outer-y": "xo78phr",
+    "--layout-padding-outer-y": "x1vw4zgg",
     $$css: true
   },
   layoutPaddingInnerX: {
-    "--layout-padding-inner-x": "x1we69p7",
+    "--layout-padding-inner-x": "x1v3gmnx",
     $$css: true
   },
   layoutPaddingInnerY: {
-    "--layout-padding-inner-y": "xsdnkbz",
+    "--layout-padding-inner-y": "x15yx5hm",
     $$css: true
   }
 };

package/dist/Layout/index.d.ts

@@ -8,6 +8,7 @@
  */
 export { container } from './container.stylex';
 export type { ContainerComponent, ContainerOptions, SpacingToken, } from './container.stylex';
+export { overlayPaddingReset } from './padding.stylex';
 export { edgeCompSlot, EDGE_COMP_ATTR } from './edgeCompensation.stylex';
 export { stack } from '../Stack/stack.stylex';
 export type { StackOptions, StackDirection, StackCrossAlignment, StackMainAlignment, StackWrap, SpacingStep, } from '../Stack/stack.stylex';

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;AAG5B,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,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"}

package/dist/Layout/index.js

@@ -13,6 +13,10 @@
 
 // Container utility
 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";
+
 // Edge compensation utility
 export { edgeCompSlot, EDGE_COMP_ATTR } from "./edgeCompensation.stylex.js";
 

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

@@ -388,44 +388,347 @@ export declare const paddingBlockStyles: Readonly<{
     }>;
 }>;
 /**
- * Propagation styles for --astryx-section-padding.
+ * Inline-start-only padding override styles.
+ * Use when a component needs to override the inline-start edge independently
+ * of inline-end. Logical, so it follows the writing direction (left in LTR,
+ * right in RTL).
+ */
+export declare const paddingInlineStartStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "40px">;
+    }>;
+}>;
+/**
+ * Inline-end-only padding override styles.
+ * The inline-end counterpart of paddingInlineStartStyles.
+ */
+export declare const paddingInlineEndStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "40px">;
+    }>;
+}>;
+/**
+ * Container padding inline-start CSS variable style, set independently of
+ * inline-end so a per-edge override keeps edge-compensating children (Card,
+ * Divider, a nested Section) compensating against the padding actually
+ * applied on that edge.
+ */
+export declare const containerPaddingInlineStartVarStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "40px">;
+    }>;
+}>;
+/**
+ * Container padding inline-end CSS variable style, the counterpart of
+ * containerPaddingInlineStartVarStyles.
+ */
+export declare const containerPaddingInlineEndVarStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "40px">;
+    }>;
+}>;
+/**
+ * Block-start-only padding override styles.
+ * Use when a component needs to override the block-start (top) edge
+ * independently of block-end — e.g. a section that sits under a sticky
+ * header and needs less padding above than below.
+ */
+export declare const paddingBlockStartStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "40px">;
+    }>;
+}>;
+/**
+ * Block-end-only padding override styles.
+ * The block-end counterpart of paddingBlockStartStyles.
+ */
+export declare const paddingBlockEndStyles: Readonly<{
+    readonly 0: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "0px">;
+    }>;
+    readonly 0.5: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "2px">;
+    }>;
+    readonly 1: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "4px">;
+    }>;
+    readonly 1.5: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "6px">;
+    }>;
+    readonly 2: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "8px">;
+    }>;
+    readonly 3: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "12px">;
+    }>;
+    readonly 4: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "16px">;
+    }>;
+    readonly 5: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "20px">;
+    }>;
+    readonly 6: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "24px">;
+    }>;
+    readonly 8: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "32px">;
+    }>;
+    readonly 10: Readonly<{
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "40px">;
+    }>;
+}>;
+/**
+ * Propagation styles for `--_section-padding-propagated`.
  * When a parent section sets explicit padding, this propagates the value
  * through the CSS custom property cascade so nested sections that use
  * useThemeDefault inherit the parent's padding instead of the theme default.
+ *
+ * This is deliberately NOT the public `--astryx-section-padding` token. The
+ * two carry different authority: the public token is the THEME's section
+ * padding, set once at the theme root, while this one is one ancestor
+ * Section's padding, propagated down the tree. An overlay has to drop the
+ * inherited value at its boundary (see {@link overlayPaddingReset}) without
+ * dropping the theme's — impossible while both live under one name.
+ * `container.stylex.ts` reads this ahead of the public token, so a propagated
+ * value still wins over the theme for nested sections, as before.
  */
 export declare const sectionPaddingPropagationStyles: Readonly<{
     readonly 0: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "0px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "0px">;
     }>;
     readonly 0.5: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "2px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "2px">;
     }>;
     readonly 1: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "4px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "4px">;
     }>;
     readonly 1.5: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "6px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "6px">;
     }>;
     readonly 2: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "8px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "8px">;
     }>;
     readonly 3: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "12px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "12px">;
     }>;
     readonly 4: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "16px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "16px">;
     }>;
     readonly 5: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "20px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "20px">;
     }>;
     readonly 6: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "24px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "24px">;
     }>;
     readonly 8: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "32px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "32px">;
     }>;
     readonly 10: Readonly<{
-        readonly '--astryx-section-padding': stylex.StyleXClassNameFor<"--astryx-section-padding", "40px">;
+        readonly '--_section-padding-propagated': stylex.StyleXClassNameFor<"--_section-padding-propagated", "40px">;
+    }>;
+}>;
+/**
+ * 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-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