@velocis/dropdown1 0.2.1 → 0.4.0

package/dist/index.cjs

@@ -43,6 +43,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Dropdown1.tsx
 var import_core3 = require("@velocis/core");
+var import_theme = require("@velocis/theme");
 var import_react2 = require("react");
 
 // src/Dropdown1.defaults.ts
@@ -58,7 +59,9 @@ var DROPDOWN1_ITEM_DEFAULTS = {
 };
 var DROPDOWN1_SUBMENU_DEFAULTS = {
   contentWidth: "w-48",
-  hoverDelayMs: 100
+  hoverDelayMs: 100,
+  placement: "auto",
+  subMenuGap: 8
 };
 
 // src/Dropdown1.variants.ts
@@ -92,7 +95,7 @@ var dropdown1SubMenuTriggerVariants = (0, import_class_variance_authority.cva)(
   "flex w-full cursor-default items-center justify-between px-4 py-2 text-sm transition-colors"
 );
 var dropdown1SubMenuContentVariants = (0, import_class_variance_authority.cva)(
-  "absolute top-0 right-full mr-2 w-48 rounded-velocis-md z-[10000]"
+  "fixed w-48 rounded-velocis-md z-[10000]"
 );
 
 // src/context/Dropdown1Context.tsx
@@ -130,7 +133,7 @@ function resolveDropdown1Styles(overrides) {
     content,
     item: overrides?.item ?? dropdown1Styles.item,
     subMenuTrigger: overrides?.subMenuTrigger ?? dropdown1Styles.subMenuTrigger,
-    subMenuContent: overrides?.subMenuContent ?? content,
+    subMenuContent: overrides?.subMenuContent ?? dropdown1Styles.subMenuContent,
     subMenuIcon: overrides?.subMenuIcon ?? dropdown1Styles.subMenuIcon
   };
 }
