@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/dist/Layer/useTouchTrigger.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @file useTouchTrigger.ts
+ * @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
+ * @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type
+ * @position Layer hook; shared touch behavior for useTooltip and useHoverCard
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/index.ts
+ *
+ * Hover is the one trigger a touch screen cannot express. A tap synthesizes
+ * `mouseenter`, so an untreated hover layer either opens on every tap and
+ * lingers with nothing to close it, or swallows the tap the user aimed at the
+ * control underneath.
+ *
+ * What the trigger DOES decides which of those the tap deserves. A trigger
+ * that performs an action — a button, a link, a form control — keeps its tap:
+ * the layer stays shut, because the tap already has somewhere to go and a hint
+ * about a control the user just operated is noise. A trigger that performs no
+ * action — an info icon, an abbreviation, a truncated label — has nothing to
+ * lose, so the tap opens the layer and the next tap outside dismisses it. That
+ * is `auto`; `tap` and `none` state the choice outright, which is what an
+ * icon-button whose only job is to reveal the layer needs.
+ */
+import { type RefObject } from 'react';
+/**
+ * How a hover layer behaves on a touch pointer.
+ *
+ * - `auto`: tap-to-open, unless the trigger performs an action of its own
+ * - `tap`: always tap-to-open, even on a trigger that performs an action
+ * - `none`: never open on touch
+ */
+export type LayerTouchTrigger = 'auto' | 'tap' | 'none';
+/**
+ * Whether activating this element does something other than reveal the layer.
+ *
+ * Deliberately narrower than "focusable": the wrapper a text-only Tooltip
+ * renders carries `tabindex=0` so keyboard users can reach the hint, and it
+ * still performs no action.
+ *
+ * True only decides that the layer stays shut — the tap itself is never
+ * swallowed. Nothing here calls `preventDefault` or `stopPropagation`, so an
+ * inert trigger that happens to carry its own `onClick` (a `<div onClick>`
+ * with no role) gets both: the layer opens and the handler runs.
+ */
+export declare function isActionTrigger(element: HTMLElement): boolean;
+export interface UseTouchTriggerOptions {
+    /** How the layer should behave on a touch pointer. */
+    touchTrigger: LayerTouchTrigger;
+    /** Whether the layer's triggers are live at all. */
+    isEnabled: boolean;
+    /**
+     * Whether the consumer controls visibility. A controlled layer is never
+     * toggled by a tap — its visibility is the consumer's to own.
+     */
+    isControlled: boolean;
+    /** Whether the layer is currently open. */
+    isOpen: boolean;
+    /** Element id of the layer surface, so taps inside it count as inside. */
+    layerId: string;
+    /** The trigger element the layer is anchored to. */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** Open the layer immediately, with no hover delay. */
+    show: () => void;
+    /** Close the layer immediately. */
+    hide: () => void;
+}
+export interface UseTouchTriggerReturn {
+    /**
+     * Whether the pointer in play on this trigger has no hover of its own: a
+     * finger, or a pen that has landed. A hovering pen reads as false, because
+     * it hovers.
+     */
+    isTouchPointerRef: RefObject<boolean>;
+    /**
+     * Whether the interaction in flight is a touch one. Unlike the raw ref this
+     * goes false again as soon as the user reaches for the keyboard, so
+     * focus-driven triggers stay available after a tap.
+     */
+    isTouchInteraction: () => boolean;
+    /**
+     * Attach to the trigger: records pointer type ahead of synthesized hover.
+     * Arrival alone only marks a finger — a pen hovers, so it is left to the
+     * hover path until it presses.
+     */
+    handlePointerEnter: (event: PointerEvent) => void;
+    /**
+     * Attach to the trigger. Returns true when the press was a touch one and
+     * this hook has dealt with it, meaning the caller's own pointer-down
+     * behavior must not also run.
+     */
+    handlePointerDown: (event: PointerEvent) => boolean;
+    /** Forget a tap-open. Call from every other close path (Escape, controlled). */
+    clearTapOpen: () => void;
+}
+/**
+ * Touch behavior shared by the hover layers.
+ *
+ * @example
+ * ```
+ * const touch = useTouchTrigger({
+ *   touchTrigger,
+ *   isEnabled,
+ *   isControlled: isOpen !== undefined,
+ *   isOpen: layer.isOpen,
+ *   layerId: layer.id,
+ *   triggerRef,
+ *   show: showNow,
+ *   hide: hideNow,
+ * });
+ * ```
+ */
+export declare function useTouchTrigger(options: UseTouchTriggerOptions): UseTouchTriggerReturn;
+//# sourceMappingURL=useTouchTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAMrE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAmCxD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAoB7D;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;OAIG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAiKvB"}

