@homebound/beam 3.47.1 → 3.47.3

package/dist/index.cjs

@@ -10873,11 +10873,13 @@ function NavLink(props) {
     active,
     variant,
     icon,
+    nested = false,
+    __storyState,
     ...otherProps
   } = props;
   const asLink = typeof onClick === "string";
   const isIconOnly = !!iconOnly && !!icon;
-  const labelContent = isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute oh cli_inset_50 clp_none bd_0 h_1px m_neg1px w_1px p_0 wsnw o0", children: label }) : label;
+  const labelContent = isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria13.VisuallyHidden, { children: label }) : label;
   const ariaProps = {
     children: labelContent,
     isDisabled,
@@ -10886,7 +10888,7 @@ function NavLink(props) {
   const ref = useGetRef(buttonRef);
   const {
     buttonProps,
-    isPressed
+    isPressed: isPressedFromEvents
   } = (0, import_react_aria13.useButton)({
     ...ariaProps,
     onPress: asLink ? noop : (e) => {
@@ -10900,14 +10902,17 @@ function NavLink(props) {
   }, ref);
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = (0, import_react_aria13.useHover)({
     isDisabled
   });
   const {
-    isFocusVisible,
+    isFocusVisible: isFocusVisibleFromEvents,
     focusProps
   } = (0, import_react_aria13.useFocusRing)(ariaProps);
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const {
     baseStyles: baseStyles4,
     activeStyles: activeStyles3,
@@ -10915,7 +10920,7 @@ function NavLink(props) {
     hoverStyles: hoverStyles4,
     disabledStyles: disabledStyles3,
     pressedStyles: pressedStyles2
-  } = (0, import_react38.useMemo)(() => getNavLinkStyles(variant), [variant]);
+  } = (0, import_react38.useMemo)(() => getNavLinkStyles(variant, nested), [variant, nested]);
   const linkAttributes = {
     ref,
     /** does not focus if disabled */
@@ -10944,22 +10949,34 @@ function NavLink(props) {
     className: navLink
   }, otherProps), openInNew);
 }
-function getNavLinkStyles(variant) {
-  return navLinkVariantStyles[variant];
+function getNavLinkStyles(variant, nested) {
+  const styles = navLinkVariantStyles[variant];
+  return {
+    ...styles,
+    baseStyles: {
+      ...styles.baseStyles,
+      ...nested ? {
+        paddingLeft: "pl3",
+        fontWeight: "fw4",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      } : {
+        fontWeight: "fw6",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      }
+    }
+  };
 }
 var baseStyles = {
   display: "df",
   gap: "gap1",
   alignItems: "aic",
-  height: "h_32px",
   paddingTop: "pt_6px",
   paddingBottom: "pb_6px",
   paddingLeft: "pl1",
   paddingRight: "pr1",
   borderRadius: "br4",
-  fontWeight: "fw6",
-  fontSize: "fz_14px",
-  lineHeight: "lh_20px",
   outline: "outline0"
 };
 var navLinkVariantStyles = {
@@ -10967,12 +10984,15 @@ var navLinkVariantStyles = {
     baseStyles: {
       ...baseStyles,
       ...{
+        height: "h_40px",
+        flexShrink: "fs0",
         color: ["color_var", {
           "--color": "var(--b-nav-text)"
         }]
       }
     },
     activeStyles: {
+      fontWeight: "fw6",
       color: ["color_var", {
         "--color": "var(--b-nav-text-active)"
       }],
@@ -10987,12 +11007,6 @@ var navLinkVariantStyles = {
       cursor: "cursorNotAllowed"
     },
     focusRingStyles: {
-      color: ["color_var", {
-        "--color": "var(--b-nav-text-focus-visible)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-nav-item-bg-active)"
-      }],
       boxShadow: "bshFocus"
     },
     hoverStyles: {
@@ -11016,6 +11030,7 @@ var navLinkVariantStyles = {
     baseStyles: {
       ...baseStyles,
       ...{
+        height: "h_32px",
         width: "width_max_content",
         color: "gray500"
       }
@@ -14954,8 +14969,8 @@ function GridSelectCard(props) {
       }), children: label }),
       description && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { ...(0, import_runtime51.trussProps)({
         fontWeight: "fw4",
-        fontSize: "fz_12px",
-        lineHeight: "lh_16px",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px",
         color: ["color_var", {
           "--color": "var(--b-on-surface)"
         }],
@@ -15041,8 +15056,8 @@ function ListSelectCard(props) {
     description && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { ...(0, import_runtime53.trussProps)({
       marginLeft: "ml3",
       fontWeight: "fw4",
-      fontSize: "fz_12px",
-      lineHeight: "lh_16px",
+      fontSize: "fz_14px",
+      lineHeight: "lh_20px",
       color: ["color_var", {
         "--color": "var(--b-on-surface)"
       }],
@@ -23358,7 +23373,8 @@ function AppNavGroupTrigger(props) {
     label,
     navGroupId,
     expanded,
-    onClick
+    onClick,
+    active = false
   } = props;
   const tid = useTestIds(props, "trigger");
   const ref = (0, import_react131.useRef)(null);
@@ -23391,11 +23407,17 @@ function AppNavGroupTrigger(props) {
       ...baseStyles4,
       ...isFocusVisible && focusRingStyles2,
       ...isHovered && hoverStyles4,
-      ...isPressed && pressedStyles2
+      ...isPressed && pressedStyles2,
+      // Denotes the active group (has a current-page child link)
+      ...active && {
+        color: ["color_var", {
+          "--color": "var(--b-nav-text-active)"
+        }]
+      }
     })
   }), children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { ...(0, import_runtime103.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { ...(0, import_runtime103.trussProps)({
       ...{
         display: "df",
         alignItems: "aic",
@@ -23592,14 +23614,16 @@ function AppNavGroupDisclosure(props) {
     onResize
   });
   return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "df fdc", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, onClick: onToggle, ...tid }),
+    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(AppNavGroupTrigger, { label: linkGroup.label, navGroupId, expanded, active: linkGroupHasActiveLink(linkGroup), onClick: onToggle, ...tid }),
     /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { id: navGroupId, role: "region", "aria-hidden": !expanded, ...(0, import_runtime104.trussProps)({
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
         "--height": (0, import_runtime104.maybeCssVar)(__maybeInc19(contentHeight))
       }]
-    }), ...tid.panel, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
+    }), ...tid.panel, ...!expanded ? {
+      inert: "true"
+    } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ref: setContentEl, className: "df fdc", children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, nested: true, ...tid }) }) })
   ] });
 }
 
