@justin_evo/evo-ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justin_evo/evo-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/src/Nav/Nav.tsx

@@ -52,6 +52,9 @@ export interface EvoNavProps extends Omit<HTMLAttributes<HTMLElement>, 'children
   onDrawerOpenChange?: (open: boolean) => void;
   /** Hide the built-in hamburger trigger (use when wiring a trigger yourself). */
   hideTrigger?: boolean;
+  /** Collapse to an icon-only rail: labels hide, icons center, and each row
+   *  shows a native tooltip from its `tooltip` prop. @default false */
+  collapsed?: boolean;
   /** Accessible label for the <nav> landmark. @default 'Main navigation' */
   'aria-label'?: string;
 }
@@ -60,6 +63,16 @@ export interface EvoNavGroupProps {
   label: string;
   children: ReactNode;
   className?: string;
+  /** Render the heading as a disclosure that expands/collapses the group. */
+  collapsible?: boolean;
+  /** Uncontrolled initial open state (collapsible only). @default true */
+  defaultOpen?: boolean;
+  /** Controlled open state (collapsible only). */
+  open?: boolean;
+  /** Called when the group expands or collapses. */
+  onOpenChange?: (open: boolean) => void;
+  /** Small count chip shown after the label. */
+  count?: number;
 }
 
 interface EvoNavRowProps {
@@ -70,6 +83,8 @@ interface EvoNavRowProps {
   /** Render as <a href> instead of <button>. */
   href?: string;
   onClick?: (event: ReactMouseEvent | ReactKeyboardEvent) => void;
+  /** Tooltip text shown (via native title) when the nav is collapsed to a rail. */
+  tooltip?: string;
   /** Controlled expand state (only when row has SubItem children). */
   open?: boolean;
   /** Uncontrolled initial expand state. */
@@ -106,6 +121,8 @@ interface NavRootContextValue {
   closeDrawer: () => void;
   /** Root id used by the hamburger button's aria-controls. */
   rootId: string;
+  /** Icon-only rail mode — labels hide, rows surface a native tooltip. */
+  collapsed: boolean;
 }
 
 const NavRootContext = createContext<NavRootContextValue | null>(null);
@@ -160,7 +177,7 @@ function focusableRows(root: HTMLElement | null): HTMLElement[] {
   if (!root) return [];
   return Array.from(
     root.querySelectorAll<HTMLElement>(`[${ROW_ATTR}]:not([data-disabled="true"])`),
-  ).filter((el) => el.offsetParent !== null);
+  ).filter((el) => el.offsetParent !== null && el.closest('[inert]') === null);
 }
 
 function moveFocus(root: HTMLElement | null, from: HTMLElement, delta: 1 | -1 | 'first' | 'last') {
@@ -242,6 +259,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
     active = false,
     href,
     onClick,
+    tooltip,
     open: openProp,
     defaultOpen = false,
     onOpenChange,
@@ -252,6 +270,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
   liRef,
 ) {
   const rootCtx = useContext(NavRootContext);
+  const collapsed = rootCtx?.collapsed ?? false;
   const { depth } = useContext(NavDepthContext);
   const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
   const rowId = useId();
@@ -364,6 +383,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
     id: rowId,
     className: rowClasses,
     style: rowStyle,
+    title: collapsed && tooltip ? tooltip : undefined,
     'aria-current': active ? ('page' as const) : undefined,
     'aria-expanded': expandable ? open : undefined,
     'aria-controls': expandable ? subListId : undefined,
@@ -450,21 +470,81 @@ export const EvoNavSubItem = forwardRef<HTMLLIElement, EvoNavSubItemProps>(funct
 EvoNavSubItem.displayName = 'EvoNavSubItem';
 
 export const EvoNavGroup = forwardRef<HTMLLIElement, EvoNavGroupProps>(function EvoNavGroup(
-  { label, children, className },
+  { label, children, className, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, count },
   ref,
 ) {
   const headingId = useId();
+  const panelId = `${headingId}-panel`;
+  const collapsed = useContext(NavRootContext)?.collapsed ?? false;
+  // The disclosure is interactive only when collapsible AND not in icon-rail
+  // mode. In the rail the accordion is meaningless, so we render a static
+  // heading and show the items — avoiding a focusable, label-less toggle that
+  // would silently mutate the (forced-open) state.
+  const interactive = collapsible && !collapsed;
+  const [open, setOpen] = useControllableState(
+    interactive ? openProp : true,
+    interactive ? defaultOpen : true,
+    onOpenChange,
+  );
+  const effectiveOpen = collapsed ? true : open;
+
+  // Toggle `inert` imperatively rather than through a prop: `inert` is only a
+  // managed React attribute as of React 19, but the peer range allows >=17.
+  // The DOM API works on every version and keeps the console warning-free.
+  const panelRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = panelRef.current;
+    if (!el) return;
+    if (effectiveOpen) el.removeAttribute('inert');
+    else el.setAttribute('inert', '');
+  }, [effectiveOpen]);
+
+  const countChip =
+    count != null ? (
+      <span className={styles.navGroupCount} aria-hidden="true">
+        {count}
+      </span>
+    ) : null;
+
+  const list = (
+    <ul role="group" aria-labelledby={headingId} className={styles.navList}>
+      {children}
+    </ul>
+  );
+
   return (
-    <li
-      ref={ref}
-      className={[styles.navGroup, className].filter(Boolean).join(' ')}
-    >
-      <div id={headingId} role="heading" aria-level={3} className={styles.navGroupLabel}>
-        {label}
-      </div>
-      <ul role="group" aria-labelledby={headingId} className={styles.navList}>
-        {children}
-      </ul>
+    <li ref={ref} className={[styles.navGroup, className].filter(Boolean).join(' ')}>
+      {interactive ? (
+        <button
+          type="button"
+          id={headingId}
+          className={[styles.navGroupLabel, styles.navGroupToggle].join(' ')}
+          aria-expanded={effectiveOpen}
+          aria-controls={panelId}
+          onClick={() => setOpen(!open)}
+        >
+          <span className={styles.navGroupLabelText}>{label}</span>
+          {countChip}
+          <ChevronIcon open={effectiveOpen} />
+        </button>
+      ) : (
+        <div id={headingId} role="heading" aria-level={3} className={styles.navGroupLabel}>
+          <span className={styles.navGroupLabelText}>{label}</span>
+          {countChip}
+        </div>
+      )}
+      {interactive ? (
+        <div
+          ref={panelRef}
+          id={panelId}
+          className={styles.navGroupPanel}
+          data-open={effectiveOpen ? 'true' : 'false'}
+        >
+          {list}
+        </div>
+      ) : (
+        list
+      )}
     </li>
   );
 });
@@ -517,6 +597,7 @@ const EvoNavRoot = forwardRef<HTMLElement, EvoNavProps>(function EvoNav(
     defaultDrawerOpen = false,
     onDrawerOpenChange,
     hideTrigger = false,
+    collapsed = false,
     className,
     'aria-label': ariaLabel = 'Main navigation',
     ...rest
@@ -560,14 +641,15 @@ const EvoNavRoot = forwardRef<HTMLElement, EvoNavProps>(function EvoNav(
   }, [isMobile, drawerOpen, closeDrawer]);
 
   const ctxValue = useMemo<NavRootContextValue>(
-    () => ({ isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId }),
-    [isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId],
+    () => ({ isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId, collapsed }),
+    [isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId, collapsed],
   );
 
   const navClasses = [
     styles.navContainer,
     isMobile ? styles.navMobile : styles.navDesktop,
     isMobile && drawerOpen ? styles.navDrawerOpen : '',
+    collapsed ? styles.navCollapsed : '',
     className,
   ]
     .filter(Boolean)

package/src/css/nav.module.scss

@@ -56,7 +56,7 @@
   color: $color-text-secondary;
   background: transparent;
   border: none;
-  border-radius: $radius-sm;
+  border-radius: $evo-border-radius;
   cursor: pointer;
   text-align: left;
   text-decoration: none;
@@ -70,6 +70,11 @@
   &:hover {
     background-color: $color-surface-hover;
     color: $color-text-primary;
+
+    .navIcon {
+      color: $color-text-primary;
+      transform: translateX(1px);
+    }
   }
 
   &:focus-visible {
@@ -80,16 +85,10 @@
   &.active {
     background-color: $evo-primary-soft;
     color: $evo-primary-color;
+    font-weight: 600;
 
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 25%;
-      bottom: 25%;
-      width: 2px;
-      border-radius: $radius-full;
-      background: $evo-primary-color;
+    .navIcon {
+      color: $evo-primary-color;
     }
   }
 
@@ -121,6 +120,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  clip-path: inset(0 0 0 0);
+  transition:
+    opacity 200ms ease,
+    transform 220ms ease,
+    clip-path 260ms ease;
+}
+
+// When the rail expands, labels reveal top-to-bottom (per-row delay) and
+// left-to-right (clip-path sweep). Only opacity/transform/clip-path transition,
+// so the delay is invisible in the steady expanded state.
+@for $i from 1 through 12 {
+  .navList .navLi:nth-child(#{$i}) .navLabel {
+    transition-delay: #{($i - 1) * 14}ms;
+  }
 }
 
 .navIcon {
@@ -132,6 +145,15 @@
   height: 1.125rem;
   font-size: 1rem;
   line-height: 1;
+  color: $color-text-muted;
+  transition:
+    color $transition-fast,
+    transform $transition-fast;
+
+  svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
 }
 
 .chevron {
@@ -161,18 +183,96 @@
 
 .navGroup {
   list-style: none;
-  margin: 0.5rem 0 0;
+  margin: 0.85rem 0 0;
   padding: 0;
+
+  &:first-child {
+    margin-top: 0.25rem;
+  }
 }
 
 .navGroupLabel {
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
   font-size: $text-xs;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: $color-text-muted;
-  padding: 0.5rem 0.75rem 0.25rem;
+  padding: 0.4rem 0.75rem 0.3rem;
+}
+
+.navGroupLabelText {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Collapsible group heading — same look as the static label, plus button chrome.
+.navGroupToggle {
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-text-secondary;
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+
+  .chevron {
+    margin-left: 0.4rem;
+    color: $color-text-muted;
+  }
+}
+
+.navGroupCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.35rem;
+  margin-left: 0.4rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: $color-text-secondary;
+  background: $color-surface-hover;
+  border-radius: $radius-full;
+}
+
+// Accordion panel — animates height via grid-template-rows (0fr <-> 1fr), no
+// JS measuring. The inner list must clip its overflow for the collapse to read.
+.navGroupPanel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &[data-open='false'] {
+    grid-template-rows: 0fr;
+  }
+
+  > .navList {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  // Rows inside the clipped panel draw their focus ring INSET, so the
+  // overflow:hidden needed for the height animation can't clip it.
+  .navRow:focus-visible {
+    outline-offset: -2px;
+  }
 }
 
 // ---------- Skeleton ----------
@@ -321,10 +421,65 @@
   to   { opacity: 1; }
 }
 
+// ---------- Collapsed (icon-only rail) ----------
+
+.navCollapsed {
+  .navRow,
+  .navQuickAction {
+    justify-content: center;
+    gap: 0;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .navLabel {
+    flex: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+    clip-path: inset(0 100% 0 0);
+  }
+
+  // Group heading text stays in the a11y tree (it names the heading) but is
+  // visually hidden; the decorative count chip is removed entirely.
+  .navGroupLabelText {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .navGroupCount {
+    display: none;
+  }
+
+  .navGroupLabel {
+    min-height: 0.5rem;
+    padding: 0.25rem 0;
+  }
+
+  // Accordion is meaningless in rail mode — force panels open.
+  .navGroupPanel {
+    grid-template-rows: 1fr;
+  }
+}
+
+// Collapsing fades labels out together — outrank the per-row expand stagger.
+.navCollapsed .navList .navLi .navLabel {
+  transition-delay: 0ms;
+}
+
 // ---------- Reduced motion ----------
 
 @media (prefers-reduced-motion: reduce) {
   .navRow,
+  .navRow .navIcon,
+  .navLabel,
+  .navGroupPanel,
+  .navGroupToggle,
   .navQuickAction,
   .chevron,
   .navTrigger,