package/dist/Layer/useTouchTrigger.js

@@ -0,0 +1,241 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTouchTrigger.ts
+ * @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
+ * @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type
+ * @position Layer hook; shared touch behavior for useTooltip and useHoverCard
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/index.ts
+ *
+ * Hover is the one trigger a touch screen cannot express. A tap synthesizes
+ * `mouseenter`, so an untreated hover layer either opens on every tap and
+ * lingers with nothing to close it, or swallows the tap the user aimed at the
+ * control underneath.
+ *
+ * What the trigger DOES decides which of those the tap deserves. A trigger
+ * that performs an action — a button, a link, a form control — keeps its tap:
+ * the layer stays shut, because the tap already has somewhere to go and a hint
+ * about a control the user just operated is noise. A trigger that performs no
+ * action — an info icon, an abbreviation, a truncated label — has nothing to
+ * lose, so the tap opens the layer and the next tap outside dismisses it. That
+ * is `auto`; `tap` and `none` state the choice outright, which is what an
+ * icon-button whose only job is to reveal the layer needs.
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
+
+/**
+ * How a hover layer behaves on a touch pointer.
+ *
+ * - `auto`: tap-to-open, unless the trigger performs an action of its own
+ * - `tap`: always tap-to-open, even on a trigger that performs an action
+ * - `none`: never open on touch
+ */
+
+/**
+ * Pointer types whose *press* is a tap rather than a click.
+ *
+ * A pen belongs here but not in the arrival path: in detection range it hovers
+ * — firing `pointerenter`/`pointermove` with no contact, exactly as a mouse
+ * does, on a device where `(hover: hover)` matches — and only becomes a tap
+ * once it lands. See `handlePointerEnter`.
+ */
+const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
+
+/**
+ * ARIA roles that make an element do something when activated. An explicit
+ * role wins over the tag: `<button role="presentation">` is scenery, and a
+ * `<span role="button">` is a real control.
+ */
+const ACTION_ROLES = new Set(['button', 'checkbox', 'combobox', 'link', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'radio', 'searchbox', 'slider', 'spinbutton', 'switch', 'tab', 'textbox']);
+
+/**
+ * Whether activating this element does something other than reveal the layer.
+ *
+ * Deliberately narrower than "focusable": the wrapper a text-only Tooltip
+ * renders carries `tabindex=0` so keyboard users can reach the hint, and it
+ * still performs no action.
+ *
+ * True only decides that the layer stays shut — the tap itself is never
+ * swallowed. Nothing here calls `preventDefault` or `stopPropagation`, so an
+ * inert trigger that happens to carry its own `onClick` (a `<div onClick>`
+ * with no role) gets both: the layer opens and the handler runs.
+ */
+export function isActionTrigger(element) {
+  const role = element.getAttribute('role');
+  if (role != null && role !== '') {
+    return ACTION_ROLES.has(role);
+  }
+  switch (element.tagName) {
+    case 'BUTTON':
+    case 'INPUT':
+    case 'LABEL':
+    case 'SELECT':
+    case 'SUMMARY':
+    case 'TEXTAREA':
+      return true;
+    case 'A':
+    case 'AREA':
+      return element.hasAttribute('href');
+    default:
+      return isEditable(element);
+  }
+}
+
+/**
+ * Whether typing into this element edits it. Reads the attribute as well as
+ * the property: jsdom does not implement `isContentEditable`, and an editor
+ * that is an action in the browser must not be inert under test.
+ */
+function isEditable(element) {
+  if (element.isContentEditable === true) {
+    return true;
+  }
+  const attribute = element.getAttribute('contenteditable');
+  return attribute != null && attribute !== 'false';
+}
+/**
+ * Touch behavior shared by the hover layers.
+ *
+ * @example
+ * ```
+ * const touch = useTouchTrigger({
+ *   touchTrigger,
+ *   isEnabled,
+ *   isControlled: isOpen !== undefined,
+ *   isOpen: layer.isOpen,
+ *   layerId: layer.id,
+ *   triggerRef,
+ *   show: showNow,
+ *   hide: hideNow,
+ * });
+ * ```
+ */
+export function useTouchTrigger(options) {
+  const {
+    touchTrigger,
+    isEnabled,
+    isControlled,
+    isOpen,
+    layerId,
+    triggerRef,
+    show,
+    hide
+  } = options;
+  const isTouchPointerRef = useRef(false);
+  // Mirrors `isOpen` for synchronous reads inside the pointer handler, which
+  // runs outside React's render and would otherwise close over a stale value.
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+
+  // Latest values for the document listener, which outlives the render that
+  // armed it.
+  const hideRef = useRef(hide);
+  hideRef.current = hide;
+  const layerIdRef = useRef(layerId);
+  layerIdRef.current = layerId;
+
+  // Whether a tap is what opened the layer. Only a tap-open owes the user an
+  // outside-tap dismissal: a hover-opened layer already closes on
+  // pointer-leave, and a controlled one is not ours to close.
+  const isTapOpenRef = useRef(false);
+  const outsideListenerRef = useRef(null);
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+  const disarmOutsideDismiss = useCallback(() => {
+    isTapOpenRef.current = false;
+    const listener = outsideListenerRef.current;
+    if (listener == null) {
+      return;
+    }
+    outsideListenerRef.current = null;
+    document.removeEventListener('pointerdown', listener, true);
+  }, []);
+
+  // Capture phase, so a trigger that stops propagation cannot strand an open
+  // layer. The opening tap's own capture phase at the document has already
+  // passed by the time this runs, so the listener never sees it.
+  const armOutsideDismiss = useCallback(() => {
+    isTapOpenRef.current = true;
+    if (outsideListenerRef.current != null) {
+      return;
+    }
+    const handleOutsidePointerDown = event => {
+      const target = event.target;
+      if (target != null) {
+        // The trigger's own handler owns the toggle.
+        if (triggerRef.current?.contains(target) === true) {
+          return;
+        }
+        // Hover card content is interactive; a tap inside it is not a dismiss.
+        if (document.getElementById(layerIdRef.current)?.contains(target) === true) {
+          return;
+        }
+      }
+      disarmOutsideDismiss();
+      hideRef.current();
+    };
+    outsideListenerRef.current = handleOutsidePointerDown;
+    document.addEventListener('pointerdown', handleOutsidePointerDown, true);
+  }, [triggerRef, disarmOutsideDismiss]);
+  useEffect(() => disarmOutsideDismiss, [disarmOutsideDismiss]);
+  const isTouchInteraction = useCallback(() => isTouchPointerRef.current && getInteractionModality() === 'pointer', []);
+  const handlePointerEnter = useCallback(event => {
+    // Only a finger is hoverless on arrival. A pen in detection range hovers
+    // like a mouse, and treating its arrival as touch would bail out of the
+    // hover path and leave a stylus user with no tooltip at all. A pen that
+    // presses is a tap, and `handlePointerDown` still reads it as one.
+    isTouchPointerRef.current = event.pointerType === 'touch';
+  }, []);
+  const handlePointerDown = useCallback(event => {
+    const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
+    isTouchPointerRef.current = isTouch;
+    if (!isTouch || isControlled) {
+      return false;
+    }
+    const trigger = triggerRef.current;
+    const mode = touchTrigger === 'auto' ? trigger != null && isActionTrigger(trigger) ? 'none' : 'tap' : touchTrigger;
+    if (mode === 'none' || !isEnabled) {
+      // A layer left open by an earlier tap must not survive the next one.
+      disarmOutsideDismiss();
+      hide();
+      return true;
+    }
+
+    // A lazily mounted layer reports `isOpen` a tick after `show()`, so the
+    // tap's own bookkeeping is what makes the second tap a close.
+    if (isOpenRef.current || isTapOpenRef.current) {
+      disarmOutsideDismiss();
+      hide();
+      return true;
+    }
+    armOutsideDismiss();
+    show();
+    return true;
+  }, [touchTrigger, isEnabled, isControlled, triggerRef, show, hide, armOutsideDismiss, disarmOutsideDismiss]);
+
+  // A layer closed by any other path (Escape, a consumer, the browser) leaves
+  // no tap-open to dismiss. Only a true open→closed transition counts: a
+  // lazily mounted layer still reports `false` for a tick after the tap asked
+  // it to open, and reading that as a close would disarm the dismissal the
+  // tap-open just armed.
+  const wasOpenRef = useRef(isOpen);
+  useEffect(() => {
+    if (wasOpenRef.current && !isOpen) {
+      disarmOutsideDismiss();
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, disarmOutsideDismiss]);
+  return {
+    isTouchPointerRef,
+    isTouchInteraction,
+    handlePointerEnter,
+    handlePointerDown,
+    clearTapOpen: disarmOutsideDismiss
+  };
+}

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";