@astryxdesign/core 0.7.2-canary.fe2c655 → 0.7.2

package/dist/DropdownMenu/DropdownMenuContext.js

@@ -32,6 +32,27 @@ import { createLayerScopedContext } from "../Layer/layerScopedContext.js";
  * @internal
  */
 
+/**
+ * Whether the root menu of this layer tree is open; internal companion to
+ * `DropdownMenuContext`, on its own unexported context so the public
+ * `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
+ * intent must die with the menu: a hover-open scheduled on its trigger
+ * before the menu closed from elsewhere would otherwise fire into the
+ * hidden menu and reopen the flyout behind it (#6893). `null` means no
+ * signal, treated as open, matching providers that have no state to give.
+ * @internal
+ */
+export const DropdownMenuRootOpenContext = createLayerScopedContext(null);
+DropdownMenuRootOpenContext.displayName = 'DropdownMenuRootOpenContext';
+
+/**
+ * Whether the root menu backing these compound items is open. True when no
+ * provider gave a signal.
+ * @internal
+ */
+export function useDropdownMenuRootOpen() {
+  return use(DropdownMenuRootOpenContext) !== false;
+}
 export const DropdownMenuContext = createLayerScopedContext(null);
 DropdownMenuContext.displayName = 'DropdownMenuContext';
 

