@camunda/design-system 0.61.2 → 0.63.0

package/dist/src/components/ui/app-sidebar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { ChevronDown, ChevronRight, ChevronLeft, PanelLeftClose, PanelLeft, X, } from "../../icons/lucide.js";
+import { ChevronDown, ChevronRight, ChevronLeft, X } from "../../icons/lucide.js";
 import { cn } from "../../lib/utils.js";
 import { useC4Dictionary } from "../../lib/i18n/context.js";
 import { Text } from "./typography.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Sheet, SheetClose, SheetContent, SheetTitle } from "./sheet.js";
 import { useSidebar } from "./sidebar-provider.js";
@@ -14,6 +14,12 @@ import { useIsTruncated } from "../../hooks/use-is-truncated.js";
 import { linkDestination, resolveActive, resolveLinkProps, } from "./nav-data.js";
 import { NavRowIcon } from "./nav-icon.js";
 const NAV_ROW_BASE = "group/navbtn flex w-full items-center overflow-hidden rounded-md transition-colors";
+/**
+ * The type a section title reads at. Shared with the collapsed rail's flyout header,
+ * which titles a group the same way the expanded rail titles a section — one constant
+ * so the two cannot drift apart.
+ */
+const SECTION_LABEL_TYPE = "text-xs leading-4 font-medium text-neutral-foreground-subtle";
 // Hides the scrollbar track; scroll itself still works.
 const HIDDEN_SCROLLBAR = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
 const navButton = cva(cn(NAV_ROW_BASE, "gap-3 min-h-10 text-sm text-left whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"), {
@@ -22,9 +28,15 @@ const navButton = cva(cn(NAV_ROW_BASE, "gap-3 min-h-10 text-sm text-left whitesp
             true: "bg-neutral-background-strong text-neutral-foreground-strong font-medium",
             false: "text-neutral-foreground-subtle hover:bg-neutral-background-medium hover:text-neutral-foreground-strong",
         },
+        // Both states left-align on the same 10px inset, so the icon holds its x
+        // position across a collapse and only the label arrives or leaves. With
+        // the list's own 8px padding that puts a 20px icon at x=18, which is also
+        // dead centre of the 56px collapsed rail — the one inset satisfying both.
+        // Centring the collapsed row instead lands half a pixel off, because the
+        // row's flex `gap` still counts the sr-only label.
         expanded: {
-            true: "justify-start px-3 py-2",
-            false: "justify-center px-2 py-2",
+            true: "justify-start px-2.5 py-2",
+            false: "justify-start px-2.5 py-2",
         },
     },
     defaultVariants: { active: false, expanded: true },
@@ -40,9 +52,13 @@ function useExpanded({ expanded: controlled, defaultExpanded, onExpandedChange,
     }, [isControlled, onExpandedChange]);
     return [expanded, setExpanded];
 }
-// Base offset mirrors c3-sidebar's icon column.
+// Matches navButton's own inset at depth 0, so an indented row steps off the
+// same left edge every other row starts from.
+const ROW_INSET_REM = 0.625;
 function indentStyle(depth) {
-    return depth > 0 ? { paddingLeft: `${0.75 + depth * 1.75}rem` } : undefined;
+    return depth > 0
+        ? { paddingLeft: `${ROW_INSET_REM + depth * 1.75}rem` }
+        : undefined;
 }
 function renderNode(node, ctx) {
     switch (node.type) {
@@ -55,7 +71,7 @@ function renderNode(node, ctx) {
             return _jsx(NavSection, { node: node, ...ctx }, node.key);
     }
 }
-function NavItemRow({ node, expanded, depth, LinkEl, isMobile, onNavigate, hasLinkComponent, activeItemKey, }) {
+function NavItemRow({ node, expanded, depth, LinkEl, isMobile, onNavigate, hasLinkComponent, activeItemKey, hideIconFallback, }) {
     const isLink = linkDestination(node.linkProps) !== undefined;
     const Comp = isLink ? LinkEl : "button";
     const isActive = resolveActive(node.isActive, node.key, activeItemKey);
@@ -71,7 +87,7 @@ function NavItemRow({ node, expanded, depth, LinkEl, isMobile, onNavigate, hasLi
             : { type: "button" }), "data-slot": "app-sidebar-item", className: cn(navButton({ active: isActive, expanded })), style: indentStyle(depth), "aria-current": isActive ? "page" : undefined, onClick: () => {
             node.onClick?.();
             onNavigate?.();
-        }, onPointerEnter: measure, onFocus: measure, children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label }), _jsx("span", { ref: labelRef, className: cn("flex-1 truncate", !expanded && "sr-only"), children: node.label }), expanded && node.trailingElement] }));
+        }, onPointerEnter: measure, onFocus: measure, children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label, hideFallback: hideIconFallback }), _jsx("span", { ref: labelRef, className: cn("flex-1 truncate", !expanded && "sr-only"), children: node.label }), expanded && node.trailingElement] }));
     // Collapsed icon rail: name the icon with a tooltip. Not on mobile (the Sheet
     // shows full labels) and not when expanded (the label is already visible).
     if (!expanded && !isMobile) {
@@ -82,7 +98,53 @@ function NavItemRow({ node, expanded, depth, LinkEl, isMobile, onNavigate, hasLi
     // "Truncated Text" in `docs/specs/shadcn/patterns.md`.
     return isTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: row }), _jsx(TooltipContent, { children: node.label })] })) : (row);
 }
