@acronis-platform/ui-react 0.55.0 → 0.56.1

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js

@@ -1,33 +1,28 @@
-import { jsxs as f, Fragment as _, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import { mergeProps as j } from "@base-ui/react/merge-props";
-import { useRender as q } from "@base-ui/react/use-render";
+import { jsxs as v, Fragment as H, jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import { mergeProps as q } from "@base-ui/react/merge-props";
+import { useRender as G } from "@base-ui/react/use-render";
 import { Collapsible as X } from "@base-ui/react/collapsible";
-import { SquareArrowUpRightIcon as ae, ChevronDownIcon as G } from "@acronis-platform/icons-react/stroke-mono";
+import { SquareArrowUpRightIcon as ae, ChevronDownIcon as J } from "@acronis-platform/icons-react/stroke-mono";
 import { cva as te } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as b } from "../../../lib/utils.js";
-import { Tooltip as P, TooltipTrigger as A, TooltipContent as M } from "../tooltip/tooltip.js";
-function J() {
-  const [t, r] = n.useState("ltr");
-  return n.useEffect(() => {
-    r(document.documentElement.dir === "rtl" ? "rtl" : "ltr");
-  }, []), t;
-}
-function K(t, { enabled: r }) {
-  const [s, l] = n.useState(!1);
-  return n.useEffect(() => {
-    const i = t.current;
-    if (!r || !i) {
-      l(!1);
+import { cn as f } from "../../../lib/utils.js";
+import { useDocDir as B } from "../../../lib/use-doc-dir.js";
+import { Tooltip as I, TooltipTrigger as O, TooltipContent as A } from "../tooltip/tooltip.js";
+function F(n, { enabled: a }) {
+  const [o, d] = t.useState(!1);
+  return t.useEffect(() => {
+    const i = n.current;
+    if (!a || !i) {
+      d(!1);
       return;
     }
-    const a = () => l(i.scrollWidth > i.clientWidth);
-    a();
-    const o = new ResizeObserver(a);
-    return o.observe(i), () => o.disconnect();
-  }, [t, r]), s;
+    const r = () => d(i.scrollWidth > i.clientWidth);
+    r();
+    const s = new ResizeObserver(r);
+    return s.observe(i), () => s.disconnect();
+  }, [n, a]), o;
 }
-const R = 256, Q = R * 2, Y = /* @__PURE__ */ f(_, { children: [
+const E = 256, Q = E * 2, Y = /* @__PURE__ */ v(H, { children: [
   /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
   " Drag",
   /* @__PURE__ */ e("br", {}),
@@ -36,25 +31,25 @@ const R = 256, Q = R * 2, Y = /* @__PURE__ */ f(_, { children: [
   /* @__PURE__ */ e("br", {}),
   /* @__PURE__ */ e("span", { className: "font-semibold", children: "Reset size:" }),
   " Double click"
-] }), Z = /* @__PURE__ */ f(_, { children: [
+] }), Z = /* @__PURE__ */ v(H, { children: [
   /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
   " Drag",
   /* @__PURE__ */ e("br", {}),
   /* @__PURE__ */ e("span", { className: "font-semibold", children: "Expand:" }),
   " Click"
-] }), $ = n.createContext(null);
-function I() {
-  return n.useContext($) ?? {
+] }), $ = t.createContext(null);
+function P() {
+  return t.useContext($) ?? {
     expanded: !0,
     toggleExpanded: () => {
     },
     resizable: !1,
-    width: R,
+    width: E,
     setWidth: () => {
     },
-    minWidth: R,
+    minWidth: E,
     maxWidth: Q,
-    defaultWidth: R,
+    defaultWidth: E,
     headerLabel: void 0,
     setHeaderLabel: () => {
     },
@@ -66,402 +61,410 @@ function I() {
     resizeTooltipCollapsed: Z
   };
 }
-function ne(t, r, s) {
-  const [l, i] = n.useState(r), a = t !== void 0, o = a ? t : l, u = n.useCallback(
-    (d) => {
-      a || i(d), s == null || s(d);
+function ne(n, a, o) {
+  const [d, i] = t.useState(a), r = n !== void 0, s = r ? n : d, c = t.useCallback(
+    (l) => {
+      r || i(l), o == null || o(l);
     },
-    [a, s]
+    [r, o]
   );
-  return [o, u];
+  return [s, c];
 }
 function ie() {
-  const t = I(), { expanded: r, toggleExpanded: s, resizable: l } = t, i = J(), a = n.useRef(t);
-  a.current = t;
-  const o = n.useRef(!1), [u, d] = n.useState(!1), [c, v] = n.useState(!1), m = n.useRef(
+  const n = P(), { expanded: a, toggleExpanded: o, resizable: d } = n, i = B(), r = t.useRef(n);
+  r.current = n;
+  const s = t.useRef(!1), [c, l] = t.useState(!1), [p, g] = t.useState(!1), u = t.useRef(
     null
   );
-  if (n.useEffect(() => () => {
-    m.current && clearTimeout(m.current);
-  }, []), !l) return null;
-  const S = (p) => {
-    p.preventDefault();
-    const C = p.currentTarget;
-    C.setPointerCapture(p.pointerId), o.current = !1, v(!0), d(!1);
-    const h = C.closest("[data-state]");
-    if (!h) {
-      v(!1), C.releasePointerCapture(p.pointerId);
+  if (t.useEffect(() => () => {
+    u.current && clearTimeout(u.current);
+  }, []), !d) return null;
+  const x = (b) => {
+    b.preventDefault();
+    const k = b.currentTarget;
+    k.setPointerCapture(b.pointerId), s.current = !1, g(!0), l(!1);
+    const y = k.closest("[data-state]");
+    if (!y) {
+      g(!1), k.releasePointerCapture(b.pointerId);
       return;
     }
-    h.style.transitionProperty = "none";
-    const w = getComputedStyle(h).direction === "rtl", N = h.getBoundingClientRect(), { minWidth: x, maxWidth: T } = a.current, y = x / 2, z = (O) => {
-      o.current = !0;
-      const D = w ? N.right - O.clientX : O.clientX - N.left, { expanded: B } = a.current;
-      B ? D < y ? a.current.toggleExpanded() : a.current.setWidth(
-        Math.min(Math.max(D, x), T)
-      ) : D > y && a.current.toggleExpanded();
-    }, W = () => {
-      v(!1), h && (h.style.transitionProperty = ""), window.removeEventListener("pointermove", z), window.removeEventListener("pointerup", W);
+    y.style.transitionProperty = "none";
+    const N = getComputedStyle(y).direction === "rtl", R = y.getBoundingClientRect(), { minWidth: S, maxWidth: C } = r.current, w = S / 2, D = (M) => {
+      s.current = !0;
+      const W = N ? R.right - M.clientX : M.clientX - R.left, { expanded: K } = r.current;
+      K ? W < w ? r.current.toggleExpanded() : r.current.setWidth(
+        Math.min(Math.max(W, S), C)
+      ) : W > w && r.current.toggleExpanded();
+    }, L = () => {
+      g(!1), y && (y.style.transitionProperty = ""), window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", L);
     };
-    window.addEventListener("pointermove", z), window.addEventListener("pointerup", W);
-  }, E = () => {
-    o.current || (m.current && clearTimeout(m.current), m.current = setTimeout(() => {
-      s();
+    window.addEventListener("pointermove", D), window.addEventListener("pointerup", L);
+  }, h = () => {
+    s.current || (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+      o();
     }, 250));
-  }, L = () => {
-    m.current && (clearTimeout(m.current), m.current = null), r || s(), a.current.setWidth(a.current.defaultWidth);
-  }, g = (p) => {
+  }, T = () => {
+    u.current && (clearTimeout(u.current), u.current = null), a || o(), r.current.setWidth(r.current.defaultWidth);
+  }, m = (b) => {
     const {
-      minWidth: C,
-      maxWidth: h,
-      defaultWidth: w,
-      width: N,
-      setWidth: x,
-      expanded: T,
-      toggleExpanded: y
-    } = a.current, z = 16, W = i === "rtl" ? "ArrowLeft" : "ArrowRight", O = i === "rtl" ? "ArrowRight" : "ArrowLeft";
-    if (p.key === W && T)
-      p.preventDefault(), x(Math.min(N + z, h));
-    else if (p.key === O && T) {
-      p.preventDefault();
-      const D = N - z;
-      D < C ? y() : x(D);
-    } else p.key === "Enter" ? (p.preventDefault(), y()) : p.key === "Home" && (p.preventDefault(), T || y(), x(w));
+      minWidth: k,
+      maxWidth: y,
+      defaultWidth: N,
+      width: R,
+      setWidth: S,
+      expanded: C,
+      toggleExpanded: w
+    } = r.current, D = 16, L = i === "rtl" ? "ArrowLeft" : "ArrowRight", M = i === "rtl" ? "ArrowRight" : "ArrowLeft";
+    if (b.key === L && C)
+      b.preventDefault(), S(Math.min(R + D, y));
+    else if (b.key === L && !C)
+      b.preventDefault(), w();
+    else if (b.key === M && C) {
+      b.preventDefault();
+      const W = R - D;
+      W < k ? w() : S(W);
+    } else b.key === "Enter" || b.key === " " ? (b.preventDefault(), w()) : b.key === "Home" && (b.preventDefault(), C || w(), S(N));
   };
-  return /* @__PURE__ */ f(P, { open: u, onOpenChange: (p) => {
-    c || d(p);
-  }, children: [
+  return /* @__PURE__ */ v(I, { open: c, onOpenChange: (b) => {
+    p || l(b);
+  }, trackCursorAxis: "y", children: [
     /* @__PURE__ */ e(
-      A,
+      O,
       {
         render: /* @__PURE__ */ e(
           "div",
           {
             role: "separator",
             "aria-orientation": "vertical",
-            "aria-label": t.resizeAriaLabel,
-            className: b(
-              // 9px hit area matching ResizableHandle, absolutely positioned on inline-end edge.
-              // No after: divider — the sidebar's own border-e changes color via :has() on hover/active/focus.
-              "absolute end-0 top-0 h-full w-[9px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10",
-              "focus-visible:outline-none"
+            "aria-label": n.resizeAriaLabel,
+            className: f(
+              // 17px hit area, absolutely positioned on inline-end edge.
+              // The sidebar's own border-e provides the visible 1px line; its color
+              // changes via :has() on hover/active/focus-visible.
+              "absolute end-0 top-0 h-full w-[17px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10",
+              // On focus: 1px active-color line (after pseudo, CSS border for pixel-snap) + 3px box-shadow ring centered on it.
+              "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none",
+              "after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent",
+              "focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]"
             ),
             tabIndex: 0,
-            onKeyDown: g,
-            onPointerDown: S,
-            onClick: E,
-            onDoubleClick: L
+            onKeyDown: m,
+            onPointerDown: x,
+            onClick: h,
+            onDoubleClick: T
           }
         )
       }
     ),
-    (r ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed) != null && /* @__PURE__ */ e(M, { side: i === "rtl" ? "left" : "right", align: "center", children: r ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed })
+    (a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed) != null && /* @__PURE__ */ e(A, { side: i === "rtl" ? "left" : "right", align: "center", children: a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed })
   ] });
 }
-const se = n.forwardRef(
+const oe = t.forwardRef(
   ({
-    className: t,
-    expanded: r,
-    defaultExpanded: s = !0,
-    onExpandedChange: l,
+    className: n,
+    expanded: a,
+    defaultExpanded: o = !0,
+    onExpandedChange: d,
     resizable: i = !0,
-    width: a,
-    onWidthChange: o,
-    resizeAriaLabel: u = "Resize sidebar",
-    resizeTooltipExpanded: d = Y,
-    resizeTooltipCollapsed: c = Z,
-    "aria-label": v = "Section navigation",
-    render: m,
-    children: S,
-    ...E
-  }, L) => {
-    const [g, k] = ne(
-      r,
-      s,
-      l
-    ), [p, C] = n.useState(R), h = a !== void 0, w = h ? a : p, N = n.useCallback(
-      (F) => {
-        h || C(F), o == null || o(F);
+    width: r,
+    onWidthChange: s,
+    resizeAriaLabel: c = "Resize sidebar",
+    resizeTooltipExpanded: l = Y,
+    resizeTooltipCollapsed: p = Z,
+    "aria-label": g = "Section navigation",
+    render: u,
+    children: x,
+    ...h
+  }, T) => {
+    const [m, z] = ne(
+      a,
+      o,
+      d
+    ), [b, k] = t.useState(E), y = r !== void 0, N = y ? r : b, R = t.useCallback(
+      (U) => {
+        y || k(U), s == null || s(U);
       },
-      [h, o]
-    ), [x, T] = n.useState(void 0), [y, z] = n.useState(void 0), W = n.useMemo(
+      [y, s]
+    ), [S, C] = t.useState(void 0), [w, D] = t.useState(void 0), L = t.useMemo(
       () => ({
-        expanded: g,
-        toggleExpanded: () => k(!g),
+        expanded: m,
+        toggleExpanded: () => z(!m),
         resizable: i,
-        width: w,
-        setWidth: N,
-        minWidth: R,
+        width: N,
+        setWidth: R,
+        minWidth: E,
         maxWidth: Q,
-        defaultWidth: R,
-        headerLabel: x,
-        setHeaderLabel: T,
-        selectedLabel: y,
-        setSelectedLabel: z,
-        resizeAriaLabel: u,
-        resizeTooltipExpanded: d,
-        resizeTooltipCollapsed: c
+        defaultWidth: E,
+        headerLabel: S,
+        setHeaderLabel: C,
+        selectedLabel: w,
+        setSelectedLabel: D,
+        resizeAriaLabel: c,
+        resizeTooltipExpanded: l,
+        resizeTooltipCollapsed: p
       }),
       [
-        g,
-        k,
+        m,
+        z,
         i,
-        w,
         N,
-        x,
-        y,
-        u,
-        d,
-        c
+        R,
+        S,
+        w,
+        c,
+        l,
+        p
       ]
-    ), B = q({
-      render: m,
-      ref: L,
+    ), K = G({
+      render: u,
+      ref: T,
       defaultTagName: "nav",
-      props: j(
+      props: q(
         {
-          "aria-label": v,
-          "data-state": g ? "expanded" : "collapsed",
-          style: i && g && (h || w !== R) ? { width: w } : void 0,
-          className: b(
+          "aria-label": g,
+          "data-state": m ? "expanded" : "collapsed",
+          style: i && m && (y || N !== E) ? { width: N } : void 0,
+          className: f(
             "group/sidebar relative flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-e border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-inline-end-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
-            i && "transition-[width,border-color] has-[[role=separator]:hover]:border-[var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:border-[var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:border-[var(--ui-resizable-border-color-hover)] has-[[role=separator]:focus-visible]:ring-[3px] has-[[role=separator]:focus-visible]:ring-[var(--ui-focus-primary)]",
-            t
+            i && "transition-[width,border-color] has-[[role=separator]:hover]:[border-inline-end-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-end-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-end-color:var(--ui-resizable-border-color-active)]",
+            n
           ),
-          children: /* @__PURE__ */ f(_, { children: [
+          children: /* @__PURE__ */ v(H, { children: [
             /* @__PURE__ */ e(ee, {}),
-            S,
+            x,
             /* @__PURE__ */ e(ie, {})
           ] })
         },
-        E
+        h
       )
     });
-    return /* @__PURE__ */ e($.Provider, { value: W, children: B });
+    return /* @__PURE__ */ e($.Provider, { value: L, children: K });
   }
 );
-se.displayName = "SidebarSecondary";
-const oe = n.forwardRef(({ className: t, label: r, children: s, ...l }, i) => {
-  const { setHeaderLabel: a } = I(), o = r ?? s;
-  return n.useEffect(() => {
-    a(o);
-  }, [o, a]), /* @__PURE__ */ e(
+oe.displayName = "SidebarSecondary";
+const se = t.forwardRef(({ className: n, label: a, children: o, ...d }, i) => {
+  const { setHeaderLabel: r } = P(), s = a ?? o;
+  return t.useEffect(() => {
+    r(s);
+  }, [s, r]), /* @__PURE__ */ e(
     "div",
     {
       ref: i,
-      className: b(
+      className: f(
         "hidden items-center shrink-0",
         "group-data-[state=expanded]/sidebar:flex",
         "px-[var(--ui-sidebar-secondary-global-container-header-padding-x)] py-[var(--ui-sidebar-secondary-global-container-header-padding-y)]",
-        t
+        n
       ),
-      ...l,
-      children: /* @__PURE__ */ e("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: o })
+      ...d,
+      children: /* @__PURE__ */ e("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: s })
     }
   );
 });
-oe.displayName = "SidebarSecondaryHeader";
-const le = n.forwardRef(({ className: t, ...r }, s) => (
+se.displayName = "SidebarSecondaryHeader";
+const le = t.forwardRef(({ className: n, ...a }, o) => (
   // Expanded: the section list. Hidden in collapsed mode, where the
   // CollapsedBreadcrumb sibling takes over.
   /* @__PURE__ */ e(
     "div",
     {
-      ref: s,
-      className: b(
+      ref: o,
+      className: f(
         "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
         "hidden group-data-[state=expanded]/sidebar:flex",
-        t
+        n
       ),
-      ...r
+      ...a
     }
   )
 ));
 le.displayName = "SidebarSecondaryContent";
-const ee = n.forwardRef(({ className: t, parentLabel: r, currentLabel: s, separator: l, ...i }, a) => {
-  const { headerLabel: o, selectedLabel: u } = I(), d = r ?? o, c = s ?? u;
+const ee = t.forwardRef(({ className: n, parentLabel: a, currentLabel: o, separator: d, ...i }, r) => {
+  const { headerLabel: s, selectedLabel: c } = P(), l = a ?? s, p = o ?? c;
   return (
     // Shown only in collapsed mode — toggled by the same data-[state] selector so
     // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:
     // parent → separator → current page.
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ v(
       "div",
       {
-        ref: a,
-        className: b(
+        ref: r,
+        className: f(
           "flex flex-1 flex-col items-center min-h-0",
           "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
           "flex group-data-[state=expanded]/sidebar:hidden",
-          t
+          n
         ),
         ...i,
         children: [
-          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: d }),
+          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: l }),
           /* @__PURE__ */ e(
             "span",
             {
               "aria-hidden": "true",
               className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
-              children: l ?? /* @__PURE__ */ e(G, { size: 16 })
+              children: d ?? /* @__PURE__ */ e(J, { size: 16 })
             }
           ),
-          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: c })
+          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: p })
         ]
       }
     )
   );
 });
 ee.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-const de = n.forwardRef(({ className: t, ...r }, s) => /* @__PURE__ */ e(
+const de = t.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
   "div",
   {
-    ref: s,
-    className: b(
+    ref: o,
+    className: f(
       "flex flex-col shrink-0",
       "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
       "py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
-      t
+      n
     ),
-    ...r
+    ...a
   }
 ));
 de.displayName = "SidebarSecondaryFooter";
-const H = n.createContext({
+const _ = t.createContext({
   expandable: !1
 }), ce = {
   expandable: !1
 }, ue = {
   expandable: !0
-}, be = n.forwardRef(
+}, be = t.forwardRef(
   ({
-    className: t,
-    expandable: r = !1,
-    open: s,
-    defaultOpen: l = !0,
+    className: n,
+    expandable: a = !1,
+    open: o,
+    defaultOpen: d = !0,
     onOpenChange: i,
-    children: a,
-    ...o
-  }, u) => {
-    const d = b(
+    children: r,
+    ...s
+  }, c) => {
+    const l = f(
       "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
-      t
+      n
     );
-    return r ? /* @__PURE__ */ e(H.Provider, { value: ue, children: /* @__PURE__ */ e(
+    return a ? /* @__PURE__ */ e(_.Provider, { value: ue, children: /* @__PURE__ */ e(
       X.Root,
       {
-        ref: u,
-        open: s,
-        defaultOpen: l,
+        ref: c,
+        open: o,
+        defaultOpen: d,
         onOpenChange: i,
-        render: /* @__PURE__ */ e("div", { className: d }),
-        ...o,
-        children: a
+        render: /* @__PURE__ */ e("div", { className: l }),
+        ...s,
+        children: r
       }
-    ) }) : /* @__PURE__ */ e(H.Provider, { value: ce, children: /* @__PURE__ */ e("div", { ref: u, className: d, ...o, children: a }) });
+    ) }) : /* @__PURE__ */ e(_.Provider, { value: ce, children: /* @__PURE__ */ e("div", { ref: c, className: l, ...s, children: r }) });
   }
 );
 be.displayName = "SidebarSecondarySection";
-const U = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", V = "min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", pe = n.forwardRef(({ className: t, actions: r, unreadRollup: s, children: l, ...i }, a) => {
-  const { expandable: o } = n.useContext(H), u = n.useRef(null), d = K(u, { enabled: !0 }), c = /* @__PURE__ */ f(P, { disabled: !d, children: [
+const V = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", j = "min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", fe = t.forwardRef(({ className: n, actions: a, unreadRollup: o, children: d, ...i }, r) => {
+  const { expandable: s } = t.useContext(_), c = B(), l = t.useRef(null), p = t.useRef(null), g = F(p, { enabled: !0 }), u = (h) => {
+    l.current = h, typeof r == "function" ? r(h) : r && (r.current = h);
+  }, x = /* @__PURE__ */ v(I, { disabled: !g, children: [
     /* @__PURE__ */ e(
-      A,
+      O,
       {
         render: /* @__PURE__ */ e(
           "span",
           {
-            ref: u,
+            ref: p,
             className: "min-w-0 flex-1 truncate"
           }
         ),
-        children: l
+        children: d
       }
     ),
-    /* @__PURE__ */ e(M, { children: l })
+    /* @__PURE__ */ e(A, { anchor: l, side: c === "rtl" ? "left" : "right", children: d })
   ] });
-  if (!o) {
-    const v = b(U, V, t);
-    return r == null ? /* @__PURE__ */ e(
+  if (!s) {
+    const h = f(V, j, n);
+    return a == null ? /* @__PURE__ */ e(
       "div",
       {
-        ref: a,
-        className: b(
-          v,
+        ref: u,
+        className: f(
+          h,
           "flex items-center"
         ),
         ...i,
-        children: c
+        children: x
       }
-    ) : /* @__PURE__ */ f(
+    ) : /* @__PURE__ */ v(
       "div",
       {
-        ref: a,
-        className: b(
-          v,
+        ref: u,
+        className: f(
+          h,
           "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
         ),
         ...i,
         children: [
-          c,
-          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: r })
+          x,
+          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
         ]
       }
     );
   }
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
-      ref: a,
-      className: b(
+      ref: u,
+      className: f(
         "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
-        V,
-        t
+        j,
+        n
       ),
       ...i,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ v(
           X.Trigger,
           {
-            className: b(
-              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start",
-              U,
+            className: f(
+              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer",
+              V,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
             ),
             children: [
               /* @__PURE__ */ e(
-                G,
+                J,
                 {
                   size: 16,
                   "aria-hidden": "true",
                   className: "shrink-0 ltr:-rotate-90 rtl:rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]"
                 }
               ),
-              c,
-              s != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: s })
+              x,
+              o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: o })
             ]
           }
         ),
-        r != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: r })
+        a != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
       ]
     }
   );
 });
-pe.displayName = "SidebarSecondarySectionLabel";
-const me = n.forwardRef(({ className: t, ...r }, s) => {
-  const { expandable: l } = n.useContext(H), i = /* @__PURE__ */ e(
+fe.displayName = "SidebarSecondarySectionLabel";
+const pe = t.forwardRef(({ className: n, ...a }, o) => {
+  const { expandable: d } = t.useContext(_), i = /* @__PURE__ */ e(
     "ul",
     {
-      ref: s,
-      className: b(
+      ref: o,
+      className: f(
         "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
-        t
+        n
       ),
-      ...r
+      ...a
     }
   );
-  return l ? /* @__PURE__ */ e(X.Panel, { children: i }) : i;
+  return d ? /* @__PURE__ */ e(X.Panel, { children: i }) : i;
 });
-me.displayName = "SidebarSecondaryMenu";
-const fe = "group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", re = te(fe, {
+pe.displayName = "SidebarSecondaryMenu";
+const me = "group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", re = te(me, {
   variants: {
     variant: {
       unselected: "bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]",
@@ -471,76 +474,89 @@ const fe = "group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-me
   defaultVariants: {
     variant: "unselected"
   }
-}), ve = n.forwardRef(
-  ({ className: t, selected: r = !1, icon: s, extras: l, render: i, children: a, ...o }, u) => {
-    const { expanded: d, setSelectedLabel: c } = I(), { expandable: v } = n.useContext(H), m = n.useRef(null), S = K(m, { enabled: d });
-    n.useEffect(() => {
-      r && c(a);
-    }, [r, a, c]);
-    const E = q({
+}), ve = t.forwardRef(
+  ({ className: n, selected: a = !1, icon: o, extras: d, render: i, children: r, ...s }, c) => {
+    const { expanded: l, setSelectedLabel: p } = P(), { expandable: g } = t.useContext(_), u = B(), x = t.useRef(null), h = t.useRef(null), T = F(h, { enabled: l });
+    t.useEffect(() => {
+      a && p(r);
+    }, [a, r, p]);
+    const m = G({
       render: i,
-      ref: u,
+      ref: [c, x],
       defaultTagName: "a",
-      props: j(
+      props: q(
         {
-          className: b(
+          className: f(
             re({
-              variant: r ? "selected" : "unselected"
+              variant: a ? "selected" : "unselected"
             }),
             // Inside an expandable section, increase start padding so the
             // label aligns with the section header text (after chevron + gap)
             // while keeping the container full-width for hover/active fills.
-            v && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]",
-            t
+            g && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]",
+            n
           ),
-          "aria-current": r ? "page" : void 0,
-          children: /* @__PURE__ */ f(_, { children: [
-            s != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: s }),
-            /* @__PURE__ */ f(P, { disabled: !S, children: [
+          "aria-current": a ? "page" : void 0,
+          onKeyDown: (z) => {
+            z.key === " " && (z.preventDefault(), z.currentTarget.click());
+          },
+          children: /* @__PURE__ */ v(H, { children: [
+            o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: o }),
+            /* @__PURE__ */ v(I, { disabled: !T, children: [
               /* @__PURE__ */ e(
-                A,
+                O,
                 {
                   render: /* @__PURE__ */ e(
                     "span",
                     {
-                      ref: m,
-                      className: b(
+                      ref: h,
+                      className: f(
                         "flex-1 min-w-[60px] truncate text-start",
-                        !d && "sr-only"
+                        !l && "sr-only"
                       )
                     }
                   ),
-                  children: a
+                  children: r
                 }
               ),
-              /* @__PURE__ */ e(M, { children: a })
+              /* @__PURE__ */ e(
+                A,
+                {
+                  anchor: x,
+                  side: u === "rtl" ? "left" : "right",
+                  children: r
+                }
+              )
             ] }),
-            l
+            d
           ] })
         },
-        o
+        s
       )
     });
-    return /* @__PURE__ */ e("li", { className: "contents", children: E });
+    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
+      /* @__PURE__ */ e(O, { render: m }),
+      /* @__PURE__ */ e(A, { side: u === "rtl" ? "left" : "right", children: r })
+    ] }) });
   }
 );
 ve.displayName = "SidebarSecondaryMenuItem";
-const he = n.forwardRef(({ className: t, variant: r, shortcut: s, tag: l, children: i, ...a }, o) => {
-  const { expanded: u } = I(), d = r === "tag" || r === "tag-externalLink", c = r === "externalLink" || r === "tag-externalLink", v = r === "shortcut";
-  return /* @__PURE__ */ f(
+const he = t.forwardRef(({ className: n, variant: a, shortcut: o, tag: d, children: i, ...r }, s) => {
+  const { expanded: c } = P(), l = a === "tag" || a === "tag-externalLink", p = a === "externalLink" || a === "tag-externalLink", g = a === "shortcut";
+  return /* @__PURE__ */ v(
     "span",
     {
-      ref: o,
-      className: b(
+      ref: s,
+      className: f(
         "inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
-        !u && "hidden",
-        t
+        !c && "hidden",
+        n
       ),
-      ...a,
+      ...r,
       children: [
-        d && (l ?? i),
-        v && /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: s ?? i }),
-        c && /* @__PURE__ */ e(
+        l && (d ?? i),
+        g && /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: o ?? i }),
+        p && /* @__PURE__ */ e(
           ae,
           {
             size: 16,
@@ -552,73 +568,83 @@ const he = n.forwardRef(({ className: t, variant: r, shortcut: s, tag: l, childr
   );
 });
 he.displayName = "SidebarSecondaryMenuItemExtras";
-const ge = n.forwardRef(
+const ge = t.forwardRef(
   ({
-    className: t,
-    icon: r,
-    expandIcon: s,
-    expandTooltip: l = "Expand",
-    extras: i,
-    children: a,
-    onClick: o,
-    ...u
-  }, d) => {
-    const { expanded: c, toggleExpanded: v } = I(), m = J(), S = n.useRef(null), E = K(S, { enabled: c }), L = c ? r : s ?? r, g = /* @__PURE__ */ f(
+    className: n,
+    icon: a,
+    expandTooltip: o = "Expand",
+    extras: d,
+    children: i,
+    onClick: r,
+    ...s
+  }, c) => {
+    const { expanded: l, toggleExpanded: p } = P(), g = B(), u = t.useRef(null), x = t.useRef(null), h = F(x, { enabled: l }), T = /* @__PURE__ */ v(
       "button",
       {
-        ref: d,
+        ref: (m) => {
+          u.current = m, typeof c == "function" ? c(m) : c && (c.current = m);
+        },
         type: "button",
-        "aria-expanded": c,
-        className: b(
+        "aria-expanded": l,
+        className: f(
           re({ variant: "unselected" }),
           "text-start",
-          t
+          n
         ),
-        onClick: (k) => {
-          o == null || o(k), k.defaultPrevented || v();
+        onClick: (m) => {
+          r == null || r(m), m.defaultPrevented || p();
         },
-        ...u,
+        ...s,
         children: [
-          L != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] rtl:-scale-x-100", children: L }),
-          /* @__PURE__ */ f(P, { disabled: !E, children: [
+          a != null && /* @__PURE__ */ e(
+            "span",
+            {
+              className: f(
+                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
+                l ? "rtl:rotate-180" : "ltr:rotate-180"
+              ),
+              children: a
+            }
+          ),
+          /* @__PURE__ */ v(I, { disabled: !h, children: [
             /* @__PURE__ */ e(
-              A,
+              O,
               {
                 render: /* @__PURE__ */ e(
                   "span",
                   {
-                    ref: S,
-                    className: b("flex-1 min-w-[60px] truncate", !c && "sr-only")
+                    ref: x,
+                    className: f("flex-1 min-w-[60px] truncate", !l && "sr-only")
                   }
                 ),
-                children: a
+                children: i
               }
             ),
-            /* @__PURE__ */ e(M, { children: a })
+            /* @__PURE__ */ e(A, { anchor: u, side: g === "rtl" ? "left" : "right", children: i })
           ] }),
-          i
+          d
         ]
       }
     );
-    return /* @__PURE__ */ e("li", { className: "contents", children: c ? g : /* @__PURE__ */ f(P, { children: [
-      /* @__PURE__ */ e(A, { render: g }),
-      /* @__PURE__ */ e(M, { side: m === "rtl" ? "left" : "right", children: l })
+    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
+      /* @__PURE__ */ e(O, { render: T }),
+      /* @__PURE__ */ e(A, { side: g === "rtl" ? "left" : "right", children: o })
     ] }) });
   }
 );
 ge.displayName = "SidebarSecondaryCollapseTrigger";
 export {
-  se as SidebarSecondary,
+  oe as SidebarSecondary,
   ge as SidebarSecondaryCollapseTrigger,
   ee as SidebarSecondaryCollapsedBreadcrumb,
   le as SidebarSecondaryContent,
   de as SidebarSecondaryFooter,
-  oe as SidebarSecondaryHeader,
-  me as SidebarSecondaryMenu,
+  se as SidebarSecondaryHeader,
+  pe as SidebarSecondaryMenu,
   ve as SidebarSecondaryMenuItem,
   he as SidebarSecondaryMenuItemExtras,
   be as SidebarSecondarySection,
-  pe as SidebarSecondarySectionLabel,
+  fe as SidebarSecondarySectionLabel,
   re as sidebarSecondaryMenuItemVariants
 };
 //# sourceMappingURL=sidebar-secondary.js.map