package/dist/DropdownMenu/DropdownMenuDivider.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
     /** Ref forwarded to the separator element. */
     ref?: React.Ref<HTMLDivElement>;
 }
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
+export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
 export declare namespace DropdownMenuDivider {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,wBAAwB,+BAW1B;yBAhBe,mBAAmB"}
+{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuDivider.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DropdownMenuDivider.tsx
- * @input Uses Divider, spacing tokens, themeProps
+ * @input Uses Divider, spacing tokens, themeProps; forwards host props to Divider
  * @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
  * @position Sub-component; used inside DropdownMenu
  *
@@ -39,7 +39,9 @@ const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -54,9 +56,11 @@ export function DropdownMenuDivider({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   return /*#__PURE__*/_jsx(Divider, {
+    ...rest,
     ref: ref,
     xstyle: [styles.divider, xstyle],
     className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,

package/dist/DropdownMenu/DropdownMenuGroup.d.ts

@@ -23,7 +23,8 @@ import type { BaseProps } from '../BaseProps';
 export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
     /**
      * Heading shown above the group's rows and used as the group's accessible
-     * name (`aria-labelledby`). Omit it for an unnamed group.
+     * name (`aria-labelledby`). Omit it for an unnamed group. Keep this content
+     * non-interactive; controls belong in DropdownMenu's `header` or `footer`.
      */
     title?: ReactNode;
     /** The rows of the group: menu items, selectable items, sub-menus. */
@@ -34,9 +35,10 @@ export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'clas
 /**
  * A titled group of menu rows.
  *
- * Renders `role="group"` named by its heading. The heading is plain text, not
- * a `menuitem`, so it is never a stop in the menu's arrow-key order and
- * typeahead never lands on it. The compound peer of
+ * Renders `role="group"` named by its heading. The heading is not a
+ * `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
+ * content non-interactive; place controls in DropdownMenu's `header` or
+ * `footer`. The compound peer of
  * `{type: 'section', title, items}` in the `items` data API.
  *
  * @example

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,sBAAsB,+BAuBxB;yBA9Be,iBAAiB"}
+{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,sBAAsB,+BAuBxB;yBA9Be,iBAAiB"}

package/dist/DropdownMenu/DropdownMenuGroup.js

@@ -32,9 +32,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A titled group of menu rows.
  *
- * Renders `role="group"` named by its heading. The heading is plain text, not
- * a `menuitem`, so it is never a stop in the menu's arrow-key order and
- * typeahead never lands on it. The compound peer of
+ * Renders `role="group"` named by its heading. The heading is not a
+ * `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
+ * content non-interactive; place controls in DropdownMenu's `header` or
+ * `footer`. The compound peer of
  * `{type: 'section', title, items}` in the `items` data API.
  *
  * @example

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -35,7 +35,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
     description?: ReactNode;
     /**
      * Icon to display before the label. Accepts a semantic icon name (see
-     * `npx @astryxdesign/cli docs icons`) or a rendered node.
+     * `astryx docs icons`) or a rendered node.
      */
     icon?: ReactNode | IconType;
     /**

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,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"}
+{"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;AA4J5C,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,CA4kBX;yBA9kBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -71,7 +71,7 @@ import { composeEventHandlers, mergeProps, rtlStyles } from "../utils/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { themeProps } from "../utils/themeProps.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
-import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { DropdownMenuContext, DropdownMenuRootOpenContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
 import { useTranslator } from "../i18n/index.js";
@@ -280,7 +280,11 @@ export function DropdownMenuSubMenu(props) {
   // Hover intent and the shared hover→click guard only: this level owns its own
   // click handling, roving focus and typeahead. popover="manual", so the
   // invoker wiring other consumers need does not apply. A drill-in row has no
-  // hover: a finger drives it, and a press opens it.
+  // hover: a finger drives it, and a press opens it. Hover is also gated on
+  // the root menu being open, so a hover-open scheduled before the menu
+  // closed from elsewhere is cancelled instead of firing into the hidden
+  // menu (#6893).
+  const isRootMenuOpen = useDropdownMenuRootOpen();
   const {
     triggerProps,
     contentProps,
@@ -289,7 +293,7 @@ export function DropdownMenuSubMenu(props) {
     show: showLayer,
     hide: hideLayer,
     isOpen: isFlyoutOpen,
-    isEnabled: canOpen && !isDrillIn,
+    isEnabled: canOpen && !isDrillIn && isRootMenuOpen,
     // The safe triangle toward the flyout's near edge is built from the
     // flyout this component renders, not the hook's own list ref.
     flyoutRef: menuRef
@@ -565,7 +569,7 @@ export function DropdownMenuSubMenu(props) {
   });
   const resolvedMenuWidth = menuWidth ? resolveMenuWidth(menuWidth, layerViewportInset.maxInlineSizeFallback) : null;
   const popoverXstyle = resolvedMenuWidth ? resolvedMenuWidth.property === 'inlineSize' ? flyoutStyles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value) : flyoutStyles.popoverCustomWidth(resolvedMenuWidth.value) : flyoutStyles.popover;
-  const nestedContent = /*#__PURE__*/_jsxs(DropdownMenuContext, {
+  const nestedRows = /*#__PURE__*/_jsxs(DropdownMenuContext, {
     value: nestedMenuContext,
     children: [isDrillIn && /*#__PURE__*/_jsx(DropdownMenuItem, {
       icon: /*#__PURE__*/_jsx(Icon, {
@@ -581,6 +585,13 @@ export function DropdownMenuSubMenu(props) {
       })
     }), children]
   });
+  // Nested rows live in this level's flyout, a layer of their own where the
+  // layer-scoped signal resets; re-provide it so their pending hover intent
+  // dies with the root menu too.
+  const nestedContent = /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
+    value: isRootMenuOpen,
+    children: nestedRows
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Item
     // Host attributes and handlers first: the row's role, tab stop, popup

package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file lazyMenuBottomSheet.ts
+ * @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
+ *   MenuBottomSheetActionList
+ * @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
+ *   load the touch sheet on first render
+ * @position Internal to DropdownMenu
+ *
+ * The touch sheet (BottomSheet, its gestures, and the touch action list) only
+ * renders for the bottom-sheet presentation. Loading it on demand keeps it out
+ * of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
+ * the wrapped component's props and renders nothing until its module loads.
+ *
+ * Neither wrapper renders on the server or in the render that hydrates server
+ * HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
+ * leave server markup incomplete and abort hydration. The closed sheet has no
+ * visible markup, so it first renders right after hydration.
+ */
+import { type ComponentProps, type ReactElement } from 'react';
+import type { MenuBottomSheet as EagerMenuBottomSheet } from './MenuBottomSheet';
+import type { MenuBottomSheetActionList as EagerMenuBottomSheetActionList } from './MenuBottomSheetActionList';
+export declare function MenuBottomSheet(props: ComponentProps<typeof EagerMenuBottomSheet>): ReactElement | null;
+export declare function MenuBottomSheetActionList(props: ComponentProps<typeof EagerMenuBottomSheetActionList>): ReactElement | null;
+//# sourceMappingURL=lazyMenuBottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lazyMenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/lazyMenuBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,eAAe,IAAI,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAC,yBAAyB,IAAI,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAc7G,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACjD,YAAY,GAAG,IAAI,CASrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,CAAC,OAAO,8BAA8B,CAAC,GAC3D,YAAY,GAAG,IAAI,CASrB"}

package/dist/DropdownMenu/lazyMenuBottomSheet.js

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file lazyMenuBottomSheet.ts
+ * @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
+ *   MenuBottomSheetActionList
+ * @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
+ *   load the touch sheet on first render
+ * @position Internal to DropdownMenu
+ *
+ * The touch sheet (BottomSheet, its gestures, and the touch action list) only
+ * renders for the bottom-sheet presentation. Loading it on demand keeps it out
+ * of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
+ * the wrapped component's props and renders nothing until its module loads.
+ *
+ * Neither wrapper renders on the server or in the render that hydrates server
+ * HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
+ * leave server markup incomplete and abort hydration. The closed sheet has no
+ * visible markup, so it first renders right after hydration.
+ */
+import { createElement, lazy, Suspense } from 'react';
+import { useIsHydrating } from "../hooks/useIsHydrating.js";
+const LazyMenuBottomSheet = /*#__PURE__*/lazy(async () => import("./MenuBottomSheet.js").then(module => ({
+  default: module.MenuBottomSheet
+})));
+const LazyMenuBottomSheetActionList = /*#__PURE__*/lazy(async () => import("./MenuBottomSheetActionList.js").then(module => ({
+  default: module.MenuBottomSheetActionList
+})));
+export function MenuBottomSheet(props) {
+  if (useIsHydrating()) {
+    return null;
+  }
+  return /*#__PURE__*/createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/createElement(LazyMenuBottomSheet, props));
+}
+export function MenuBottomSheetActionList(props) {
+  if (useIsHydrating()) {
+    return null;
+  }
+  return /*#__PURE__*/createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/createElement(LazyMenuBottomSheetActionList, props));
+}

package/dist/DropdownMenu/menuRegionStops.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file menuRegionStops.ts
+ * @input The focus trap's own reachability test (getFocusableElements)
+ * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
+ *   of a header or footer region and the walk through a menu with regions,
+ *   with a named radio group as one stop
+ * @position Internal; DropdownMenu's walk through its header and footer, in a
+ *   module of its own so another menu level with regions can share it.
+ *
+ * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
+ * header's controls, the menu as one stop, then the footer's controls, and
+ * wrap at either end.
+ */
+import type React from 'react';
+/**
+ * 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.
+ */
+export declare function tabbablesIn(region: HTMLElement | null): HTMLElement[];
+/**
+ * Move focus to a Tab stop in the dialog. Reports whether focus actually
+ * arrived, so a caller can fall back to the menu instead of stranding focus on
+ * the page.
+ */
+export declare function focusRegionControl(element: HTMLElement): boolean;
+/**
+ * Handle Tab in a menu with a header or footer: move to the next stop of the
+ * header's controls, the menu as one stop, then the footer's controls,
+ * wrapping at either end. The key is handled in full, so a document-level
+ * focus trap never reads it a second time. A row, or a row of an open
+ * flyout below this menu, counts as the menu's stop; with no other stop,
+ * focus stays in the menu (`isFromFlyout`: a flyout that has just closed
+ * itself hands the focus back to the menu's own stop).
+ */
+export declare function moveRegionsTab(event: React.KeyboardEvent, menu: HTMLElement | null, header: HTMLElement | null, footer: HTMLElement | null, isFromFlyout?: boolean): void;
+//# sourceMappingURL=menuRegionStops.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuRegionStops.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuRegionStops.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,EAAE,CAOrE;AAyED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAGhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,YAAY,UAAQ,GACnB,IAAI,CAmCN"}

package/dist/DropdownMenu/menuRegionStops.js

@@ -0,0 +1,131 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file menuRegionStops.ts
+ * @input The focus trap's own reachability test (getFocusableElements)
+ * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
+ *   of a header or footer region and the walk through a menu with regions,
+ *   with a named radio group as one stop
+ * @position Internal; DropdownMenu's walk through its header and footer, in a
+ *   module of its own so another menu level with regions can share it.
+ *
+ * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
+ * header's controls, the menu as one stop, then the footer's controls, and
+ * wrap at either end.
+ */
+import { getFocusableElements } from "../hooks/useFocusTrap.js";
+
+/**
+ * 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.
+ */
+export 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;
+}
+
+/**
+ * Collapse each named radio group to the one Tab stop a browser gives it: the
+ * focused radio, else the checked one, else the first radio moving forward or
+ * the last moving backward. The stop takes the group's first position.
+ */
+function collapseRadioGroups(elements, active, isBackward) {
+  const groups = new Map();
+  const groupKey = el => el instanceof HTMLInputElement && el.getAttribute('type') === 'radio' && el.name !== '' ? `${el.form?.id ?? ''}\u0000${el.name}` : null;
+  for (const el of elements) {
+    const key = groupKey(el);
+    if (key != null) {
+      const members = groups.get(key) ?? [];
+      members.push(el);
+      groups.set(key, members);
+    }
+  }
+  const placed = new Set();
+  const result = [];
+  for (const el of elements) {
+    const key = groupKey(el);
+    if (key == null) {
+      result.push(el);
+      continue;
+    }
+    if (placed.has(key)) {
+      continue;
+    }
+    placed.add(key);
+    const members = groups.get(key) ?? [];
+    const stop = members.find(radio => radio === active) ?? members.find(radio => radio.checked) ?? (isBackward ? members[members.length - 1] : members[0]);
+    result.push(stop);
+  }
+  return result;
+}
+
+/**
+ * Move focus to a Tab stop in the dialog. Reports whether focus actually
+ * arrived, so a caller can fall back to the menu instead of stranding focus on
+ * the page.
+ */
+export function focusRegionControl(element) {
+  element.focus();
+  return element.ownerDocument.activeElement === element;
+}
+
+/**
+ * Handle Tab in a menu with a header or footer: move to the next stop of the
+ * header's controls, the menu as one stop, then the footer's controls,
+ * wrapping at either end. The key is handled in full, so a document-level
+ * focus trap never reads it a second time. A row, or a row of an open
+ * flyout below this menu, counts as the menu's stop; with no other stop,
+ * focus stays in the menu (`isFromFlyout`: a flyout that has just closed
+ * itself hands the focus back to the menu's own stop).
+ */
+export function moveRegionsTab(event, menu, header, footer, isFromFlyout = false) {
+  if (menu == null) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const active = document.activeElement;
+  // A named radio group is one stop, as the browser's own Tab order has it.
+  const cycle = collapseRadioGroups([...tabbablesIn(header), menu, ...tabbablesIn(footer)], active, event.shiftKey);
+  if (cycle.length === 1) {
+    // Nothing else to reach: focus stays in the menu. From a flyout that has
+    // just closed itself, that is the menu's own stop.
+    if (isFromFlyout) {
+      menu.focus();
+    }
+    return;
+  }
+  const menuIndex = cycle.indexOf(menu);
+  let index = menu.contains(active) ? menuIndex : cycle.findIndex(element => element === active || element.contains(active));
+  if (index < 0) {
+    index = menuIndex;
+  }
+  const step = event.shiftKey ? -1 : 1;
+  const next = cycle[(index + step + cycle.length) % cycle.length];
+  if (!focusRegionControl(next)) {
+    menu.focus();
+  }
+}

package/dist/EmptyState/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAwDjB;yBApEe,UAAU"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAoDjB;yBAhEe,UAAU"}

package/dist/EmptyState/EmptyState.js

@@ -18,7 +18,7 @@ import { createElement } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { isRenderable, mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
@@ -82,7 +82,7 @@ export function EmptyState({
     ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
-    children: [icon != null && /*#__PURE__*/_jsx("div", {
+    children: [isRenderable(icon) && /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       children: icon
     }), /*#__PURE__*/_jsxs("div", {
@@ -98,13 +98,7 @@ export function EmptyState({
         1: {
           className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
         }
-      }[!!isCompact << 0]), title), description != null &&
-      /*#__PURE__*/
-      // Rendered as <div> (not <p>): description accepts ReactNode and a
-      // <p> cannot legally contain block children, which causes hydration
-      // mismatches. The StyleX style sets margin: 0, so appearance is
-      // unchanged.
-      _jsx("div", {
+      }[!!isCompact << 0]), title), isRenderable(description) && /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('empty-state-description', {
           variant: isCompact ? 'compact' : null
         }), {
@@ -117,7 +111,7 @@ export function EmptyState({
         }[!!isCompact << 0]),
         children: description
       })]
-    }), actions != null && /*#__PURE__*/_jsx("div", {
+    }), isRenderable(actions) && /*#__PURE__*/_jsx("div", {
       ...{
         0: {
           className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj xcsaf9d"

package/dist/Field/Field.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Field.tsx
- * @input Uses React, HTMLAttributes, ReactNode, FieldLabel, IconType, useFieldStatusAnnouncement
+ * @input Uses React, StyleX, BaseProps, FieldLabel/FieldStatus, FormLayoutContext, Text, VisuallyHidden, theme/status utilities
  * @output Exports Field component, FieldProps
  * @position Core implementation; consumed by index.ts, tested by Field.test.tsx
  *

package/dist/Field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AA8DtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAkHZ;yBAxIe,KAAK"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AA+DtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA0HZ;yBAhJe,KAAK"}

package/dist/Field/Field.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Field.tsx
- * @input Uses React, HTMLAttributes, ReactNode, FieldLabel, IconType, useFieldStatusAnnouncement
+ * @input Uses React, StyleX, BaseProps, FieldLabel/FieldStatus, FormLayoutContext, Text, VisuallyHidden, theme/status utilities
  * @output Exports Field component, FieldProps
  * @position Core implementation; consumed by index.ts, tested by Field.test.tsx
  *
@@ -26,6 +26,7 @@ import { mergeProps } from "../utils/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { Text } from "../Text/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
@@ -140,10 +141,10 @@ export function Field({
   if (isHorizontalLabels) {
     return /*#__PURE__*/_jsxs("div", {
       ref: ref,
+      ...props,
       ...mergeProps(themeProps('field', {
         layout: 'horizontal-labels'
       }), stylex.props(styles.horizontalLabels, xstyle), className, style),
-      ...props,
       children: [/*#__PURE__*/_jsx("div", {
         ...{
           className: "x1enrzb7"
@@ -153,12 +154,15 @@ export function Field({
         ...{
           className: "x78zum5 xdt5ytf xc8icb0 x19nvjgn xlumz0n x1qs65gq"
         },
-        children: [description && /*#__PURE__*/_jsx(Text, {
+        children: [description && (isLabelHidden ? /*#__PURE__*/_jsx(VisuallyHidden, {
+          id: resolvedDescriptionID,
+          children: description
+        }) : /*#__PURE__*/_jsx(Text, {
           type: "supporting",
           display: "block",
           id: resolvedDescriptionID,
           children: description
-        }), children, statusNode]
+        })), children, statusNode]
       })]
     });
   }

package/dist/FormLayout/FormLayout.d.ts

@@ -28,10 +28,11 @@ export interface FormLayoutProps extends BaseProps<HTMLDivElement> {
      * Direction of field arrangement.
      *
      * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
-     * - `'horizontal'` — Fields arrange left-to-right in equal-width columns
-     *   using CSS Grid. Each child occupies one equal column.
-     * - `'horizontal-labels'` — CSS Grid with labels to the left of inputs.
-     *   Collapses to vertical when the container is narrow (≤480px).
+     * - `'horizontal'` — Fields occupy one `1fr` CSS Grid track per child in
+     *   logical inline order.
+     * - `'horizontal-labels'` — CSS Grid with labels beside their inputs on the
+     *   inline-start side. Collapses to vertical when the viewport is narrow
+     *   (≤480px).
      *
      * @default 'vertical'
      */

package/dist/FormLayout/FormLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../src/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AA2C7B,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;CACtC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAsB,EACtB,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA0BjB;yBAnCe,UAAU"}

package/dist/FormLayout/FormLayout.js

@@ -105,10 +105,10 @@ export function FormLayout({
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
+      ...props,
       ...mergeProps(themeProps('form-layout', {
         direction
       }), stylex.props(styles.base, direction === 'horizontal' && styles.horizontal, direction === 'horizontal-labels' && styles.horizontalLabels, xstyle), className, style),
-      ...props,
       children: children
     })
   });

package/dist/FormLayout/FormLayoutContext.d.ts

@@ -2,9 +2,9 @@
  * Direction of form field arrangement.
  *
  * - `'vertical'` — Fields stack top-to-bottom (default). Most common.
- * - `'horizontal'` — Fields arrange left-to-right, wrapping when needed.
- * - `'horizontal-labels'` — Fields stack vertically but labels sit to the left
- *   of their inputs (settings/admin panel pattern).
+ * - `'horizontal'` — Fields occupy one `1fr` grid track per child in logical inline order.
+ * - `'horizontal-labels'` — Fields stack vertically while labels sit beside
+ *   their inputs on the inline-start side (settings/admin panel pattern).
  */
 export type FormLayoutDirection = 'vertical' | 'horizontal' | 'horizontal-labels';
 /**