@enonic/ui 0.15.0 → 0.16.0

package/dist/enonic-ui.es.js

@@ -81,6 +81,33 @@ const useMenu = () => {
   }
   return context;
 };
+const MenubarMenuContext = createContext(void 0);
+const MenubarMenuProvider = MenubarMenuContext.Provider;
+function useMenubarMenu() {
+  const context = useContext(MenubarMenuContext);
+  if (!context) {
+    throw new Error("useMenubarMenu must be used within a Menubar.Menu component");
+  }
+  return context;
+}
+function useMenubarMenuOptional() {
+  return useContext(MenubarMenuContext);
+}
+const MenubarContext = createContext(void 0);
+const MenubarProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(MenubarContext.Provider, { value, children });
+};
+MenubarProvider.displayName = "MenubarProvider";
+const useMenubar = () => {
+  const context = useContext(MenubarContext);
+  if (!context) {
+    throw new Error("useMenubar must be used within a MenubarProvider");
+  }
+  return context;
+};
+const useMenubarOptional = () => {
+  return useContext(MenubarContext);
+};
 const SearchFieldContext = createContext(void 0);
 const SearchFieldProvider = ({ value, children }) => {
   return /* @__PURE__ */ u(SearchFieldContext.Provider, { value, children });
@@ -3266,17 +3293,18 @@ const buttonVariants = cva(
     "inline-flex items-center justify-center",
     "text-main font-semibold",
     "box-border rounded-sm transition-highlight",
-    "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-0",
+    "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-bdr-strong focus-visible:ring-offset-3 focus-visible:ring-offset-surface-neutral",
+    "active:bg-btn-active active:text-alt data-[active=true]:bg-btn-active data-[active=true]:text-alt",
     "disabled:select-none disabled:pointer-events-none disabled:opacity-30",
     "overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer"
   ],
   {
     variants: {
       variant: {
-        text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt",
-        filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-alt",
-        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active",
-        outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt border border-bdr-strong"
+        text: "bg-btn-primary hover:bg-btn-primary-hover hover:text-main",
+        filled: "bg-btn-secondary hover:bg-btn-secondary-hover hover:text-main",
+        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover",
+        outline: "bg-btn-primary hover:bg-btn-primary-hover border border-bdr-strong"
       },
       size: {
         sm: "h-9 px-3.5 gap-2 text-sm",
@@ -3366,6 +3394,23 @@ function useControlledState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue];
 }
+function useControlledStateWithNull(controlledValue, defaultValue, onChange) {
+  const internalControlled = controlledValue === null ? void 0 : controlledValue;
+  const internalOnChange = useCallback(
+    (value) => {
+      onChange?.(value ?? null);
+    },
+    [onChange]
+  );
+  const [internalValue, setInternalValue] = useControlledState(internalControlled, defaultValue, internalOnChange);
+  const setValue = useCallback(
+    (value) => {
+      setInternalValue(value ?? void 0);
+    },
+    [setInternalValue]
+  );
+  return [internalValue, setValue];
+}
 function useItemRegistry() {
   const itemsRef = useRef(/* @__PURE__ */ new Map());
   const registerItem = useCallback((id, disabled = false) => {
@@ -3701,10 +3746,7 @@ const checkboxBoxVariants = cva(
   {
     variants: {
       editable: {
-        true: [
-          "peer-focus-visible:outline-none peer-focus-visible:ring-3 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-0",
-          "peer-hover:outline-none peer-hover:ring-3 peer-hover:ring-ring/50 peer-hover:ring-offset-0"
-        ],
+        true: [],
         false: "opacity-30"
       },
       state: {
@@ -3721,9 +3763,7 @@ const checkboxBoxVariants = cva(
         error: [
           "border-error",
           "peer-checked:bg-error peer-checked:border-error",
-          "peer-indeterminate:bg-error peer-indeterminate:border-error",
-          "peer-focus-visible:border-error peer-focus-visible:ring-error/50",
-          "peer-hover:border-error peer-hover:ring-error/50"
+          "peer-indeterminate:bg-error peer-indeterminate:border-error"
         ]
       }
     },
@@ -3767,15 +3807,17 @@ const Checkbox = forwardRef(
       }
       setCheckedState(nextValue);
     };
-    return /* @__PURE__ */ u("div", { children: [
+    return /* @__PURE__ */ u("div", { className: "flex flex-col gap-1 w-fit", children: [
       /* @__PURE__ */ u(
         "label",
         {
           htmlFor: inputId,
           className: cn(
-            "relative flex items-center select-none gap-2",
+            "relative flex items-center select-none gap-2 my-0.75 rounded-xs leading-4",
             align === "right" && "flex-row-reverse justify-end",
             editable ? "cursor-pointer" : "cursor-default",
+            editable && "focus-within:outline-none focus-within:ring-3 focus-within:ring-bdr-strong focus-within:ring-offset-3 focus-within:ring-offset-surface-neutral",
+            error && editable && "focus-within:ring-error",
             className
           ),
           children: [
@@ -3824,7 +3866,7 @@ const Checkbox = forwardRef(
           ]
         }
       ),
-      state === "error" && errorMessage && /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2 mt-1 text-error leading-5", disabled && "opacity-30"), children: [
+      state === "error" && errorMessage && /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2 text-error leading-5", disabled && "opacity-30"), children: [
         /* @__PURE__ */ u(OctagonAlert, { size: 14, strokeWidth: 2.5 }),
         errorMessage
       ] })
@@ -3938,7 +3980,7 @@ const ComboboxRoot = ({
     }
     setStagedSelection(updateArrayIfChanged(appliedSelection));
   }, [stagingEnabled, appliedSelection]);
-  const [activeInternal, setActiveInternal] = useControlledState(controlledActive, defaultActive, setActive);
+  const [activeInternal, setActiveInternal] = useControlledStateWithNull(controlledActive, defaultActive, setActive);
   const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
   const setInputValue = useCallback(
     (next) => {
@@ -4121,13 +4163,13 @@ const comboboxControlVariants = cva(
   [
     "flex gap-2.5 items-center",
     "h-12 rounded-sm border bg-surface-neutral",
-    "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+    "focus-within:outline-none focus-within:ring-3 focus-within:ring-bdr-strong focus-within:ring-offset-3 focus-within:ring-offset-surface-neutral",
     "transition-highlight"
   ],
   {
     variants: {
       error: {
-        true: "border-error focus-within:border-error focus-within:ring-error/50",
+        true: "border-error focus-within:border-error focus-within:ring-error",
         false: "border-bdr-subtle focus-within:border-bdr-strong"
       },
       open: {
@@ -4166,34 +4208,32 @@ const ComboboxControl = ({ className, children, ...props }) => {
   );
 };
 ComboboxControl.displayName = "Combobox.Control";
-const ComboboxInput = forwardRef(
-  ({ placeholder, ...props }, ref) => {
-    const innerRef = useRef(null);
-    const { open, keyHandler, baseId, active, disabled, error } = useCombobox();
-    useEffect(() => {
-      if (open && !disabled) {
-        innerRef.current?.focus();
-      }
-    }, [open, disabled]);
-    return /* @__PURE__ */ u(
-      SearchField.Input,
-      {
-        ref: useComposedRefs(ref, innerRef),
-        id: `${baseId}-input`,
-        onKeyDown: keyHandler,
-        "aria-disabled": disabled,
-        "aria-invalid": error ?? void 0,
-        role: "combobox",
-        "aria-autocomplete": "list",
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-controls": `${baseId}-listbox`,
-        "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
-        ...props
-      }
-    );
-  }
-);
+const ComboboxInput = forwardRef((props, ref) => {
+  const innerRef = useRef(null);
+  const { open, keyHandler, baseId, active, disabled, error } = useCombobox();
+  useEffect(() => {
+    if (open && !disabled) {
+      innerRef.current?.focus();
+    }
+  }, [open, disabled]);
+  return /* @__PURE__ */ u(
+    SearchField.Input,
+    {
+      ref: useComposedRefs(ref, innerRef),
+      id: `${baseId}-input`,
+      onKeyDown: keyHandler,
+      "aria-disabled": disabled,
+      "aria-invalid": error ?? void 0,
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      "aria-controls": `${baseId}-listbox`,
+      "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
+      ...props
+    }
+  );
+});
 ComboboxInput.displayName = "Combobox.Input";
 const ComboboxSearch = ({ children, className, ...props }) => {
   const { inputValue, setInputValue } = useCombobox();
@@ -4202,17 +4242,17 @@ const ComboboxSearch = ({ children, className, ...props }) => {
     {
       value: inputValue,
       onChange: setInputValue,
-      className: cn(
-        "w-full pr-0",
-        "border-0 focus-within:border-0 focus-within:ring-0 focus-within:ring-offset-0",
-        className
-      ),
+      className: cn("w-full pr-0", "border-0 focus-within:border-0 focus-within:ring-0", className),
       ...props,
       children
     }
   );
 };
 ComboboxSearch.displayName = "Combobox.Search";
+const ComboboxSearchIcon = ({ className, ...props }) => {
+  return /* @__PURE__ */ u(SearchField.Icon, { className, ...props });
+};
+ComboboxSearchIcon.displayName = "Combobox.SearchIcon";
 const ComboboxToggle = ({ className, ...props }) => {
   const { open, setOpen, disabled } = useCombobox();
   return /* @__PURE__ */ u(
@@ -4280,7 +4320,7 @@ const Combobox = Object.assign(ComboboxRoot, {
   Control: ComboboxControl,
   Search: ComboboxSearch,
   Input: ComboboxInput,
-  SearchIcon: SearchField.Icon,
+  SearchIcon: ComboboxSearchIcon,
   Toggle: ComboboxToggle,
   Apply: ComboboxApply,
   Popup: ComboboxPopup
@@ -4594,14 +4634,14 @@ const inputContainerVariants = cva(
   [
     "relative flex rounded-sm overflow-hidden",
     "h-12 border focus-within:border-bdr-solid",
-    "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+    "focus-within:outline-none focus-within:ring-3 focus-within:ring-bdr-strong focus-within:ring-offset-3 focus-within:ring-offset-surface-neutral",
     "transition-highlight"
   ],
   {
     variants: {
       state: {
         default: "border-bdr-subtle focus-within:border-bdr-strong",
-        error: "border-error focus-within:border-error focus-within:ring-error/50"
+        error: "border-error focus-within:border-error focus-within:ring-error"
       },
       disabled: {
         true: "select-none"
@@ -4700,6 +4740,8 @@ const Link = forwardRef(
           "inline-flex items-center align-baseline gap-1",
           "text-sm font-normal underline underline-offset-3 decoration-1",
           "visited:text-link-visited hover:text-main-hover",
+          "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-bdr-strong focus-visible:bg-main focus-visible:text-rev",
+          "transition-highlight",
           className
         ),
         target,
@@ -4764,7 +4806,7 @@ const ListItemRoot = ({ children, className, selected, ...props }) => {
         selected && "bg-surface-primary-selected text-alt",
         className
       ),
-      "data-tone": selected && "inverse",
+      "data-tone": selected ? "inverse" : void 0,
       role: "listitem",
       ...props,
       children: [
@@ -4808,7 +4850,7 @@ const ListboxRoot = ({
     () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
     [isSelectionControlled, controlledSelection, uncontrolledSelection]
   );
-  const [active, updateActive] = useControlledState(controlledActive, defaultActive, setActive);
+  const [active, updateActive] = useControlledStateWithNull(controlledActive, defaultActive, setActive);
   const internalRegistry = useItemRegistry();
   const registerItem = externalRegisterItem ?? internalRegistry.registerItem;
   const unregisterItem = externalUnregisterItem ?? internalRegistry.unregisterItem;
@@ -4920,7 +4962,8 @@ const ListboxContent = forwardRef(
         className: cn(
           "flex flex-col items-start grow shrink-0 basis-0",
           "max-h-100 overflow-y-auto",
-          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50",
+          "focus-within:outline-none focus-within:ring-3 focus-within:ring-bdr-strong focus-within:ring-offset-3 focus-within:ring-offset-surface-neutral",
+          "transition-highlight",
           disabled && "pointer-events-none select-none opacity-30",
           className
         ),
@@ -4995,7 +5038,7 @@ const ListboxItem = ({ value, disabled = false, children, className, ...props })
         "aria-disabled": isDisabled ?? void 0,
         "data-value": value,
         "data-active": isActive || void 0,
-        "data-tone": isSelected && "inverse",
+        "data-tone": isSelected ? "inverse" : void 0,
         onClick: handleClick,
         ...props,
         children
@@ -5068,10 +5111,11 @@ const MenuTrigger = forwardRef(
         type: asChild ? void 0 : "button",
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        "data-active": open,
         "aria-controls": open ? menuId : void 0,
         onClick: handleClick,
         onKeyDown: handleKeyDown,
-        className,
+        className: cn(open && "bg-btn-active text-alt", className),
         ...props,
         children
       }
@@ -5265,7 +5309,7 @@ MenuContent.displayName = "Menu.Content";
 const menuItemVariants = cva("flex w-full items-center px-4.5 py-2.5 gap-x-1.25 cursor-pointer text-sm outline-none", {
   variants: {
     active: {
-      true: "bg-surface-primary-selected",
+      true: "bg-surface-primary-selected text-alt",
       false: ""
     },
     disabled: {
@@ -5277,7 +5321,7 @@ const menuItemVariants = cva("flex w-full items-center px-4.5 py-2.5 gap-x-1.25
     {
       active: true,
       disabled: false,
-      class: "text-alt outline-none ring-3 ring-inset ring-bdr-strong"
+      class: "focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-bdr-strong hover:bg-surface-primary-selected hover:text-alt"
     }
   ],
   defaultVariants: {
@@ -5285,59 +5329,102 @@ const menuItemVariants = cva("flex w-full items-center px-4.5 py-2.5 gap-x-1.25
     disabled: false
   }
 });
-const MenuItem = ({
-  id: providedId,
-  asChild = false,
-  disabled = false,
-  onSelect,
-  className,
-  children,
-  ...props
-}) => {
-  const id = usePrefixedId(providedId, providedId ? void 0 : "menu-item");
-  const { active, setActive, setOpen, registerItem, unregisterItem } = useMenu();
-  const isActive = active === id;
-  const isDisabled = disabled;
-  useEffect(() => {
-    registerItem(id, disabled);
-    return () => unregisterItem(id);
-  }, [id, disabled, registerItem, unregisterItem]);
-  const handleClick = useCallback(() => {
-    if (isDisabled) {
-      return;
-    }
-    const event = new Event("select", { bubbles: true, cancelable: true });
-    onSelect?.(event);
-    if (!event.defaultPrevented) {
-      setOpen(false);
-    }
-  }, [isDisabled, onSelect, setOpen]);
-  const handlePointerMove = useCallback(() => {
-    if (!isActive) {
-      setActive(id);
-    }
-  }, [isActive, setActive, id]);
-  const handlePointerLeave = useCallback(() => {
-    setActive(void 0);
-  }, [setActive]);
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ u(
-    Comp,
-    {
-      id,
-      role: "menuitem",
-      "aria-disabled": isDisabled,
-      "data-active": isActive || void 0,
-      "data-disabled": isDisabled || void 0,
-      className: cn(menuItemVariants({ active: isActive, disabled: isDisabled }), className),
-      onClick: handleClick,
-      onPointerMove: handlePointerMove,
-      onPointerLeave: handlePointerLeave,
-      ...props,
-      children
-    }
-  );
-};
+const MenuItem = forwardRef(
+  ({
+    id: providedId,
+    asChild = false,
+    disabled = false,
+    onSelect,
+    className,
+    children,
+    onClick,
+    onPointerMove,
+    onPointerLeave,
+    onFocus,
+    ...props
+  }, ref) => {
+    const id = usePrefixedId(providedId, providedId ? void 0 : "menu-item");
+    const { active, setActive, setOpen, registerItem, unregisterItem, getItems, isItemDisabled } = useMenu();
+    const isActive = active === id;
+    const isDisabled = disabled;
+    const itemRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, itemRef);
+    useEffect(() => {
+      registerItem(id, disabled);
+      return () => unregisterItem(id);
+    }, [id, disabled, registerItem, unregisterItem]);
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (isDisabled) {
+          return;
+        }
+        const event = new Event("select", { bubbles: true, cancelable: true });
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(false);
+        }
+      },
+      [isDisabled, onSelect, setOpen, onClick]
+    );
+    const handlePointerMove = useCallback(
+      (e) => {
+        onPointerMove?.(e);
+        if (!isActive && !isDisabled) {
+          setActive(id);
+        }
+      },
+      [isActive, setActive, id, isDisabled, onPointerMove]
+    );
+    const handlePointerLeave = useCallback(
+      (e) => {
+        onPointerLeave?.(e);
+        if (document.activeElement !== itemRef.current) {
+          setActive(void 0);
+        }
+      },
+      [setActive, onPointerLeave, itemRef]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        onFocus?.(e);
+        if (isDisabled) return;
+        setActive(id);
+      },
+      [onFocus, isDisabled, setActive, id]
+    );
+    const items = getItems();
+    const firstItem = items.length > 0 ? items[0] : void 0;
+    const fallbackFocusableId = active ?? items.find((itemId) => !isItemDisabled(itemId)) ?? firstItem ?? id;
+    const isFocusable = !isDisabled && fallbackFocusableId === id;
+    useEffect(() => {
+      if (!isDisabled && isActive && document.activeElement !== itemRef.current) {
+        itemRef.current?.focus();
+      }
+    }, [isActive, isDisabled]);
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: composedRefs,
+        id,
+        role: "menuitem",
+        tabIndex: isDisabled ? -1 : isFocusable ? 0 : -1,
+        "aria-disabled": isDisabled,
+        "data-active": isActive || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-tone": isActive ? "inverse" : void 0,
+        className: cn(menuItemVariants({ active: isActive, disabled: isDisabled }), className),
+        onClick: handleClick,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        onFocus: handleFocus,
+        ...props,
+        children
+      }
+    );
+  }
+);
 MenuItem.displayName = "Menu.Item";
 const MenuLabel = forwardRef(({ className, children, ...props }, ref) => {
   return /* @__PURE__ */ u("div", { ref, className: cn("px-3 py-1.5 text-xs font-semibold text-subtle", className), ...props, children });
@@ -5365,6 +5452,807 @@ const Menu = Object.assign(MenuRoot, {
   Label: MenuLabel,
   Separator: MenuSeparator
 });
+const MenubarContentContext = createContext(void 0);
+function useMenubarContent() {
+  const context = useContext(MenubarContentContext);
+  if (!context) {
+    throw new Error("Menubar menu item components must be used within Menubar.Content");
+  }
+  return context;
+}
+const MenubarRoot = ({ defaultActive, onActiveChange, id, children }) => {
+  const menubarId = usePrefixedId(id, "menubar");
+  const menubarRef = useRef(null);
+  const [active, setActiveInternal] = useState(defaultActive);
+  const setActive = useCallback(
+    (value2) => {
+      setActiveInternal(value2);
+      onActiveChange?.(value2);
+    },
+    [onActiveChange]
+  );
+  const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
+  const [openMenuId, setOpenMenuId] = useState(void 0);
+  const value = useMemo(
+    () => ({
+      active,
+      setActive,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled,
+      openMenuId,
+      setOpenMenuId,
+      menubarId,
+      menubarRef
+    }),
+    [active, setActive, registerItem, unregisterItem, getItems, isItemDisabled, openMenuId, menubarId]
+  );
+  return /* @__PURE__ */ u(MenubarProvider, { value, children });
+};
+MenubarRoot.displayName = "Menubar.Root";
+const MenubarNav = forwardRef(
+  ({ "aria-label": ariaLabel, loop = true, className, children, onKeyDown, onBlur, ...props }, ref) => {
+    const { active, setActive, getItems, isItemDisabled, menubarId, menubarRef, setOpenMenuId, openMenuId } = useMenubar();
+    const composedRefs = useComposedRefs(ref, menubarRef);
+    const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
+      getItems,
+      isItemDisabled,
+      active,
+      setActive,
+      loop,
+      orientation: "horizontal",
+      onSelect: (id) => {
+        const itemElement = document.getElementById(id);
+        if (itemElement) {
+          itemElement.click();
+        }
+      }
+    });
+    const handleKeyDown_ = useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        const isActionKey = e.key === "ArrowDown" || e.key === "Enter" || e.key === " ";
+        if (isActionKey && active) {
+          const activeElement = document.getElementById(active);
+          if (activeElement && activeElement.getAttribute("aria-haspopup") === "menu") {
+            e.preventDefault();
+            setOpenMenuId(active);
+            return;
+          }
+        }
+        if (e.key === "ArrowUp" && active) {
+          const activeElement = document.getElementById(active);
+          if (activeElement && activeElement.getAttribute("aria-haspopup") === "menu") {
+            e.preventDefault();
+            setOpenMenuId(active);
+            return;
+          }
+        }
+        handleNavKeyDown(e);
+      },
+      [onKeyDown, handleNavKeyDown, active, setOpenMenuId]
+    );
+    const handleBlur = useCallback(
+      (e) => {
+        onBlur?.(e);
+        const relatedTarget = e.relatedTarget;
+        if (menubarRef?.current && relatedTarget instanceof Node) {
+          if (menubarRef.current.contains(relatedTarget)) {
+            return;
+          }
+        }
+        if (openMenuId) {
+          return;
+        }
+        setActive(void 0);
+      },
+      [onBlur, setActive, menubarRef, openMenuId]
+    );
+    useEffect(() => {
+      if (!active || !menubarRef?.current) {
+        return;
+      }
+      const el = menubarRef.current.querySelector(`#${active}`);
+      if (el) {
+        el.scrollIntoView({
+          block: "nearest",
+          inline: "nearest",
+          behavior: "auto"
+        });
+      }
+    }, [active, menubarRef]);
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: composedRefs,
+        id: menubarId,
+        role: "menubar",
+        "aria-label": ariaLabel,
+        "aria-orientation": "horizontal",
+        tabIndex: -1,
+        className: cn("flex items-center gap-1.5 p-1.5", className),
+        onKeyDown: handleKeyDown_,
+        onBlur: handleBlur,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenubarNav.displayName = "Menubar.Nav";
+const MenubarButton = forwardRef(
+  ({
+    id: providedId,
+    disabled = false,
+    onSelect,
+    asChild,
+    className,
+    children,
+    onClick,
+    onPointerMove,
+    onPointerDown,
+    onPointerLeave,
+    onFocus,
+    ...props
+  }, ref) => {
+    const id = usePrefixedId(providedId, "menubar-button");
+    const { active, setActive, registerItem, unregisterItem, openMenuId, getItems, isItemDisabled } = useMenubar();
+    const isActive = active === id;
+    const buttonRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, buttonRef);
+    useEffect(() => {
+      registerItem(id, disabled);
+      return () => unregisterItem(id);
+    }, [id, disabled, registerItem, unregisterItem]);
+    const handlePointerDown = useCallback(
+      (e) => {
+        onPointerDown?.(e);
+        if (disabled) return;
+        setActive(id);
+      },
+      [disabled, id, onPointerDown, setActive]
+    );
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (disabled) return;
+        if (!isActive) {
+          setActive(id);
+        }
+        const event = new Event("select", { bubbles: true, cancelable: true });
+        onSelect?.(event);
+      },
+      [disabled, isActive, onClick, setActive, id, onSelect]
+    );
+    const handlePointerMove = useCallback(
+      (e) => {
+        onPointerMove?.(e);
+        if (!disabled && openMenuId && active !== void 0) {
+          setActive(id);
+        }
+      },
+      [disabled, openMenuId, setActive, active, id, onPointerMove]
+    );
+    const handlePointerLeave = useCallback(
+      (e) => {
+        onPointerLeave?.(e);
+        if ((!openMenuId || openMenuId !== id) && document.activeElement !== buttonRef.current) {
+          setActive(void 0);
+        }
+      },
+      [openMenuId, id, active, setActive, onPointerLeave, buttonRef]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        onFocus?.(e);
+        if (disabled) return;
+        setActive(id);
+      },
+      [onFocus, disabled, setActive, id]
+    );
+    const items = getItems();
+    const firstItem = items.length > 0 ? items[0] : void 0;
+    const fallbackFocusableId = active ?? items.find((itemId) => !isItemDisabled(itemId)) ?? firstItem ?? id;
+    const isFocusable = !disabled && fallbackFocusableId === id;
+    useEffect(() => {
+      if (!disabled && isActive && document.activeElement !== buttonRef.current) {
+        buttonRef.current?.focus();
+      }
+    }, [isActive, disabled]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: composedRefs,
+        id,
+        type: asChild ? void 0 : "button",
+        role: "menuitem",
+        tabIndex: disabled ? -1 : isFocusable ? 0 : -1,
+        "aria-disabled": disabled,
+        "data-disabled": disabled || void 0,
+        "data-tone": isActive ? "inverse" : void 0,
+        className: cn(
+          "group px-4.5 py-2.5 rounded-sm text-sm cursor-pointer outline-none",
+          "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-bdr-strong focus-visible:ring-offset-3",
+          className
+        ),
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        onFocus: handleFocus,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenubarButton.displayName = "Menubar.Button";
+const MenubarSeparator = forwardRef(
+  ({ className, ...props }, ref) => {
+    const menuContentContext = useContext(MenubarContentContext);
+    const isInsideMenuDropdown = menuContentContext !== void 0;
+    if (isInsideMenuDropdown) {
+      return /* @__PURE__ */ u(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: cn("my-1 h-px w-full bg-bdr-subtle", className),
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn("mx-1 w-px h-4 bg-bdr-subtle", className),
+        ...props
+      }
+    );
+  }
+);
+MenubarSeparator.displayName = "Menubar.Separator";
+const MenubarMenu = ({ id: providedId, disabled = false, children }) => {
+  const menuId = usePrefixedId(providedId, "menubar-menu");
+  const contentId = `${menuId}-content`;
+  const triggerRef = useRef(null);
+  const menubarContext = useMenubar();
+  const { registerItem, unregisterItem, openMenuId, setOpenMenuId } = menubarContext;
+  const [open, setOpenInternal] = useState(false);
+  useEffect(() => {
+    registerItem(menuId, disabled);
+    return () => unregisterItem(menuId);
+  }, [menuId, disabled, registerItem, unregisterItem]);
+  useEffect(() => {
+    if (openMenuId === menuId && !open) {
+      setOpenInternal(true);
+    } else if (openMenuId !== menuId && open) {
+      setOpenInternal(false);
+    }
+  }, [openMenuId, menuId, open]);
+  const setOpen = useCallback(
+    (newOpen) => {
+      setOpenInternal(newOpen);
+      setOpenMenuId(newOpen ? menuId : void 0);
+    },
+    [menuId, setOpenMenuId]
+  );
+  const value = useMemo(
+    () => ({
+      menuId,
+      contentId,
+      open,
+      setOpen,
+      menubarContext,
+      triggerRef
+    }),
+    [menuId, contentId, open, setOpen, menubarContext]
+  );
+  return /* @__PURE__ */ u(MenubarMenuProvider, { value, children });
+};
+MenubarMenu.displayName = "Menubar.Menu";
+const MenubarTrigger = forwardRef(
+  ({
+    asChild,
+    className,
+    children,
+    onClick,
+    onKeyDown,
+    onPointerMove,
+    onPointerDown,
+    onPointerLeave,
+    onFocus,
+    ...props
+  }, ref) => {
+    const { menuId, contentId, open, setOpen, triggerRef, menubarContext } = useMenubarMenu();
+    const { active, setActive, openMenuId, isItemDisabled, getItems } = menubarContext;
+    const composedRefs = useComposedRefs(ref, triggerRef);
+    const isActive = active === menuId;
+    const disabled = isItemDisabled(menuId);
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (disabled) return;
+        setOpen(!open);
+      },
+      [disabled, open, setOpen, onClick]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        if (disabled) return;
+        if (e.key === "ArrowDown" && !open) {
+          e.preventDefault();
+          setOpen(true);
+        } else if ((e.key === " " || e.key === "Enter") && !open) {
+          e.preventDefault();
+          setOpen(true);
+        }
+      },
+      [disabled, open, setOpen, onKeyDown]
+    );
+    const handlePointerDown = useCallback(
+      (e) => {
+        onPointerDown?.(e);
+        if (disabled) return;
+        setActive(menuId);
+      },
+      [disabled, menuId, onPointerDown, setActive]
+    );
+    const handlePointerMove = useCallback(
+      (e) => {
+        onPointerMove?.(e);
+        if (disabled) return;
+        if (active === void 0) return;
+        setActive(menuId);
+        if (openMenuId && openMenuId !== menuId) {
+          setOpen(true);
+        }
+      },
+      [disabled, openMenuId, menuId, active, setActive, setOpen, onPointerMove]
+    );
+    const handlePointerLeave = useCallback(
+      (e) => {
+        onPointerLeave?.(e);
+        if (!open && document.activeElement !== triggerRef?.current) {
+          setActive(void 0);
+        }
+      },
+      [open, setActive, onPointerLeave, triggerRef]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        onFocus?.(e);
+        if (disabled) return;
+        setActive(menuId);
+      },
+      [onFocus, disabled, setActive, menuId]
+    );
+    const items = getItems();
+    const firstItem = items.length > 0 ? items[0] : void 0;
+    const fallbackFocusableId = active ?? items.find((itemId) => !isItemDisabled(itemId)) ?? firstItem ?? menuId;
+    const isFocusable = !disabled && fallbackFocusableId === menuId;
+    useEffect(() => {
+      if (!disabled && isActive && triggerRef && document.activeElement !== triggerRef.current) {
+        triggerRef.current?.focus();
+      }
+    }, [isActive, disabled, triggerRef]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: composedRefs,
+        id: menuId,
+        type: asChild ? void 0 : "button",
+        role: "menuitem",
+        tabIndex: disabled ? -1 : isFocusable ? 0 : -1,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? contentId : void 0,
+        "aria-disabled": disabled,
+        "data-active": open,
+        "data-disabled": disabled || void 0,
+        "data-state": open ? "open" : "closed",
+        "data-tone": isActive ? "inverse" : void 0,
+        className: cn(
+          "group px-4.5 py-2.5 rounded-sm text-sm cursor-pointer outline-none",
+          "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-bdr-strong focus-visible:ring-offset-3",
+          open && "bg-btn-active text-alt",
+          disabled && "opacity-30 cursor-not-allowed pointer-events-none",
+          className
+        ),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        onFocus: handleFocus,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenubarTrigger.displayName = "Menubar.Trigger";
+const MenubarPortal = ({ container, forceMount = false, children }) => {
+  const { open } = useMenubarMenu();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  const shouldRender = forceMount || open;
+  if (!shouldRender) {
+    return null;
+  }
+  const targetContainer = container ?? document.body;
+  return createPortal(/* @__PURE__ */ u(Fragment, { children }), targetContainer);
+};
+MenubarPortal.displayName = "Menubar.Portal";
+const MenubarContent = forwardRef(
+  ({
+    align = "start",
+    loop = true,
+    forceMount = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    className,
+    children,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const { menuId, contentId, open, setOpen, triggerRef, menubarContext } = useMenubarMenu();
+    const { getItems: getMenubarItems, setActive: setMenubarActive } = menubarContext;
+    const contentRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, contentRef);
+    const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
+    const [active, setActive] = useState(void 0);
+    const [position, setPosition] = useState(null);
+    if (!open && !forceMount) {
+      return null;
+    }
+    const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
+      getItems,
+      isItemDisabled,
+      active,
+      setActive,
+      loop,
+      orientation: "vertical",
+      onSelect: (id) => {
+        const itemElement = document.getElementById(id);
+        if (itemElement) {
+          itemElement.click();
+        }
+      }
+    });
+    const handleKeyDown_ = useCallback(
+      (e) => {
+        onKeyDown?.(e);
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(false);
+          onEscapeKeyDown?.(e);
+          triggerRef?.current?.focus();
+          return;
+        }
+        if (e.key === "Tab") {
+          setOpen(false);
+          return;
+        }
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          e.preventDefault();
+          const menubarItems = getMenubarItems();
+          const currentIndex = menubarItems.indexOf(menuId);
+          if (currentIndex === -1) return;
+          const direction = e.key === "ArrowRight" ? 1 : -1;
+          let nextIndex = (currentIndex + direction + menubarItems.length) % menubarItems.length;
+          let attempts = 0;
+          while (attempts < menubarItems.length && menubarContext.isItemDisabled(menubarItems[nextIndex])) {
+            nextIndex = (nextIndex + direction + menubarItems.length) % menubarItems.length;
+            attempts += 1;
+          }
+          const nextMenuId = menubarItems[nextIndex];
+          if (!nextMenuId || menubarContext.isItemDisabled(nextMenuId)) {
+            return;
+          }
+          setMenubarActive(nextMenuId);
+          const nextElement = document.getElementById(nextMenuId);
+          nextElement?.focus();
+          if (nextElement && nextElement.getAttribute("aria-haspopup") === "menu") {
+            menubarContext.setOpenMenuId(nextMenuId);
+          } else {
+            setOpen(false);
+          }
+          return;
+        }
+        handleNavKeyDown(e);
+      },
+      [
+        onKeyDown,
+        setOpen,
+        onEscapeKeyDown,
+        menuId,
+        getMenubarItems,
+        setMenubarActive,
+        menubarContext,
+        handleNavKeyDown,
+        triggerRef
+      ]
+    );
+    useEffect(() => {
+      if (open && position !== null) {
+        const items = getItems();
+        const firstItem = items.length > 0 ? items[0] : void 0;
+        const firstSelectableItem = items.find((itemId) => !isItemDisabled(itemId)) ?? firstItem;
+        if (firstSelectableItem) {
+          setActive(firstSelectableItem);
+        }
+      } else if (!open) {
+        setActive(void 0);
+      }
+    }, [open, position, getItems, isItemDisabled]);
+    useEffect(() => {
+      if (!open || !triggerRef?.current || !contentRef.current) {
+        return;
+      }
+      const updatePosition = () => {
+        if (!triggerRef?.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const padding = 10;
+        let top = triggerRect.bottom;
+        let left;
+        let right;
+        if (top + contentRect.height > viewportHeight - padding) {
+          const topPosition = triggerRect.top - contentRect.height;
+          if (topPosition >= padding) {
+            top = topPosition;
+          }
+        }
+        if (align === "start") {
+          left = triggerRect.left;
+          if (left + contentRect.width > viewportWidth - padding) {
+            left = void 0;
+            right = viewportWidth - triggerRect.right;
+          }
+        } else {
+          right = viewportWidth - triggerRect.right;
+          if (triggerRect.right - contentRect.width < padding) {
+            right = void 0;
+            left = triggerRect.left;
+          }
+        }
+        setPosition({ top, left, right });
+      };
+      updatePosition();
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, align, triggerRef]);
+    useEffect(() => {
+      if (!open) return;
+      const handlePointerDown = (e) => {
+        const target = e.target;
+        if (triggerRef?.current?.contains(target)) {
+          return;
+        }
+        if (contentRef.current?.contains(target)) {
+          return;
+        }
+        onPointerDownOutside?.(e);
+        onInteractOutside?.(e);
+        setOpen(false);
+      };
+      document.addEventListener("pointerdown", handlePointerDown);
+      return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [open, setOpen, onPointerDownOutside, onInteractOutside, triggerRef]);
+    const contentContextValue = useMemo(
+      () => ({
+        registerItem,
+        unregisterItem,
+        getItems,
+        isItemDisabled,
+        active,
+        setActive
+      }),
+      [registerItem, unregisterItem, getItems, isItemDisabled, active, setActive]
+    );
+    const isPositioned = position !== null;
+    return /* @__PURE__ */ u(MenubarContentContext.Provider, { value: contentContextValue, children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: composedRefs,
+        id: contentId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": menuId,
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        "data-align": align,
+        style: {
+          position: "fixed",
+          top: position ? `${position.top}px` : "0",
+          left: position?.left !== void 0 ? `${position.left}px` : void 0,
+          right: position?.right !== void 0 ? `${position.right}px` : void 0,
+          zIndex: 9999,
+          visibility: isPositioned ? "visible" : "hidden"
+        },
+        className: cn(
+          "flex flex-col items-start w-fit py-2.5 mt-2.5 overflow-hidden",
+          "rounded-sm border border-bdr-subtle bg-surface-neutral shadow-lg",
+          // Animations
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className
+        ),
+        onKeyDown: handleKeyDown_,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+MenubarContent.displayName = "Menubar.Content";
+const menubarItemVariants = cva(
+  "flex w-full items-center px-4.5 py-2.5 gap-x-1.25 cursor-pointer text-sm outline-none",
+  {
+    variants: {
+      active: {
+        true: "bg-surface-primary-selected text-alt",
+        false: ""
+      },
+      disabled: {
+        true: "hover:bg-transparent opacity-30 select-none pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        active: true,
+        disabled: false,
+        class: "focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-bdr-strong"
+      },
+      {
+        active: false,
+        disabled: false,
+        class: "hover:bg-surface-primary-hover"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+const MenubarItem = forwardRef(
+  ({
+    id: providedId,
+    disabled = false,
+    onSelect,
+    asChild,
+    className,
+    children,
+    onClick,
+    onPointerMove,
+    onPointerLeave,
+    onFocus,
+    ...props
+  }, ref) => {
+    const id = usePrefixedId(providedId, "menubar-item");
+    const { registerItem, unregisterItem, active, setActive, getItems, isItemDisabled } = useMenubarContent();
+    const { setOpen, triggerRef } = useMenubarMenu();
+    const isActive = active === id;
+    const itemRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, itemRef);
+    useEffect(() => {
+      registerItem(id, disabled);
+      return () => unregisterItem(id);
+    }, [id, disabled, registerItem, unregisterItem]);
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (disabled) return;
+        const event = new Event("select", { bubbles: true, cancelable: true });
+        onSelect?.(event);
+        setOpen(false);
+        triggerRef?.current?.focus();
+      },
+      [disabled, onClick, onSelect, setOpen, triggerRef]
+    );
+    const handlePointerMove = useCallback(
+      (e) => {
+        onPointerMove?.(e);
+        if (!disabled) {
+          setActive(id);
+        }
+      },
+      [disabled, id, setActive, onPointerMove]
+    );
+    const handlePointerLeave = useCallback(
+      (e) => {
+        onPointerLeave?.(e);
+        if (document.activeElement !== itemRef.current) {
+          setActive(void 0);
+        }
+      },
+      [setActive, onPointerLeave, itemRef]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        onFocus?.(e);
+        if (disabled) return;
+        setActive(id);
+      },
+      [onFocus, disabled, setActive, id]
+    );
+    const items = getItems();
+    const firstItem = items.length > 0 ? items[0] : void 0;
+    const fallbackFocusableId = active ?? items.find((itemId) => !isItemDisabled(itemId)) ?? firstItem ?? id;
+    const isFocusable = !disabled && fallbackFocusableId === id;
+    useEffect(() => {
+      if (!disabled && isActive && document.activeElement !== itemRef.current) {
+        itemRef.current?.focus();
+      }
+    }, [isActive, disabled]);
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: composedRefs,
+        id,
+        role: "menuitem",
+        tabIndex: disabled ? -1 : isFocusable ? 0 : -1,
+        "aria-disabled": disabled,
+        "data-active": isActive || void 0,
+        "data-disabled": disabled || void 0,
+        "data-tone": isActive ? "inverse" : void 0,
+        className: cn(menubarItemVariants({ active: isActive, disabled }), className),
+        onClick: handleClick,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+        onFocus: handleFocus,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenubarItem.displayName = "Menubar.Item";
+const MenubarLabel = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("div", { ref, role: "none", className: cn("px-3 py-1.5 text-xs font-semibold text-subtle", className), ...props, children });
+  }
+);
+MenubarLabel.displayName = "Menubar.Label";
+const Menubar = Object.assign(MenubarRoot, {
+  Root: MenubarRoot,
+  Nav: MenubarNav,
+  Content: MenubarContent,
+  // Dropdown menu content (context-aware via MenubarMenu)
+  Button: MenubarButton,
+  Separator: MenubarSeparator,
+  Menu: MenubarMenu,
+  Trigger: MenubarTrigger,
+  Portal: MenubarPortal,
+  Item: MenubarItem,
+  Label: MenubarLabel
+});
 const SearchFieldRoot = ({
   id,
   value,
@@ -5401,7 +6289,7 @@ const SearchFieldRoot = ({
         "relative flex gap-2.5 items-center rounded-sm overflow-hidden",
         "h-11.5 px-4.5 py-3",
         "border border-bdr-subtle focus-within:border-bdr-strong",
-        "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+        "focus-within:outline-none focus-within:ring-3 focus-within:ring-bdr-strong focus-within:ring-offset-3 focus-within:ring-offset-surface-neutral",
         "transition-highlight",
         readOnly ? "bg-surface-primary" : "bg-surface-neutral",
         disabled && "pointer-events-none select-none opacity-30",
@@ -5777,6 +6665,10 @@ export {
   ListboxProvider,
   Menu,
   MenuProvider,
+  Menubar,
+  MenubarMenuContext,
+  MenubarMenuProvider,
+  MenubarProvider,
   SearchField,
   SearchFieldProvider,
   SelectableListItem,
@@ -5793,11 +6685,16 @@ export {
   useCombobox,
   useComposedRefs,
   useControlledState,
+  useControlledStateWithNull,
   useDialog,
   useItemRegistry,
   useKeyboardNavigation,
   useListbox,
   useMenu,
+  useMenubar,
+  useMenubarMenu,
+  useMenubarMenuOptional,
+  useMenubarOptional,
   usePrefixedId,
   useScrollLock,
   useSearchField