@@ -23632,6 +23656,7 @@ function AppNavSectionView(props) {
     section,
     variant,
     panelCollapsed,
+    nested = false,
     showDivider,
     ...scopeProps
   } = props;
@@ -23644,7 +23669,7 @@ function AppNavSectionView(props) {
       "--borderColor": "var(--b-surface-separator)"
     }]
   } : {
-    paddingBottom: "pb2",
+    paddingBottom: "pb_4px",
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: "bbw_1px",
     borderColor: ["bc_var", {
@@ -23655,7 +23680,7 @@ function AppNavSectionView(props) {
     ...{
       display: "df",
       flexDirection: "fdc",
-      paddingTop: "pt2"
+      paddingTop: "pt_4px"
     },
     ...showDivider ? dividerStyles : {}
   }), ...tid, children: [
@@ -23668,17 +23693,18 @@ function AppNavSectionView(props) {
       }],
       paddingLeft: "pl1",
       paddingRight: "pr1",
+      paddingTop: "pt1",
       paddingBottom: "pb1",
       textTransform: "ttu"
     }), ...tid.label, children: section.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed })
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(AppNavItems, { ...scopeProps, items: section.items, variant, panelCollapsed, nested })
   ] });
 }
 
 // src/components/AppNav/AppNavItems.tsx
 var import_jsx_runtime184 = require("react/jsx-runtime");
 function AppNavItems(props) {
-  const { items, variant = "side", panelCollapsed = false } = props;
+  const { items, variant = "side", panelCollapsed = false, nested = false } = props;
   const tid = useTestIds(props, "appNav");
   return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_jsx_runtime184.Fragment, { children: items.map((item, idx) => {
     if (isAppNavLink(item)) {
@@ -23687,6 +23713,7 @@ function AppNavItems(props) {
         {
           variant,
           ...item,
+          nested,
           iconOnly: item.iconOnly ?? (panelCollapsed && !!item.icon),
           ...tid[`link_${(0, import_change_case8.camelCase)(item.label)}`]
         },
@@ -23711,6 +23738,7 @@ function AppNavItems(props) {
           section: item,
           variant,
           panelCollapsed,
+          nested,
           showDivider: idx < items.length - 1,
           ...tid.section
         },
@@ -23761,7 +23789,11 @@ function NavbarMobileMenu(props) {
   const close = () => setIsOpen(false);
   return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(import_jsx_runtime186.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(IconButton, { icon: isOpen ? "menuClose" : "menu", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: isOpen ? "Close navigation" : "Open navigation", onClick: () => setIsOpen((open) => !open), ...tid.mobileMenu }),
-    (0, import_react_dom6.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime186.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_framer_motion5.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(NavbarMobileDrawer, { items, onClose: close, tid }) }) }), document.body)
+    (0, import_react_dom6.createPortal)(
+      /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_framer_motion5.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(NavbarMobileDrawer, { items, onClose: close, tid }) }),
+      document.body
+    )
   ] });
 }
 function NavbarMobileDrawer({
@@ -23800,7 +23832,7 @@ function NavbarMobileDrawer({
       display: "df",
       flexDirection: "fdc",
       flexShrink: "fs0",
-      width: "w100",
+      width: "w_260px",
       overflow: "oh",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.navbarMobileMenu)
@@ -23818,11 +23850,25 @@ function NavbarMobileDrawer({
       ease: "linear",
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: "df aic jcfe pt2 pb2 pr2 pl2 fs0", children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(IconButton, { icon: "menuClose", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { ...(0, import_runtime106.trussProps)({
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcfe",
+        paddingLeft: "pl3",
+        paddingRight: "pr3",
+        paddingTop: "pt_12px",
+        paddingBottom: "pb_12px",
+        flexShrink: "fs0",
+        borderBottomStyle: "bbs_solid",
+        borderBottomWidth: "bbw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }]
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
       /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         "nav",
         {
-          className: "fg1 oya pl2 pr2 pb3 df fdc gap1",
+          className: "fg1 oya pl3 pr3 pb3 pt2 df fdc gap_4px",
           onClickCapture: (e) => {
             if (e.target.closest("a")) {
               onClose();