@@ -198,6 +201,8 @@ function Dropdown1Root({
   defaultOpen = false,
   onOpenChange,
   styles: stylesProp,
+  surface,
+  triggerSurface,
   triggerClassName,
   contentClassName,
   contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
@@ -210,12 +215,21 @@ function Dropdown1Root({
   contentTestId
 }) {
   const direction = (0, import_core3.useDirection)();
+  const { resolvedTheme } = (0, import_theme.useTheme)();
   const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
   const styles = resolveDropdown1Styles(stylesProp);
-  const dropdownRef = (0, import_react2.useRef)(null);
+  const contentRef = (0, import_react2.useRef)(null);
   const buttonRef = (0, import_react2.useRef)(null);
   const [positionStyle, setPositionStyle] = (0, import_react2.useState)({});
   const closeDropdown = (0, import_react2.useCallback)(() => setOpen(false), [setOpen]);
+  const isInsideDropdownPanel = (0, import_react2.useCallback)((node) => {
+    if (!node) return false;
+    if (contentRef.current?.contains(node)) return true;
+    if (node instanceof Element && node.closest("[data-velocis-dropdown1-submenu]")) {
+      return true;
+    }
+    return false;
+  }, []);
   const updatePosition = (0, import_react2.useCallback)(() => {
     if (!buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
@@ -237,7 +251,7 @@ function Dropdown1Root({
   (0, import_react2.useEffect)(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && !isInsideDropdownPanel(event.target)) {
         setOpen(false);
       }
     };
@@ -249,7 +263,7 @@ function Dropdown1Root({
     const handleScroll = (event) => {
       if (!closeOnScroll) return;
       const target = event.target;
-      if (dropdownRef.current && target && !dropdownRef.current.contains(target) && !buttonRef.current?.contains(target)) {
+      if (target && !isInsideDropdownPanel(target) && !buttonRef.current?.contains(target)) {
         setOpen(false);
       }
     };
@@ -261,22 +275,26 @@ function Dropdown1Root({
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("scroll", handleScroll, true);
     };
-  }, [closeOnScroll, open, setOpen]);
-  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  }, [closeOnScroll, isInsideDropdownPanel, open, setOpen]);
+  const contentSurfaceProps = (0, import_theme.applySurface)(surface, resolvedTheme, {
+    className: (0, import_core3.cn)(
+      dropdown1ContentVariants(),
+      styles.content,
+      !fullWidth && contentWidth,
+      maxHeight && "overflow-y-auto",
+      contentClassName
+    )
+  });
+  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dropdown1Context.Provider, { value: { closeDropdown, styles, contentRef }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
-      ref: dropdownRef,
+      ref: contentRef,
       role: "menu",
       "data-testid": contentTestId,
       dir: direction,
-      className: (0, import_core3.cn)(
-        dropdown1ContentVariants(),
-        styles.content,
-        !fullWidth && contentWidth,
-        maxHeight && "overflow-y-auto",
-        contentClassName
-      ),
+      ...contentSurfaceProps,
       style: {
+        ...contentSurfaceProps.style,
         ...positionStyle,
         zIndex: contentZIndex,
         maxHeight: maxHeight || void 0
@@ -284,6 +302,13 @@ function Dropdown1Root({
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "py-1", children })
     }
   ) }) : null;
+  const triggerSurfaceProps = (0, import_theme.applySurface)(triggerSurface, resolvedTheme, {
+    className: (0, import_core3.cn)(
+      dropdown1TriggerVariants({ fullWidth, disabled }),
+      styles.trigger,
+      triggerClassName
+    )
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
@@ -302,11 +327,7 @@ function Dropdown1Root({
             "aria-haspopup": "menu",
             onClick: () => !disabled && setOpen(!open),
             "data-testid": testId,
-            className: (0, import_core3.cn)(
-              dropdown1TriggerVariants({ fullWidth, disabled }),
-              styles.trigger,
-              triggerClassName
-            ),
+            ...triggerSurfaceProps,
             children: [
               trigger,
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDownIcon, { className: styles.triggerIcon })
@@ -358,28 +379,101 @@ function Dropdown1Item({
 }
 
 // src/components/Dropdown1SubMenu.tsx
-var import_core5 = require("@velocis/core");
+var import_core6 = require("@velocis/core");
+var import_theme2 = require("@velocis/theme");
 var import_react3 = require("react");
+
+// src/positioning/computeSubMenuStyle.ts
+var import_core5 = require("@velocis/core");
+function resolvePlacement(placement, direction) {
+  if (placement === "auto") {
+    return (0, import_core5.isRTL)(direction) ? "left" : "right";
+  }
+  return placement;
+}
+function computeSubMenuStyle({
+  placement,
+  direction,
+  contentRect,
+  triggerRect,
+  subMenuWidth,
+  gap = 8
+}) {
+  const resolved = resolvePlacement(placement, direction);
+  const margin = 8;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (resolved === "center") {
+    const top2 = contentRect.bottom + gap;
+    const left2 = contentRect.left + (contentRect.width - subMenuWidth) / 2;
+    return {
+      position: "fixed",
+      top: Math.max(margin, Math.min(top2, vh - margin)),
+      left: Math.max(margin, Math.min(left2, vw - subMenuWidth - margin)),
+      width: subMenuWidth
+    };
+  }
+  const top = triggerRect.top;
+  let left;
+  if (resolved === "left") {
+    left = contentRect.left - subMenuWidth - gap;
+  } else {
+    left = contentRect.right + gap;
+  }
+  return {
+    position: "fixed",
+    top: Math.max(margin, Math.min(top, vh - margin)),
+    left: Math.max(margin, Math.min(left, vw - subMenuWidth - margin)),
+    width: subMenuWidth
+  };
+}
+
+// src/components/Dropdown1SubMenu.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Dropdown1SubMenu({
   trigger,
   children,
+  placement = DROPDOWN1_SUBMENU_DEFAULTS.placement,
   contentWidth = DROPDOWN1_SUBMENU_DEFAULTS.contentWidth,
   styles: stylesProp,
+  surface,
   className
 }) {
+  const direction = (0, import_core6.useDirection)();
+  const { resolvedTheme } = (0, import_theme2.useTheme)();
   const context = useDropdown1Context();
   const subMenuTriggerStyles = stylesProp?.subMenuTrigger ?? context?.styles.subMenuTrigger;
   const subMenuContentStyles = stylesProp?.subMenuContent ?? context?.styles.subMenuContent;
   const subMenuIconStyles = stylesProp?.subMenuIcon ?? context?.styles.subMenuIcon;
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [positionStyle, setPositionStyle] = (0, import_react3.useState)({});
   const timeoutRef = (0, import_react3.useRef)(null);
-  const containerRef = (0, import_react3.useRef)(null);
-  const handleMouseEnter = () => {
+  const triggerRef = (0, import_react3.useRef)(null);
+  const panelRef = (0, import_react3.useRef)(null);
+  const updatePosition = (0, import_react3.useCallback)(() => {
+    const contentEl = context?.contentRef.current;
+    const triggerEl = triggerRef.current;
+    if (!contentEl || !triggerEl) return;
+    const subMenuWidth = parseContentWidthClass(contentWidth) ?? panelRef.current?.getBoundingClientRect().width ?? 192;
+    setPositionStyle(
+      computeSubMenuStyle({
+        placement,
+        direction,
+        contentRect: contentEl.getBoundingClientRect(),
+        triggerRect: triggerEl.getBoundingClientRect(),
+        subMenuWidth,
+        gap: DROPDOWN1_SUBMENU_DEFAULTS.subMenuGap
+      })
+    );
+  }, [contentWidth, context?.contentRef, direction, placement]);
+  const clearCloseTimeout = () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
+  };
+  const handleMouseEnter = () => {
+    clearCloseTimeout();
     setIsOpen(true);
   };
   const handleMouseLeave = () => {
@@ -387,6 +481,11 @@ function Dropdown1SubMenu({
       setIsOpen(false);
     }, DROPDOWN1_SUBMENU_DEFAULTS.hoverDelayMs);
   };
+  (0, import_react3.useEffect)(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen, updatePosition]);
   (0, import_react3.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
@@ -394,45 +493,47 @@ function Dropdown1SubMenu({
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const panelSurfaceProps = (0, import_theme2.applySurface)(surface, resolvedTheme, {
+    className: (0, import_core6.cn)(
+      dropdown1SubMenuContentVariants(),
+      subMenuContentStyles,
+      contentWidth !== "w-48" && contentWidth,
+      className
+    )
+  });
+  const subMenuPanel = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
-      ref: containerRef,
-      className: "relative w-full",
+      ref: panelRef,
+      role: "menu",
+      "data-velocis-dropdown1-submenu": "",
+      ...panelSurfaceProps,
+      style: {
+        ...panelSurfaceProps.style,
+        ...positionStyle
+      },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
-          {
-            role: "menuitem",
-            "aria-haspopup": "menu",
-            "aria-expanded": isOpen,
-            className: (0, import_core5.cn)(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center gap-2", children: trigger }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronSubMenuIcon, { open: isOpen, className: (0, import_core5.cn)("transition-transform", subMenuIconStyles) })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            role: "menu",
-            className: (0, import_core5.cn)(
-              dropdown1SubMenuContentVariants(),
-              subMenuContentStyles,
-              contentWidth !== "w-48" && contentWidth,
-              className
-            ),
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-1", children })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-1", children })
     }
-  );
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref: triggerRef,
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        className: (0, import_core6.cn)(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center gap-2", children: trigger }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronSubMenuIcon, { open: isOpen, className: (0, import_core6.cn)("transition-transform", subMenuIconStyles) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core6.Portal, { children: subMenuPanel })
+  ] });
 }
 
 // src/hooks/useDropdown1.ts

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
+import { VelocisSurfaceConfig } from '@velocis/theme';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type Dropdown1Styles = {
@@ -13,7 +14,7 @@ type Dropdown1Styles = {
     item?: string;
     /** Sub-menu row — text + hover bg/text */
     subMenuTrigger?: string;
-    /** Sub-menu panel — defaults to `content` when omitted */
+    /** Sub-menu panel — independent default from `content` */
     subMenuContent?: string;
     /** Chevron on sub-menu row */
     subMenuIcon?: string;
@@ -38,6 +39,10 @@ type Dropdown1Props = {
     onOpenChange?: (open: boolean) => void;
     /** Override coordinated bg/text/hover classes per layer */
     styles?: Partial<Dropdown1Styles>;
+    /** Menu panel surface — background, tokens, light/dark lock */
+    surface?: VelocisSurfaceConfig;
+    /** Trigger button surface */
+    triggerSurface?: VelocisSurfaceConfig;
     triggerClassName?: string;
     contentClassName?: string;
     contentWidth?: string;
@@ -58,20 +63,25 @@ type Dropdown1ItemProps = {
     className?: string;
     testId?: string;
 };
+type Dropdown1SubMenuPlacement = 'auto' | 'left' | 'right' | 'center';
 type Dropdown1SubMenuProps = {
     trigger: ReactNode;
     children: ReactNode;
+    /** Where the sub-panel opens relative to the main menu panel */
+    placement?: Dropdown1SubMenuPlacement;
     contentWidth?: string;
     /** Override sub-menu colors (defaults to root styles) */
     styles?: Pick<Dropdown1Styles, 'subMenuTrigger' | 'subMenuContent' | 'subMenuIcon'>;
+    /** Independent background/tokens — separate from root `surface` */
+    surface?: VelocisSurfaceConfig;
     className?: string;
 };
 
-declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
+declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, surface, triggerSurface, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
 
 declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
 
-declare function Dropdown1SubMenu({ trigger, children, contentWidth, styles: stylesProp, className, }: Dropdown1SubMenuProps): react.JSX.Element;
+declare function Dropdown1SubMenu({ trigger, children, placement, contentWidth, styles: stylesProp, surface, className, }: Dropdown1SubMenuProps): react.JSX.Element;
 
 type UseDropdown1Options = {
     defaultOpen?: boolean;
@@ -86,6 +96,7 @@ declare function useDropdown1(options?: UseDropdown1Options): UseDropdown1Result
 type Dropdown1ContextValue = {
     closeDropdown: () => void;
     styles: ResolvedDropdown1Styles;
+    contentRef: RefObject<HTMLDivElement | null>;
 };
 declare const Dropdown1Context: react.Context<Dropdown1ContextValue | null>;
 declare function useDropdown1Context(): Dropdown1ContextValue | null;
@@ -103,6 +114,8 @@ declare const DROPDOWN1_ITEM_DEFAULTS: {
 declare const DROPDOWN1_SUBMENU_DEFAULTS: {
     readonly contentWidth: "w-48";
     readonly hoverDelayMs: 100;
+    readonly placement: "auto";
+    readonly subMenuGap: 8;
 };
 
 /** Layout/structure only — colors come from `dropdown1Styles` + `styles` prop */
@@ -120,4 +133,4 @@ declare const Dropdown1: typeof Dropdown1Root & {
     SubMenu: typeof Dropdown1SubMenu;
 };
 
-export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };
+export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuPlacement, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
+import { VelocisSurfaceConfig } from '@velocis/theme';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 type Dropdown1Styles = {
@@ -13,7 +14,7 @@ type Dropdown1Styles = {
     item?: string;
     /** Sub-menu row — text + hover bg/text */
     subMenuTrigger?: string;
-    /** Sub-menu panel — defaults to `content` when omitted */
+    /** Sub-menu panel — independent default from `content` */
     subMenuContent?: string;
     /** Chevron on sub-menu row */
     subMenuIcon?: string;
@@ -38,6 +39,10 @@ type Dropdown1Props = {
     onOpenChange?: (open: boolean) => void;
     /** Override coordinated bg/text/hover classes per layer */
     styles?: Partial<Dropdown1Styles>;
+    /** Menu panel surface — background, tokens, light/dark lock */
+    surface?: VelocisSurfaceConfig;
+    /** Trigger button surface */
+    triggerSurface?: VelocisSurfaceConfig;
     triggerClassName?: string;
     contentClassName?: string;
     contentWidth?: string;
@@ -58,20 +63,25 @@ type Dropdown1ItemProps = {
     className?: string;
     testId?: string;
 };
+type Dropdown1SubMenuPlacement = 'auto' | 'left' | 'right' | 'center';
 type Dropdown1SubMenuProps = {
     trigger: ReactNode;
     children: ReactNode;
+    /** Where the sub-panel opens relative to the main menu panel */
+    placement?: Dropdown1SubMenuPlacement;
     contentWidth?: string;
     /** Override sub-menu colors (defaults to root styles) */
     styles?: Pick<Dropdown1Styles, 'subMenuTrigger' | 'subMenuContent' | 'subMenuIcon'>;
+    /** Independent background/tokens — separate from root `surface` */
+    surface?: VelocisSurfaceConfig;
     className?: string;
 };
 
-declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
+declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, surface, triggerSurface, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
 
 declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
 
-declare function Dropdown1SubMenu({ trigger, children, contentWidth, styles: stylesProp, className, }: Dropdown1SubMenuProps): react.JSX.Element;
+declare function Dropdown1SubMenu({ trigger, children, placement, contentWidth, styles: stylesProp, surface, className, }: Dropdown1SubMenuProps): react.JSX.Element;
 
 type UseDropdown1Options = {
     defaultOpen?: boolean;
@@ -86,6 +96,7 @@ declare function useDropdown1(options?: UseDropdown1Options): UseDropdown1Result
 type Dropdown1ContextValue = {
     closeDropdown: () => void;
     styles: ResolvedDropdown1Styles;
+    contentRef: RefObject<HTMLDivElement | null>;
 };
 declare const Dropdown1Context: react.Context<Dropdown1ContextValue | null>;
 declare function useDropdown1Context(): Dropdown1ContextValue | null;
@@ -103,6 +114,8 @@ declare const DROPDOWN1_ITEM_DEFAULTS: {
 declare const DROPDOWN1_SUBMENU_DEFAULTS: {
     readonly contentWidth: "w-48";
     readonly hoverDelayMs: 100;
+    readonly placement: "auto";
+    readonly subMenuGap: 8;
 };
 
 /** Layout/structure only — colors come from `dropdown1Styles` + `styles` prop */
@@ -120,4 +133,4 @@ declare const Dropdown1: typeof Dropdown1Root & {
     SubMenu: typeof Dropdown1SubMenu;
 };
 
-export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };
+export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuPlacement, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };

package/dist/index.js

@@ -2,6 +2,7 @@
 
 // src/Dropdown1.tsx
 import { cn as cn2, Portal, useDirection } from "@velocis/core";
+import { applySurface, useTheme } from "@velocis/theme";
 import {
   useCallback,
   useEffect,
@@ -22,7 +23,9 @@ var DROPDOWN1_ITEM_DEFAULTS = {
 };
 var DROPDOWN1_SUBMENU_DEFAULTS = {
   contentWidth: "w-48",
-  hoverDelayMs: 100
+  hoverDelayMs: 100,
+  placement: "auto",
+  subMenuGap: 8
 };
 
 // src/Dropdown1.variants.ts
@@ -56,7 +59,7 @@ var dropdown1SubMenuTriggerVariants = cva(
   "flex w-full cursor-default items-center justify-between px-4 py-2 text-sm transition-colors"
 );
 var dropdown1SubMenuContentVariants = cva(
-  "absolute top-0 right-full mr-2 w-48 rounded-velocis-md z-[10000]"
+  "fixed w-48 rounded-velocis-md z-[10000]"
 );
 
 // src/context/Dropdown1Context.tsx
@@ -94,7 +97,7 @@ function resolveDropdown1Styles(overrides) {
     content,
     item: overrides?.item ?? dropdown1Styles.item,
     subMenuTrigger: overrides?.subMenuTrigger ?? dropdown1Styles.subMenuTrigger,
-    subMenuContent: overrides?.subMenuContent ?? content,
+    subMenuContent: overrides?.subMenuContent ?? dropdown1Styles.subMenuContent,
     subMenuIcon: overrides?.subMenuIcon ?? dropdown1Styles.subMenuIcon
   };
 }
@@ -162,6 +165,8 @@ function Dropdown1Root({
   defaultOpen = false,
   onOpenChange,
   styles: stylesProp,
+  surface,
+  triggerSurface,
   triggerClassName,
   contentClassName,
   contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
@@ -174,12 +179,21 @@ function Dropdown1Root({
   contentTestId
 }) {
   const direction = useDirection();
+  const { resolvedTheme } = useTheme();
   const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
   const styles = resolveDropdown1Styles(stylesProp);
-  const dropdownRef = useRef(null);
+  const contentRef = useRef(null);
   const buttonRef = useRef(null);
   const [positionStyle, setPositionStyle] = useState({});
   const closeDropdown = useCallback(() => setOpen(false), [setOpen]);
+  const isInsideDropdownPanel = useCallback((node) => {
+    if (!node) return false;
+    if (contentRef.current?.contains(node)) return true;
+    if (node instanceof Element && node.closest("[data-velocis-dropdown1-submenu]")) {
+      return true;
+    }
+    return false;
+  }, []);
   const updatePosition = useCallback(() => {
     if (!buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
@@ -201,7 +215,7 @@ function Dropdown1Root({
   useEffect(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
+      if (buttonRef.current && !buttonRef.current.contains(event.target) && !isInsideDropdownPanel(event.target)) {
         setOpen(false);
       }
     };
@@ -213,7 +227,7 @@ function Dropdown1Root({
     const handleScroll = (event) => {
       if (!closeOnScroll) return;
       const target = event.target;
-      if (dropdownRef.current && target && !dropdownRef.current.contains(target) && !buttonRef.current?.contains(target)) {
+      if (target && !isInsideDropdownPanel(target) && !buttonRef.current?.contains(target)) {
         setOpen(false);
       }
     };
@@ -225,22 +239,26 @@ function Dropdown1Root({
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("scroll", handleScroll, true);
     };
-  }, [closeOnScroll, open, setOpen]);
-  const dropdownContent = open ? /* @__PURE__ */ jsx2(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ jsx2(
+  }, [closeOnScroll, isInsideDropdownPanel, open, setOpen]);
+  const contentSurfaceProps = applySurface(surface, resolvedTheme, {
+    className: cn2(
+      dropdown1ContentVariants(),
+      styles.content,
+      !fullWidth && contentWidth,
+      maxHeight && "overflow-y-auto",
+      contentClassName
+    )
+  });
+  const dropdownContent = open ? /* @__PURE__ */ jsx2(Dropdown1Context.Provider, { value: { closeDropdown, styles, contentRef }, children: /* @__PURE__ */ jsx2(
     "div",
     {
-      ref: dropdownRef,
+      ref: contentRef,
       role: "menu",
       "data-testid": contentTestId,
       dir: direction,
-      className: cn2(
-        dropdown1ContentVariants(),
-        styles.content,
-        !fullWidth && contentWidth,
-        maxHeight && "overflow-y-auto",
-        contentClassName
-      ),
+      ...contentSurfaceProps,
       style: {
+        ...contentSurfaceProps.style,
         ...positionStyle,
         zIndex: contentZIndex,
         maxHeight: maxHeight || void 0
@@ -248,6 +266,13 @@ function Dropdown1Root({
       children: /* @__PURE__ */ jsx2("div", { className: "py-1", children })
     }
   ) }) : null;
+  const triggerSurfaceProps = applySurface(triggerSurface, resolvedTheme, {
+    className: cn2(
+      dropdown1TriggerVariants({ fullWidth, disabled }),
+      styles.trigger,
+      triggerClassName
+    )
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "div",
@@ -266,11 +291,7 @@ function Dropdown1Root({
             "aria-haspopup": "menu",
             onClick: () => !disabled && setOpen(!open),
             "data-testid": testId,
-            className: cn2(
-              dropdown1TriggerVariants({ fullWidth, disabled }),
-              styles.trigger,
-              triggerClassName
-            ),
+            ...triggerSurfaceProps,
             children: [
               trigger,
               /* @__PURE__ */ jsx2(ChevronDownIcon, { className: styles.triggerIcon })
@@ -322,28 +343,101 @@ function Dropdown1Item({
 }
 
 // src/components/Dropdown1SubMenu.tsx
-import { cn as cn4 } from "@velocis/core";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { cn as cn4, Portal as Portal2, useDirection as useDirection2 } from "@velocis/core";
+import { applySurface as applySurface2, useTheme as useTheme2 } from "@velocis/theme";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/positioning/computeSubMenuStyle.ts
+import { isRTL as isRTL2 } from "@velocis/core";
+function resolvePlacement(placement, direction) {
+  if (placement === "auto") {
+    return isRTL2(direction) ? "left" : "right";
+  }
+  return placement;
+}
+function computeSubMenuStyle({
+  placement,
+  direction,
+  contentRect,
+  triggerRect,
+  subMenuWidth,
+  gap = 8
+}) {
+  const resolved = resolvePlacement(placement, direction);
+  const margin = 8;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (resolved === "center") {
+    const top2 = contentRect.bottom + gap;
+    const left2 = contentRect.left + (contentRect.width - subMenuWidth) / 2;
+    return {
+      position: "fixed",
+      top: Math.max(margin, Math.min(top2, vh - margin)),
+      left: Math.max(margin, Math.min(left2, vw - subMenuWidth - margin)),
+      width: subMenuWidth
+    };
+  }
+  const top = triggerRect.top;
+  let left;
+  if (resolved === "left") {
+    left = contentRect.left - subMenuWidth - gap;
+  } else {
+    left = contentRect.right + gap;
+  }
+  return {
+    position: "fixed",
+    top: Math.max(margin, Math.min(top, vh - margin)),
+    left: Math.max(margin, Math.min(left, vw - subMenuWidth - margin)),
+    width: subMenuWidth
+  };
+}
+
+// src/components/Dropdown1SubMenu.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Dropdown1SubMenu({
   trigger,
   children,
+  placement = DROPDOWN1_SUBMENU_DEFAULTS.placement,
   contentWidth = DROPDOWN1_SUBMENU_DEFAULTS.contentWidth,
   styles: stylesProp,
+  surface,
   className
 }) {
+  const direction = useDirection2();
+  const { resolvedTheme } = useTheme2();
   const context = useDropdown1Context();
   const subMenuTriggerStyles = stylesProp?.subMenuTrigger ?? context?.styles.subMenuTrigger;
   const subMenuContentStyles = stylesProp?.subMenuContent ?? context?.styles.subMenuContent;
   const subMenuIconStyles = stylesProp?.subMenuIcon ?? context?.styles.subMenuIcon;
   const [isOpen, setIsOpen] = useState2(false);
+  const [positionStyle, setPositionStyle] = useState2({});
   const timeoutRef = useRef2(null);
-  const containerRef = useRef2(null);
-  const handleMouseEnter = () => {
+  const triggerRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const updatePosition = useCallback2(() => {
+    const contentEl = context?.contentRef.current;
+    const triggerEl = triggerRef.current;
+    if (!contentEl || !triggerEl) return;
+    const subMenuWidth = parseContentWidthClass(contentWidth) ?? panelRef.current?.getBoundingClientRect().width ?? 192;
+    setPositionStyle(
+      computeSubMenuStyle({
+        placement,
+        direction,
+        contentRect: contentEl.getBoundingClientRect(),
+        triggerRect: triggerEl.getBoundingClientRect(),
+        subMenuWidth,
+        gap: DROPDOWN1_SUBMENU_DEFAULTS.subMenuGap
+      })
+    );
+  }, [contentWidth, context?.contentRef, direction, placement]);
+  const clearCloseTimeout = () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
+  };
+  const handleMouseEnter = () => {
+    clearCloseTimeout();
     setIsOpen(true);
   };
   const handleMouseLeave = () => {
@@ -351,6 +445,11 @@ function Dropdown1SubMenu({
       setIsOpen(false);
     }, DROPDOWN1_SUBMENU_DEFAULTS.hoverDelayMs);
   };
+  useEffect2(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen, updatePosition]);
   useEffect2(() => {
     return () => {
       if (timeoutRef.current) {
@@ -358,52 +457,54 @@ function Dropdown1SubMenu({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs2(
+  const panelSurfaceProps = applySurface2(surface, resolvedTheme, {
+    className: cn4(
+      dropdown1SubMenuContentVariants(),
+      subMenuContentStyles,
+      contentWidth !== "w-48" && contentWidth,
+      className
+    )
+  });
+  const subMenuPanel = isOpen ? /* @__PURE__ */ jsx4(
     "div",
     {
-      ref: containerRef,
-      className: "relative w-full",
+      ref: panelRef,
+      role: "menu",
+      "data-velocis-dropdown1-submenu": "",
+      ...panelSurfaceProps,
+      style: {
+        ...panelSurfaceProps.style,
+        ...positionStyle
+      },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      children: [
-        /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            role: "menuitem",
-            "aria-haspopup": "menu",
-            "aria-expanded": isOpen,
-            className: cn4(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
-            children: [
-              /* @__PURE__ */ jsx4("span", { className: "flex items-center gap-2", children: trigger }),
-              /* @__PURE__ */ jsx4(ChevronSubMenuIcon, { open: isOpen, className: cn4("transition-transform", subMenuIconStyles) })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx4(
-          "div",
-          {
-            role: "menu",
-            className: cn4(
-              dropdown1SubMenuContentVariants(),
-              subMenuContentStyles,
-              contentWidth !== "w-48" && contentWidth,
-              className
-            ),
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ jsx4("div", { className: "py-1", children })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx4("div", { className: "py-1", children })
     }
-  );
+  ) : null;
+  return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: triggerRef,
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        className: cn4(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "flex items-center gap-2", children: trigger }),
+          /* @__PURE__ */ jsx4(ChevronSubMenuIcon, { open: isOpen, className: cn4("transition-transform", subMenuIconStyles) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx4(Portal2, { children: subMenuPanel })
+  ] });
 }
 
 // src/hooks/useDropdown1.ts
-import { useCallback as useCallback2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useState as useState3 } from "react";
 function useDropdown1(options = {}) {
   const [open, setOpen] = useState3(options.defaultOpen ?? false);
-  const onOpenChange = useCallback2((next) => {
+  const onOpenChange = useCallback3((next) => {
     setOpen(next);
   }, []);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@velocis/dropdown1",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -24,7 +24,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "@velocis/core": "0.1.0",
-    "@velocis/theme": "0.1.1"
+    "@velocis/theme": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.2",