@flipdish/ui-library 0.33.0 → 0.34.1

package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.js

@@ -34,7 +34,7 @@ const NavAccountMenu = ({ className, menuItems = [], bottomMenuItems = [], testI
         }, "data-testid": menuItemTestId(prefix, item) }, item.label));
     return (jsx(Dialog, { ...dialogProps, className: cx('w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden', className), children: ({ close }) => (jsxs(Fragment, { children: [menuItems.length > 0 && (jsx("div", { className: "rounded-xl bg-primary ring-1 ring-secondary", children: jsx("div", { className: "flex flex-col gap-0.5 py-1.5", children: menuItems.map((item) => renderItem(item, close)) }) })), bottomMenuItems.length > 0 && jsx("div", { className: "pt-1 pb-1.5", children: bottomMenuItems.map((item) => renderItem(item, close)) })] })) }));
 };
-const NavAccountCard = ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant = 'full', onOpenChange, 'data-testid': dataTestId, }) => {
+const NavAccountCard = ({ popoverPlacement, account, avatarRounded, menuItems, bottomMenuItems, variant = 'full', collapsed, resizing, onOpenChange, 'data-testid': dataTestId, }) => {
     const triggerRef = useRef(null);
     const isDesktop = useBreakpoints('lg');
     // The trigger is icon/avatar-only with no visible text, so it needs an explicit
@@ -45,7 +45,14 @@ const NavAccountCard = ({ popoverPlacement, account, avatarRounded, menuItems, b
     if (variant === 'avatar') {
         return (jsxs(DialogTrigger, { onOpenChange: onOpenChange, children: [jsx(Button, { "aria-label": triggerLabel, ...testIdProps(accountTestId), className: ({ isPressed, isFocused }) => cx('group relative inline-flex cursor-pointer rounded-full', (isPressed || isFocused) && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsx(Avatar, { border: true, status: account.status, src: account.avatar, size: "md", alt: account.name, rounded: avatarRounded }) }), jsx(Popover, { placement: popoverPlacement ?? 'right bottom', offset: 8, crossOffset: 6, className: POPOVER_ANIMATION, children: menu })] }));
     }
-    return (jsxs("div", { ref: triggerRef, className: "relative flex items-center gap-3 rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset", children: [jsx(AvatarLabelGroup, { size: "md", src: account.avatar, title: account.name, subtitle: account.email, status: account.status, rounded: avatarRounded }), jsxs(DialogTrigger, { onOpenChange: onOpenChange, children: [jsx(Button, { "aria-label": triggerLabel, ...testIdProps(accountTestId), className: "absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover", children: jsx(ChevronSelectorVertical, { className: "size-4 shrink-0 stroke-[2.25px]" }) }), jsx(Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] })] }));
+    const isRail = collapsed !== undefined;
+    // In rail mode the text and chevron fade as one; the fade-in waits for the rail to open a little.
+    const fadeClassName = isRail && cx('transition-opacity motion-reduce:transition-none', collapsed ? 'opacity-0 duration-150' : 'delay-100 duration-150');
+    return (jsxs("div", { ref: triggerRef, className: cx('relative flex items-center rounded-xl bg-primary p-3 ring-1 ring-secondary ring-inset', isRail && 'transition-[padding,margin,background-color,box-shadow] duration-300 ease-out motion-reduce:transition-none', 
+        // Collapsed, the card is the 44px avatar slot of the icon-only rail: 2px of padding around the 40px avatar, overhanging the 36px rows by 4px.
+        collapsed && '-mx-1 bg-transparent p-0.5 ring-transparent'), children: [jsx("div", { className: "-m-1 flex min-w-0 flex-1 overflow-hidden p-1", children: jsx(AvatarLabelGroup, { size: "md", src: account.avatar, 
+                    // Block spans keep each line single-line at its natural width while the card resizes, so the name never wraps as the card narrows.
+                    title: jsx("span", { className: cx('block truncate', fadeClassName), children: account.name }), subtitle: jsx("span", { className: cx('block truncate', fadeClassName), children: account.email }), status: account.status, rounded: avatarRounded, className: resizing ? 'min-w-max' : undefined }) }), jsxs(DialogTrigger, { onOpenChange: onOpenChange, children: [jsx(Button, { "aria-label": triggerLabel, ...testIdProps(accountTestId), className: cx('peer absolute flex cursor-pointer items-center justify-center outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2', collapsed ? 'inset-0.5 rounded-full' : 'top-2 right-2 size-7 rounded-md hover:bg-primary_hover pressed:bg-primary_hover') }), jsx(Popover, { placement: popoverPlacement ?? (isDesktop ? 'right bottom' : 'top right'), triggerRef: triggerRef, offset: 8, className: POPOVER_ANIMATION, children: menu })] }), jsx(ChevronSelectorVertical, { "aria-hidden": "true", className: cx('pointer-events-none absolute top-3.5 right-3.5 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary peer-hover:text-fg-quaternary_hover peer-pressed:text-fg-quaternary_hover', fadeClassName) })] }));
 };
 
 export { NavAccountCard, NavAccountMenu };

package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavAccountCard.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavAccountCard.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaLink","AriaDialog","_Fragment","AriaDialogTrigger","AriaButton","AriaPopover"],"mappings":"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"}
+{"version":3,"file":"NavAccountCard.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavAccountCard.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaLink","AriaDialog","_Fragment","AriaDialogTrigger","AriaButton","AriaPopover"],"mappings":";;;;;;;;;;;AAoEA;AACA,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,IAA4B,KAClE,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,MAAM,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;AAEhG,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAA+C,KAC/F,EAAE,CACA,uDAAuD,EACvD,UAAU;AACR,IAAA,+JAA+J,EACjK,SAAS;AACP,IAAA,6JAA6J,CAChK;AAEH,MAAM,mBAAmB,GAAG,mEAAmE;AAE/F,MAAM,sBAAsB,GAAG,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,aAAa,EAAE,UAAU,GACwE,KAAI;AACrG,IAAA,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC;IAC7C,MAAM,OAAO,IACXA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,iGAAiG,CAClG,EAAA,QAAA,EAAA,CAEDA,cAAK,SAAS,EAAC,uFAAuF,EAAA,QAAA,EAAA,CACnG,IAAI,IAAIC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,qEAAqE,EAAA,CAAG,EAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CACrG,EACL,aAAa,KACZA,aAAK,SAAS,EAAC,sGAAsG,EAAA,QAAA,EAAE,aAAa,GAAO,CAC5I,CAAA,EAAA,CACG,CACP;;AAGD,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,QAAA,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC;AACvC,QAAA,QACEA,GAAA,CAACC,IAAQ,IACP,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EACpB,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,EACvC,GAAG,EAAC,qBAAqB,EAAA,aAAA,EACZ,UAAU,EACvB,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,OAAO,YAEf,OAAO,EAAA,CACC;IAEf;AAEA,IAAA,QACED,GAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAA,aAAA,EAAc,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,YAC5F,OAAO,EAAA,CACD;AAEb,CAAC;MAEY,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,YAAY,EACZ,GAAG,WAAW,EAOf,KAAI;IACH,MAAM,MAAM,GAAG,YAAY,IAAI,UAAU,CAAC,kBAAkB,CAAC;;AAG7D,IAAA,MAAM,UAAU,GAAG,CAAC,IAA4B,EAAE,KAAiB,MACjEA,GAAA,CAAC,sBAAsB,EAAA,EAErB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,MAAK;AACZ,YAAA,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,OAAO,IAAI;AAClB,QAAA,CAAC,EAAA,aAAA,EACY,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,EAAA,EATpC,IAAI,CAAC,KAAK,CAUf,CACH;IAED,QACEA,IAACE,MAAU,EAAA,EAAA,GAAK,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,mFAAmF,EAAE,SAAS,CAAC,EAAA,QAAA,EACvI,CAAC,EAAE,KAAK,EAAE,MACTH,IAAA,CAAAI,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBH,aAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,YAAE,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAA,CAAO,GAClG,CACP,EAEA,eAAe,CAAC,MAAM,GAAG,CAAC,IAAIA,aAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,GAAO,CAAA,EAAA,CACzH,CACJ,EAAA,CACU;AAEjB;AAEO,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,aAAa,EAAE,UAAU,GAgC1B,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;;;AAItC,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;AACjH,IAAA,MAAM,YAAY,GAAG,CAAA,EAAG,OAAO,CAAC,IAAI,eAAe;AAEnD,IAAA,MAAM,IAAI,GAAGA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,GAAI;AAEpH,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;QACxB,QACED,KAACK,aAAiB,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CAC3CJ,GAAA,CAACK,MAAU,EAAA,EAAA,YAAA,EACG,YAAY,EAAA,GACpB,WAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAqB,KACrD,EAAE,CAAC,wDAAwD,EAAE,CAAC,SAAS,IAAI,SAAS,KAAK,+CAA+C,CAAC,EAAA,QAAA,EAG3IL,GAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAA,IAAA,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CACxG,EACbA,GAAA,CAACM,OAAW,EAAA,EAAC,SAAS,EAAE,gBAAgB,IAAI,cAAc,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,iBAAiB,YAChH,IAAI,EAAA,CACO,CAAA,EAAA,CACI;IAExB;AAEA,IAAA,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS;;AAEtC,IAAA,MAAM,aAAa,GACjB,MAAM,IAAI,EAAE,CAAC,kDAAkD,EAAE,SAAS,GAAG,wBAAwB,GAAG,wBAAwB,CAAC;AAEnI,IAAA,QACEP,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,uFAAuF,EACvF,MAAM,IAAI,6GAA6G;;QAEvH,SAAS,IAAI,6CAA6C,CAC3D,EAAA,QAAA,EAAA,CAGDC,aAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC3DA,GAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EAAC,IAAI,EACT,GAAG,EAAE,OAAO,CAAC,MAAM;;AAEnB,oBAAA,KAAK,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAG,OAAO,CAAC,IAAI,EAAA,CAAQ,EAClF,QAAQ,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAG,OAAO,CAAC,KAAK,GAAQ,EACtF,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,QAAQ,GAAG,WAAW,GAAG,SAAS,EAAA,CAC7C,EAAA,CACE,EAEND,IAAA,CAACK,aAAiB,EAAA,EAAC,YAAY,EAAE,YAAY,aAE3CJ,GAAA,CAACK,MAAU,EAAA,EAAA,YAAA,EACG,YAAY,KACpB,WAAW,CAAC,aAAa,CAAC,EAC9B,SAAS,EAAE,EAAE,CACX,6KAA6K,EAC7K,SAAS,GAAG,wBAAwB,GAAG,iFAAiF,CACzH,EAAA,CACD,EACFL,GAAA,CAACM,OAAW,EAAA,EACV,SAAS,EAAE,gBAAgB,KAAK,SAAS,GAAG,cAAc,GAAG,WAAW,CAAC,EACzE,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAE3B,IAAI,EAAA,CACO,CAAA,EAAA,CACI,EACpBN,GAAA,CAAC,uBAAuB,EAAA,EAAA,aAAA,EACV,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,6KAA6K,EAC7K,aAAa,CACd,EAAA,CACD,CAAA,EAAA,CACE;AAEV;;"}

package/dist/components/organisms/SidebarNavigation/components/NavItem.cjs

@@ -20,7 +20,8 @@ const styles = cx.sortCx({
     rootSelected: 'bg-brand-primary hover:bg-brand-primary',
 });
 const StatusDot = ({ status }) => (jsxRuntime.jsx("span", { "aria-hidden": "true", className: cx.cx('mr-2 size-2 shrink-0 rounded-full', status === 'online' ? 'bg-success-solid' : 'bg-fg-quaternary') }));
-const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, children, truncate = true, status, onClick, hasSubmenu, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'data-testid': dataTestId, }) => {
+const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, children, truncate = true, status, onClick, hasSubmenu, collapsed, resizing, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'data-testid': dataTestId, }) => {
+    const isRail = collapsed !== undefined;
     // `current` means "this is the current page" (→ aria-current); `selected` is the
     // brand-highlight state (open/selected section), which may differ from the page.
     const isSelected = selected ?? current;
@@ -28,11 +29,16 @@ const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, childre
     useAriaDisclosureAttrs.useAriaDisclosureAttrs(linkRef, { ariaExpanded, ariaControls });
     const iconElement = Icon && (jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: cx.cx('mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', isSelected && 'text-fg-brand-primary group-hover/item:text-fg-brand-primary') }));
     const badgeElement = badge && (typeof badge === 'string' || typeof badge === 'number') ? (jsxRuntime.jsx(Badge.Badge, { className: "ml-3", color: isSelected ? 'brand' : 'gray', type: "pill-color", size: "sm", children: badge })) : (badge);
