@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/navigation-menu/root/NavigationMenuRoot.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuRoot = NavigationMenuRoot;
+var _dom = require("@floating-ui/utils/dom");
+var _solidJs = require("solid-js");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _utils = require("../../floating-ui-solid/utils");
+var _solidHelpers = require("../../solid-helpers");
+var _utils2 = require("../../utils");
+var _owner = require("../../utils/owner");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NavigationMenuRootContext = require("./NavigationMenuRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Groups all parts of the navigation menu.
+ * Renders a `<nav>` element at the root, or `<div>` element when nested.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuRoot(componentProps) {
+  const [local] = (0, _solidJs.splitProps)(componentProps, ['defaultValue', 'value', 'onValueChange', 'actionsRef', 'delay', 'closeDelay', 'orientation', 'onOpenChangeComplete']);
+  const defaultValue = () => local.defaultValue ?? null;
+  const delay = () => local.delay ?? 50;
+  const closeDelay = () => local.closeDelay ?? 50;
+  const orientation = () => local.orientation ?? 'horizontal';
+  const nested = () => (0, _floatingUiSolid.useFloatingParentNodeId)() != null;
+  const [value, setValueUnwrapped] = (0, _utils2.useControlled)({
+    controlled: () => local.value,
+    default: defaultValue,
+    name: 'NavigationMenu',
+    state: 'value'
+  });
+
+  // Derive open state from value being non-nullish
+  const open = (0, _solidJs.createMemo)(() => value() != null);
+  let closeReasonRef;
+  const [positionerElement, setPositionerElement] = (0, _solidJs.createSignal)(null);
+  const [popupElement, setPopupElement] = (0, _solidJs.createSignal)(null);
+  const [viewportElement, setViewportElement] = (0, _solidJs.createSignal)(null);
+  const [activationDirection, setActivationDirection] = (0, _solidJs.createSignal)(null);
+  const [floatingRootContext, setFloatingRootContext] = (0, _solidJs.createSignal)();
+  const refs = {
+    currentContentRef: null,
+    rootRef: null,
+    beforeInsideRef: null,
+    afterInsideRef: null,
+    beforeOutsideRef: null,
+    afterOutsideRef: null,
+    prevTriggerElementRef: null
+  };
+  const {
+    transitionStatus,
+    setMounted,
+    mounted
+  } = (0, _utils2.useTransitionStatus)(() => open());
+  const setValue = (nextValue, event, reason) => {
+    (0, _solidJs.batch)(() => {
+      if (!nextValue) {
+        closeReasonRef = reason;
+        setActivationDirection(null);
+        setFloatingRootContext(undefined);
+      }
+      if (nextValue !== value()) {
+        local.onValueChange?.(nextValue, event, reason);
+      }
+      setValueUnwrapped(nextValue);
+    });
+  };
+  const handleUnmount = () => {
+    const doc = (0, _owner.ownerDocument)(refs.rootRef);
+    const activeEl = (0, _utils.activeElement)(doc);
+    if (closeReasonRef !== 'trigger-hover' && (0, _dom.isHTMLElement)(refs.prevTriggerElementRef) && ((0, _utils.contains)(popupElement(), activeEl) || activeEl === doc.body)) {
+      refs.prevTriggerElementRef.focus({
+        preventScroll: true
+      });
+      refs.prevTriggerElementRef = undefined;
+    }
+    (0, _solidJs.batch)(() => {
+      setMounted(false);
+      local.onOpenChangeComplete?.(false);
+      setActivationDirection(null);
+      setFloatingRootContext(undefined);
+    });
+    refs.currentContentRef = null;
+    closeReasonRef = undefined;
+  };
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    enabled: () => !local.actionsRef,
+    open,
+    ref: popupElement,
+    onComplete() {
+      if (!open()) {
+        handleUnmount();
+      }
+    }
+  });
+  const contextValue = {
+    open,
+    value,
+    setValue,
+    mounted,
+    transitionStatus,
+    positionerElement,
+    setPositionerElement,
+    popupElement,
+    setPopupElement,
+    viewportElement,
+    setViewportElement,
+    activationDirection,
+    setActivationDirection,
+    floatingRootContext,
+    setFloatingRootContext,
+    nested,
+    refs,
+    delay,
+    closeDelay,
+    orientation
+  };
+  const element = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuRootContext.NavigationMenuRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeContext, {
+      ...componentProps
+    })
+  });
+  if (process.env.NODE_ENV !== "production") element.displayName = "element";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+    when: nested(),
+    fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingTree, {
+      children: element()
+    }),
+    children: element()
+  });
+}
+function TreeContext(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['defaultValue', 'value', 'onValueChange', 'actionsRef', 'delay', 'closeDelay', 'orientation', 'onOpenChangeComplete']);
+  const nodeId = (0, _floatingUiSolid.useFloatingNodeId)();
+  const {
+    refs,
+    nested
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const {
+    open
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const state = {
+    get open() {
+      return open();
+    },
+    get nested() {
+      return nested();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)(() => nested() ? 'div' : 'nav', componentProps, {
+    state,
+    ref: el => {
+      refs.rootRef = el;
+    },
+    props: [{
+      get 'aria-orientation'() {
+        return local.orientation;
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuRootContext.NavigationMenuTreeContext.Provider, {
+    value: nodeId,
+    children: element()
+  });
+}

package/cjs/navigation-menu/root/NavigationMenuRootContext.d.ts

@@ -0,0 +1,40 @@
+import { type Accessor, type Setter } from 'solid-js';
+import type { FloatingRootContext } from "../../floating-ui-solid/index.js";
+import type { TransitionStatus } from "../../utils/index.js";
+import type { BaseOpenChangeReason } from "../../utils/translateOpenChangeReason.js";
+export interface NavigationMenuRootContext {
+  open: Accessor<boolean>;
+  value: Accessor<any>;
+  setValue: (value: any, event?: Event, reason?: BaseOpenChangeReason) => void;
+  transitionStatus: Accessor<TransitionStatus>;
+  mounted: Accessor<boolean>;
+  popupElement: Accessor<HTMLElement | null | undefined>;
+  setPopupElement: Setter<HTMLElement | null | undefined>;
+  positionerElement: Accessor<HTMLElement | null | undefined>;
+  setPositionerElement: Setter<HTMLElement | null | undefined>;
+  viewportElement: Accessor<HTMLElement | null | undefined>;
+  setViewportElement: Setter<HTMLElement | null | undefined>;
+  activationDirection: Accessor<'left' | 'right' | 'up' | 'down' | null>;
+  setActivationDirection: Setter<'left' | 'right' | 'up' | 'down' | null>;
+  floatingRootContext: Accessor<FloatingRootContext | undefined>;
+  setFloatingRootContext: Setter<FloatingRootContext | undefined>;
+  refs: {
+    currentContentRef: HTMLDivElement | null | undefined;
+    rootRef: HTMLDivElement | null | undefined;
+    beforeInsideRef: HTMLSpanElement | null | undefined;
+    afterInsideRef: HTMLSpanElement | null | undefined;
+    beforeOutsideRef: HTMLSpanElement | null | undefined;
+    afterOutsideRef: HTMLSpanElement | null | undefined;
+    prevTriggerElementRef: Element | null | undefined;
+  };
+  nested: Accessor<boolean>;
+  delay: Accessor<number>;
+  closeDelay: Accessor<number>;
+  orientation: Accessor<'horizontal' | 'vertical'>;
+}
+export declare const NavigationMenuRootContext: import("solid-js").Context<NavigationMenuRootContext | undefined>;
+declare function useNavigationMenuRootContext(optional?: false): NavigationMenuRootContext;
+declare function useNavigationMenuRootContext(optional: true): NavigationMenuRootContext | undefined;
+export declare const NavigationMenuTreeContext: import("solid-js").Context<Accessor<string | undefined> | undefined>;
+declare function useNavigationMenuTreeContext(): Accessor<string | undefined> | undefined;
+export { useNavigationMenuRootContext, useNavigationMenuTreeContext };

package/cjs/navigation-menu/root/NavigationMenuRootContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuTreeContext = exports.NavigationMenuRootContext = void 0;
+exports.useNavigationMenuRootContext = useNavigationMenuRootContext;
+exports.useNavigationMenuTreeContext = useNavigationMenuTreeContext;
+var _solidJs = require("solid-js");
+const NavigationMenuRootContext = exports.NavigationMenuRootContext = (0, _solidJs.createContext)();
+function useNavigationMenuRootContext(optional) {
+  const context = (0, _solidJs.useContext)(NavigationMenuRootContext);
+  if (context === undefined && !optional) {
+    throw new Error('Base UI: NavigationMenuRootContext is missing. Navigation Menu parts must be placed within <NavigationMenu.Root>.');
+  }
+  return context;
+}
+const NavigationMenuTreeContext = exports.NavigationMenuTreeContext = (0, _solidJs.createContext)();
+function useNavigationMenuTreeContext() {
+  return (0, _solidJs.useContext)(NavigationMenuTreeContext);
+}

package/cjs/navigation-menu/trigger/NavigationMenuTrigger.d.ts

@@ -0,0 +1,18 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Opens the navigation menu popup when hovered or clicked, revealing the
+ * associated content.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare function NavigationMenuTrigger(componentProps: NavigationMenuTrigger.Props): import("solid-js").JSX.Element;
+export declare namespace NavigationMenuTrigger {
+  interface State {
+    /**
+     * If `true`, the popup is open and the item is active.
+     */
+    open: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'button', State> {}
+}

package/cjs/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -0,0 +1,372 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+var _solidJs = require("solid-js");
+var _CompositeItem = require("../../composite/item/CompositeItem");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _utils = require("../../floating-ui-solid/utils");
+var _mergeProps = require("../../merge-props/mergeProps");
+var _solidHelpers = require("../../solid-helpers");
+var _constants = require("../../utils/constants");
+var _FocusGuard = require("../../utils/FocusGuard");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _translateOpenChangeReason = require("../../utils/translateOpenChangeReason");
+var _useAnimationFrame = require("../../utils/useAnimationFrame");
+var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _useTimeout = require("../../utils/useTimeout");
+var _visuallyHidden = require("../../utils/visuallyHidden");
+var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
+var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
+var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
+var _jsxRuntime = require("react/jsx-runtime");
+const TRIGGER_IDENTIFIER = 'data-navigation-menu-trigger';
+
+/**
+ * Opens the navigation menu popup when hovered or clicked, revealing the
+ * associated content.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+function NavigationMenuTrigger(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    value,
+    setValue,
+    mounted,
+    open,
+    positionerElement,
+    setActivationDirection,
+    setFloatingRootContext,
+    popupElement,
+    delay,
+    closeDelay,
+    orientation,
+    refs
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const {
+    value: itemValue,
+    isActive: isActiveItem,
+    transitionStatus
+  } = (0, _NavigationMenuItemContext.useNavigationMenuItemContext)();
+  const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
+  const tree = (0, _floatingUiSolid.useFloatingTree)();
+  const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
+  const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const sizeFrame1 = (0, _useAnimationFrame.useAnimationFrame)();
+  const sizeFrame2 = (0, _useAnimationFrame.useAnimationFrame)();
+  const [triggerElement, setTriggerElement] = (0, _solidJs.createSignal)(null);
+  const [stickIfOpen, setStickIfOpen] = (0, _solidJs.createSignal)(true);
+  const [pointerType, setPointerType] = (0, _solidJs.createSignal)('');
+  const isActiveItemRef = isActiveItem();
+  let allowFocusRef = false;
+  const handleValueChange = (currentWidth, currentHeight) => {
+    const popupEl = popupElement();
+    const positionerEl = positionerElement();
+    if (!popupEl || !positionerEl) {
+      return;
+    }
+    popupEl.style.removeProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth);
+    popupEl.style.removeProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight);
+    positionerEl.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth);
+    positionerEl.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight);
+    const nextWidth = popupEl.offsetWidth;
+    const nextHeight = popupEl.offsetHeight;
+    if (currentHeight === 0 || currentWidth === 0) {
+      currentWidth = nextWidth;
+      currentHeight = nextHeight;
+    }
+    popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
+    popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
+    positionerEl.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${nextWidth}px`);
+    positionerEl.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${nextHeight}px`);
+    sizeFrame1.request(() => {
+      sizeFrame2.request(() => {
+        popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${nextWidth}px`);
+        popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${nextHeight}px`);
+      });
+    });
+  };
+  const setAutoSizes = () => {
+    const popupEl = popupElement();
+    if (!popupEl) {
+      return;
+    }
+    popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, 'auto');
+    popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, 'auto');
+  };
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, value);
+  (0, _solidJs.createEffect)(() => {
+    if (!positionerElement() || !popupElement() || !open()) {
+      return;
+    }
+    sizeFrame1.request(() => {
+      sizeFrame2.request(setAutoSizes);
+    });
+    (0, _solidJs.onCleanup)(() => {
+      sizeFrame1.cancel();
+      sizeFrame2.cancel();
+    });
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (!positionerElement() || !popupElement() || !value()) {
+      return;
+    }
+    const ac = new AbortController();
+    sizeFrame1.request(() => {
+      sizeFrame2.request(() => {
+        runOnceAnimationsFinish(setAutoSizes, ac.signal);
+      });
+    });
+    (0, _solidJs.onCleanup)(() => {
+      sizeFrame1.cancel();
+      sizeFrame2.cancel();
+      ac.abort();
+    });
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (!open()) {
+      setPointerType('');
+      stickIfOpenTimeout.clear();
+      sizeFrame1.cancel();
+      sizeFrame2.cancel();
+    }
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (isActiveItemRef && open() && popupElement()) {
+      handleValueChange(0, 0);
+    }
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (isActiveItem() && open() && popupElement() && allowFocusRef) {
+      allowFocusRef = false;
+      focusFrame.request(() => {
+        refs.beforeOutsideRef?.focus();
+      });
+    }
+    (0, _solidJs.onCleanup)(() => {
+      focusFrame.cancel();
+    });
+  });
+  function handleOpenChange(nextOpen, event, reason) {
+    const isHover = reason === 'trigger-hover';
+    if (pointerType() === 'touch' && isHover) {
+      return;
+    }
+    if (!nextOpen && value() !== itemValue()) {
+      return;
+    }
+    const popupEl = popupElement();
+    const positionerEl = positionerElement();
+    if (!nextOpen && popupEl && positionerEl) {
+      popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${popupEl.offsetWidth}px`);
+      popupEl.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${popupEl.offsetHeight}px`);
+      positionerEl.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${positionerEl.offsetWidth}px`);
+      positionerEl.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${positionerEl.offsetHeight}px`);
+    }
+    function changeState() {
+      if (isHover) {
+        // Only allow "patient" clicks to close the popup if it's open.
+        // If they clicked within 500ms of the popup opening, keep it open.
+        setStickIfOpen(true);
+        stickIfOpenTimeout.clear();
+        stickIfOpenTimeout.start(_constants.PATIENT_CLICK_THRESHOLD, () => {
+          setStickIfOpen(false);
+        });
+      }
+      if (nextOpen) {
+        setValue(itemValue(), event, reason);
+      } else {
+        setValue(null, event, reason);
+      }
+    }
+    changeState();
+  }
+  const context = (0, _floatingUiSolid.useFloatingRootContext)({
+    open,
+    onOpenChange(openValue, eventValue, reasonValue) {
+      handleOpenChange(openValue, eventValue, (0, _translateOpenChangeReason.translateOpenChangeReason)(reasonValue));
+    },
+    elements: {
+      reference: triggerElement,
+      floating: positionerElement
+    }
+  });
+  const hover = (0, _floatingUiSolid.useHover)(context, {
+    move: false,
+    handleClose: ctx => (0, _floatingUiSolid.safePolygon)({
+      blockPointerEvents: pointerType() !== 'touch'
+    })(ctx),
+    restMs: () => mounted() ? 0 : delay(),
+    delay: () => ({
+      close: closeDelay()
+    })
+  });
+  const click = (0, _floatingUiSolid.useClick)(context, {
+    stickIfOpen,
+    toggle: () => isActiveItem() && transitionStatus() === undefined
+  });
+  const dismiss = (0, _floatingUiSolid.useDismiss)(context, {
+    enabled: isActiveItem,
+    outsidePress(event) {
+      // When pressing a new trigger with touch input, prevent closing the popup.
+      const target = (0, _utils.getTarget)(event);
+      const closestNavigationMenuTrigger = target?.closest(`[${TRIGGER_IDENTIFIER}]`);
+      return closestNavigationMenuTrigger === null;
+    }
+  });
+  (0, _solidJs.createEffect)(() => {
+    if (isActiveItem()) {
+      setFloatingRootContext(context);
+      refs.prevTriggerElementRef = triggerElement();
+    }
+  });
+  const {
+    getReferenceProps
+  } = (0, _floatingUiSolid.useInteractions)([hover, click, dismiss]);
+  const handleOpenEvent = event => {
+    const popupEl = popupElement();
+    const positionerEl = positionerElement();
+    if (!popupEl || !positionerEl) {
+      return;
+    }
+    const currentWidth = popupEl.offsetWidth;
+    const currentHeight = popupEl.offsetHeight;
+    const triggerEl = triggerElement();
+    (0, _solidJs.batch)(() => {
+      const prevTriggerRect = refs.prevTriggerElementRef?.getBoundingClientRect();
+      if (mounted() && prevTriggerRect && triggerEl) {
+        const nextTriggerRect = triggerEl.getBoundingClientRect();
+        const isMovingRight = nextTriggerRect.left > prevTriggerRect.left;
+        const isMovingDown = nextTriggerRect.top > prevTriggerRect.top;
+        if (orientation() === 'horizontal' && nextTriggerRect.left !== prevTriggerRect.left) {
+          setActivationDirection(isMovingRight ? 'right' : 'left');
+        } else if (orientation() === 'vertical' && nextTriggerRect.top !== prevTriggerRect.top) {
+          setActivationDirection(isMovingDown ? 'down' : 'up');
+        }
+      }
+
+      // Reset the `openEvent` to `undefined` when the active item changes so that a
+      // `click` -> `hover` move to new trigger -> `hover` move back doesn't unepxpectedly
+      // cause the popup to remain stuck open.
+      if (event.type !== 'click') {
+        context.dataRef.openEvent = undefined;
+      }
+      if (pointerType() === 'touch' && event.type !== 'click') {
+        return;
+      }
+      if (value() != null) {
+        setValue(itemValue(), event, event.type === 'mouseenter' ? 'trigger-hover' : 'trigger-press');
+      }
+    });
+    handleValueChange(currentWidth, currentHeight);
+  };
+  const state = {
+    get open() {
+      return isActiveItem();
+    }
+  };
+  function handleSetPointerType(event) {
+    setPointerType(event.pointerType);
+  }
+  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
+    state,
+    ref: setTriggerElement,
+    customStyleHookMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
+    props: [props => (0, _mergeProps.mergeProps)(props, getReferenceProps), {
+      tabIndex: 0,
+      onMouseEnter: handleOpenEvent,
+      onClick: handleOpenEvent,
+      onPointerEnter: handleSetPointerType,
+      onPointerDown: handleSetPointerType,
+      [TRIGGER_IDENTIFIER]: '',
+      onMouseMove() {
+        allowFocusRef = false;
+      },
+      onKeyDown(event) {
+        allowFocusRef = true;
+        const openHorizontal = orientation() === 'horizontal' && event.key === 'ArrowDown';
+        const openVertical = orientation() === 'vertical' && event.key === 'ArrowRight';
+        if (openHorizontal || openVertical) {
+          setValue(itemValue(), event, 'list-navigation');
+          handleOpenEvent(event);
+          (0, _utils.stopEvent)(event);
+        }
+      },
+      onBlur(event) {
+        if (event.relatedTarget && (0, _isOutsideMenuEvent.isOutsideMenuEvent)({
+          currentTarget: event.currentTarget,
+          relatedTarget: event.relatedTarget
+        }, {
+          popupElement: popupElement(),
+          rootRef: refs.rootRef,
+          tree,
+          nodeId: nodeId?.()
+        })) {
+          setValue(null, event, 'focus-out');
+        }
+      },
+      get 'aria-expanded'() {
+        return isActiveItem();
+      },
+      get 'aria-controls'() {
+        return isActiveItem() ? popupElement()?.id : undefined;
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+      render: element
+    }), isActiveItem() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        ref: el => {
+          refs.beforeOutsideRef = el;
+        },
+        onFocus: event => {
+          const positionerEl = positionerElement();
+          const triggerEl = triggerElement();
+          if (positionerEl && (0, _utils.isOutsideEvent)(event, positionerEl)) {
+            queueMicrotask(() => {
+              refs.beforeInsideRef?.focus();
+            });
+          } else {
+            queueMicrotask(() => {
+              const prevTabbable = (0, _utils.getPreviousTabbable)(triggerEl);
+              prevTabbable?.focus();
+            });
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-owns": popupElement()?.id,
+        style: _visuallyHidden.visuallyHidden
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        ref: el => {
+          refs.afterOutsideRef = el;
+        },
+        onFocus: event => {
+          const positionerEl = positionerElement();
+          const triggerEl = triggerElement();
+          if (positionerEl && (0, _utils.isOutsideEvent)(event, positionerEl)) {
+            queueMicrotask(() => {
+              refs.afterInsideRef?.focus();
+            });
+          } else {
+            queueMicrotask(() => {
+              const nextTabbable = (0, _utils.getNextTabbable)(triggerEl);
+              nextTabbable?.focus();
+              if (!(0, _utils.contains)(refs.rootRef, nextTabbable)) {
+                setValue(null, event, 'focus-out');
+              }
+            });
+          }
+        }
+      })]
+    })]
+  });
+}

package/cjs/navigation-menu/trigger/NavigationMenuTriggerDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum NavigationMenuTriggerDataAttributes {
+  /**
+   * Present when the corresponding navigation menu is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the trigger is pressed.
+   */
+  pressed = "data-pressed",
+}

package/cjs/navigation-menu/trigger/NavigationMenuTriggerDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let NavigationMenuTriggerDataAttributes = exports.NavigationMenuTriggerDataAttributes = function (NavigationMenuTriggerDataAttributes) {
+  /**
+   * Present when the corresponding navigation menu is open.
+   */
+  NavigationMenuTriggerDataAttributes[NavigationMenuTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is pressed.
+   */
+  NavigationMenuTriggerDataAttributes[NavigationMenuTriggerDataAttributes["pressed"] = _popupStateMapping.CommonTriggerDataAttributes.pressed] = "pressed";
+  return NavigationMenuTriggerDataAttributes;
+}({});

package/cjs/navigation-menu/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const OPEN_DELAY = 50;
+export declare const CLOSE_DELAY = 50;

package/cjs/navigation-menu/utils/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPEN_DELAY = exports.CLOSE_DELAY = void 0;
+const OPEN_DELAY = exports.OPEN_DELAY = 50;
+const CLOSE_DELAY = exports.CLOSE_DELAY = 50;

package/cjs/navigation-menu/utils/isOutsideMenuEvent.d.ts

@@ -0,0 +1,16 @@
+import { FloatingTreeType } from "../../floating-ui-solid/index.js";
+interface Targets {
+  currentTarget: HTMLElement | null | undefined;
+  relatedTarget: HTMLElement | null | undefined;
+}
+interface Params {
+  popupElement: HTMLElement | null | undefined;
+  rootRef: HTMLDivElement | null | undefined;
+  tree: FloatingTreeType | null;
+  nodeId: string | undefined;
+}
+export declare function isOutsideMenuEvent({
+  currentTarget,
+  relatedTarget
+}: Targets, params: Params): boolean;
+export {};