@lovett/ui 0.2.8 → 0.2.10

package/dist/styles.css

@@ -2311,7 +2311,7 @@
 .ds-sidebar-group-body {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--dur-fast) var(--ease-out);
+  transition: grid-template-rows var(--dur-base) var(--ease-out);
 }
 .ds-sidebar-group-body[data-open='true'] {
   grid-template-rows: 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",

package/src/__tests__/sidebar-nav.test.tsx

@@ -138,11 +138,25 @@ describe('SidebarNav', () => {
   })
 
   describe('collapsed rail', () => {
-    it('items keep their name through a title and drop the label text', () => {
+    it('items keep their label MOUNTED but faded, with a title in its place', () => {
+      // Unmounting the label snapped every row to its collapsed layout on the
+      // first frame of the width tween; it fades instead.
       render(<Rail collapsed active="/" />)
       const home = screen.getByRole('link', { name: 'Dashboard' })
       expect(home).toHaveAttribute('title', 'Dashboard')
-      expect(home.querySelector('span.truncate')).toBeNull()
+      expect(home.querySelector('span.truncate')?.className).toMatch(/opacity-0/)
+    })
+
+    it('the group header is ONE element in both modes, with the right ARIA for each', () => {
+      const { rerender } = render(<Rail collapsed={false} />)
+      const expanded = screen.getByRole('button', { name: 'Audit' })
+      expect(expanded).toHaveAttribute('aria-expanded', 'true')
+      expect(expanded).not.toHaveAttribute('aria-haspopup')
+      rerender(<Rail collapsed />)
+      const tile = screen.getByRole('button', { name: 'Audit' })
+      expect(tile).toBe(expanded)
+      expect(tile).toHaveAttribute('aria-haspopup', 'dialog')
+      expect(tile).toHaveAttribute('aria-expanded', 'false')
     })
 
     it('a group is a tile that opens a flyout holding its items at full width', async () => {

package/src/sidebar-nav.tsx

@@ -20,10 +20,16 @@
  * `grid-template-rows` so its content keeps its size while it closes
  * (`.ds-sidebar-group-body` in styles.css; honours reduced motion).
  *
- * Collapsed rail (`collapsed` on the root): Items become icon tiles with a
- * `title`; a Group becomes an icon tile that opens a `Popover` flyout to its
- * right holding the group's items at full width. Inside the flyout the rail
- * is not collapsed, so the same Item markup renders both ways.
+ * A nested Item keeps its icon and sits inside the group's rail: one
+ * continuous hairline drops from the header's icon column and the child rows
+ * stand to its right, so a child's fill never crosses the line.
+ *
+ * Collapsed rail (`collapsed` on the root): the SAME rows, with their labels
+ * faded out and a `title` in their place - nothing remounts and the icon
+ * column never moves, so a collapse is one width tween. A Group's header
+ * opens a `Popover` flyout to its right holding the group's items at full
+ * width, and its body shuts in step with the rail. Inside the flyout the
+ * rail is not collapsed, so the same Item markup renders both ways.
  *
  * Token discipline: reads the INTERNAL `--sidebar-*` set (sidebar surfaces,
  * text, rail) — allowed in packages/ui, ESLint-enforced elsewhere — plus
@@ -52,11 +58,14 @@
 import {
   cloneElement,
   createContext,
+  forwardRef,
   isValidElement,
   useContext,
+  useEffect,
   useId,
   useState,
   type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
   type ComponentType,
   type HTMLAttributes,
   type ReactElement,
@@ -100,10 +109,24 @@ function SidebarNavRoot({ collapsed = false, className, children, ...rest }: Sid
 // ---------------------------------------------------------------------------
 // Row chrome shared by Item and Group header
 
+/**
+ * One layout in both modes. The row is `px-3` and the icon is 16px, so in a
+ * 40px collapsed row (56px rail less the nav's own 8px each side) the icon
+ * is centred WITHOUT switching to `justify-center` - the icon column never
+ * moves, and a collapse is a pure width tween with the labels fading.
+ */
 const ROW_BASE =
-  'relative flex h-9 w-full items-center gap-3 rounded-[var(--radius-md)] px-2.5 text-left text-sm font-medium outline-none transition-colors ' +
+  'relative flex h-9 w-full items-center gap-3 overflow-hidden whitespace-nowrap rounded-[var(--radius-md)] px-3 text-left text-sm font-medium outline-none transition-colors ' +
   'focus-visible:[box-shadow:var(--ring-focus)]'
 
+/** The part of a row that fades out on a collapsed rail: the label, badge, chevron. */
+const FADE =
+  'transition-opacity duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none'
+
+function fadeClass(collapsed: boolean): string {
+  return cn(FADE, collapsed ? 'opacity-0' : 'opacity-100')
+}
+
 const ROW_REST =
   'text-[rgb(var(--sidebar-text))] hover:bg-[rgb(var(--sidebar-surface-hover))] hover:text-[rgb(var(--sidebar-text-bright))]'
 
@@ -171,31 +194,26 @@ function SidebarNavItem({
   const rowClass = cn(
     ROW_BASE,
     active ? ROW_ACTIVE : ROW_REST,
-    collapsed && 'justify-center px-0',
-    nested && !collapsed && 'h-8 pl-[2.375rem] text-[13px]',
+    // A nested row is a step shorter and a step smaller; it keeps its icon.
+    nested && 'h-8 gap-2.5 px-2 text-[13px]',
     className,
   )
+  // The label and badge stay MOUNTED on a collapsed rail and fade instead:
+  // unmounting them snapped every row to its collapsed layout on the first
+  // frame while the rail was still 260px wide.
   const content = (
     <>
       {active && !nested && <ActiveBar />}
-      {(!nested || collapsed) && <RowIcon icon={icon} />}
-      {nested && !collapsed && (
-        // The connector: a dot on the group's rail, filled when active.
-        <span
-          aria-hidden="true"
-          className={cn(
-            'absolute left-[1.0625rem] top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors',
-            active ? 'bg-[rgb(var(--accent))]' : 'bg-[rgb(var(--sidebar-rail))]',
-          )}
-        />
-      )}
-      {!collapsed && <span className="flex-1 truncate">{label}</span>}
+      <RowIcon icon={icon} />
+      <span className={cn('flex-1 truncate', fadeClass(collapsed))}>{label}</span>
       {/* The space is for the accessible name: "New audit Beta", not "New auditBeta".
           A whitespace-only text node is invisible in a flex row. */}
-      {!collapsed && badge !== undefined && badge !== null && (
+      {badge !== undefined && badge !== null && (
         <>
           {' '}
-          <RowBadge>{badge}</RowBadge>
+          <span className={fadeClass(collapsed)}>
+            <RowBadge>{badge}</RowBadge>
+          </span>
         </>
       )}
     </>
@@ -228,6 +246,35 @@ function SidebarNavItem({
 // ---------------------------------------------------------------------------
 // Group
 
+type GroupHeaderProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  collapsed: boolean
+  /** The disclosure's own state, re-applied over the Trigger's flyout ARIA when expanded. */
+  disclosureOpen: boolean
+  disclosureControls: string
+}
+
+/**
+ * The group's header button. Always the Popover.Trigger's `asChild` child, so
+ * the element is the same in both modes - but the Trigger clones its own
+ * `aria-expanded` / `aria-haspopup` over ours, which is right for the flyout
+ * and wrong for the disclosure. Expanded, this puts the disclosure's ARIA
+ * back on top; collapsed, the flyout's stands.
+ */
+const GroupHeader = forwardRef<HTMLButtonElement, GroupHeaderProps>(function GroupHeader(
+  { collapsed, disclosureOpen, disclosureControls, ...props },
+  ref,
+) {
+  const disclosure = collapsed
+    ? {}
+    : {
+        'aria-haspopup': undefined,
+        'data-state': undefined,
+        'aria-expanded': disclosureOpen,
+        'aria-controls': disclosureControls,
+      }
+  return <button ref={ref} type="button" {...props} {...disclosure} />
+})
+
 export interface SidebarNavGroupProps {
   /** Stable id — the body's DOM id derives from it. */
   id: string
@@ -265,83 +312,102 @@ function SidebarNavGroup({
   const bodyId = `sidebar-group-${id}-${reactId}`
   const labelId = `${bodyId}-label`
 
-  if (collapsed) {
-    // The flyout: the group's items at full width, to the right of the tile.
-    return (
-      <Popover>
-        <Popover.Trigger asChild>
-          <button
-            type="button"
-            title={label}
-            className={cn(ROW_BASE, 'justify-center px-0', active ? ROW_ACTIVE : ROW_REST)}
-          >
-            {active && <ActiveBar />}
-            <RowIcon icon={icon} />
-          </button>
-        </Popover.Trigger>
-        <Popover.Content side="right" align="start" offset={8} aria-label={label} className="min-w-[13rem] p-1.5">
+  const [flyoutOpen, setFlyoutOpen] = useState(false)
+  // Leaving the collapsed rail closes any flyout with it.
+  useEffect(() => {
+    if (!collapsed) setFlyoutOpen(false)
+  }, [collapsed])
+
+  // The SAME header button in both modes, so a collapse never remounts it:
+  // expanded it toggles the body, collapsed it opens the flyout. The Trigger
+  // (asChild) runs the child's onClick first and skips its own toggle when
+  // the event was defaultPrevented - which is how the expanded click stays a
+  // plain disclosure toggle.
+  const header = (
+    <GroupHeader
+      collapsed={collapsed}
+      disclosureOpen={open}
+      disclosureControls={bodyId}
+      onClick={(event) => {
+        if (collapsed) return
+        event.preventDefault()
+        setOpen(!open)
+      }}
+      id={labelId}
+      title={collapsed ? label : undefined}
+      // Closed and containing the current route: the header carries the
+      // active look so the location is never hidden. Open, the child row
+      // carries it and the header stays quiet. Collapsed, the body is shut,
+      // so an active group always shows it on the tile.
+      className={cn(ROW_BASE, active && (!open || collapsed) ? ROW_ACTIVE : ROW_REST)}
+    >
+      {active && (!open || collapsed) && <ActiveBar />}
+      <RowIcon icon={icon} />
+      <span id={`${labelId}-text`} className={cn('flex-1 truncate', fadeClass(collapsed))}>
+        {label}
+      </span>
+      {badge !== undefined && badge !== null && (
+        <>
+          {' '}
+          <span className={fadeClass(collapsed)}>
+            <RowBadge>{badge}</RowBadge>
+          </span>
+        </>
+      )}
+      <ChevronDown
+        aria-hidden="true"
+        className={cn(
+          'h-3.5 w-3.5 shrink-0 text-[rgb(var(--sidebar-text-dim))] transition-[transform,opacity] duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none',
+          collapsed ? 'opacity-0' : 'opacity-100',
+        )}
+        style={{ transform: open && !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
+      />
+    </GroupHeader>
+  )
+
+  return (
+    <div className="flex flex-col">
+      <Popover open={collapsed && flyoutOpen} onOpenChange={setFlyoutOpen}>
+        <Popover.Trigger asChild>{header}</Popover.Trigger>
+        <Popover.Content
+          side="right"
+          align="start"
+          offset={8}
+          aria-label={label}
+          className="min-w-[13rem] p-1.5"
+        >
+          {/* The flyout: the group's items at full width, to the right of the tile. */}
           <Ctx.Provider value={{ collapsed: false, nested: false }}>
-            <p
-              id={labelId}
-              className="px-2.5 pb-1 pt-1 text-[11px] font-semibold text-[rgb(var(--text-tertiary))]"
-            >
+            <p className="px-2.5 pb-1 pt-1 text-[11px] font-semibold text-[rgb(var(--text-tertiary))]">
               {label}
             </p>
-            <div role="group" aria-labelledby={labelId} className="flex flex-col gap-0.5">
+            <div role="group" aria-label={label} className="flex flex-col gap-0.5">
               {children}
             </div>
           </Ctx.Provider>
         </Popover.Content>
       </Popover>
-    )
-  }
-
-  return (
-    <div className="flex flex-col">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        aria-controls={bodyId}
-        id={labelId}
-        // Closed and containing the current route: the header carries the
-        // active look so the location is never hidden. Open, the child row
-        // carries it and the header stays quiet.
-        className={cn(ROW_BASE, active && !open ? ROW_ACTIVE : ROW_REST)}
-      >
-        {active && !open && <ActiveBar />}
-        <RowIcon icon={icon} />
-        <span id={`${labelId}-text`} className="flex-1 truncate">
-          {label}
-        </span>
-        {badge !== undefined && badge !== null && (
-          <>
-            {' '}
-            <RowBadge>{badge}</RowBadge>
-          </>
-        )}
-        <ChevronDown
-          aria-hidden="true"
-          className="h-3.5 w-3.5 shrink-0 text-[rgb(var(--sidebar-text-dim))] transition-transform duration-150 ease-out motion-reduce:transition-none"
-          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
-        />
-      </button>
-      <div className="ds-sidebar-group-body" data-open={open ? 'true' : 'false'}>
+      {/* The body closes IN STEP with a collapse (its track shrinks over the
+          same duration the rail does) and reopens when the rail comes back,
+          if the group was open. */}
+      <div className="ds-sidebar-group-body" data-open={open && !collapsed ? 'true' : 'false'}>
         <div className="min-h-0 overflow-hidden">
           <Ctx.Provider value={{ collapsed: false, nested: true }}>
             <div
               id={bodyId}
               role="group"
               aria-labelledby={`${labelId}-text`}
-              // The rail: one hairline under the icon column that the child
-              // connectors sit on. Its geometry derives from the icon centre
-              // (px-2.5 + half of h-4 = 1.0625rem).
-              className="relative flex flex-col gap-0.5 py-0.5 before:absolute before:bottom-1 before:left-[1.0625rem] before:top-1 before:w-px before:-translate-x-1/2 before:bg-[rgb(var(--sidebar-rail))]"
+              // The rail: one continuous hairline dropping from the header's
+              // icon column, with the child rows INSIDE it - a child's hover
+              // or active fill starts to the right of the line, never over it.
+              // Its x derives from the icon centre (px-3 + half of h-4 =
+              // 1.25rem, less half the line).
+              className="ml-[calc(1.25rem-0.5px)] flex flex-col gap-0.5 border-l border-[rgb(var(--sidebar-rail))] py-1 pl-2"
               // Stays in the DOM while closed so the track has something to
               // shrink over; `inert` keeps its links out of the tab ring and
               // the accessibility tree until it is open again.
-              inert={!open}
-              aria-hidden={!open}
+              inert={!open || collapsed}
+              aria-hidden={!open || collapsed}
             >
               {children}
             </div>

package/src/styles.css

@@ -2311,7 +2311,7 @@
 .ds-sidebar-group-body {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--dur-fast) var(--ease-out);
+  transition: grid-template-rows var(--dur-base) var(--ease-out);
 }
 .ds-sidebar-group-body[data-open='true'] {
   grid-template-rows: 1fr;