-    const labelElement = (jsxRuntime.jsx("span", { className: cx.cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && 'truncate', isSelected && 'text-brand-secondary group-hover/item:text-brand-secondary'), children: children }));
+    const labelElement = (jsxRuntime.jsx("span", { className: cx.cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && (resizing ? 'whitespace-nowrap' : 'truncate'), isSelected && 'text-brand-secondary group-hover/item:text-brand-secondary'), children: children }));
     const isExternal = hrefUtils.isExternalHref(href);
     const externalIcon = isExternal && jsxRuntime.jsx(uiIcons.Share04, { className: "size-4 stroke-[2.5px] text-fg-quaternary" });
     // A trailing chevron on a section parent signals it has a revealable sub-navigation tier.
     const submenuChevron = hasSubmenu && (jsxRuntime.jsx(uiIcons.ChevronRight, { "aria-hidden": "true", className: cx.cx('ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary', isSelected && 'text-fg-brand-primary') }));
+    // Everything after the icon fades as one block in rail mode. While resizing it keeps its natural width so the
+    // row's edge wipes it in or out instead of the label reflowing; the fade-in waits for the rail to open a little.
+    const trailingElement = (jsxRuntime.jsxs("span", { className: cx.cx('flex flex-1 items-center', resizing ? 'shrink-0' : 'min-w-0', isRail && 'transition-opacity motion-reduce:transition-none', isRail && (collapsed ? 'opacity-0 duration-150' : 'delay-100 duration-150')), children: [labelElement, externalIcon, badgeElement, submenuChevron] }));
+    // The icon's margin and the trailing block overflow a collapsed row; clipping keeps the hover surface the row itself.
+    const railClassName = isRail && 'overflow-hidden';
     if (type === 'collapsible') {
         return (
         // biome-ignore lint/a11y/noStaticElementInteractions: This is a summary element
@@ -43,9 +49,9 @@ const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, childre
     }
     // useButton forwards aria-expanded/aria-controls as plain props, unlike useLink — no ref workaround needed here.
     if (type === 'disclosure') {
-        return (jsxRuntime.jsxs(reactAriaComponents.Button, { "data-testid": dataTestId, className: cx.cx('group/item p-2', styles.root, isSelected && styles.rootSelected), onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, children: [status && jsxRuntime.jsx(StatusDot, { status: status }), iconElement, labelElement, badgeElement, submenuChevron] }));
+        return (jsxRuntime.jsxs(reactAriaComponents.Button, { "data-testid": dataTestId, className: cx.cx('group/item p-2', styles.root, isSelected && styles.rootSelected, railClassName), onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, children: [status && jsxRuntime.jsx(StatusDot, { status: status }), iconElement, trailingElement] }));
     }
-    return (jsxRuntime.jsxs(reactAriaComponents.Link, { ref: linkRef, href: hrefUtils.safeHref(href), target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", "data-testid": dataTestId, className: cx.cx('group/item p-2', styles.root, isSelected && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [status && jsxRuntime.jsx(StatusDot, { status: status }), iconElement, labelElement, externalIcon, badgeElement, submenuChevron] }));
+    return (jsxRuntime.jsxs(reactAriaComponents.Link, { ref: linkRef, href: hrefUtils.safeHref(href), target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", "data-testid": dataTestId, className: cx.cx('group/item p-2', styles.root, isSelected && styles.rootSelected, railClassName), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [status && jsxRuntime.jsx(StatusDot, { status: status }), iconElement, trailingElement] }));
 };
 
 exports.NavItemBase = NavItemBase;

package/dist/components/organisms/SidebarNavigation/components/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"sourcesContent":[null],"names":["sortCx","_jsx","cx","useRef","useAriaDisclosureAttrs","Badge","isExternalHref","Share04","ChevronRight","_jsxs","ChevronDown","AriaLink","safeHref","AriaButton"],"mappings":"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"}
+{"version":3,"file":"NavItem.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"sourcesContent":[null],"names":["sortCx","_jsx","cx","useRef","useAriaDisclosureAttrs","Badge","isExternalHref","Share04","ChevronRight","_jsxs","ChevronDown","AriaLink","safeHref","AriaButton"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/components/NavItem.d.ts

@@ -18,6 +18,17 @@ interface NavItemBaseProps {
     selected?: boolean;
     /** Whether to truncate the label text. */
     truncate?: boolean;
+    /**
+     * Rail mode, for `link` and `disclosure` items in the collapsible sidebar: `true` shrinks the item to its
+     * icon, fading out the label, badge and chevron as the row narrows with the rail; `false` fades them back
+     * in. The label stays in the DOM so the item keeps its accessible name. Omit outside the rail.
+     */
+    collapsed?: boolean;
+    /**
+     * Set while the rail animates between widths. The label keeps its full width and is clipped by the row's
+     * edge instead of re-truncating every frame, so a long label never reflows mid-motion.
+     */
+    resizing?: boolean;
     /** Optional leading status dot rendered before the icon. */
     status?: NavItemStatus;
     /** Handler for click events. */
@@ -33,6 +44,6 @@ interface NavItemBaseProps {
     /** Content to display. */
     children?: ReactNode;
 }
-export declare const NavItemBase: ({ current, selected, type, badge, href, icon: Icon, children, truncate, status, onClick, hasSubmenu, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "data-testid": dataTestId, }: NavItemBaseProps) => import("react").JSX.Element;
+export declare const NavItemBase: ({ current, selected, type, badge, href, icon: Icon, children, truncate, status, onClick, hasSubmenu, collapsed, resizing, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "data-testid": dataTestId, }: NavItemBaseProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=NavItem.d.ts.map

package/dist/components/organisms/SidebarNavigation/components/NavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB9E,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,UAAU,gBAAgB;IACxB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,mBAAmB,GAAG,YAAY,CAAC;IAClE,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC5C,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sHAAsH;IACtH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wFAAwF;IACxF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,WAAW,GAAI,iMAezB,gBAAgB,gCAuHlB,CAAC"}
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB9E,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,UAAU,gBAAgB;IACxB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,mBAAmB,GAAG,YAAY,CAAC;IAClE,iCAAiC;IACjC,IAAI,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC5C,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sHAAsH;IACtH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wFAAwF;IACxF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,WAAW,GAAI,sNAiBzB,gBAAgB,gCAuIlB,CAAC"}

package/dist/components/organisms/SidebarNavigation/components/NavItem.js

@@ -18,7 +18,8 @@ const styles = sortCx({
     rootSelected: 'bg-brand-primary hover:bg-brand-primary',
 });
 const StatusDot = ({ status }) => (jsx("span", { "aria-hidden": "true", className: cx('mr-2 size-2 shrink-0 rounded-full', status === 'online' ? 'bg-success-solid' : 'bg-fg-quaternary') }));
-const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, children, truncate = true, status, onClick, hasSubmenu, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'data-testid': dataTestId, }) => {
+const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, children, truncate = true, status, onClick, hasSubmenu, collapsed, resizing, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'data-testid': dataTestId, }) => {
+    const isRail = collapsed !== undefined;
     // `current` means "this is the current page" (→ aria-current); `selected` is the
     // brand-highlight state (open/selected section), which may differ from the page.
     const isSelected = selected ?? current;
@@ -26,11 +27,16 @@ const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, childre
     useAriaDisclosureAttrs(linkRef, { ariaExpanded, ariaControls });
     const iconElement = Icon && (jsx(Icon, { "aria-hidden": "true", className: cx('mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all group-hover/item:text-fg-quaternary_hover', isSelected && 'text-fg-brand-primary group-hover/item:text-fg-brand-primary') }));
     const badgeElement = badge && (typeof badge === 'string' || typeof badge === 'number') ? (jsx(Badge, { className: "ml-3", color: isSelected ? 'brand' : 'gray', type: "pill-color", size: "sm", children: badge })) : (badge);
-    const labelElement = (jsx("span", { className: cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && 'truncate', isSelected && 'text-brand-secondary group-hover/item:text-brand-secondary'), children: children }));
+    const labelElement = (jsx("span", { className: cx('flex-1 text-sm font-semibold text-secondary transition-inherit-all group-hover/item:text-secondary_hover', truncate && (resizing ? 'whitespace-nowrap' : 'truncate'), isSelected && 'text-brand-secondary group-hover/item:text-brand-secondary'), children: children }));
     const isExternal = isExternalHref(href);
     const externalIcon = isExternal && jsx(Share04, { className: "size-4 stroke-[2.5px] text-fg-quaternary" });
     // A trailing chevron on a section parent signals it has a revealable sub-navigation tier.
     const submenuChevron = hasSubmenu && (jsx(ChevronRight, { "aria-hidden": "true", className: cx('ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary', isSelected && 'text-fg-brand-primary') }));
+    // Everything after the icon fades as one block in rail mode. While resizing it keeps its natural width so the
+    // row's edge wipes it in or out instead of the label reflowing; the fade-in waits for the rail to open a little.
+    const trailingElement = (jsxs("span", { className: cx('flex flex-1 items-center', resizing ? 'shrink-0' : 'min-w-0', isRail && 'transition-opacity motion-reduce:transition-none', isRail && (collapsed ? 'opacity-0 duration-150' : 'delay-100 duration-150')), children: [labelElement, externalIcon, badgeElement, submenuChevron] }));
+    // The icon's margin and the trailing block overflow a collapsed row; clipping keeps the hover surface the row itself.
+    const railClassName = isRail && 'overflow-hidden';
     if (type === 'collapsible') {
         return (
         // biome-ignore lint/a11y/noStaticElementInteractions: This is a summary element
@@ -41,9 +47,9 @@ const NavItemBase = ({ current, selected, type, badge, href, icon: Icon, childre
     }
     // useButton forwards aria-expanded/aria-controls as plain props, unlike useLink — no ref workaround needed here.
     if (type === 'disclosure') {
-        return (jsxs(Button, { "data-testid": dataTestId, className: cx('group/item p-2', styles.root, isSelected && styles.rootSelected), onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, children: [status && jsx(StatusDot, { status: status }), iconElement, labelElement, badgeElement, submenuChevron] }));
+        return (jsxs(Button, { "data-testid": dataTestId, className: cx('group/item p-2', styles.root, isSelected && styles.rootSelected, railClassName), onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, children: [status && jsx(StatusDot, { status: status }), iconElement, trailingElement] }));
     }
-    return (jsxs(Link, { ref: linkRef, href: safeHref(href), target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", "data-testid": dataTestId, className: cx('group/item p-2', styles.root, isSelected && styles.rootSelected), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [status && jsx(StatusDot, { status: status }), iconElement, labelElement, externalIcon, badgeElement, submenuChevron] }));
+    return (jsxs(Link, { ref: linkRef, href: safeHref(href), target: isExternal ? '_blank' : '_self', rel: "noopener noreferrer", "data-testid": dataTestId, className: cx('group/item p-2', styles.root, isSelected && styles.rootSelected, railClassName), onClick: onClick, "aria-current": current ? 'page' : undefined, children: [status && jsx(StatusDot, { status: status }), iconElement, trailingElement] }));
 };
 
 export { NavItemBase };

package/dist/components/organisms/SidebarNavigation/components/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink","AriaButton"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../../../../../src/components/organisms/SidebarNavigation/components/NavItem.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink","AriaButton"],"mappings":"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"}

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var localStorageUtils = require('@flipdish/ui-library/utilities/localStorageUtils');
+var react = require('motion/react');
+var React = require('react');
+
+/** One spring for the rail, the page beside it and the secondary panel, so everything that resizes moves together. */
+const SIDEBAR_SPRING = { type: 'spring', damping: 26, stiffness: 220, bounce: 0 };
+const INSTANT = { duration: 0 };
+/**
+ * Collapsed state of the sidebar rail and the flags its width animation needs. Resolves controlled versus
+ * uncontrolled state, restores a persisted preference after hydration without animating it, and tracks whether
+ * the rail is between widths so labels can hold their width while it moves.
+ *
+ * @param options The collapse props of `SidebarNavigation`.
+ * @returns The resolved state, its setter, the two animation flags, the Motion transition for the width, and the
+ * callback to pass to the rail's `onAnimationComplete`.
+ */
+const useSidebarCollapse = ({ collapsed, defaultCollapsed, onCollapsedChange, persistCollapsed }) => {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
+    // The stored preference is applied after hydration (reading it during render would mismatch the server markup), so
+    // it must not animate: a returning user would watch the rail and the page spring closed on every load. The flag makes
+    // that one change instant for Motion and lets the rail switch off its CSS fades.
+    const [isApplyingStoredPreference, setIsApplyingStoredPreference] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (isControlled || !persistCollapsed)
+            return;
+        const stored = localStorageUtils.sidebarCollapsedStorage.get();
+        if (stored === null || stored === defaultCollapsed)
+            return;
+        setIsApplyingStoredPreference(true);
+        setInternalCollapsed(stored);
+    }, [isControlled, persistCollapsed, defaultCollapsed]);
+    const setCollapsed = (next) => {
+        onCollapsedChange?.(next);
+        if (isControlled)
+            return;
+        setInternalCollapsed(next);
+        if (persistCollapsed)
+            localStorageUtils.sidebarCollapsedStorage.set(next);
+    };
+    const shouldReduceMotion = react.useReducedMotion();
+    const resizeTransition = shouldReduceMotion || isApplyingStoredPreference ? INSTANT : SIDEBAR_SPRING;
+    // While the rail is between widths its labels keep their width and get wiped by the row's edge rather than re-truncating
+    // every frame. Tracked from the resolved state, so a controlled toggle counts too, and cleared when the width settles.
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [settledCollapsed, setSettledCollapsed] = React.useState(isCollapsed);
+    if (settledCollapsed !== isCollapsed) {
+        setSettledCollapsed(isCollapsed);
+        setIsResizing(true);
+    }
+    // The fades come back only after a paint: cleared any earlier, the browser would compute the collapsed styles with
+    // the transitions already restored and the logo and toggle would still animate from the default state. The instant
+    // width change has settled by then too, so the resize flag clears here rather than waiting on Motion's callback for a
+    // zero-duration run. In a background tab the frames wait for the tab to show, which is harmless since nothing painted.
+    React.useEffect(() => {
+        if (!isApplyingStoredPreference)
+            return;
+        let frame = requestAnimationFrame(() => {
+            frame = requestAnimationFrame(() => {
+                setIsApplyingStoredPreference(false);
+                setIsResizing(false);
+            });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isApplyingStoredPreference]);
+    return {
+        isCollapsed,
+        setCollapsed,
+        /** True while the rail animates between widths. */
+        isResizing,
+        /** True for the first paint of a restored preference, while the rail must not transition anything. */
+        isApplyingStoredPreference,
+        /** The Motion transition for the rail's width and the page placeholder beside it. */
+        resizeTransition,
+        /** Pass to the rail's `onAnimationComplete`. */
+        onResizeComplete: () => setIsResizing(false),
+    };
+};
+
+exports.SIDEBAR_SPRING = SIDEBAR_SPRING;
+exports.useSidebarCollapse = useSidebarCollapse;
+//# sourceMappingURL=useSidebarCollapse.cjs.map

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarCollapse.cjs","sources":["../../../../../src/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.ts"],"sourcesContent":[null],"names":["useState","useLayoutEffect","sidebarCollapsedStorage","useReducedMotion","useEffect"],"mappings":";;;;;;AAMA;MACa,cAAc,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAEtF,MAAM,OAAO,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAW;AAaxC;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,EAA0B,KAAI;AACjI,IAAA,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS;IAC5C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,gBAAgB,CAAC;IAC5E,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,iBAAiB;;;;IAKhE,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACnFC,qBAAe,CAAC,MAAK;QACnB,IAAI,YAAY,IAAI,CAAC,gBAAgB;YAAE;AACvC,QAAA,MAAM,MAAM,GAAGC,yCAAuB,CAAC,GAAG,EAAE;AAC5C,QAAA,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,gBAAgB;YAAE;QACpD,6BAA6B,CAAC,IAAI,CAAC;QACnC,oBAAoB,CAAC,MAAM,CAAC;IAC9B,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;AAEtD,IAAA,MAAM,YAAY,GAAG,CAAC,IAAa,KAAI;AACrC,QAAA,iBAAiB,GAAG,IAAI,CAAC;AACzB,QAAA,IAAI,YAAY;YAAE;QAClB,oBAAoB,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,gBAAgB;AAAE,YAAAA,yCAAuB,CAAC,GAAG,CAAC,IAAI,CAAC;AACzD,IAAA,CAAC;AAED,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;AAC7C,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,0BAA0B,GAAG,OAAO,GAAG,cAAc;;;IAIpG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGH,cAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAC,WAAW,CAAC;AACrE,IAAA,IAAI,gBAAgB,KAAK,WAAW,EAAE;QACpC,mBAAmB,CAAC,WAAW,CAAC;QAChC,aAAa,CAAC,IAAI,CAAC;IACrB;;;;;IAMAI,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,0BAA0B;YAAE;AACjC,QAAA,IAAI,KAAK,GAAG,qBAAqB,CAAC,MAAK;AACrC,YAAA,KAAK,GAAG,qBAAqB,CAAC,MAAK;gBACjC,6BAA6B,CAAC,KAAK,CAAC;gBACpC,aAAa,CAAC,KAAK,CAAC;AACtB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,MAAM,oBAAoB,CAAC,KAAK,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC;IAEhC,OAAO;QACL,WAAW;QACX,YAAY;;QAEZ,UAAU;;QAEV,0BAA0B;;QAE1B,gBAAgB;;AAEhB,QAAA,gBAAgB,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC;KAC7C;AACH;;;"}

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.d.ts

@@ -0,0 +1,47 @@
+/** One spring for the rail, the page beside it and the secondary panel, so everything that resizes moves together. */
+export declare const SIDEBAR_SPRING: {
+    readonly type: "spring";
+    readonly damping: 26;
+    readonly stiffness: 220;
+    readonly bounce: 0;
+};
+interface SidebarCollapseOptions {
+    /** Controlled collapsed state. When provided the parent owns the state and its persistence. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. */
+    defaultCollapsed: boolean;
+    /** Called whenever the user toggles the rail. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Persist the collapsed state to localStorage (uncontrolled mode only). */
+    persistCollapsed: boolean;
+}
+/**
+ * Collapsed state of the sidebar rail and the flags its width animation needs. Resolves controlled versus
+ * uncontrolled state, restores a persisted preference after hydration without animating it, and tracks whether
+ * the rail is between widths so labels can hold their width while it moves.
+ *
+ * @param options The collapse props of `SidebarNavigation`.
+ * @returns The resolved state, its setter, the two animation flags, the Motion transition for the width, and the
+ * callback to pass to the rail's `onAnimationComplete`.
+ */
+export declare const useSidebarCollapse: ({ collapsed, defaultCollapsed, onCollapsedChange, persistCollapsed }: SidebarCollapseOptions) => {
+    isCollapsed: boolean;
+    setCollapsed: (next: boolean) => void;
+    /** True while the rail animates between widths. */
+    isResizing: boolean;
+    /** True for the first paint of a restored preference, while the rail must not transition anything. */
+    isApplyingStoredPreference: boolean;
+    /** The Motion transition for the rail's width and the page placeholder beside it. */
+    resizeTransition: {
+        readonly type: "spring";
+        readonly damping: 26;
+        readonly stiffness: 220;
+        readonly bounce: 0;
+    } | {
+        readonly duration: 0;
+    };
+    /** Pass to the rail's `onAnimationComplete`. */
+    onResizeComplete: () => void;
+};
+export {};
+//# sourceMappingURL=useSidebarCollapse.d.ts.map

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarCollapse.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.ts"],"names":[],"mappings":"AAMA,sHAAsH;AACtH,eAAO,MAAM,cAAc;;;;;CAAsE,CAAC;AAIlG,UAAU,sBAAsB;IAC9B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,4EAA4E;IAC5E,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,sEAAsE,sBAAsB;;yBAiBjG,OAAO;IAqCjC,mDAAmD;;IAEnD,sGAAsG;;IAEtG,qFAAqF;;;;;;;;;IAErF,gDAAgD;;CAGnD,CAAC"}

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.js

@@ -0,0 +1,82 @@
+import { sidebarCollapsedStorage } from '@flipdish/ui-library/utilities/localStorageUtils';
+import { useReducedMotion } from 'motion/react';
+import { useState, useLayoutEffect, useEffect } from 'react';
+
+/** One spring for the rail, the page beside it and the secondary panel, so everything that resizes moves together. */
+const SIDEBAR_SPRING = { type: 'spring', damping: 26, stiffness: 220, bounce: 0 };
+const INSTANT = { duration: 0 };
+/**
+ * Collapsed state of the sidebar rail and the flags its width animation needs. Resolves controlled versus
+ * uncontrolled state, restores a persisted preference after hydration without animating it, and tracks whether
+ * the rail is between widths so labels can hold their width while it moves.
+ *
+ * @param options The collapse props of `SidebarNavigation`.
+ * @returns The resolved state, its setter, the two animation flags, the Motion transition for the width, and the
+ * callback to pass to the rail's `onAnimationComplete`.
+ */
+const useSidebarCollapse = ({ collapsed, defaultCollapsed, onCollapsedChange, persistCollapsed }) => {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
+    // The stored preference is applied after hydration (reading it during render would mismatch the server markup), so
+    // it must not animate: a returning user would watch the rail and the page spring closed on every load. The flag makes
+    // that one change instant for Motion and lets the rail switch off its CSS fades.
+    const [isApplyingStoredPreference, setIsApplyingStoredPreference] = useState(false);
+    useLayoutEffect(() => {
+        if (isControlled || !persistCollapsed)
+            return;
+        const stored = sidebarCollapsedStorage.get();
+        if (stored === null || stored === defaultCollapsed)
+            return;
+        setIsApplyingStoredPreference(true);
+        setInternalCollapsed(stored);
+    }, [isControlled, persistCollapsed, defaultCollapsed]);
+    const setCollapsed = (next) => {
+        onCollapsedChange?.(next);
+        if (isControlled)
+            return;
+        setInternalCollapsed(next);
+        if (persistCollapsed)
+            sidebarCollapsedStorage.set(next);
+    };
+    const shouldReduceMotion = useReducedMotion();
+    const resizeTransition = shouldReduceMotion || isApplyingStoredPreference ? INSTANT : SIDEBAR_SPRING;
+    // While the rail is between widths its labels keep their width and get wiped by the row's edge rather than re-truncating
+    // every frame. Tracked from the resolved state, so a controlled toggle counts too, and cleared when the width settles.
+    const [isResizing, setIsResizing] = useState(false);
+    const [settledCollapsed, setSettledCollapsed] = useState(isCollapsed);
+    if (settledCollapsed !== isCollapsed) {
+        setSettledCollapsed(isCollapsed);
+        setIsResizing(true);
+    }
+    // The fades come back only after a paint: cleared any earlier, the browser would compute the collapsed styles with
+    // the transitions already restored and the logo and toggle would still animate from the default state. The instant
+    // width change has settled by then too, so the resize flag clears here rather than waiting on Motion's callback for a
+    // zero-duration run. In a background tab the frames wait for the tab to show, which is harmless since nothing painted.
+    useEffect(() => {
+        if (!isApplyingStoredPreference)
+            return;
+        let frame = requestAnimationFrame(() => {
+            frame = requestAnimationFrame(() => {
+                setIsApplyingStoredPreference(false);
+                setIsResizing(false);
+            });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isApplyingStoredPreference]);
+    return {
+        isCollapsed,
+        setCollapsed,
+        /** True while the rail animates between widths. */
+        isResizing,
+        /** True for the first paint of a restored preference, while the rail must not transition anything. */
+        isApplyingStoredPreference,
+        /** The Motion transition for the rail's width and the page placeholder beside it. */
+        resizeTransition,
+        /** Pass to the rail's `onAnimationComplete`. */
+        onResizeComplete: () => setIsResizing(false),
+    };
+};
+
+export { SIDEBAR_SPRING, useSidebarCollapse };
+//# sourceMappingURL=useSidebarCollapse.js.map

package/dist/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarCollapse.js","sources":["../../../../../src/components/organisms/SidebarNavigation/hooks/useSidebarCollapse.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;MACa,cAAc,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAEtF,MAAM,OAAO,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAW;AAaxC;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,EAA0B,KAAI;AACjI,IAAA,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS;IAC5C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC;IAC5E,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,iBAAiB;;;;IAKhE,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnF,eAAe,CAAC,MAAK;QACnB,IAAI,YAAY,IAAI,CAAC,gBAAgB;YAAE;AACvC,QAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,GAAG,EAAE;AAC5C,QAAA,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,gBAAgB;YAAE;QACpD,6BAA6B,CAAC,IAAI,CAAC;QACnC,oBAAoB,CAAC,MAAM,CAAC;IAC9B,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;AAEtD,IAAA,MAAM,YAAY,GAAG,CAAC,IAAa,KAAI;AACrC,QAAA,iBAAiB,GAAG,IAAI,CAAC;AACzB,QAAA,IAAI,YAAY;YAAE;QAClB,oBAAoB,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,gBAAgB;AAAE,YAAA,uBAAuB,CAAC,GAAG,CAAC,IAAI,CAAC;AACzD,IAAA,CAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;AAC7C,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,0BAA0B,GAAG,OAAO,GAAG,cAAc;;;IAIpG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AACrE,IAAA,IAAI,gBAAgB,KAAK,WAAW,EAAE;QACpC,mBAAmB,CAAC,WAAW,CAAC;QAChC,aAAa,CAAC,IAAI,CAAC;IACrB;;;;;IAMA,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,0BAA0B;YAAE;AACjC,QAAA,IAAI,KAAK,GAAG,qBAAqB,CAAC,MAAK;AACrC,YAAA,KAAK,GAAG,qBAAqB,CAAC,MAAK;gBACjC,6BAA6B,CAAC,KAAK,CAAC;gBACpC,aAAa,CAAC,KAAK,CAAC;AACtB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,MAAM,oBAAoB,CAAC,KAAK,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC;IAEhC,OAAO;QACL,WAAW;QACX,YAAY;;QAEZ,UAAU;;QAEV,0BAA0B;;QAE1B,gBAAgB;;AAEhB,QAAA,gBAAgB,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC;KAC7C;AACH;;"}

package/dist/components/organisms/SidebarNavigation/index.cjs

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var uiIcons = require('@flipdish/ui-icons');
+var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
 var UtilityButton = require('@flipdish/ui-library/components/atoms/UtilityButton');
 var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var hrefUtils = require('@flipdish/ui-library/utilities/hrefUtils');
-var localStorageUtils = require('@flipdish/ui-library/utilities/localStorageUtils');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var react = require('motion/react');
 var React = require('react');
@@ -15,11 +15,11 @@ var SearchTrigger = require('../ApplicationHeader/components/SearchTrigger.cjs')
 var LogoLink = require('./components/LogoLink.cjs');
 var MobileHeader = require('./components/MobileHeader.cjs');
 var NavAccountCard = require('./components/NavAccountCard.cjs');
-var NavButton = require('./components/NavButton.cjs');
 var NavItem = require('./components/NavItem.cjs');
 var NavList = require('./components/NavList.cjs');
 var NavSectionToggle = require('./components/NavSectionToggle.cjs');
 var useDualTierKeyboard = require('./hooks/useDualTierKeyboard.cjs');
+var useSidebarCollapse = require('./hooks/useSidebarCollapse.cjs');
 var SidebarMenuButton = require('./components/SidebarMenuButton.cjs');
 
 const COLLAPSED_WIDTH = 68;
@@ -41,9 +41,12 @@ const SidebarNavigation = ({ activeUrl, items, footerItems = [], account, onNavi
             onNavigate?.(destination);
     };
     const navItemTestId = (item) => item['data-testid'] ?? testIdUtils.joinTestId(rootTestId, `nav-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`);
-    const isControlled = collapsed !== undefined;
-    const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
-    const isCollapsed = isControlled ? collapsed : internalCollapsed;
+    const { isCollapsed, setCollapsed, isResizing, isApplyingStoredPreference, resizeTransition, onResizeComplete } = useSidebarCollapse.useSidebarCollapse({
+        collapsed,
+        defaultCollapsed,
+        onCollapsedChange,
+        persistCollapsed,
+    });
     // Mobile drawer open-state: controlled when `mobileMenuOpen` is provided, else internal.
     const isMobileMenuControlled = mobileMenuOpen !== undefined;
     const [internalMobileMenuOpen, setInternalMobileMenuOpen] = React.useState(false);
@@ -60,22 +63,6 @@ const SidebarNavigation = ({ activeUrl, items, footerItems = [], account, onNavi
         if (isDesktop && isMobileMenuOpen)
             setMobileMenuOpen(false);
     }, [isDesktop]);
-    // Hydrate the persisted preference after mount to avoid an SSR hydration mismatch.
-    React.useEffect(() => {
-        if (isControlled || !persistCollapsed)
-            return;
-        const stored = localStorageUtils.sidebarCollapsedStorage.get();
-        if (stored !== null)
-            setInternalCollapsed(stored);
-    }, [isControlled, persistCollapsed]);
-    const setCollapsed = (next) => {
-        onCollapsedChange?.(next);
-        if (isControlled)
-            return;
-        setInternalCollapsed(next);
-        if (persistCollapsed)
-            localStorageUtils.sidebarCollapsedStorage.set(next);
-    };
     // Dual-tier reveal: the secondary panel is shown whenever the
     // pointer is over — or focus is within — the sidebar, and it always lists the
     // children of `currentItem`. `currentItem` is seeded from the active route and
@@ -153,10 +140,16 @@ const SidebarNavigation = ({ activeUrl, items, footerItems = [], account, onNavi
         };
         const itemTestId = navItemTestId(item);
         // A parent's own `href` (if any) is ignored — it reveals the panel, not navigates.
-        return (jsxRuntime.jsx("li", { className: isCollapsed ? undefined : 'py-px', onKeyDown: handleTriggerKeyDown(item.label, hasChildren), children: isCollapsed ? (jsxRuntime.jsx(NavButton.NavButton, { type: hasChildren ? 'disclosure' : 'link', current: isCurrentPage, selected: isSelected, href: hasChildren ? undefined : item.href, onClick: selectSection, label: item.label || '', icon: item.icon, "data-testid": itemTestId, ...disclosure })) : (jsxRuntime.jsx(NavItem.NavItemBase, { type: hasChildren ? 'disclosure' : 'link', current: isCurrentPage, selected: isSelected, href: hasChildren ? undefined : item.href, icon: item.icon, badge: item.badge, hasSubmenu: hasChildren, onClick: selectSection, "data-testid": itemTestId, ...disclosure, children: item.label })) }, item.label));
+        // The same item serves both rail widths: collapsed it shrinks to its icon and shows its label as a tooltip instead.
+        return (jsxRuntime.jsx("li", { className: "py-px", onKeyDown: handleTriggerKeyDown(item.label, hasChildren), children: jsxRuntime.jsx(Tooltip.Tooltip, { isDisabled: !isCollapsed, title: item.label, placement: "right", children: jsxRuntime.jsx(NavItem.NavItemBase, { type: hasChildren ? 'disclosure' : 'link', current: isCurrentPage, selected: isSelected, href: hasChildren ? undefined : item.href, icon: item.icon, badge: item.badge, hasSubmenu: hasChildren, collapsed: isCollapsed, resizing: isResizing, onClick: selectSection, "data-testid": itemTestId, ...disclosure, children: item.label }) }) }, item.label));
     });
-    const mainSidebar = (jsxRuntime.jsxs(react.motion.aside, { animate: { width: isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }, transition: { type: 'spring', damping: 26, stiffness: 220, bounce: 0 }, className: cx.cx('flex h-full max-h-full flex-col justify-between overflow-x-hidden overflow-y-auto bg-secondary', !hideBorder && 'border-r border-secondary'), children: [jsxRuntime.jsxs("div", { className: "flex flex-col", children: [isCollapsed ? (jsxRuntime.jsx("div", { className: "flex justify-center px-3 py-5", children: jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "sm", color: "tertiary", tooltip: "Expand", "aria-label": "Expand navigation", icon: uiIcons.ChevronRightDouble, "data-testid": testIdUtils.joinTestId(rootTestId, 'expand'), onClick: () => setCollapsed(false) }) })) : (jsxRuntime.jsxs("div", { className: "relative flex items-center px-5 py-5", children: [jsxRuntime.jsx(LogoLink.LogoLink, { href: homeHref, size: "md", onClick: () => reportNavigation(homeHref), "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') }), jsxRuntime.jsx("div", { className: "absolute top-5 right-4", children: jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "sm", color: "tertiary", tooltip: "Collapse", "aria-label": "Collapse navigation", icon: uiIcons.ChevronLeftDouble, "data-testid": testIdUtils.joinTestId(rootTestId, 'collapse'), onClick: () => setCollapsed(true) }) })] })), jsxRuntime.jsx("nav", { "aria-label": "Main", children: jsxRuntime.jsx("ul", { className: cx.cx('flex flex-col gap-0.5', isCollapsed ? 'items-center px-3.5' : 'px-4 pt-1'), children: renderPrimaryItems(items) }) })] }), jsxRuntime.jsxs("div", { className: cx.cx('mt-auto flex flex-col gap-3 py-4', isCollapsed ? 'items-center px-3' : 'px-4'), children: [footerItems.length > 0 && (jsxRuntime.jsx("nav", { "aria-label": "Footer", children: jsxRuntime.jsx("ul", { className: cx.cx('flex flex-col gap-0.5', isCollapsed && 'items-center'), children: renderPrimaryItems(footerItems) }) })), account &&
-                        (isCollapsed ? (jsxRuntime.jsx(NavAccountCard.NavAccountCard, { variant: "avatar", account: account.account, menuItems: account.menuItems, bottomMenuItems: account.bottomMenuItems, onOpenChange: setIsAccountMenuOpen, "data-testid": account['data-testid'] })) : (jsxRuntime.jsx(NavAccountCard.NavAccountCard, { account: account.account, menuItems: account.menuItems, bottomMenuItems: account.bottomMenuItems, onOpenChange: setIsAccountMenuOpen, "data-testid": account['data-testid'] })))] })] }));
+    const mainSidebar = (jsxRuntime.jsxs(react.motion.aside
+    // initial={false} starts at the `animate` value; without it Motion reads the DOM and springs from there on mount.
+    , { 
+        // initial={false} starts at the `animate` value; without it Motion reads the DOM and springs from there on mount.
+        initial: false, animate: { width: isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }, transition: resizeTransition, onAnimationComplete: onResizeComplete, className: cx.cx('flex h-full max-h-full flex-col justify-between overflow-x-hidden overflow-y-auto bg-secondary', !hideBorder && 'border-r border-secondary', 
+        // Every fade and slide in the rail is a CSS transition; the stored preference must land without any of them.
+        isApplyingStoredPreference && '**:transition-none!'), children: [jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "relative flex h-18 items-center px-5", children: [jsxRuntime.jsx("div", { inert: isCollapsed, className: cx.cx('flex transition-opacity motion-reduce:transition-none', isCollapsed ? 'opacity-0 duration-150' : 'delay-150 duration-150'), children: jsxRuntime.jsx(LogoLink.LogoLink, { href: homeHref, size: "md", onClick: () => reportNavigation(homeHref), "data-testid": testIdUtils.joinTestId(rootTestId, 'logo') }) }), jsxRuntime.jsx("div", { className: cx.cx('absolute top-5 transition-[right] duration-300 ease-out motion-reduce:transition-none', isCollapsed ? 'right-4.5' : 'right-4'), children: jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "sm", color: "tertiary", tooltip: isCollapsed ? 'Expand' : 'Collapse', "aria-label": isCollapsed ? 'Expand navigation' : 'Collapse navigation', icon: isCollapsed ? uiIcons.ChevronRightDouble : uiIcons.ChevronLeftDouble, "data-testid": testIdUtils.joinTestId(rootTestId, isCollapsed ? 'expand' : 'collapse'), onClick: () => setCollapsed(!isCollapsed) }) })] }), jsxRuntime.jsx("nav", { "aria-label": "Main", children: jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5 px-4 pt-1", children: renderPrimaryItems(items) }) })] }), jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col gap-3 px-4 py-4", children: [footerItems.length > 0 && (jsxRuntime.jsx("nav", { "aria-label": "Footer", children: jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: renderPrimaryItems(footerItems) }) })), account && (jsxRuntime.jsx(NavAccountCard.NavAccountCard, { account: account.account, menuItems: account.menuItems, bottomMenuItems: account.bottomMenuItems, collapsed: isCollapsed, resizing: isResizing, onOpenChange: setIsAccountMenuOpen, "data-testid": account['data-testid'] }))] })] }));
     const handleMobileNavigate = (href) => {
         const destination = hrefUtils.safeHref(href);
         if (destination === undefined)
@@ -170,8 +163,8 @@ const SidebarNavigation = ({ activeUrl, items, footerItems = [], account, onNavi
         onClick?.();
     };
     const withMobileMenuClose = (menuItems) => menuItems?.map((item) => ({ ...item, onClick: closeMobileMenuThen(item.onClick) }));
-    const secondarySidebar = currentItem && (jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isSecondarySidebarVisible && (jsxRuntime.jsx(react.motion.div, { ref: panelRef, id: panelId, onKeyDown: handlePanelKeyDown, role: "group", "aria-label": `${currentItem.label} pages`, initial: { width: 0, borderColor: 'var(--color-border-secondary)' }, animate: { width: SECONDARY_SIDEBAR_WIDTH, borderColor: 'var(--color-border-secondary)' }, exit: { width: 0, borderColor: 'rgba(0,0,0,0)', transition: { borderColor: { type: 'tween', delay: 0.05 } } }, transition: { type: 'spring', damping: 26, stiffness: 220, bounce: 0 }, className: cx.cx('relative h-full overflow-x-hidden overflow-y-auto bg-primary', !(hideBorder || hideRightBorder) && 'box-content border-r border-secondary'), children: jsxRuntime.jsxs("div", { style: { width: SECONDARY_SIDEBAR_WIDTH }, className: "flex h-full flex-col px-4 pt-6", children: [jsxRuntime.jsx("h3", { className: "px-2 text-sm font-semibold text-tertiary", children: currentItem.label }), jsxRuntime.jsx("ul", { className: "py-2", children: currentItem.items?.map((item) => (jsxRuntime.jsx("li", { className: "py-px", children: jsxRuntime.jsx(NavItem.NavItemBase, { type: "link", current: item.href === activeHref, href: item.href, icon: item.icon, badge: item.badge, onClick: () => reportNavigation(item.href), "data-testid": item['data-testid'] ?? testIdUtils.joinTestId(navItemTestId(currentItem), `sub-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`), children: item.label }) }, item.label))) }), currentItem.toggle && (jsxRuntime.jsx(NavSectionToggle.NavSectionToggleRow, { toggle: currentItem.toggle, testIdPrefix: navItemTestId(currentItem), className: "mt-auto mb-4" }))] }) })) }));
-    return (jsxRuntime.jsxs(testIdUtils.TestIdProvider, { value: rootTestId, children: [jsxRuntime.jsxs("div", { className: "z-40 hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex", onPointerEnter: () => setIsHovering(true), onPointerMove: handleContainerPointerMove, onPointerLeave: () => setIsHovering(false), onFocus: handleContainerFocus, onBlur: handleContainerBlur, children: [mainSidebar, secondarySidebar] }), jsxRuntime.jsx("div", { style: { paddingLeft: isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }, className: "invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block" }), showMobileHeader && (jsxRuntime.jsx(MobileHeader.MobileNavigationHeader, { isOpen: isMobileMenuOpen, onOpenChange: setMobileMenuOpen, controls: mobileMenuId, homeHref: homeHref, onHomePress: () => reportNavigation(homeHref), logoTestId: testIdUtils.joinTestId(rootTestId, 'mobile-logo'), "data-testid": testIdUtils.joinTestId(rootTestId, 'mobile-toggle') })), jsxRuntime.jsx(MobileHeader.MobileNavigationDrawer, { id: mobileMenuId, isOpen: isMobileMenuOpen, onOpenChange: setMobileMenuOpen, "data-testid": testIdUtils.joinTestId(rootTestId, 'mobile-close'), children: jsxRuntime.jsxs("aside", { className: "group flex h-full max-h-full w-full max-w-full flex-col justify-between overflow-y-auto bg-secondary pt-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-7 px-4", children: [jsxRuntime.jsx(LogoLink.LogoLink, { href: homeHref, size: "sm", onClick: () => handleMobileNavigate(homeHref), "data-testid": testIdUtils.joinTestId(rootTestId, 'drawer-logo') }), search && (jsxRuntime.jsx(SearchTrigger.SearchTrigger, { size: "md", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: closeMobileMenuThen(search.onPress), className: "w-full", "data-testid": search['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'search') }))] }), jsxRuntime.jsx("nav", { "aria-label": "Main", children: jsxRuntime.jsx(NavList.NavList, { activeUrl: activeUrl, items: items, onNavigate: handleMobileNavigate, testIdPrefix: rootTestId }) }), jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col gap-3 p-4", children: [footerItems.length > 0 && (jsxRuntime.jsx("nav", { "aria-label": "Footer", children: jsxRuntime.jsx(NavList.NavList, { activeUrl: activeUrl, items: footerItems, onNavigate: handleMobileNavigate, testIdPrefix: rootTestId, className: "px-0 pt-0" }) })), account && (jsxRuntime.jsx(NavAccountCard.NavAccountCard, { account: account.account, menuItems: withMobileMenuClose(account.menuItems), bottomMenuItems: withMobileMenuClose(account.bottomMenuItems), "data-testid": account['data-testid'] }))] })] }) })] }));
+    const secondarySidebar = currentItem && (jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isSecondarySidebarVisible && (jsxRuntime.jsx(react.motion.div, { ref: panelRef, id: panelId, onKeyDown: handlePanelKeyDown, role: "group", "aria-label": `${currentItem.label} pages`, initial: { width: 0, borderColor: 'var(--color-border-secondary)' }, animate: { width: SECONDARY_SIDEBAR_WIDTH, borderColor: 'var(--color-border-secondary)' }, exit: { width: 0, borderColor: 'rgba(0,0,0,0)', transition: { borderColor: { type: 'tween', delay: 0.05 } } }, transition: useSidebarCollapse.SIDEBAR_SPRING, className: cx.cx('relative h-full overflow-x-hidden overflow-y-auto bg-primary', !(hideBorder || hideRightBorder) && 'box-content border-r border-secondary'), children: jsxRuntime.jsxs("div", { style: { width: SECONDARY_SIDEBAR_WIDTH }, className: "flex h-full flex-col px-4 pt-6", children: [jsxRuntime.jsx("h3", { className: "px-2 text-sm font-semibold text-tertiary", children: currentItem.label }), jsxRuntime.jsx("ul", { className: "py-2", children: currentItem.items?.map((item) => (jsxRuntime.jsx("li", { className: "py-px", children: jsxRuntime.jsx(NavItem.NavItemBase, { type: "link", current: item.href === activeHref, href: item.href, icon: item.icon, badge: item.badge, onClick: () => reportNavigation(item.href), "data-testid": item['data-testid'] ?? testIdUtils.joinTestId(navItemTestId(currentItem), `sub-item-${item.id ?? testIdUtils.slugifyTestId(item.label)}`), children: item.label }) }, item.label))) }), currentItem.toggle && (jsxRuntime.jsx(NavSectionToggle.NavSectionToggleRow, { toggle: currentItem.toggle, testIdPrefix: navItemTestId(currentItem), className: "mt-auto mb-4" }))] }) })) }));
+    return (jsxRuntime.jsxs(testIdUtils.TestIdProvider, { value: rootTestId, children: [jsxRuntime.jsxs("div", { className: "z-40 hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex", onPointerEnter: () => setIsHovering(true), onPointerMove: handleContainerPointerMove, onPointerLeave: () => setIsHovering(false), onFocus: handleContainerFocus, onBlur: handleContainerBlur, children: [mainSidebar, secondarySidebar] }), jsxRuntime.jsx(react.motion.div, { initial: false, animate: { paddingLeft: isCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }, transition: resizeTransition, className: "invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block" }), showMobileHeader && (jsxRuntime.jsx(MobileHeader.MobileNavigationHeader, { isOpen: isMobileMenuOpen, onOpenChange: setMobileMenuOpen, controls: mobileMenuId, homeHref: homeHref, onHomePress: () => reportNavigation(homeHref), logoTestId: testIdUtils.joinTestId(rootTestId, 'mobile-logo'), "data-testid": testIdUtils.joinTestId(rootTestId, 'mobile-toggle') })), jsxRuntime.jsx(MobileHeader.MobileNavigationDrawer, { id: mobileMenuId, isOpen: isMobileMenuOpen, onOpenChange: setMobileMenuOpen, "data-testid": testIdUtils.joinTestId(rootTestId, 'mobile-close'), children: jsxRuntime.jsxs("aside", { className: "group flex h-full max-h-full w-full max-w-full flex-col justify-between overflow-y-auto bg-secondary pt-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-7 px-4", children: [jsxRuntime.jsx(LogoLink.LogoLink, { href: homeHref, size: "sm", onClick: () => handleMobileNavigate(homeHref), "data-testid": testIdUtils.joinTestId(rootTestId, 'drawer-logo') }), search && (jsxRuntime.jsx(SearchTrigger.SearchTrigger, { size: "md", placeholder: search.placeholder ?? 'Search', label: search.label ?? 'Search', onPress: closeMobileMenuThen(search.onPress), className: "w-full", "data-testid": search['data-testid'] ?? testIdUtils.joinTestId(rootTestId, 'search') }))] }), jsxRuntime.jsx("nav", { "aria-label": "Main", children: jsxRuntime.jsx(NavList.NavList, { activeUrl: activeUrl, items: items, onNavigate: handleMobileNavigate, testIdPrefix: rootTestId }) }), jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col gap-3 p-4", children: [footerItems.length > 0 && (jsxRuntime.jsx("nav", { "aria-label": "Footer", children: jsxRuntime.jsx(NavList.NavList, { activeUrl: activeUrl, items: footerItems, onNavigate: handleMobileNavigate, testIdPrefix: rootTestId, className: "px-0 pt-0" }) })), account && (jsxRuntime.jsx(NavAccountCard.NavAccountCard, { account: account.account, menuItems: withMobileMenuClose(account.menuItems), bottomMenuItems: withMobileMenuClose(account.bottomMenuItems), "data-testid": account['data-testid'] }))] })] }) })] }));
 };
 
 exports.NavAccountCard = NavAccountCard.NavAccountCard;