@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/dist/Layout/padding.stylex.js

@@ -500,54 +500,431 @@ export const paddingBlockStyles = {
 };
 
 /**
- * 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 const paddingInlineStartStyles = {
+  "0": {
+    kZCmMZ: "x18gyask",
+    $$css: true
+  },
+  "1": {
+    kZCmMZ: "x1vsv5vr",
+    $$css: true
+  },
+  "2": {
+    kZCmMZ: "x12gdq22",
+    $$css: true
+  },
+  "3": {
+    kZCmMZ: "x126nfab",
+    $$css: true
+  },
+  "4": {
+    kZCmMZ: "x1rey3nv",
+    $$css: true
+  },
+  "5": {
+    kZCmMZ: "x1blguxw",
+    $$css: true
+  },
+  "6": {
+    kZCmMZ: "x31w388",
+    $$css: true
+  },
+  "8": {
+    kZCmMZ: "x1j3hnjz",
+    $$css: true
+  },
+  "10": {
+    kZCmMZ: "xqp078j",
+    $$css: true
+  },
+  "0.5": {
+    kZCmMZ: "x138rykx",
+    $$css: true
+  },
+  "1.5": {
+    kZCmMZ: "xfti1ec",
+    $$css: true
+  }
+};
+
+/**
+ * Inline-end-only padding override styles.
+ * The inline-end counterpart of paddingInlineStartStyles.
+ */
+export const paddingInlineEndStyles = {
+  "0": {
+    kwRFfy: "x1s0aq8i",
+    $$css: true
+  },
+  "1": {
+    kwRFfy: "x1nryj5t",
+    $$css: true
+  },
+  "2": {
+    kwRFfy: "x1djylfy",
+    $$css: true
+  },
+  "3": {
+    kwRFfy: "x1t818jl",
+    $$css: true
+  },
+  "4": {
+    kwRFfy: "xnjyzlh",
+    $$css: true
+  },
+  "5": {
+    kwRFfy: "xdbrk9v",
+    $$css: true
+  },
+  "6": {
+    kwRFfy: "x1we12cn",
+    $$css: true
+  },
+  "8": {
+    kwRFfy: "x1q91b2g",
+    $$css: true
+  },
+  "10": {
+    kwRFfy: "x160ivqr",
+    $$css: true
+  },
+  "0.5": {
+    kwRFfy: "x1le3yxw",
+    $$css: true
+  },
+  "1.5": {
+    kwRFfy: "x17hk9do",
+    $$css: true
+  }
+};
+
+/**
+ * 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 const containerPaddingInlineStartVarStyles = {
+  "0": {
+    "--container-padding-inline-start": "x1gu2k80",
+    $$css: true
+  },
+  "1": {
+    "--container-padding-inline-start": "x1cvlban",
+    $$css: true
+  },
+  "2": {
+    "--container-padding-inline-start": "x1xlrr2o",
+    $$css: true
+  },
+  "3": {
+    "--container-padding-inline-start": "xfdwxua",
+    $$css: true
+  },
+  "4": {
+    "--container-padding-inline-start": "x1dlhslv",
+    $$css: true
+  },
+  "5": {
+    "--container-padding-inline-start": "x1s81nki",
+    $$css: true
+  },
+  "6": {
+    "--container-padding-inline-start": "x1ep0dkj",
+    $$css: true
+  },
+  "8": {
+    "--container-padding-inline-start": "xw1diwv",
+    $$css: true
+  },
+  "10": {
+    "--container-padding-inline-start": "xserb3f",
+    $$css: true
+  },
+  "0.5": {
+    "--container-padding-inline-start": "x14ws0sr",
+    $$css: true
+  },
+  "1.5": {
+    "--container-padding-inline-start": "x176g23i",
+    $$css: true
+  }
+};
+
+/**
+ * Container padding inline-end CSS variable style, the counterpart of
+ * containerPaddingInlineStartVarStyles.
+ */
+export const containerPaddingInlineEndVarStyles = {
+  "0": {
+    "--container-padding-inline-end": "x91ghl5",
+    $$css: true
+  },
+  "1": {
+    "--container-padding-inline-end": "x2oyxnl",
+    $$css: true
+  },
+  "2": {
+    "--container-padding-inline-end": "xcas3b9",
+    $$css: true
+  },
+  "3": {
+    "--container-padding-inline-end": "xu0ipoa",
+    $$css: true
+  },
+  "4": {
+    "--container-padding-inline-end": "xs0pscg",
+    $$css: true
+  },
+  "5": {
+    "--container-padding-inline-end": "xgkj7vj",
+    $$css: true
+  },
+  "6": {
+    "--container-padding-inline-end": "x94cj42",
+    $$css: true
+  },
+  "8": {
+    "--container-padding-inline-end": "x1b9k1pi",
+    $$css: true
+  },
+  "10": {
+    "--container-padding-inline-end": "xx5lg5w",
+    $$css: true
+  },
+  "0.5": {
+    "--container-padding-inline-end": "x1wz3t3y",
+    $$css: true
+  },
+  "1.5": {
+    "--container-padding-inline-end": "xntetml",
+    $$css: true
+  }
+};
+
+/**
+ * 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 const paddingBlockStartStyles = {
+  "0": {
+    kLKAdn: "x1ydh6w3",
+    $$css: true
+  },
+  "1": {
+    kLKAdn: "xfsso4q",
+    $$css: true
+  },
+  "2": {
+    kLKAdn: "x1xye8es",
+    $$css: true
+  },
+  "3": {
+    kLKAdn: "x1vlblms",
+    $$css: true
+  },
+  "4": {
+    kLKAdn: "x1oa1p4a",
+    $$css: true
+  },
+  "5": {
+    kLKAdn: "xx7rijo",
+    $$css: true
+  },
+  "6": {
+    kLKAdn: "x1adxfkp",
+    $$css: true
+  },
+  "8": {
+    kLKAdn: "xoxd1wu",
+    $$css: true
+  },
+  "10": {
+    kLKAdn: "xk6660b",
+    $$css: true
+  },
+  "0.5": {
+    kLKAdn: "xbx876j",
+    $$css: true
+  },
+  "1.5": {
+    kLKAdn: "x1kwdpsa",
+    $$css: true
+  }
+};
+
+/**
+ * Block-end-only padding override styles.
+ * The block-end counterpart of paddingBlockStartStyles.
+ */
+export const paddingBlockEndStyles = {
+  "0": {
+    kGO01o: "x1l20ajd",
+    $$css: true
+  },
+  "1": {
+    kGO01o: "xy143xn",
+    $$css: true
+  },
+  "2": {
+    kGO01o: "x1wesfrj",
+    $$css: true
+  },
+  "3": {
+    kGO01o: "xvmdzux",
+    $$css: true
+  },
+  "4": {
+    kGO01o: "x1awphl8",
+    $$css: true
+  },
+  "5": {
+    kGO01o: "x1hk98q",
+    $$css: true
+  },
+  "6": {
+    kGO01o: "xjpqqx5",
+    $$css: true
+  },
+  "8": {
+    kGO01o: "x2oz4g1",
+    $$css: true
+  },
+  "10": {
+    kGO01o: "x2izi54",
+    $$css: true
+  },
+  "0.5": {
+    kGO01o: "xij103a",
+    $$css: true
+  },
+  "1.5": {
+    kGO01o: "x1opdxmq",
+    $$css: true
+  }
+};
+
+/**
+ * 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 const sectionPaddingPropagationStyles = {
   "0": {
-    "--astryx-section-padding": "xvdw317",
+    "--_section-padding-propagated": "x7mo41q",
     $$css: true
   },
   "1": {
-    "--astryx-section-padding": "x49wo0b",
+    "--_section-padding-propagated": "x1j3iakl",
     $$css: true
   },
   "2": {
-    "--astryx-section-padding": "x1bzoqqa",
+    "--_section-padding-propagated": "xezgk69",
     $$css: true
   },
   "3": {
-    "--astryx-section-padding": "x1nvso86",
+    "--_section-padding-propagated": "x1wtz8uf",
     $$css: true
   },
   "4": {
-    "--astryx-section-padding": "x1as1t6l",
+    "--_section-padding-propagated": "x5wdj8h",
     $$css: true
   },
   "5": {
-    "--astryx-section-padding": "xfb5lyl",
+    "--_section-padding-propagated": "xgjndll",
     $$css: true
   },
   "6": {
-    "--astryx-section-padding": "x1tig3w6",
+    "--_section-padding-propagated": "x15i4jqh",
     $$css: true
   },
   "8": {
-    "--astryx-section-padding": "x1szikzq",
+    "--_section-padding-propagated": "xmb9lpv",
     $$css: true
   },
   "10": {
-    "--astryx-section-padding": "xf1jhqy",
+    "--_section-padding-propagated": "x4h2jfd",
     $$css: true
   },
   "0.5": {
-    "--astryx-section-padding": "xnvcwyz",
+    "--_section-padding-propagated": "x2ccaqq",
     $$css: true
   },
   "1.5": {
-    "--astryx-section-padding": "x1rj2uvf",
+    "--_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-inner-x": "x1qfll2g",
+    "--layout-padding-inner-y": "xyvxpqs",
+    "--_section-padding-propagated": "x1f17rg1",
     $$css: true
   }
 };

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA6Yf;yBA7Ze,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA6Yf;yBA7Ze,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -27,6 +27,7 @@ import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js
 import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 
 /**
@@ -69,15 +70,15 @@ const styles = {
     $$css: true
   },
   imageWrapperZoomable: {
-    kkrTdU: "x1huxd7x x2dt3px",
+    kkrTdU: "x1huxd7x x16khyan x2dt3px",
     $$css: true
   },
   imageWrapperZoomed: {
-    kkrTdU: "x1jm3nie",
+    kkrTdU: "x1jm3nie x16khyan",
     $$css: true
   },
   imageWrapperDragging: {
-    kkrTdU: "xi9pz9s",
+    kkrTdU: "xi9pz9s x16khyan",
     $$css: true
   },
   image: {
@@ -448,7 +449,7 @@ export function Lightbox({
       onKeyDownProp?.(e);
     },
     "aria-label": currentItem.alt || t('@astryx.lightbox.mediaViewer'),
-    ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
+    ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, overlayPaddingReset.reset, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
       ref: containerRef,

package/dist/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAgG/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyIX;yBAlKe,IAAI"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAmG/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyIX;yBAlKe,IAAI"}

package/dist/Link/Link.js

@@ -43,8 +43,8 @@ const styles = {
     kGuDYH: "x1qlqyl8",
     kLWn49: "x15bjb6t",
     k63SB2: "x1pd3egz",
-    kybGjl: "x1hl2dhg x4ohgrr",
-    kkrTdU: "x1ypdohk",
+    kybGjl: "x1hl2dhg x13nosk6",
+    kkrTdU: "x1ypdohk x16khyan",
     k1ekBW: "x1mpt4pi",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -63,7 +63,7 @@ const styles = {
     $$css: true
   },
   disabled: {
-    kkrTdU: "x1h6gzvc",
+    kkrTdU: "xt0e3qv",
     kSiTet: "xbyyjgo",
     kfzvcC: "x47corl",
     $$css: true
@@ -81,11 +81,11 @@ const styles = {
  */
 const linkColorStyles = {
   primary: {
-    kMwMTN: "x1tgivj0 x4z56r7",
+    kMwMTN: "x1tgivj0 xcunlro",
     $$css: true
   },
   secondary: {
-    kMwMTN: "xv1l7n4 x7ruf5d",
+    kMwMTN: "xv1l7n4 x7jm8ul",
     $$css: true
   },
   disabled: {
@@ -97,7 +97,7 @@ const linkColorStyles = {
     $$css: true
   },
   accent: {
-    kMwMTN: "xjse4m1 x17qfo7y",
+    kMwMTN: "xjse4m1 x1rfoswn",
     $$css: true
   },
   inherit: {

package/dist/MetadataList/MetadataList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataList.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6FD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAkB,EAClB,KAAK,EACL,aAAa,EACb,WAAwB,EACxB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,iBAAiB,+BAsHnB;yBAlIe,YAAY"}
+{"version":3,"file":"MetadataList.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAqC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQzE,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgGD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAkB,EAClB,KAAK,EACL,aAAa,EACb,WAAwB,EACxB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,iBAAiB,+BAsHnB;yBAlIe,YAAY"}

package/dist/MetadataList/MetadataList.js

@@ -206,7 +206,7 @@ export function MetadataList({
         "aria-expanded": isShowAll,
         onClick: () => setIsShowAll(prev => !prev),
         ...{
-          className: "xjyslct x15nmkw0 x1ypdohk xqwr325 xjm74w1 xw6l6zx x1e4wzip xjb2p0i x1yc453h xqcrz7y"
+          className: "xjyslct x15nmkw0 x1ypdohk x16khyan xqwr325 xjm74w1 xw6l6zx x1e4wzip xjb2p0i x1yc453h xqcrz7y"
         },
         children: isShowAll ? t('@astryx.metadataList.showLess') : t('@astryx.metadataList.showMore')
       })]

package/dist/MobileNav/MobileNav.d.ts

@@ -19,6 +19,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
+ * - /packages/core/src/hooks/scrollbarGutter.ts (shared scroll-lock gutter)
  * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';

package/dist/MobileNav/MobileNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4J5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AAmCD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAgMhB;yBA/Me,SAAS"}
+{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6L5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AAmCD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAiNhB;yBAhOe,SAAS"}

package/dist/MobileNav/MobileNav.js

@@ -23,6 +23,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
+ * - /packages/core/src/hooks/scrollbarGutter.ts (shared scroll-lock gutter)
  * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
  */
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
@@ -33,7 +34,9 @@ import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { Heading } from "../Heading/Heading.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
+import { holdScrollbarGutter } from "../hooks/scrollbarGutter.js";
 import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
+import { overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -52,7 +55,7 @@ const styles = {
     kzqmXN: "xn9wirt",
     kZKoxP: "xtdtrs8",
     kWkggS: "xjbqb8w",
-    kVQacm: "xb3r6kr",
+    kVQacm: "x7giv3",
     kZeWKH: "xish69e",
     kFalU9: "x5ve5x3",
     kI3sdo: "x1a2a7pz",
@@ -77,7 +80,7 @@ const styles = {
     $$css: true
   },
   backdropOpen: {
-    k5sjJv: "xb3n6bw",
+    k5sjJv: "xb3n6bw xxiuuzi",
     $$css: true
   },
   drawer: {
@@ -105,7 +108,7 @@ const styles = {
     $$css: true
   },
   drawerStartOpen: {
-    k3aq6I: "xbryuvx",
+    k3aq6I: "xbryuvx x6mt36l x14gflnl",
     $$css: true
   },
   drawerEnd: {
@@ -117,7 +120,7 @@ const styles = {
     $$css: true
   },
   drawerEndOpen: {
-    k3aq6I: "xbryuvx",
+    k3aq6I: "xbryuvx x1yqmsfc x1lymnkk",
     $$css: true
   },
   headerText: {
@@ -258,6 +261,15 @@ export function MobileNav({
   }), [onOpenChangeProp, appShellMobile]);
   const dialogRef = useRef(null);
   const closeTimeoutRef = useRef(null);
+  const gutterRef = useRef(null);
+
+  // Gives back the gutter held open in place of the hidden scrollbar.
+  const releaseGutter = useCallback(() => {
+    if (gutterRef.current) {
+      gutterRef.current.release();
+      gutterRef.current = null;
+    }
+  }, []);
   // Resolved side — computed from trigger position when side='auto'
   const [resolvedSide, setResolvedSide] = useState(side === 'auto' ? 'end' : side);
 
@@ -294,6 +306,9 @@ export function MobileNav({
       return;
     }
     if (isOpen) {
+      // Taken first: every mutation below is one that can hide the scrollbar,
+      // and the gutter has to be measured while it is still there.
+      gutterRef.current ??= holdScrollbarGutter(document.documentElement);
       if (!dialog.open) {
         dialog.showModal();
       }
@@ -301,8 +316,10 @@ export function MobileNav({
       // overflow: clip avoids creating a scroll container (unlike hidden),
       // so there's no scroll bounce and no need to save/restore scroll position.
       document.documentElement.style.overflow = 'clip';
+      gutterRef.current.settle();
     } else if (dialog.open) {
       document.documentElement.style.overflow = '';
+      releaseGutter();
       closeTimeoutRef.current = setTimeout(() => {
         dialog.close();
       }, resolveCloseDelay(dialog));
@@ -313,8 +330,9 @@ export function MobileNav({
         closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
+      releaseGutter();
     };
-  }, [isOpen]);
+  }, [isOpen, releaseGutter]);
 
   // Close the native dialog on unmount if it's still open. Inside AppShell the
   // drawer is mounted in an <Activity> that switches to mode="hidden" when the
@@ -355,7 +373,7 @@ export function MobileNav({
     id: dialogId,
     ...mergeProps(themeProps('mobile-nav', {
       side: resolvedSide
-    }), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
+    }), stylex.props(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
     ...rest,
     "data-testid": testId,
     "aria-label": label ?? (typeof header === 'string' ? header : t('@astryx.mobileNav.navigation')),