@fragments-sdk/ui 0.17.0 → 0.18.0

package/dist/components/Header/Header.module.scss.cjs

@@ -1,26 +1,33 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const header = "_header_1j4bo_1";
-const fixed = "_fixed_1j4bo_13";
-const sticky = "_sticky_1j4bo_20";
-const container = "_container_1j4bo_25";
-const brand = "_brand_1j4bo_38";
-const nav = "_nav_1j4bo_56";
-const navList = "_navList_1j4bo_66";
-const navItem = "_navItem_1j4bo_75";
-const navItemActive = "_navItemActive_1j4bo_123";
-const navMenuTrigger = "_navMenuTrigger_1j4bo_137";
-const navMenuChevron = "_navMenuChevron_1j4bo_142";
-const navMenuPositioner = "_navMenuPositioner_1j4bo_150";
-const navMenuPopup = "_navMenuPopup_1j4bo_155";
-const navMenuItem = "_navMenuItem_1j4bo_176";
-const navMenuItemActive = "_navMenuItemActive_1j4bo_212";
-const search = "_search_1j4bo_234";
-const searchExpandable = "_searchExpandable_1j4bo_244";
-const actions = "_actions_1j4bo_248";
-const trigger = "_trigger_1j4bo_255";
-const spacer = "_spacer_1j4bo_297";
-const skipLink = "_skipLink_1j4bo_301";
+const header = "_header_1ult6_1";
+const fixed = "_fixed_1ult6_13";
+const sticky = "_sticky_1ult6_20";
+const container = "_container_1ult6_25";
+const brand = "_brand_1ult6_38";
+const nav = "_nav_1ult6_56";
+const navList = "_navList_1ult6_66";
+const navItem = "_navItem_1ult6_75";
+const navItemActive = "_navItemActive_1ult6_123";
+const navMenuTrigger = "_navMenuTrigger_1ult6_137";
+const navMenuChevron = "_navMenuChevron_1ult6_142";
+const navMenuPositioner = "_navMenuPositioner_1ult6_150";
+const navMenuPopup = "_navMenuPopup_1ult6_155";
+const navMenuItem = "_navMenuItem_1ult6_176";
+const navMenuItemActive = "_navMenuItemActive_1ult6_212";
+const search = "_search_1ult6_234";
+const searchExpandable = "_searchExpandable_1ult6_244";
+const actions = "_actions_1ult6_248";
+const trigger = "_trigger_1ult6_255";
+const spacer = "_spacer_1ult6_297";
+const mobileNavBackdrop = "_mobileNavBackdrop_1ult6_301";
+const mobileNavDrawer = "_mobileNavDrawer_1ult6_309";
+const mobileNavHeader = "_mobileNavHeader_1ult6_323";
+const mobileNavClose = "_mobileNavClose_1ult6_331";
+const mobileNavBody = "_mobileNavBody_1ult6_369";
+const mobileNavLink = "_mobileNavLink_1ult6_375";
+const mobileNavLinkActive = "_mobileNavLinkActive_1ult6_409";
+const skipLink = "_skipLink_1ult6_436";
 const styles = {
   header,
   fixed,
@@ -42,6 +49,13 @@ const styles = {
   actions,
   trigger,
   spacer,
+  mobileNavBackdrop,
+  mobileNavDrawer,
+  mobileNavHeader,
+  mobileNavClose,
+  mobileNavBody,
+  mobileNavLink,
+  mobileNavLinkActive,
   skipLink
 };
 exports.actions = actions;
@@ -50,6 +64,13 @@ exports.container = container;
 exports.default = styles;
 exports.fixed = fixed;
 exports.header = header;
+exports.mobileNavBackdrop = mobileNavBackdrop;
+exports.mobileNavBody = mobileNavBody;
+exports.mobileNavClose = mobileNavClose;
+exports.mobileNavDrawer = mobileNavDrawer;
+exports.mobileNavHeader = mobileNavHeader;
+exports.mobileNavLink = mobileNavLink;
+exports.mobileNavLinkActive = mobileNavLinkActive;
 exports.nav = nav;
 exports.navItem = navItem;
 exports.navItemActive = navItemActive;

package/dist/components/Header/Header.module.scss.js

@@ -1,24 +1,31 @@
-const header = "_header_1j4bo_1";
-const fixed = "_fixed_1j4bo_13";
-const sticky = "_sticky_1j4bo_20";
-const container = "_container_1j4bo_25";
-const brand = "_brand_1j4bo_38";
-const nav = "_nav_1j4bo_56";
-const navList = "_navList_1j4bo_66";
-const navItem = "_navItem_1j4bo_75";
-const navItemActive = "_navItemActive_1j4bo_123";
-const navMenuTrigger = "_navMenuTrigger_1j4bo_137";
-const navMenuChevron = "_navMenuChevron_1j4bo_142";
-const navMenuPositioner = "_navMenuPositioner_1j4bo_150";
-const navMenuPopup = "_navMenuPopup_1j4bo_155";
-const navMenuItem = "_navMenuItem_1j4bo_176";
-const navMenuItemActive = "_navMenuItemActive_1j4bo_212";
-const search = "_search_1j4bo_234";
-const searchExpandable = "_searchExpandable_1j4bo_244";
-const actions = "_actions_1j4bo_248";
-const trigger = "_trigger_1j4bo_255";
-const spacer = "_spacer_1j4bo_297";
-const skipLink = "_skipLink_1j4bo_301";
+const header = "_header_1ult6_1";
+const fixed = "_fixed_1ult6_13";
+const sticky = "_sticky_1ult6_20";
+const container = "_container_1ult6_25";
+const brand = "_brand_1ult6_38";
+const nav = "_nav_1ult6_56";
+const navList = "_navList_1ult6_66";
+const navItem = "_navItem_1ult6_75";
+const navItemActive = "_navItemActive_1ult6_123";
+const navMenuTrigger = "_navMenuTrigger_1ult6_137";
+const navMenuChevron = "_navMenuChevron_1ult6_142";
+const navMenuPositioner = "_navMenuPositioner_1ult6_150";
+const navMenuPopup = "_navMenuPopup_1ult6_155";
+const navMenuItem = "_navMenuItem_1ult6_176";
+const navMenuItemActive = "_navMenuItemActive_1ult6_212";
+const search = "_search_1ult6_234";
+const searchExpandable = "_searchExpandable_1ult6_244";
+const actions = "_actions_1ult6_248";
+const trigger = "_trigger_1ult6_255";
+const spacer = "_spacer_1ult6_297";
+const mobileNavBackdrop = "_mobileNavBackdrop_1ult6_301";
+const mobileNavDrawer = "_mobileNavDrawer_1ult6_309";
+const mobileNavHeader = "_mobileNavHeader_1ult6_323";
+const mobileNavClose = "_mobileNavClose_1ult6_331";
+const mobileNavBody = "_mobileNavBody_1ult6_369";
+const mobileNavLink = "_mobileNavLink_1ult6_375";
+const mobileNavLinkActive = "_mobileNavLinkActive_1ult6_409";
+const skipLink = "_skipLink_1ult6_436";
 const styles = {
   header,
   fixed,
@@ -40,6 +47,13 @@ const styles = {
   actions,
   trigger,
   spacer,
+  mobileNavBackdrop,
+  mobileNavDrawer,
+  mobileNavHeader,
+  mobileNavClose,
+  mobileNavBody,
+  mobileNavLink,
+  mobileNavLinkActive,
   skipLink
 };
 export {
@@ -49,6 +63,13 @@ export {
   styles as default,
   fixed,
   header,
+  mobileNavBackdrop,
+  mobileNavBody,
+  mobileNavClose,
+  mobileNavDrawer,
+  mobileNavHeader,
+  mobileNavLink,
+  mobileNavLinkActive,
   nav,
   navItem,
   navItemActive,

package/dist/components/Header/index.cjs

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const reactDom = require("react-dom");
 const menu = require("@base-ui/react/menu");
 const react = require("@phosphor-icons/react");
+const a11y = require("../../utils/a11y.cjs");
+const index$1 = require("../ScrollArea/index.cjs");
 const Header_module = require("./Header.module.scss.cjs");
 const index = require("../Sidebar/index.cjs");
 function _interopNamespaceDefault(e) {
@@ -23,6 +26,14 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const HeaderContext = React__namespace.createContext(null);
+function useHeaderContext() {
+  const ctx = React__namespace.useContext(HeaderContext);
+  if (!ctx) {
+    throw new Error("Header compound components must be used within a Header");
+  }
+  return ctx;
+}
 const HeaderIconContext = React__namespace.createContext(void 0);
 function useHeaderIcons() {
   return React__namespace.useContext(HeaderIconContext);
@@ -59,6 +70,7 @@ function HeaderRoot({
   style: styleProp,
   ...htmlProps
 }) {
+  const [mobileOpen, setMobileOpen] = React__namespace.useState(false);
   const classes = [
     Header_module.default.header,
     position === "fixed" && Header_module.default.fixed,
@@ -69,7 +81,11 @@ function HeaderRoot({
     "--header-height": height,
     ...styleProp
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.container, children }) }) });
+  const contextValue = React__namespace.useMemo(
+    () => ({ mobileOpen, setMobileOpen, icons }),
+    [mobileOpen, icons]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.container, children }) }) }) });
 }
 function HeaderBrand({ children, href, className, ...htmlProps }) {
   const classes = [Header_module.default.brand, className].filter(Boolean).join(" ");
@@ -146,11 +162,17 @@ function HeaderTrigger({
   ...htmlProps
 }) {
   const isMobile = useIsMobile();
-  const { open, setOpen } = index.useSidebar();
+  const sidebar = index.useSidebar();
+  const headerCtx = React__namespace.useContext(HeaderContext);
   const icons = useHeaderIcons();
   if (!isMobile) {
     return null;
   }
+  const hasSidebarProvider = sidebar.open !== void 0 && sidebar.setOpen !== void 0 && typeof sidebar.setOpen === "function";
+  const isUsingSidebar = hasSidebarProvider && sidebar.isMobile;
+  const open = isUsingSidebar ? sidebar.open : (headerCtx == null ? void 0 : headerCtx.mobileOpen) ?? false;
+  const setOpen = isUsingSidebar ? sidebar.setOpen : (headerCtx == null ? void 0 : headerCtx.setMobileOpen) ?? (() => {
+  });
   const classes = [Header_module.default.trigger, className].filter(Boolean).join(" ");
   const iconSlot = open ? icons == null ? void 0 : icons.close : icons == null ? void 0 : icons.menu;
   const iconState = { slot: open ? "close" : "menu", open };
@@ -226,6 +248,98 @@ function HeaderNavMenuItem({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ...htmlProps, className: classes, children });
 }
+function HeaderMobileNav({ children, className }) {
+  const { mobileOpen, setMobileOpen, icons } = useHeaderContext();
+  const drawerRef = React__namespace.useRef(null);
+  a11y.useFocusTrap(drawerRef, mobileOpen);
+  React__namespace.useEffect(() => {
+    if (!mobileOpen) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  React__namespace.useEffect(() => {
+    if (!mobileOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, setMobileOpen]);
+  if (!mobileOpen) return null;
+  if (typeof document === "undefined") return null;
+  const closeIcon = renderHeaderIcon(icons == null ? void 0 : icons.mobileClose, {
+    slot: "mobileClose",
+    open: true
+  });
+  const drawerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: Header_module.default.mobileNavBackdrop,
+        onClick: () => setMobileOpen(false),
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: drawerRef,
+        className: [Header_module.default.mobileNavDrawer, className].filter(Boolean).join(" "),
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": "Navigation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Header_module.default.mobileNavHeader, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: Header_module.default.mobileNavClose,
+              onClick: () => setMobileOpen(false),
+              "aria-label": "Close navigation",
+              children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 20, "aria-hidden": true })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(index$1.ScrollArea, { orientation: "vertical", className: Header_module.default.mobileNavBody, children })
+        ]
+      }
+    )
+  ] });
+  return reactDom.createPortal(drawerContent, document.body);
+}
+function HeaderMobileNavLink({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  onClick,
+  className,
+  ...htmlProps
+}) {
+  const { setMobileOpen } = useHeaderContext();
+  const classes = [
+    Header_module.default.mobileNavLink,
+    active && Header_module.default.mobileNavLinkActive,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (!e.defaultPrevented) setMobileOpen(false);
+  };
+  if (asChild && React__namespace.isValidElement(children)) {
+    const childProps = children.props;
+    return React__namespace.cloneElement(children, {
+      ...htmlProps,
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      onClick: composeEventHandlers(childProps.onClick, handleClick)
+    });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...htmlProps, href, className: classes, onClick: handleClick, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...htmlProps, type: "button", className: classes, onClick: handleClick, children });
+}
 function HeaderSkipLink({
   children = "Skip to main content",
   href = "#main-content",
@@ -244,11 +358,15 @@ const Header = Object.assign(HeaderRoot, {
   Actions: HeaderActions,
   Trigger: HeaderTrigger,
   Spacer: HeaderSpacer,
-  SkipLink: HeaderSkipLink
+  SkipLink: HeaderSkipLink,
+  MobileNav: HeaderMobileNav,
+  MobileNavLink: HeaderMobileNavLink
 });
 exports.Header = Header;
 exports.HeaderActions = HeaderActions;
 exports.HeaderBrand = HeaderBrand;
+exports.HeaderMobileNav = HeaderMobileNav;
+exports.HeaderMobileNavLink = HeaderMobileNavLink;
 exports.HeaderNav = HeaderNav;
 exports.HeaderNavItem = HeaderNavItem;
 exports.HeaderNavMenu = HeaderNavMenu;

package/dist/components/Header/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface HeaderIconRenderState {
-    slot: 'menu' | 'close' | 'navMenuChevron';
+    slot: 'menu' | 'close' | 'navMenuChevron' | 'mobileClose';
     open?: boolean;
     active?: boolean;
 }
@@ -66,6 +66,12 @@ export interface HeaderNavMenuItemProps extends React.HTMLAttributes<HTMLElement
     /** Render as child element (polymorphic) */
     asChild?: boolean;
 }
+export interface HeaderMobileNavProps {
+    /** Content rendered inside the mobile drawer */
+    children: React.ReactNode;
+    /** Optional className for the drawer panel */
+    className?: string;
+}
 /**
  * Header - Root header element
  */
@@ -91,7 +97,11 @@ declare function HeaderSearch({ children, expandable, className, ...htmlProps }:
  */
 declare function HeaderActions({ children, className, ...htmlProps }: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Header.Trigger - Mobile menu trigger (integrates with SidebarProvider)
+ * Header.Trigger - Mobile menu trigger
+ *
+ * Works in two modes:
+ * 1. With SidebarProvider — toggles sidebar open state (existing behavior)
+ * 2. Standalone — toggles Header's internal mobile nav drawer
  */
 declare function HeaderTrigger({ children, 'aria-label': ariaLabel, className, onClick, ...htmlProps }: HeaderTriggerProps): import("react/jsx-runtime").JSX.Element | null;
 /**
@@ -108,6 +118,17 @@ declare function HeaderNavMenu({ label, active, className, children, ...htmlProp
  * Header.NavMenuItem - Item inside a NavMenu dropdown
  */
 declare function HeaderNavMenuItem({ children, href, active, asChild, className, ...htmlProps }: HeaderNavMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header.MobileNav - Mobile navigation drawer
+ *
+ * Renders a full-screen slide-in drawer on mobile when the Header.Trigger is toggled.
+ * Place navigation links, actions, or any content as children.
+ */
+declare function HeaderMobileNav({ children, className }: HeaderMobileNavProps): React.ReactPortal | null;
+/**
+ * Header.MobileNavLink - A link inside the mobile drawer
+ */
+declare function HeaderMobileNavLink({ children, href, active, asChild, onClick, className, ...htmlProps }: HeaderNavItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Header.SkipLink - Skip to main content link (accessibility)
  */
@@ -127,6 +148,8 @@ export declare const Header: typeof HeaderRoot & {
     Trigger: typeof HeaderTrigger;
     Spacer: typeof HeaderSpacer;
     SkipLink: typeof HeaderSkipLink;
+    MobileNav: typeof HeaderMobileNav;
+    MobileNavLink: typeof HeaderMobileNavLink;
 };
-export { HeaderRoot, HeaderBrand, HeaderNav, HeaderNavItem, HeaderNavMenu, HeaderNavMenuItem, HeaderSearch, HeaderActions, HeaderTrigger, HeaderSpacer, HeaderSkipLink, };
+export { HeaderRoot, HeaderBrand, HeaderNav, HeaderNavItem, HeaderNavMenu, HeaderNavMenuItem, HeaderSearch, HeaderActions, HeaderTrigger, HeaderSpacer, HeaderSkipLink, HeaderMobileNav, HeaderMobileNavLink, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header/index.js

@@ -1,9 +1,20 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { Menu } from "@base-ui/react/menu";
 import { X, List, CaretDown } from "@phosphor-icons/react";
+import { useFocusTrap } from "../../utils/a11y.js";
+import { ScrollArea } from "../ScrollArea/index.js";
 import styles from "./Header.module.scss.js";
 import { useSidebar } from "../Sidebar/index.js";
+const HeaderContext = React.createContext(null);
+function useHeaderContext() {
+  const ctx = React.useContext(HeaderContext);
+  if (!ctx) {
+    throw new Error("Header compound components must be used within a Header");
+  }
+  return ctx;
+}
 const HeaderIconContext = React.createContext(void 0);
 function useHeaderIcons() {
   return React.useContext(HeaderIconContext);
@@ -40,6 +51,7 @@ function HeaderRoot({
   style: styleProp,
   ...htmlProps
 }) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
   const classes = [
     styles.header,
     position === "fixed" && styles.fixed,
@@ -50,7 +62,11 @@ function HeaderRoot({
     "--header-height": height,
     ...styleProp
   };
-  return /* @__PURE__ */ jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) }) });
+  const contextValue = React.useMemo(
+    () => ({ mobileOpen, setMobileOpen, icons }),
+    [mobileOpen, icons]
+  );
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HeaderIconContext.Provider, { value: icons, children: /* @__PURE__ */ jsx("header", { ...htmlProps, className: classes, style, "data-position": position, children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) }) }) });
 }
 function HeaderBrand({ children, href, className, ...htmlProps }) {
   const classes = [styles.brand, className].filter(Boolean).join(" ");
@@ -127,11 +143,17 @@ function HeaderTrigger({
   ...htmlProps
 }) {
   const isMobile = useIsMobile();
-  const { open, setOpen } = useSidebar();
+  const sidebar = useSidebar();
+  const headerCtx = React.useContext(HeaderContext);
   const icons = useHeaderIcons();
   if (!isMobile) {
     return null;
   }
+  const hasSidebarProvider = sidebar.open !== void 0 && sidebar.setOpen !== void 0 && typeof sidebar.setOpen === "function";
+  const isUsingSidebar = hasSidebarProvider && sidebar.isMobile;
+  const open = isUsingSidebar ? sidebar.open : (headerCtx == null ? void 0 : headerCtx.mobileOpen) ?? false;
+  const setOpen = isUsingSidebar ? sidebar.setOpen : (headerCtx == null ? void 0 : headerCtx.setMobileOpen) ?? (() => {
+  });
   const classes = [styles.trigger, className].filter(Boolean).join(" ");
   const iconSlot = open ? icons == null ? void 0 : icons.close : icons == null ? void 0 : icons.menu;
   const iconState = { slot: open ? "close" : "menu", open };
@@ -207,6 +229,98 @@ function HeaderNavMenuItem({
   }
   return /* @__PURE__ */ jsx(Menu.Item, { ...htmlProps, className: classes, children });
 }
+function HeaderMobileNav({ children, className }) {
+  const { mobileOpen, setMobileOpen, icons } = useHeaderContext();
+  const drawerRef = React.useRef(null);
+  useFocusTrap(drawerRef, mobileOpen);
+  React.useEffect(() => {
+    if (!mobileOpen) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  React.useEffect(() => {
+    if (!mobileOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, setMobileOpen]);
+  if (!mobileOpen) return null;
+  if (typeof document === "undefined") return null;
+  const closeIcon = renderHeaderIcon(icons == null ? void 0 : icons.mobileClose, {
+    slot: "mobileClose",
+    open: true
+  });
+  const drawerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.mobileNavBackdrop,
+        onClick: () => setMobileOpen(false),
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: drawerRef,
+        className: [styles.mobileNavDrawer, className].filter(Boolean).join(" "),
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": "Navigation",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.mobileNavHeader, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.mobileNavClose,
+              onClick: () => setMobileOpen(false),
+              "aria-label": "Close navigation",
+              children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": true })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ScrollArea, { orientation: "vertical", className: styles.mobileNavBody, children })
+        ]
+      }
+    )
+  ] });
+  return createPortal(drawerContent, document.body);
+}
+function HeaderMobileNavLink({
+  children,
+  href,
+  active = false,
+  asChild = false,
+  onClick,
+  className,
+  ...htmlProps
+}) {
+  const { setMobileOpen } = useHeaderContext();
+  const classes = [
+    styles.mobileNavLink,
+    active && styles.mobileNavLinkActive,
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (!e.defaultPrevented) setMobileOpen(false);
+  };
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    return React.cloneElement(children, {
+      ...htmlProps,
+      className: [classes, childProps.className].filter(Boolean).join(" "),
+      onClick: composeEventHandlers(childProps.onClick, handleClick)
+    });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { ...htmlProps, href, className: classes, onClick: handleClick, children });
+  }
+  return /* @__PURE__ */ jsx("button", { ...htmlProps, type: "button", className: classes, onClick: handleClick, children });
+}
 function HeaderSkipLink({
   children = "Skip to main content",
   href = "#main-content",
@@ -225,12 +339,16 @@ const Header = Object.assign(HeaderRoot, {
   Actions: HeaderActions,
   Trigger: HeaderTrigger,
   Spacer: HeaderSpacer,
-  SkipLink: HeaderSkipLink
+  SkipLink: HeaderSkipLink,
+  MobileNav: HeaderMobileNav,
+  MobileNavLink: HeaderMobileNavLink
 });
 export {
   Header,
   HeaderActions,
   HeaderBrand,
+  HeaderMobileNav,
+  HeaderMobileNavLink,
   HeaderNav,
   HeaderNavItem,
   HeaderNavMenu,