-function NavGroupRow({ node, expanded, depth, LinkEl, hasLinkComponent, activeItemKey, isMobile, onNavigate, }) {
+/**
+ * The collapsed rail's single flyout slot.
+ *
+ * Group flyouts share one slot, so opening one closes whichever was open —
+ * including a pinned or keyboard-opened flyout, which ignores hover-out and
+ * would otherwise stay on screen beside the new one. It lives above the rows
+ * because a row cannot close a sibling it has no reference to.
+ */
+const FlyoutSlotContext = React.createContext(null);
+function useFlyoutSlot(nodeKey) {
+    const slot = React.useContext(FlyoutSlotContext);
+    // A row rendered without the rail around it keeps a slot of its own.
+    const [localKey, setLocalKey] = React.useState(null);
+    const openKey = slot ? slot.openKey : localKey;
+    const setOpenKey = slot ? slot.setOpenKey : setLocalKey;
+    return {
+        flyoutOpen: openKey === nodeKey,
+        setFlyoutOpen: (next) => setOpenKey((prev) => (next ? nodeKey : prev === nodeKey ? null : prev)),
+    };
+}
+// Hover intent for the collapsed-rail flyout. The open delay keeps a pointer
+// crossing the rail vertically from flashing every group's flyout in turn; the
+// close delay covers the gap between the trigger and the flyout, which the
+// pointer has to traverse to reach the children (WCAG 1.4.13, hoverable).
+const FLYOUT_HOVER_OPEN_DELAY = 120;
+const FLYOUT_HOVER_CLOSE_DELAY = 240;
+/**
+ * Whether anything below this node resolves active.
+ *
+ * A pure `group` has no active state of its own — see `SidebarGroup`, and the C3 contract in
+ * `nav-c3-compat.specs.ts`, which both leave the field off deliberately. Expanded that costs
+ * nothing, because the active descendant is on screen carrying its own highlight. Collapsed it
+ * leaves the rail with no current-location signal at all: the descendant lives in a flyout
+ * nobody has opened yet.
+ */
+function hasActiveDescendant(nodes, activeItemKey) {
+    return nodes.some((child) => {
+        if (child.type === "section" || child.type === "group") {
+            return hasActiveDescendant(child.children, activeItemKey);
+        }
+        if (resolveActive(child.isActive, child.key, activeItemKey))
+            return true;
+        return (child.type === "group-item" &&
+            hasActiveDescendant(child.children, activeItemKey));
+    });
+}
+function NavGroupRow({ node, expanded, depth, LinkEl, hasLinkComponent, activeItemKey, isMobile, onNavigate, hideIconFallback, }) {
     const isGroupControlled = node.isExpanded !== undefined;
     const [openInternal, setOpenInternal] = React.useState(!!node.isExpanded);
     const open = isGroupControlled ? !!node.isExpanded : openInternal;
@@ -95,11 +157,58 @@ function NavGroupRow({ node, expanded, depth, LinkEl, hasLinkComponent, activeIt
     // Collapsed-rail flyout visibility is its own concern — decoupled from group
     // expansion so collapsing the rail never auto-opens a flyout and opening a
     // flyout never mutates expansion state.
-    const [flyoutOpen, setFlyoutOpen] = React.useState(false);
+    const { flyoutOpen, setFlyoutOpen } = useFlyoutSlot(node.key);
+    const hoverTimerRef = React.useRef(null);
+    // Which input opened the flyout. A pointer-driven open must not pull focus
+    // into the flyout: the pointer only crossed the rail, and Radix's default
+    // open-autofocus would yank focus off whatever the user was actually on.
+    const openedByPointerRef = React.useRef(false);
+    // The group trigger's tooltip is keyboard-only: on hover the flyout itself
+    // names the group, and with `delayDuration = 0` a hover tooltip would appear
+    // instantly, then be force-closed 120ms later when the flyout opens — a flash
+    // on every pass over the rail. Keyboard focus has no flyout until Enter, so it
+    // still needs the tooltip. Leaf rows keep their ordinary hover tooltip.
+    const [labelTooltipOpen, setLabelTooltipOpen] = React.useState(false);
+    const pointerInsideRef = React.useRef(false);
+    const triggerRef = React.useRef(null);
+    // Readable from the hover timer, which captured an older render's props.
+    const flyoutOpenRef = React.useRef(flyoutOpen);
+    React.useEffect(() => {
+        flyoutOpenRef.current = flyoutOpen;
+    }, [flyoutOpen]);
+    const cancelHoverTimer = () => {
+        if (hoverTimerRef.current !== null) {
+            window.clearTimeout(hoverTimerRef.current);
+            hoverTimerRef.current = null;
+        }
+    };
+    React.useEffect(() => cancelHoverTimer, []);
+    const scheduleFlyout = (next) => {
+        cancelHoverTimer();
+        hoverTimerRef.current = window.setTimeout(() => {
+            hoverTimerRef.current = null;
+            if (next) {
+                // Only an open this timer actually performs counts as pointer-opened.
+                // Re-entering the trigger of an already-pinned flyout also runs here,
+                // and marking that one as pointer-opened would silently un-pin it —
+                // the next hover-out would dismiss it.
+                if (!flyoutOpenRef.current)
+                    openedByPointerRef.current = true;
+                setFlyoutOpen(true);
+                return;
+            }
+            // Only a hover-opened flyout closes on hover-out. A click- or
+            // keyboard-opened one holds focus inside itself, so a pointer merely
+            // crossing the rail must not close it and snap focus back to the
+            // trigger.
+            if (openedByPointerRef.current)
+                setFlyoutOpen(false);
+        }, next ? FLYOUT_HOVER_OPEN_DELAY : FLYOUT_HOVER_CLOSE_DELAY);
+    };
     const isGroupItem = node.type === "group-item";
     const isActive = isGroupItem
         ? resolveActive(node.isActive, node.key, activeItemKey)
-        : false;
+        : !expanded && hasActiveDescendant(node.children, activeItemKey);
     const isLink = isGroupItem && linkDestination(node.linkProps) !== undefined;
     const LabelComp = isLink ? LinkEl : "button";
     // Truncation reveal — expanded state only (see the collapsed-rail flyout's
@@ -108,34 +217,104 @@ function NavGroupRow({ node, expanded, depth, LinkEl, hasLinkComponent, activeIt
     React.useLayoutEffect(() => {
         measure();
     });
-    const label = (_jsxs(_Fragment, { children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label }), _jsx("span", { ref: labelRef, className: cn("flex-1 truncate", !expanded && "sr-only"), children: node.label }), expanded && node.trailingElement] }));
+    const label = (_jsxs(_Fragment, { children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label, hideFallback: hideIconFallback }), _jsx("span", { ref: labelRef, className: cn("flex-1 truncate", !expanded && "sr-only"), children: node.label }), expanded && node.trailingElement] }));
     if (!expanded) {
-        return (_jsxs(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [_jsxs(Tooltip, { open: flyoutOpen ? false : undefined, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-slot": "app-sidebar-group-trigger", "aria-label": node.label, "aria-expanded": flyoutOpen, className: cn(navButton({ active: isActive, expanded: false })), children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label }), _jsx("span", { className: "sr-only", children: node.label })] }) }) }), _jsx(TooltipContent, { side: "right", children: node.label })] }), _jsx(PopoverContent, { side: "right", align: "start", className: "w-56 gap-0 p-1", children: node.children.map((child) => renderNode(child, {
-                        expanded: true,
-                        depth: 0,
-                        LinkEl,
-                        hasLinkComponent,
-                        activeItemKey,
-                        isMobile,
-                        onNavigate,
-                    })) })] }));
+        return (_jsxs(Popover, { open: flyoutOpen, onOpenChange: (next) => {
+                cancelHoverTimer();
+                setFlyoutOpen(next);
+            }, children: [_jsxs(Tooltip, { open: labelTooltipOpen && !flyoutOpen, 
+                    // Controlled, so Radix's own dismissal has to be accepted or Escape
+                    // leaves the tooltip up until blur (WCAG 1.4.13, dismissible). Only
+                    // the close request is honoured: an open request would reinstate the
+                    // hover tooltip this trigger deliberately does not have.
+                    onOpenChange: (next) => {
+                        if (!next)
+                            setLabelTooltipOpen(false);
+                    }, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: triggerRef, type: "button", "data-slot": "app-sidebar-group-trigger", "aria-label": node.label, "aria-expanded": flyoutOpen, className: cn(navButton({ active: isActive, expanded: false })), onMouseEnter: () => {
+                                        pointerInsideRef.current = true;
+                                        scheduleFlyout(true);
+                                    }, onMouseLeave: () => {
+                                        pointerInsideRef.current = false;
+                                        scheduleFlyout(false);
+                                    }, onFocus: () => {
+                                        if (!pointerInsideRef.current)
+                                            setLabelTooltipOpen(true);
+                                    }, onBlur: () => setLabelTooltipOpen(false), onClick: (event) => {
+                                        cancelHoverTimer();
+                                        // Hover has already opened it; Radix's trigger toggle would
+                                        // close it again, so a click on the icon the pointer is
+                                        // sitting on would dismiss the flyout it just opened. The
+                                        // toggle is composed behind this handler and skips on
+                                        // `defaultPrevented`.
+                                        if (flyoutOpen) {
+                                            event.preventDefault();
+                                        }
+                                        // Either way the open is now an explicit one: it stays until
+                                        // Escape, an outside pointer-down, or a child is selected.
+                                        openedByPointerRef.current = false;
+                                    }, children: [_jsx(NavRowIcon, { icon: node.icon, label: node.label }), _jsx("span", { className: "sr-only", children: node.label })] }) }) }), _jsx(TooltipContent, { side: "right", children: node.label })] }), _jsxs(PopoverContent, { side: "right", align: "start", className: "w-56 gap-0 p-1", "aria-label": node.label, 
+                    // The launcher Popover captures at open time is whatever was focused
+                    // when the pointer crossed the rail, which is not this trigger. Name
+                    // the trigger explicitly so an explicit close returns focus to it.
+                    restoreFocusRef: triggerRef, onMouseEnter: cancelHoverTimer, onMouseLeave: () => scheduleFlyout(false), onOpenAutoFocus: (event) => {
+                        if (openedByPointerRef.current)
+                            event.preventDefault();
+                    }, onFocusOutside: (event) => {
+                        // A hover-opened flyout holds no focus, so every focus-outside is
+                        // spurious for it — and one in particular is fatal: displacing a
+                        // keyboard-opened sibling returns that sibling's focus to its
+                        // trigger, which would dismiss the flyout the pointer just opened.
+                        // Keyboard and click opens keep the default (tabbing out closes).
+                        if (openedByPointerRef.current)
+                            event.preventDefault();
+                    }, onCloseAutoFocus: (event) => {
+                        // A hover-opened flyout never held focus, so restoring would drag
+                        // it off whatever the user is really on. One that was opened by
+                        // click or keyboard does hold it, and still returns it to the
+                        // trigger — including when a sibling flyout displaces this one,
+                        // which would otherwise drop focus to <body>. (Asking the DOM
+                        // here instead does not work: by the time this fires Radix has
+                        // already detached the content, so `activeElement` is `<body>`.)
+                        if (openedByPointerRef.current)
+                            event.preventDefault();
+                        // Cleared here rather than in `onOpenChange`, which Radix calls
+                        // first on an outside pointer-down: clearing there would make this
+                        // handler read a hover-opened flyout as a focus-holding one and
+                        // pull focus to the trigger, off whatever was just clicked.
+                        openedByPointerRef.current = false;
+                    }, children: [_jsx(PopoverHeader, { className: "px-2 pt-1.5 pb-1", children: _jsx(PopoverTitle, { className: SECTION_LABEL_TYPE, children: node.label }) }), node.children.map((child) => renderNode(child, {
+                            expanded: true,
+                            depth: 0,
+                            LinkEl,
+                            hasLinkComponent,
+                            activeItemKey,
+                            isMobile,
+                            // Selecting a child dismisses the flyout. Navigation alone does
+                            // not: the rail survives an in-app route change, so the flyout
+                            // would otherwise stay open over the destination.
+                            onNavigate: () => {
+                                setFlyoutOpen(false);
+                                onNavigate?.();
+                            },
+                        }))] })] }));
     }
