@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0

package/dist/DropdownMenu/DropdownMenu.js

@@ -49,6 +49,8 @@ import { useMenuPress } from "../hooks/useMenuPress.js";
 import { useTypeahead } from "../hooks/useTypeahead.js";
 import { useFocusReturnVisibility } from "../hooks/useFocusReturnVisibility.js";
 import { useMenuOverflow } from "./useMenuOverflow.js";
+import { MenuRegionsContext } from "./menuRegionsContext.js";
+import { getFocusableElements } from "../hooks/useFocusTrap.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useMenuDrillIn } from "./useMenuDrillIn.js";
 import { resolveMenuWidth } from "./menuWidth.js";
@@ -60,9 +62,9 @@ import { MenuBottomSheetActionList } from "./MenuBottomSheetActionList.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
-import { mergeProps, rtlStyles } from "../utils/index.js";
+import { isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useInteractionModalityTracking } from "../utils/interactionModality.js";
+import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { useTranslator } from "../i18n/index.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 
@@ -73,6 +75,45 @@ const MENU_BLOCK_CAP = '300px';
 const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSize})`;
 const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
 const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
+
+/**
+ * The elements Tab reaches inside a header or footer region, in order. Hidden
+ * controls (`hidden`, `display: none`, `visibility: hidden`, inert or
+ * aria-hidden subtrees) are not reachable, judged by the popover focus trap's
+ * own test so the two never disagree about where Tab can go.
+ */
+function tabbablesIn(region) {
+  if (region == null) {
+    return [];
+  }
+  return getFocusableElements(region).filter(element => element.tabIndex >= 0 && !isInsideHiddenWrapper(element, region));
+}
+
+/**
+ * Whether a `display: none` ancestor between the element and its region hides
+ * it — a control in a wrapper hidden at some widths, say. The trap's test reads
+ * only the element's own display.
+ */
+function isInsideHiddenWrapper(element, region) {
+  if (typeof window === 'undefined' || !window.getComputedStyle) {
+    return false;
+  }
+  for (let node = element.parentElement; node != null && node !== region.parentElement; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === 'none') {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Move focus to a region control. Reports whether focus actually arrived, so a
+ * caller can close the menu instead of stranding focus on the page.
+ */
+function focusRegionControl(element) {
+  element.focus();
+  return element.ownerDocument.activeElement === element;
+}
 const _temp = {
   kzqmXN: "x1uyokj7",
   "$$css": true
@@ -113,6 +154,19 @@ const styles = {
     kZeWKH: "xish69e",
     $$css: true
   },
+  regionsFrame: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kskxy: "x1uh1i8a",
+    $$css: true
+  },
+  menuInFrame: {
+    kzQI83: "x1iyjqo2",
+    kmuXW: "xs83m0k",
+    kAzted: "x2lwn1j",
+    $$css: true
+  },
   touchPinchZoom: {
     kFalU9: "x1j4r261",
     $$css: true
@@ -307,6 +361,8 @@ function DropdownMenuBottomSheet({
   menuMaxHeight: _menuMaxHeight,
   placement: _placement,
   alignment: _alignment,
+  header,
+  footer,
   className,
   style,
   xstyle,
@@ -483,10 +539,20 @@ function DropdownMenuBottomSheet({
             xstyle: [bottomSheetStyles.viewHeading, submenuPath.length === 0 && bottomSheetStyles.rootHeading],
             children: currentTitle
           })]
+        }), isRenderable(header) && /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "xrrkdod xce4md1"
+          },
+          children: header
         }), /*#__PURE__*/_jsx(MenuBottomSheetActionList, {
           items: currentItems,
           onSelect: handleSelect,
           onOpenSubmenu: item => setSubmenuPath(path => [...path, item])
+        }), isRenderable(footer) && /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "xrrkdod xce4md1"
+          },
+          children: footer
         })]
       })
     })]
@@ -504,6 +570,8 @@ function DropdownMenuPopover({
   placement = 'below',
   alignment = 'start',
   presentation: _presentation,
+  header,
+  footer,
   className,
   style,
   xstyle,
@@ -548,6 +616,13 @@ function DropdownMenuPopover({
     resetFocusReturn
   } = useFocusReturnVisibility();
   const contentRef = useRef(null);
+  const headerRef = useRef(null);
+  const footerRef = useRef(null);
+  const hasRegions = useMemo(() => isRenderable(header) || isRenderable(footer), [header, footer]);
+  // Whether the menu element itself took focus from the keyboard. A pointer
+  // open focuses it programmatically, and pointer history must not paint the
+  // keyboard ring (architecture:interaction-modality INV1).
+  const [isMenuKeyboardFocused, setIsMenuKeyboardFocused] = useState(false);
   // The press model is mounted below (it needs the popover); the hide path
   // above it ends the gesture in flight through this ref.
   const cancelMenuPressRef = useRef(() => {});
@@ -717,6 +792,21 @@ function DropdownMenuPopover({
     // A submenu flyout renders inline inside this menu; its key events bubble
     // up here. Let that level own them — only handle events from this level.
     if (!ownsEvent(e)) {
+      // Except Tab with a header or footer: each open flyout has closed
+      // itself as the key bubbled up, and the root moves focus on as Tab
+      // from one of its own rows would.
+      if (e.key === 'Tab' && hasRegions) {
+        const region = e.shiftKey ? headerRef.current : footerRef.current;
+        const tabbables = tabbablesIn(region);
+        e.stopPropagation();
+        const target = e.shiftKey ? tabbables[tabbables.length - 1] : tabbables[0];
+        if (target != null) {
+          e.preventDefault();
+        }
+        if (target == null || !focusRegionControl(target)) {
+          closeMenu();
+        }
+      }
       return;
     }
     if (e.key === 'Enter' || e.key === ' ') {
@@ -739,7 +829,27 @@ function DropdownMenuPopover({
     // otherwise leak into the page while the menu stayed open (menus-5).
     // Do NOT preventDefault — closing restores focus to the trigger, and the
     // browser's default Tab then continues from there to the next element.
+    // A header or footer with something Tab can reach in that direction
+    // takes the Tab instead, and the menu stays open.
     if (e.key === 'Tab') {
+      const region = e.shiftKey ? headerRef.current : footerRef.current;
+      const tabbables = tabbablesIn(region);
+      if (tabbables.length > 0) {
+        // From a row, the browser's Shift+Tab would stop on the menu element
+        // itself — the row's ancestor and a Tab stop — before reaching the
+        // header. The menu is one stop, so go straight to the header.
+        if (e.shiftKey && e.target !== listRef.current) {
+          e.preventDefault();
+          // The popover's focus trap listens on the document and would read
+          // this same Shift+Tab against the field just focused — the trap's
+          // first element — and wrap to the footer. This key is handled.
+          e.stopPropagation();
+          if (!focusRegionControl(tabbables[tabbables.length - 1])) {
+            closeMenu();
+          }
+        }
+        return;
+      }
       closeMenu();
       return;
     }
@@ -749,7 +859,24 @@ function DropdownMenuPopover({
       return;
     }
     listNavKeyDown(e);
-  }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
+  }, [listNavKeyDown, closeMenu, typeahead, ownsEvent, listRef, hasRegions]);
+
+  // Tab past the last control of the footer, or Shift+Tab before the first
+  // control of the header, leaves the menu as Tab from its rows does: the
+  // menu closes, focus returns to the trigger, and the browser's own Tab
+  // continues from there. Between the regions, Tab moves through the menu
+  // as one stop.
+  const handleRegionKeyDown = useCallback(e => {
+    if (e.key !== 'Tab') {
+      return;
+    }
+    const tabbables = tabbablesIn(e.currentTarget);
+    const isHeader = e.currentTarget === headerRef.current;
+    const exit = isHeader ? e.shiftKey ? tabbables[0] : undefined : e.shiftKey ? undefined : tabbables[tabbables.length - 1];
+    if (exit != null && exit === document.activeElement) {
+      closeMenu();
+    }
+  }, [closeMenu]);
   const openAndFocus = useCallback((modality = 'keyboard', notifyClick = false) => {
     acceptedOpenRef.current = false;
     notifyClickOnShowRef.current = notifyClick;
@@ -913,6 +1040,27 @@ function DropdownMenuPopover({
   // Resolve menu content: data-driven items become components
   const menuContent = wrapContent(props.items !== undefined ? renderDropdownItems(items) : children);
   const hasOverflow = useMenuOverflow(listRef, menuContent, popover.isOpen);
+
+  // The header and footer sit beside the menu inside the popover, never inside
+  // the role="menu" element: a menu holds only its rows.
+  const renderWithRegions = menu => hasRegions ? /*#__PURE__*/_jsxs("div", {
+    ...stylex.props(styles.regionsFrame, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight)),
+    children: [isRenderable(header) && /*#__PURE__*/_jsx("div", {
+      ref: headerRef,
+      onKeyDown: handleRegionKeyDown,
+      ...{
+        className: "x2lah0s x9epnlk"
+      },
+      children: header
+    }), menu, isRenderable(footer) && /*#__PURE__*/_jsx("div", {
+      ref: footerRef,
+      onKeyDown: handleRegionKeyDown,
+      ...{
+        className: "x2lah0s x9epnlk"
+      },
+      children: footer
+    })]
+  }) : menu;
   const triggerProps = {
     ref: el => {
       buttonRef.current = el;
@@ -971,7 +1119,7 @@ function DropdownMenuPopover({
       "aria-expanded": isOpen,
       "aria-controls": menuId,
       "data-testid": testId
-    }), popover.render(/*#__PURE__*/_jsx("div", {
+    }), popover.render(renderWithRegions(/*#__PURE__*/_jsx("div", {
       ...rest,
       ref: el => {
         listRef.current = el;
@@ -982,9 +1130,10 @@ function DropdownMenuPopover({
       // Pointer opens focus the container so arrows, typeahead, Escape and
       // Tab remain owned by the menu without pre-highlighting an item.
       // An overflowing menu joins the Tab order so its scrollable region is
-      // keyboard-accessible; Tab still dismisses through listKeyDown.
+      // keyboard-accessible; Tab still dismisses through listKeyDown. With
+      // a header or footer the menu is one Tab stop between them.
       ,
-      tabIndex: hasOverflow ? 0 : -1
+      tabIndex: hasOverflow || hasRegions ? 0 : -1
       // Give the menu an accessible name from its trigger's label, so
       // screen readers announce e.g. "Actions menu" rather than an unnamed
       // menu (menus-13). A custom trigger names it by reference.
@@ -992,13 +1141,26 @@ function DropdownMenuPopover({
       "aria-label": renderTrigger != null ? rest['aria-label'] : button.label,
       "aria-labelledby": renderTrigger != null && rest['aria-label'] == null ? triggerId : rest['aria-labelledby'],
       onKeyDown: listKeyDown,
+      onFocus: event => {
+        rest.onFocus?.(event);
+        if (event.target === event.currentTarget) {
+          setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
+        }
+      },
       ...menuPress.menuProps,
-      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom, hasOverflow && styles.scrollable, xstyle), className, style),
-      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
-        value: contextValue,
-        children: menuContent
+      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom, hasOverflow && styles.scrollable, hasRegions && styles.menuInFrame,
+      // Between a header and a footer the menu is a Tab stop, so
+      // keyboard focus on it must be visible (the base style removes
+      // the ring for the pointer-open focus target).
+      hasRegions && isMenuKeyboardFocused && focusOutlineStyles.focusVisible, xstyle), className, style),
+      children: /*#__PURE__*/_jsx(MenuRegionsContext, {
+        value: hasRegions,
+        children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+          value: contextValue,
+          children: menuContent
+        })
       })
-    }), {
+    })), {
       placement,
       alignment,
       offset: spacingVars['--spacing-1'],

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,EAQZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0J5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAwjBX;yBA1jBe,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0B5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0J5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAgkBX;yBAlkBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -48,11 +48,12 @@
  * - /apps/storybook/stories/DropdownMenu.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { use, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
+import { MenuRegionsContext } from "./menuRegionsContext.js";
 import { Item } from "../Item/index.js";
 import { useLayer } from "../Layer/useLayer.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
@@ -199,6 +200,7 @@ export function DropdownMenuSubMenu(props) {
   } = props;
   const t = useTranslator();
   const menuCtx = useDropdownMenuContext();
+  const rootHasRegions = use(MenuRegionsContext);
   const menuSize = menuCtx?.menuSize ?? 'md';
   const canOpen = !isDisabled;
   const contentId = useId();
@@ -459,6 +461,15 @@ export function DropdownMenuSubMenu(props) {
   // only act on our own, letting the deeper level keep ownership. No manual
   // stopPropagation needed — each level self-filters.
   const handleContentKeyDown = useCallback(e => {
+    // In a menu with a header or footer, Tab leaves the whole flyout stack:
+    // every open level closes as the key bubbles past it — this one's own
+    // rows or a deeper level's — and the root menu moves focus to a region.
+    if (e.key === 'Tab' && rootHasRegions) {
+      close({
+        focusTrigger: false
+      });
+      return;
+    }
     if (!ownsEvent(e)) {
       return;
     }
@@ -503,7 +514,7 @@ export function DropdownMenuSubMenu(props) {
       return;
     }
     listNavKeyDown(e);
-  }, [ownsEvent, close, listNavKeyDown, typeahead, menuRef]);
+  }, [ownsEvent, close, listNavKeyDown, typeahead, menuRef, rootHasRegions]);
 
   // Re-provide the menu context so nested items behave exactly like top-level
   // ones. Selecting a leaf item must dismiss the WHOLE stack, not just this

package/dist/DropdownMenu/menuRegionsContext.d.ts

@@ -0,0 +1,2 @@
+export declare const MenuRegionsContext: import("react").Context<boolean>;
+//# sourceMappingURL=menuRegionsContext.d.ts.map

package/dist/DropdownMenu/menuRegionsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuRegionsContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuRegionsContext.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,kBAAkB,kCAAuB,CAAC"}

package/dist/DropdownMenu/menuRegionsContext.js

@@ -0,0 +1,17 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+
+/**
+ * @file menuRegionsContext.ts
+ * @input DropdownMenu's `header` and `footer` props
+ * @output `MenuRegionsContext`: whether the root menu has a header or footer
+ * @position Internal; not exported from the package. A sub-menu flyout reads it
+ *   to close itself on Tab, so the root menu can move focus to a region.
+ *
+ * A plain context rather than a layer-scoped one on purpose: each sub-menu
+ * flyout is its own layer, and it must still see the root's value. A nested
+ * DropdownMenu provides its own value, so it never inherits an outer one.
+ */
+import { createContext } from 'react';
+export const MenuRegionsContext = /*#__PURE__*/createContext(false);
+MenuRegionsContext.displayName = 'MenuRegionsContext';

package/dist/Field/inputStyles.stylex.d.ts

@@ -23,9 +23,9 @@ export declare const inputWrapperStyles: Readonly<{
         readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1>;
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
-        readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "4px">;
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.5rem">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "0.25rem">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.5rem">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0064E0, #2694FE)" | "light-dark(#CCD3DB, #494D53)">;

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

@@ -17,10 +17,8 @@
  *   --astryx-card-padding-block-end
  *
  * Read order per level: `var(--astryx-…, <next level>)`, terminating at
- * `--spacing-4`. Same pattern for section, dialog, and the Lab drawer.
- * Bottom-sheet keeps its released unpadded default: its edges terminate at 0px
- * and its Layout insets at no value, so an unthemed sheet changes nothing for
- * descendants.
+ * `--spacing-4`. Same pattern for section, dialog, bottom-sheet, and the Lab
+ * drawer.
  *
  * ```ts
  * components: {
@@ -129,28 +127,28 @@ declare const themeDefaultStyles: {
     }>;
     'bottom-sheet': Readonly<{
         readonly containerPaddingInlineStart: Readonly<{
-            readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, 0px)))">;
+            readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
         }>;
         readonly containerPaddingInlineEnd: Readonly<{
-            readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "var(--astryx-bottom-sheet-padding-inline-end, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, 0px)))">;
+            readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
         }>;
         readonly containerPaddingBlockStart: Readonly<{
-            readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding, 0px))">;
+            readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
         }>;
         readonly containerPaddingBlockEnd: Readonly<{
-            readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", "var(--astryx-bottom-sheet-padding-block-end, var(--astryx-bottom-sheet-padding, 0px))">;
+            readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
         }>;
         readonly layoutPaddingOuterX: Readonly<{
-            readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding)))">;
+            readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
         }>;
         readonly layoutPaddingOuterY: Readonly<{
-            readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding))">;
+            readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
         }>;
         readonly layoutPaddingInnerX: Readonly<{
-            readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding)))">;
+            readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
         }>;
         readonly layoutPaddingInnerY: Readonly<{
-            readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding))">;
+            readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
         }>;
     }>;
     drawer: Readonly<{
@@ -288,7 +286,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
 }> | Readonly<{
-    readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, 0px)))">;
+    readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
 }> | Readonly<{
     readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
 }>, Readonly<{
@@ -298,7 +296,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
 }> | Readonly<{
-    readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", "var(--astryx-bottom-sheet-padding-inline-end, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, 0px)))">;
+    readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
 }> | Readonly<{
     readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
 }>, Readonly<{
@@ -308,7 +306,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
 }> | Readonly<{
-    readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding, 0px))">;
+    readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
 }> | Readonly<{
     readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
 }>, Readonly<{
@@ -318,7 +316,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
 }> | Readonly<{
-    readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", "var(--astryx-bottom-sheet-padding-block-end, var(--astryx-bottom-sheet-padding, 0px))">;
+    readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
 }> | Readonly<{
     readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
 }>, Readonly<{
@@ -328,7 +326,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
 }> | Readonly<{
-    readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding)))">;
+    readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
 }> | Readonly<{
     readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
 }>, Readonly<{
@@ -338,7 +336,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
 }> | Readonly<{
-    readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding))">;
+    readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
 }> | Readonly<{
     readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
 }>, Readonly<{
@@ -348,7 +346,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
 }> | Readonly<{
-    readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", "var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding)))">;
+    readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
 }> | Readonly<{
     readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
 }>, Readonly<{
@@ -358,7 +356,7 @@ export declare function container({ padding, paddingOuterX, paddingOuterY, paddi
 }> | Readonly<{
     readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
 }> | Readonly<{
-    readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", "var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding))">;
+    readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
 }> | Readonly<{
     readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
 }>, readonly [Readonly<{

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;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;AAmPhB;;;GAGG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMvB,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;;;;;;;;;;;;;OAaG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;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;AA2OhB;;;GAGG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMvB,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;;;;;;;;;;;;;OAaG;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

@@ -19,10 +19,8 @@
  *   --astryx-card-padding-block-end
  *
  * Read order per level: `var(--astryx-…, <next level>)`, terminating at
- * `--spacing-4`. Same pattern for section, dialog, and the Lab drawer.
- * Bottom-sheet keeps its released unpadded default: its edges terminate at 0px
- * and its Layout insets at no value, so an unthemed sheet changes nothing for
- * descendants.
+ * `--spacing-4`. Same pattern for section, dialog, bottom-sheet, and the Lab
+ * drawer.
  *
  * ```ts
  * components: {
@@ -124,19 +122,11 @@ const dialogInlineEnd = `var(--astryx-dialog-padding-inline-end, ${dialogInline}
 const dialogBlockStart = `var(--astryx-dialog-padding-block-start, ${dialogShorthand})`;
 const dialogBlockEnd = `var(--astryx-dialog-padding-block-end, ${dialogShorthand})`;
 
-// Bottom sheet padding chains: --astryx-* then the next specificity level.
-// Unlike card/section/dialog, the sheet's released default is no padding, so
-// the edge chains terminate at 0px. The Layout inset chains have NO terminal
-// value: with no theme padding they are invalid at computed-value time, which
-// leaves the overlay reset in force and lets a Layout inside the sheet fall
-// back to its own default, exactly as before the sheet was a container. Built
-// as chained const strings (no function calls) so StyleX can statically
-// analyze them; see naming.ts for the prefix policy.
-const bottomSheetThemeShorthand = 'var(--astryx-bottom-sheet-padding)';
-const bottomSheetThemeInline = `var(--astryx-bottom-sheet-padding-inline, ${bottomSheetThemeShorthand})`;
-const bottomSheetThemeInlineStart = `var(--astryx-bottom-sheet-padding-inline-start, ${bottomSheetThemeInline})`;
-const bottomSheetThemeBlockStart = `var(--astryx-bottom-sheet-padding-block-start, ${bottomSheetThemeShorthand})`;
-const bottomSheetShorthand = 'var(--astryx-bottom-sheet-padding, 0px)';
+// Bottom sheet padding chains: --astryx-* then the next specificity level,
+// terminating at --spacing-4 like Dialog. Built as chained const strings (no
+// function calls) so StyleX can statically analyze them; see naming.ts for the
+// prefix policy.
+const bottomSheetShorthand = `var(--astryx-bottom-sheet-padding, ${SP4})`;
 const bottomSheetInline = `var(--astryx-bottom-sheet-padding-inline, ${bottomSheetShorthand})`;
 const bottomSheetInlineStart = `var(--astryx-bottom-sheet-padding-inline-start, ${bottomSheetInline})`;
 const bottomSheetInlineEnd = `var(--astryx-bottom-sheet-padding-inline-end, ${bottomSheetInline})`;
@@ -257,35 +247,35 @@ const dialogDefaultPaddingStyles = {
 };
 const bottomSheetDefaultPaddingStyles = {
   containerPaddingInlineStart: {
-    "--container-padding-inline-start": "x11ikt10",
+    "--container-padding-inline-start": "xv7mus7",
     $$css: true
   },
   containerPaddingInlineEnd: {
-    "--container-padding-inline-end": "x1hy8vpo",
+    "--container-padding-inline-end": "x1ui7op6",
     $$css: true
   },
   containerPaddingBlockStart: {
-    "--container-padding-block-start": "x16x203f",
+    "--container-padding-block-start": "x8qn3ha",
     $$css: true
   },
   containerPaddingBlockEnd: {
-    "--container-padding-block-end": "x5xkije",
+    "--container-padding-block-end": "x1of45zw",
     $$css: true
   },
   layoutPaddingOuterX: {
-    "--layout-padding-outer-x": "x24a7nr",
+    "--layout-padding-outer-x": "x11ixy8q",
     $$css: true
   },
   layoutPaddingOuterY: {
-    "--layout-padding-outer-y": "x1bvgf6f",
+    "--layout-padding-outer-y": "x1iwhsh0",
     $$css: true
   },
   layoutPaddingInnerX: {
-    "--layout-padding-inner-x": "xolz96h",
+    "--layout-padding-inner-x": "xp9icaw",
     $$css: true
   },
   layoutPaddingInnerY: {
-    "--layout-padding-inner-y": "xq72d63",
+    "--layout-padding-inner-y": "x10u54dy",
     $$css: true
   }
 };