-    const labelElement = (_jsx(LabelComp, { ...(isLink ? node.linkProps : { type: "button" }), className: cn("flex flex-1 min-w-0 items-center gap-3 min-h-10 py-2 text-sm text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", isActive
+    const chevron = open ? (_jsx(ChevronDown, { "aria-hidden": true, className: "size-4" })) : (_jsx(ChevronRight, { "aria-hidden": true, className: "size-4" }));
+    const labelElement = (_jsxs(LabelComp, { ...(isLink ? node.linkProps : { type: "button" }), className: cn("flex flex-1 min-w-0 items-center gap-3 min-h-10 py-2 text-sm text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", isActive
             ? "text-neutral-foreground-strong font-medium"
             : "text-neutral-foreground-subtle hover:text-neutral-foreground-strong"), style: depth > 0
-            ? { paddingLeft: `${0.75 + depth * 1.75}rem` }
-            : { paddingLeft: "0.75rem" }, "aria-current": isActive ? "page" : undefined, "aria-expanded": isGroupItem ? undefined : open, onClick: isGroupItem
+            ? { paddingLeft: `${ROW_INSET_REM + depth * 1.75}rem` }
+            : { paddingLeft: `${ROW_INSET_REM}rem` }, "aria-current": isActive ? "page" : undefined, "aria-expanded": isGroupItem ? undefined : open, onClick: isGroupItem
             ? () => {
                 node.onClick?.();
                 onNavigate?.();
             }
-            : toggle, onPointerEnter: measure, onFocus: measure, children: label }));
+            : toggle, onPointerEnter: measure, onFocus: measure, children: [label, !isGroupItem && (_jsx("span", { className: "flex items-center mr-3", children: chevron }))] }));
     // Truncation reveal, mounted only when the label actually clips — see
     // "Truncated Text" in `docs/specs/shadcn/patterns.md`.
     const labelWithReveal = isTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: labelElement }), _jsx(TooltipContent, { children: node.label })] })) : (labelElement);
     return (_jsxs("div", { "data-slot": "app-sidebar-group", className: cn("flex flex-col gap-0.5"), children: [_jsxs("div", { className: cn(NAV_ROW_BASE, isActive
                     ? "bg-neutral-background-strong"
-                    : "hover:bg-neutral-background-medium"), children: [labelWithReveal, _jsx("button", { type: "button", "data-slot": "app-sidebar-group-toggle", "aria-label": `Toggle ${node.label}`, "aria-expanded": open, onClick: toggle, className: "flex items-center justify-center mr-3 ml-1 rounded p-0.5 text-neutral-foreground-subtle hover:bg-neutral-background-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: open ? (_jsx(ChevronDown, { "aria-hidden": true, className: "size-4" })) : (_jsx(ChevronRight, { "aria-hidden": true, className: "size-4" })) })] }), open &&
+                    : "hover:bg-neutral-background-medium"), children: [labelWithReveal, isGroupItem && (_jsx("button", { type: "button", "data-slot": "app-sidebar-group-toggle", "aria-label": `Toggle ${node.label}`, "aria-expanded": open, onClick: toggle, className: "flex items-center justify-center mr-3 ml-1 rounded p-0.5 text-neutral-foreground-subtle hover:bg-neutral-background-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: chevron }))] }), open &&
                 node.children.map((child) => renderNode(child, {
                     expanded,
                     depth: depth + 1,
@@ -144,10 +323,12 @@ function NavGroupRow({ node, expanded, depth, LinkEl, hasLinkComponent, activeIt
                     activeItemKey,
                     isMobile,
                     onNavigate,
+                    hideIconFallback,
                 }))] }));
 }
-function NavSection({ node, expanded, depth, LinkEl, hasLinkComponent, activeItemKey, isMobile, onNavigate, }) {
-    return (_jsxs("div", { "data-slot": "app-sidebar-section", className: cn(!node.compact && "pt-2"), children: [node.title && (_jsx("div", { className: cn("px-3 pt-4 pb-1 text-xs font-medium text-neutral-foreground-subtle", node.compact && "pt-0", !expanded && "sr-only"), children: node.title })), node.children.map((child) => renderNode(child, {
+function NavSection({ node, expanded, depth, LinkEl, hasLinkComponent, activeItemKey, isMobile, onNavigate, isFirst, }) {
+    const isEntities = node.variant === "entities";
+    return (_jsxs("div", { "data-slot": "app-sidebar-section", "data-variant": node.variant, className: cn(!node.compact && !isFirst && "pt-2", isEntities && !expanded && "mt-2 border-t border-border pt-2"), children: [node.title && (_jsx("div", { className: cn("px-2.5 pt-4 pb-1", SECTION_LABEL_TYPE, node.compact && "pt-0", !expanded && "sr-only"), children: node.title })), node.children.map((child) => renderNode(child, {
                 expanded,
                 depth,
                 LinkEl,
@@ -155,6 +336,7 @@ function NavSection({ node, expanded, depth, LinkEl, hasLinkComponent, activeIte
                 activeItemKey,
                 isMobile,
                 onNavigate,
+                hideIconFallback: isEntities && expanded,
             }))] }));
 }
 function BackNavHeader({ backNav, expanded, LinkEl, }) {
@@ -177,33 +359,143 @@ function BackNavHeader({ backNav, expanded, LinkEl, }) {
     const titleElement = expanded && titleTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: titleSpan }), _jsx(TooltipContent, { children: title })] })) : (titleSpan);
     return (_jsxs("div", { "data-slot": "app-sidebar-back-nav", className: cn("flex h-10 shrink-0 items-center gap-1 border-b border-border", expanded ? "pl-1 pr-3" : "justify-center px-2"), children: [_jsx(BackComp, { ...(isLink ? { href: backHref } : { type: "button", onClick: onBack }), "data-slot": "app-sidebar-back", "aria-label": resolvedBackLabel, className: "flex size-8 shrink-0 items-center justify-center rounded-md text-neutral-foreground-subtle transition-colors hover:bg-neutral-background-strong hover:text-neutral-foreground-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx(ChevronLeft, { "aria-hidden": true, className: "size-4" }) }), titleElement] }));
 }
-function remToPx(rem) {
-    return parseFloat(rem) * 16;
+// Widths cross this component as CSS lengths. Resting values are authored in
+// rem, but a live drag publishes px so the rail can sit between rem steps, so
+// both spellings have to parse — reading "180px" as rem would report 2880.
+function toPx(width) {
+    return width.trimEnd().endsWith("px")
+        ? parseFloat(width)
+        : parseFloat(width) * 16;
 }
-function SidebarResizeHandle({ width, minWidth, maxWidth, onResize, resizeLabel, resizeValueTextLabel, }) {
+/**
+ * Releasing a drag below this width closes the rail. It sits under the 14rem
+ * resting minimum so reaching it takes a deliberate push past the minimum
+ * rather than an ordinary narrow resize. Only used when the configured
+ * collapsed and minimum widths leave room for it — see `snapClosedBelowPx`.
+ */
+const SNAP_CLOSED_BELOW_PX = 180;
+/** Pointer travel that separates a resize drag from a click on the edge. */
+const DRAG_THRESHOLD_PX = 3;
+/** Keyboard resize increment. */
+const RESIZE_STEP_PX = 16;
+/**
+ * The rail's right edge as one gesture surface: clicking toggles, dragging
+ * resizes, and releasing a drag below `SNAP_CLOSED_BELOW_PX` snaps it closed.
+ * Invisible at rest — the col-resize cursor is the whole affordance, and
+ * `SidebarCollapseToggle` beside it is what makes the action findable.
+ *
+ * That split is deliberate: only the separator carries the resize value range,
+ * and only the toggle carries expanded/collapsed state, so neither ends up
+ * with ARIA that contradicts its role, and the two have distinct accessible
+ * names rather than one shared between adjacent tab stops.
+ */
+function SidebarResizeSeparator({ expanded, setExpanded, restingWidth, collapsedWidth, minWidth, maxWidth, resizable, onResize, onPreviewWidth, resizeLabel, resizeValueTextLabel, }) {
     const { t } = useC4Dictionary();
-    const minPx = remToPx(minWidth);
-    const maxPx = remToPx(maxWidth);
-    const nowPx = Math.round(remToPx(width));
-    // The rail is fixed at left:0, so the pointer's clientX is the target width.
-    const clampToRem = (px) => `${Math.round(Math.min(maxPx, Math.max(minPx, px)) / 16)}rem`;
+    const minPx = toPx(minWidth);
+    const maxPx = toPx(maxWidth);
+    const collapsedPx = toPx(collapsedWidth);
+    // Reads the live width mid-drag, since `restingWidth` carries the dragged
+    // value while one is in flight — so what is announced matches what is drawn.
+    const nowPx = Math.round(expanded ? toPx(restingWidth) : collapsedPx);
+    // Resting widths clamp to [min, max]. A drag travels further — down to the
+    // rail itself — because the snap-closed gesture needs to cross below min.
+    const toRestingRem = (px) => `${Math.round(Math.min(maxPx, Math.max(minPx, px)) / 16)}rem`;
+    // The designed threshold, but only while it genuinely sits between the rail
+    // and the resting minimum. A drag is floored at the rail, so a consumer
+    // raising `collapsedWidth` to 180px or beyond would put the threshold out of
+    // reach and silently cost them drag-to-collapse. Falling back to the midpoint
+    // leaves a usable closing zone at any configured pair of widths.
+    const snapClosedBelowPx = SNAP_CLOSED_BELOW_PX > collapsedPx && SNAP_CLOSED_BELOW_PX < minPx
+        ? SNAP_CLOSED_BELOW_PX
+        : (collapsedPx + minPx) / 2;
     const onPointerDown = (e) => {
         e.preventDefault();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        const onMove = (ev) => onResize(clampToRem(ev.clientX));
-        const onUp = () => {
+        // Best-effort: the drag is driven by window listeners, so capture only
+        // hardens it against the pointer leaving the strip. It throws when the id
+        // belongs to no live pointer — a synthetic pointer from a test, or one
+        // already released — and that must not take the gesture down with it.
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // no capture available; the window listeners still carry the drag
+        }
+        const startX = e.clientX;
+        // Captured before the drag mutates it, so aborting or snapping closed can
+        // hand the remembered width back untouched.
+        const widthBeforeDrag = restingWidth;
+        let moved = false;
+        let lastPx = nowPx;
+        const stopListening = () => {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+            onPreviewWidth(null);
+        };
+        // The rail is fixed at left:0, so the pointer's clientX is the target width.
+        const onMove = (ev) => {
+            if (!moved) {
+                if (Math.abs(ev.clientX - startX) <= DRAG_THRESHOLD_PX)
+                    return;
+                moved = true;
+                // Open on the first real movement so the edge tracks the pointer out of
+                // the collapsed state, instead of staying put and jumping at release.
+                if (!expanded)
+                    setExpanded(true);
+            }
+            lastPx = Math.min(maxPx, Math.max(collapsedPx, ev.clientX));
+            const live = `${Math.round(lastPx)}px`;
+            onPreviewWidth(live);
+            // Published unclamped and live: a sibling <main> offset by
+            // --app-sidebar-width has to track the rail through the snap zone, and
+            // clamping here would leave it hanging at the resting minimum while the
+            // rail kept narrowing. The clamp belongs on the committed value only.
+            onResize(live);
+        };
+        const onUp = () => {
+            stopListening();
+            if (!moved) {
+                setExpanded(!expanded);
+            }
+            else if (lastPx < snapClosedBelowPx) {
+                onResize(widthBeforeDrag);
+                setExpanded(false);
+            }
+            else {
+                onResize(toRestingRem(lastPx));
+                setExpanded(true);
+            }
+        };
+        // A cancelled pointer (interrupted touch, browser gesture takeover) never
+        // fires pointerup. Without this the listeners outlive the gesture and the
+        // rail keeps resizing with nothing held down.
+        const onCancel = () => {
+            stopListening();
+            onResize(widthBeforeDrag);
         };
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onCancel);
     };
-    const STEP = 16;
     const onKeyDown = (e) => {
-        if (e.key === "ArrowRight")
-            onResize(clampToRem(nowPx + STEP));
-        else if (e.key === "ArrowLeft")
-            onResize(clampToRem(nowPx - STEP));
+        if (!expanded) {
+            // Collapsed, the only resize left is the one that reopens the rail.
+            if (e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
+                return;
+            setExpanded(true);
+        }
+        else if (e.key === "ArrowLeft") {
+            // Stepping left off the minimum closes the rail: the keyboard equivalent
+            // of dragging past the snap threshold, so the gesture is not drag-only
+            // (WCAG 2.5.1).
+            if (nowPx <= minPx)
+                setExpanded(false);
+            else
+                onResize(toRestingRem(nowPx - RESIZE_STEP_PX));
+        }
+        else if (e.key === "ArrowRight") {
+            onResize(toRestingRem(nowPx + RESIZE_STEP_PX));
+        }
         else if (e.key === "Home")
             onResize(minWidth);
         else if (e.key === "End")
@@ -212,10 +504,31 @@ function SidebarResizeHandle({ width, minWidth, maxWidth, onResize, resizeLabel,
             return;
         e.preventDefault();
     };
-    return (_jsx("div", { "data-slot": "app-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": resizeLabel ?? t("appSidebar.resize"), "aria-valuemin": Math.round(minPx), "aria-valuemax": Math.round(maxPx), "aria-valuenow": nowPx, "aria-valuetext": resizeValueTextLabel ??
-            t("appSidebar.resizeValueText", { pixels: nowPx }), tabIndex: 0, onPointerDown: onPointerDown, onKeyDown: onKeyDown, className: "absolute top-0 right-0 z-50 h-full w-1 cursor-col-resize select-none hover:bg-neutral-background-medium focus-visible:bg-ring focus-visible:outline-none" }));
+    if (!resizable)
+        return null;
+    return (_jsx("div", { "data-slot": "app-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": resizeLabel ?? t("appSidebar.resize"), "aria-valuemin": Math.round(collapsedPx), "aria-valuemax": Math.round(maxPx), "aria-valuenow": nowPx, "aria-valuetext": resizeValueTextLabel ??
+            t("appSidebar.resizeValueText", { pixels: nowPx }), tabIndex: 0, onPointerDown: onPointerDown, onKeyDown: onKeyDown, 
+        // Straddles the edge for a bigger target than the 1px border. No resting
+        // fill — the col-resize cursor is the affordance, and the button beside
+        // it is what makes the action visible.
+        className: "absolute top-0 -right-1.5 z-50 h-full w-3 cursor-col-resize select-none focus-visible:bg-ring focus-visible:outline-none" }));
 }
-export function AppSidebar({ ariaLabel, items, backNav, expandedWidth = "16rem", collapsedWidth = "3.5rem", expandLabel, collapseLabel, collapseText, resizable = true, minWidth = "14rem", maxWidth = "24rem", resizeLabel, resizeValueTextLabel, footer, linkComponent, closeNavigationLabel, activeItemKey, className, ...expandProps }) {
+/**
+ * The visible half of the edge: a circular toggle straddling the rail's border.
+ *
+ * Rendered as a sibling of the item list rather than of the whole rail, so it
+ * bottoms out at the top of the `footer` when there is one instead of sitting
+ * on top of it — the footer takes arbitrary consumer content, including
+ * right-aligned controls this would otherwise cover and intercept.
+ */
+function SidebarCollapseToggle({ expanded, setExpanded, expandLabel, collapseLabel, }) {
+    const label = expanded ? collapseLabel : expandLabel;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-slot": "app-sidebar-collapse-toggle", "aria-label": label, "aria-expanded": expanded, onClick: () => setExpanded(!expanded), 
+                    // Above the separator strip so the pointer lands on the button rather
+                    // than the resize cursor where the two overlap.
+                    className: "absolute -right-4 bottom-3.5 z-[60] flex size-8 items-center justify-center rounded-full border border-border bg-background text-neutral-foreground-subtle shadow-xs transition-colors hover:bg-neutral-background-medium hover:text-neutral-foreground-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(ChevronLeft, { "aria-hidden": true, className: cn("size-3.5 transition-transform duration-150", !expanded && "rotate-180") }) }) }), _jsx(TooltipContent, { side: "right", children: label })] }));
+}
+export function AppSidebar({ ariaLabel, items, backNav, expandedWidth = "16rem", collapsedWidth = "3.5rem", expandLabel, collapseLabel, resizable = true, minWidth = "14rem", maxWidth = "24rem", resizeLabel, resizeValueTextLabel, footer, linkComponent, closeNavigationLabel, activeItemKey, className, ...expandProps }) {
     const ctx = useSidebar();
     const standaloneIsMobile = useIsMobile();
     const hasWarnedNoProvider = React.useRef(false);
@@ -251,23 +564,32 @@ export function AppSidebar({ ariaLabel, items, backNav, expandedWidth = "16rem",
     const [localWidth, setLocalWidth] = React.useState(expandedWidth);
     const resizedWidth = ctx ? ctx.width : resizable ? localWidth : expandedWidth;
     const setResizedWidth = ctx ? ctx.setWidth : setLocalWidth;
+    // Live width while the edge is being dragged. Non-null takes over from the
+    // resting state so the rail can follow the pointer below its resting minimum,
+    // through the zone where releasing snaps it closed.
+    const [dragWidth, setDragWidth] = React.useState(null);
     const isMobile = ctx?.isMobile ?? false;
     const LinkEl = linkComponent ?? "a";
     const hasLinkComponent = linkComponent !== undefined;
-    const toggleRef = React.useRef(null);
-    // Truncation reveal for the collapse-toggle's own label — declared above
-    // the mobile early return below (hooks can't follow a conditional return).
-    // Only relevant once `expanded` (the collapsed state hides the label via
-    // `sr-only`, and already gets its own, separate expand-action tooltip).
-    const { ref: collapseTextRef, isTruncated: collapseTextTruncated, measure: measureCollapseText, } = useIsTruncated();
-    React.useLayoutEffect(() => {
-        measureCollapseText();
-    });
+    const [openFlyoutKey, setOpenFlyoutKey] = React.useState(null);
+    const flyoutSlot = React.useMemo(() => ({ openKey: openFlyoutKey, setOpenKey: setOpenFlyoutKey }), [openFlyoutKey]);
+    // Expanding the rail unmounts the flyouts without clearing the slot, so a
+    // later collapse would remount the last one still open, with no hover behind
+    // it. Resetting in an effect (rather than on the toggle) is what also covers
+    // an expansion driven by the provider or by a controlled `expanded` prop.
+    React.useEffect(() => {
+        // Resetting one key on an expansion change: there is no external system to
+        // sync with, and no `key` to reset by that would not remount every row.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (expanded)
+            setOpenFlyoutKey(null);
+    }, [expanded]);
     // Mobile: render the nav inside a left Sheet overlay (always full labels).
     if (isMobile) {
-        return (_jsx(Sheet, { open: ctx?.mobileOpen ?? false, onOpenChange: (o) => ctx?.setMobileOpen(o), children: _jsxs(SheetContent, { side: "left", showCloseButton: false, className: "w-72 p-0", children: [_jsx(SheetTitle, { className: "sr-only", children: ariaLabel }), _jsxs("nav", { "data-slot": "app-sidebar", "aria-label": ariaLabel, className: "flex h-full flex-col bg-background", children: [_jsx("div", { className: "flex h-12 shrink-0 items-center justify-end px-2", children: _jsx(SheetClose, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeNavigationLabel ?? t("appSidebar.closeNavigation"), className: "flex size-8 items-center justify-center rounded-md text-neutral-foreground-subtle transition-colors hover:bg-neutral-background-strong hover:text-neutral-foreground-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx(X, { "aria-hidden": true, className: "size-4" }) }) }) }), backNav && (_jsx(BackNavHeader, { backNav: backNav, expanded: true, LinkEl: LinkEl })), _jsx("div", { className: cn("flex flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2", HIDDEN_SCROLLBAR), children: items.map((node) => renderNode(node, {
+        return (_jsx(Sheet, { open: ctx?.mobileOpen ?? false, onOpenChange: (o) => ctx?.setMobileOpen(o), children: _jsxs(SheetContent, { side: "left", showCloseButton: false, className: "w-72 p-0", children: [_jsx(SheetTitle, { className: "sr-only", children: ariaLabel }), _jsxs("nav", { "data-slot": "app-sidebar", "aria-label": ariaLabel, className: "flex h-full flex-col bg-background", children: [_jsx("div", { className: "flex h-12 shrink-0 items-center justify-end px-2", children: _jsx(SheetClose, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeNavigationLabel ?? t("appSidebar.closeNavigation"), className: "flex size-8 items-center justify-center rounded-md text-neutral-foreground-subtle transition-colors hover:bg-neutral-background-strong hover:text-neutral-foreground-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: _jsx(X, { "aria-hidden": true, className: "size-4" }) }) }) }), backNav && (_jsx(BackNavHeader, { backNav: backNav, expanded: true, LinkEl: LinkEl })), _jsx("div", { className: cn("flex flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2", HIDDEN_SCROLLBAR), children: items.map((node, index) => renderNode(node, {
                                     expanded: true,
                                     depth: 0,
+                                    isFirst: index === 0,
                                     LinkEl,
                                     hasLinkComponent,
                                     activeItemKey,
@@ -277,23 +599,25 @@ export function AppSidebar({ ariaLabel, items, backNav, expandedWidth = "16rem",
                                 })) }), footer && (_jsx("div", { className: "border-t border-border p-2", children: footer }))] })] }) }));
     }
     // Desktop: the fixed rail.
-    const width = expanded ? resizedWidth : collapsedWidth;
+    const width = dragWidth ?? (expanded ? resizedWidth : collapsedWidth);
     // Shared with the tooltip below so the accessible name (aria-label) and the
     // visible tooltip text never drift apart under a dictionary override.
     const resolvedExpandLabel = expandLabel ?? t("appSidebar.expand");
     const resolvedCollapseLabel = collapseLabel ?? t("appSidebar.collapse");
-    const resolvedCollapseText = collapseText ?? t("appSidebar.collapseText");
-    const collapseToggle = (_jsxs("button", { ref: toggleRef, type: "button", "aria-label": expanded ? resolvedCollapseLabel : resolvedExpandLabel, "aria-expanded": expanded, onClick: () => {
-            setExpanded(!expanded);
-            toggleRef.current?.focus();
-        }, onPointerEnter: measureCollapseText, onFocus: measureCollapseText, className: cn("flex min-h-10 items-center py-2 text-sm text-neutral-foreground-subtle hover:bg-neutral-background-strong hover:text-neutral-foreground-strong border-t border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", expanded ? "gap-3 px-3" : "justify-center px-2"), children: [expanded ? (_jsx(PanelLeftClose, { "aria-hidden": true, className: "size-4 shrink-0" })) : (_jsx(PanelLeft, { "aria-hidden": true, className: "size-4 shrink-0" })), _jsx("span", { ref: collapseTextRef, className: cn(expanded ? "flex-1 truncate text-left" : "sr-only"), children: resolvedCollapseText })] }));
-    return (_jsxs("nav", { "data-slot": "app-sidebar", "aria-label": ariaLabel, style: { width, ["--app-sidebar-width"]: width }, className: cn("fixed left-0 top-12 bottom-0 z-40 flex flex-col bg-background border-r border-border transition-[width] duration-150 ease-out", className), children: [backNav && (_jsx(BackNavHeader, { backNav: backNav, expanded: expanded, LinkEl: LinkEl })), _jsx("div", { className: cn("flex-1 min-h-0 flex flex-col gap-0.5 px-2 py-2 overflow-y-auto overflow-x-hidden", HIDDEN_SCROLLBAR), children: items.map((node) => renderNode(node, {
-                    expanded,
-                    depth: 0,
-                    LinkEl,
-                    hasLinkComponent,
-                    activeItemKey,
-                    isMobile: false,
-                })) }), footer && _jsx("div", { className: "border-t border-border p-2", children: footer }), expanded ? (collapseTextTruncated ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: collapseToggle }), _jsx(TooltipContent, { children: resolvedCollapseText })] })) : (collapseToggle)) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: collapseToggle }), _jsx(TooltipContent, { side: "right", children: resolvedExpandLabel })] })), resizable && expanded && (_jsx(SidebarResizeHandle, { width: resizedWidth, minWidth: minWidth, maxWidth: maxWidth, onResize: setResizedWidth, resizeLabel: resizeLabel, resizeValueTextLabel: resizeValueTextLabel }))] }));
+    return (
+    // The flyout slot is provided only here: the mobile Sheet renders every row
+    // expanded, so no flyout is reachable on that path.
+    _jsx(FlyoutSlotContext.Provider, { value: flyoutSlot, children: _jsxs("nav", { "data-slot": "app-sidebar", "aria-label": ariaLabel, style: { width, ["--app-sidebar-width"]: width }, className: cn("fixed left-0 top-12 bottom-0 z-40 flex flex-col bg-background border-r border-border transition-[width] duration-150 ease-out", 
+            // An animated width can't keep up with the pointer it is supposed to
+            // be following.
+            dragWidth && "transition-none", className), children: [backNav && (_jsx(BackNavHeader, { backNav: backNav, expanded: expanded, LinkEl: LinkEl })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: cn("flex-1 min-h-0 flex flex-col gap-0.5 px-2 py-2 overflow-y-auto overflow-x-hidden", HIDDEN_SCROLLBAR), children: items.map((node, index) => renderNode(node, {
+                                expanded,
+                                depth: 0,
+                                isFirst: index === 0,
+                                LinkEl,
+                                hasLinkComponent,
+                                activeItemKey,
+                                isMobile: false,
+                            })) }), _jsx(SidebarCollapseToggle, { expanded: expanded, setExpanded: setExpanded, expandLabel: resolvedExpandLabel, collapseLabel: resolvedCollapseLabel })] }), footer && _jsx("div", { className: "border-t border-border p-2", children: footer }), _jsx(SidebarResizeSeparator, { expanded: expanded, setExpanded: setExpanded, restingWidth: resizedWidth, collapsedWidth: collapsedWidth, minWidth: minWidth, maxWidth: maxWidth, resizable: resizable, onResize: setResizedWidth, onPreviewWidth: setDragWidth, resizeLabel: resizeLabel, resizeValueTextLabel: resizeValueTextLabel })] }) }));
 }
 //# sourceMappingURL=app-sidebar.js.map