@acronis-platform/ui-react 0.54.0 → 0.55.0

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

@@ -1,255 +1,467 @@
-import { jsx as e, jsxs as m, Fragment as k } from "react/jsx-runtime";
-import * as o from "react";
-import { mergeProps as S } from "@base-ui/react/merge-props";
-import { useRender as N } from "@base-ui/react/use-render";
-import { Collapsible as x } from "@base-ui/react/collapsible";
-import { ChevronRightIcon as T, SquareArrowUpRightIcon as I, ChevronDownIcon as R } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as t } from "../../../lib/utils.js";
-import { ScrollArea as z } from "../scroll-area/scroll-area.js";
-const M = o.createContext(null);
-function g() {
-  return o.useContext(M) ?? {
+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 { Collapsible as X } from "@base-ui/react/collapsible";
+import { SquareArrowUpRightIcon as ae, ChevronDownIcon as G } 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);
+      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 = 256, Q = R * 2, Y = /* @__PURE__ */ f(_, { children: [
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
+  " Drag",
+  /* @__PURE__ */ e("br", {}),
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Collapse:" }),
+  " Click",
+  /* @__PURE__ */ e("br", {}),
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Reset size:" }),
+  " Double click"
+] }), Z = /* @__PURE__ */ f(_, { 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($) ?? {
     expanded: !0,
     toggleExpanded: () => {
-    }
+    },
+    resizable: !1,
+    width: R,
+    setWidth: () => {
+    },
+    minWidth: R,
+    maxWidth: Q,
+    defaultWidth: R,
+    headerLabel: void 0,
+    setHeaderLabel: () => {
+    },
+    selectedLabel: void 0,
+    setSelectedLabel: () => {
+    },
+    resizeAriaLabel: "Resize sidebar",
+    resizeTooltipExpanded: Y,
+    resizeTooltipCollapsed: Z
   };
 }
-function P(n, a, r) {
-  const [s, i] = o.useState(a), d = n !== void 0, c = d ? n : s, l = o.useCallback(
-    (u) => {
-      d || i(u), r == null || r(u);
+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);
     },
-    [d, r]
+    [a, s]
+  );
+  return [o, u];
+}
+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(
+    null
   );
-  return [c, l];
+  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);
+      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);
+    };
+    window.addEventListener("pointermove", z), window.addEventListener("pointerup", W);
+  }, E = () => {
+    o.current || (m.current && clearTimeout(m.current), m.current = setTimeout(() => {
+      s();
+    }, 250));
+  }, L = () => {
+    m.current && (clearTimeout(m.current), m.current = null), r || s(), a.current.setWidth(a.current.defaultWidth);
+  }, g = (p) => {
+    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));
+  };
+  return /* @__PURE__ */ f(P, { open: u, onOpenChange: (p) => {
+    c || d(p);
+  }, children: [
+    /* @__PURE__ */ e(
+      A,
+      {
+        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"
+            ),
+            tabIndex: 0,
+            onKeyDown: g,
+            onPointerDown: S,
+            onClick: E,
+            onDoubleClick: L
+          }
+        )
+      }
+    ),
+    (r ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed) != null && /* @__PURE__ */ e(M, { side: i === "rtl" ? "left" : "right", align: "center", children: r ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed })
+  ] });
 }
-const L = o.forwardRef(
+const se = n.forwardRef(
   ({
-    className: n,
-    expanded: a,
-    defaultExpanded: r = !0,
-    onExpandedChange: s,
-    "aria-label": i = "Section navigation",
-    render: d,
-    children: c,
-    ...l
-  }, u) => {
-    const [b, p] = P(
-      a,
+    className: t,
+    expanded: r,
+    defaultExpanded: s = !0,
+    onExpandedChange: l,
+    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
-    ), h = o.useMemo(
-      () => ({ expanded: b, toggleExpanded: () => p(!b) }),
-      [b, p]
-    ), y = N({
-      render: d,
-      ref: u,
+      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);
+      },
+      [h, o]
+    ), [x, T] = n.useState(void 0), [y, z] = n.useState(void 0), W = n.useMemo(
+      () => ({
+        expanded: g,
+        toggleExpanded: () => k(!g),
+        resizable: i,
+        width: w,
+        setWidth: N,
+        minWidth: R,
+        maxWidth: Q,
+        defaultWidth: R,
+        headerLabel: x,
+        setHeaderLabel: T,
+        selectedLabel: y,
+        setSelectedLabel: z,
+        resizeAriaLabel: u,
+        resizeTooltipExpanded: d,
+        resizeTooltipCollapsed: c
+      }),
+      [
+        g,
+        k,
+        i,
+        w,
+        N,
+        x,
+        y,
+        u,
+        d,
+        c
+      ]
+    ), B = q({
+      render: m,
+      ref: L,
       defaultTagName: "nav",
-      props: S(
+      props: j(
         {
-          "aria-label": i,
-          "data-state": b ? "expanded" : "collapsed",
-          className: t(
-            "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-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]",
-            n
+          "aria-label": v,
+          "data-state": g ? "expanded" : "collapsed",
+          style: i && g && (h || w !== R) ? { width: w } : void 0,
+          className: b(
+            "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
           ),
-          children: c
+          children: /* @__PURE__ */ f(_, { children: [
+            /* @__PURE__ */ e(ee, {}),
+            S,
+            /* @__PURE__ */ e(ie, {})
+          ] })
         },
-        l
+        E
       )
     });
-    return /* @__PURE__ */ e(M.Provider, { value: h, children: y });
+    return /* @__PURE__ */ e($.Provider, { value: W, children: B });
   }
 );
-L.displayName = "SidebarSecondary";
-const A = o.forwardRef(({ className: n, label: a, children: r, ...s }, i) => (
-  // Hidden in collapsed mode — the CollapsedBreadcrumb's parent label carries the
-  // section context in the rail, so a truncated single-letter heading is omitted.
-  /* @__PURE__ */ e(
+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(
     "div",
     {
       ref: i,
-      className: t(
-        "flex items-center shrink-0",
-        "hidden group-data-[state=expanded]/sidebar:flex",
-        "px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]",
-        "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]",
-        n
+      className: b(
+        "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
       ),
-      ...s,
-      children: /* @__PURE__ */ e("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: a ?? r })
+      ...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 })
     }
-  )
-));
-A.displayName = "SidebarSecondaryHeader";
-const _ = o.forwardRef(({ className: n, children: a, ...r }, s) => (
-  // Expanded: the section list, scrolling inside a ScrollArea whose overlay
-  // scrollbar floats over the content and reserves no gutter (full-bleed rows
-  // are never cropped). Hidden in collapsed mode, where the CollapsedBreadcrumb
-  // sibling takes over.
+  );
+});
+oe.displayName = "SidebarSecondaryHeader";
+const le = n.forwardRef(({ className: t, ...r }, s) => (
+  // Expanded: the section list. Hidden in collapsed mode, where the
+  // CollapsedBreadcrumb sibling takes over.
   /* @__PURE__ */ e(
-    z,
+    "div",
     {
       ref: s,
-      className: t(
-        "min-h-0 flex-1",
-        "hidden group-data-[state=expanded]/sidebar:block",
-        n
+      className: b(
+        "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
       ),
-      ...r,
-      children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-global-section-list-gap)]", children: a })
+      ...r
     }
   )
 ));
-_.displayName = "SidebarSecondaryContent";
-const B = o.forwardRef(({ className: n, parentLabel: a, currentLabel: r, separator: s, ...i }, d) => (
-  // Shown only in collapsed mode — toggled by the same data-[state] selector so
-  // it stays in the DOM (SSR-present) with no JS branch. Stacked top→bottom:
-  // parent → separator → current page. In the ~48px rail the labels are rotated
-  // to read vertically (`writing-mode: vertical-rl`, glyphs tilted 90° clockwise,
-  // reading top-to-bottom) so long labels run down the rail instead of clipping;
-  // the separator chevron is turned to point down to match that flow.
-  /* @__PURE__ */ m(
-    "div",
-    {
-      ref: d,
-      className: t(
-        // `flex-1` so the rail fills the space between the (hidden) header and the
-        // footer, keeping the collapse trigger pinned to the bottom; the breadcrumb
-        // content stays at the top of that space.
-        "flex flex-1 flex-col items-center",
-        "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",
-        n
-      ),
-      ...i,
-      children: [
-        /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: a }),
-        /* @__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: s ?? /* @__PURE__ */ e(T, { size: 16, className: "rotate-90" })
-          }
+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;
+  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(
+      "div",
+      {
+        ref: a,
+        className: b(
+          "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
         ),
-        /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style whitespace-nowrap [writing-mode:vertical-rl] text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
-      ]
-    }
-  )
-));
-B.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-const V = o.forwardRef(({ className: n, ...a }, r) => /* @__PURE__ */ e(
+        ...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",
+            {
+              "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 })
+            }
+          ),
+          /* @__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 })
+        ]
+      }
+    )
+  );
+});
+ee.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+const de = n.forwardRef(({ className: t, ...r }, s) => /* @__PURE__ */ e(
   "div",
   {
-    ref: r,
-    className: t(
+    ref: s,
+    className: b(
       "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)]",
-      n
+      t
     ),
-    ...a
+    ...r
   }
 ));
-V.displayName = "SidebarSecondaryFooter";
-const f = o.createContext({ expandable: !1 }), F = { expandable: !1 }, H = { expandable: !0 }, j = o.forwardRef(
-  ({ className: n, expandable: a = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: d, ...c }, l) => {
-    const u = t(
+de.displayName = "SidebarSecondaryFooter";
+const H = n.createContext({
+  expandable: !1
+}), ce = {
+  expandable: !1
+}, ue = {
+  expandable: !0
+}, be = n.forwardRef(
+  ({
+    className: t,
+    expandable: r = !1,
+    open: s,
+    defaultOpen: l = !0,
+    onOpenChange: i,
+    children: a,
+    ...o
+  }, u) => {
+    const d = b(
       "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
-      n
+      t
     );
-    return a ? /* @__PURE__ */ e(f.Provider, { value: H, children: /* @__PURE__ */ e(
-      x.Root,
+    return r ? /* @__PURE__ */ e(H.Provider, { value: ue, children: /* @__PURE__ */ e(
+      X.Root,
       {
-        ref: l,
-        open: r,
-        defaultOpen: s,
+        ref: u,
+        open: s,
+        defaultOpen: l,
         onOpenChange: i,
-        render: /* @__PURE__ */ e("div", { className: u }),
-        ...c,
-        children: d
+        render: /* @__PURE__ */ e("div", { className: d }),
+        ...o,
+        children: a
       }
-    ) }) : /* @__PURE__ */ e(f.Provider, { value: F, children: /* @__PURE__ */ e("div", { ref: l, className: u, ...c, children: d }) });
+    ) }) : /* @__PURE__ */ e(H.Provider, { value: ce, children: /* @__PURE__ */ e("div", { ref: u, className: d, ...o, children: a }) });
   }
 );
-j.displayName = "SidebarSecondarySection";
-const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "flex min-h-9 items-center px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", D = o.forwardRef(({ className: n, actions: a, unreadRollup: r, children: s, ...i }, d) => {
-  const { expandable: c } = o.useContext(f);
-  if (!c) {
-    const l = t(w, C, n);
-    return a == null ? /* @__PURE__ */ e("div", { ref: d, className: l, ...i, children: s }) : /* @__PURE__ */ m(
+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: [
+    /* @__PURE__ */ e(
+      A,
+      {
+        render: /* @__PURE__ */ e(
+          "span",
+          {
+            ref: u,
+            className: "min-w-0 flex-1 truncate"
+          }
+        ),
+        children: l
+      }
+    ),
+    /* @__PURE__ */ e(M, { children: l })
+  ] });
+  if (!o) {
+    const v = b(U, V, t);
+    return r == null ? /* @__PURE__ */ e(
       "div",
       {
-        ref: d,
-        className: t(
-          l,
+        ref: a,
+        className: b(
+          v,
+          "flex items-center"
+        ),
+        ...i,
+        children: c
+      }
+    ) : /* @__PURE__ */ f(
+      "div",
+      {
+        ref: a,
+        className: b(
+          v,
           "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
         ),
         ...i,
         children: [
-          /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: s }),
-          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
+          c,
+          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: r })
         ]
       }
     );
   }
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ f(
     "div",
     {
-      ref: d,
-      className: t(
+      ref: a,
+      className: b(
         "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
-        C,
-        n
+        V,
+        t
       ),
       ...i,
       children: [
-        /* @__PURE__ */ m(
-          x.Trigger,
+        /* @__PURE__ */ f(
+          X.Trigger,
           {
-            className: t(
-              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-left",
-              w,
+            className: b(
+              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start",
+              U,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
             ),
             children: [
               /* @__PURE__ */ e(
-                R,
+                G,
                 {
                   size: 16,
                   "aria-hidden": "true",
-                  className: "shrink-0 -rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]"
+                  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)]"
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: s }),
-              r != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: r })
+              c,
+              s != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: s })
             ]
           }
         ),
-        a != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
+        r != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: r })
       ]
     }
   );
 });
-D.displayName = "SidebarSecondarySectionLabel";
-const O = o.forwardRef(({ className: n, ...a }, r) => {
-  const { expandable: s } = o.useContext(f), i = /* @__PURE__ */ e(
+pe.displayName = "SidebarSecondarySectionLabel";
+const me = n.forwardRef(({ className: t, ...r }, s) => {
+  const { expandable: l } = n.useContext(H), i = /* @__PURE__ */ e(
     "ul",
     {
-      ref: r,
-      className: t(
+      ref: s,
+      className: b(
         "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
-        n
+        t
       ),
-      ...a
+      ...r
     }
   );
-  return s ? /* @__PURE__ */ e(x.Panel, { children: i }) : i;
+  return l ? /* @__PURE__ */ e(X.Panel, { children: i }) : i;
 });
-O.displayName = "SidebarSecondaryMenu";
-const U = "group/row flex w-full items-center 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)]", v = E(U, {
+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, {
   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)]",
@@ -259,139 +471,77 @@ const U = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
   defaultVariants: {
     variant: "unselected"
   }
-}), q = o.forwardRef(({ className: n, selected: a = !1, icon: r, render: s, children: i, ...d }, c) => {
-  const { expanded: l } = g(), u = o.Children.toArray(i), b = u.filter(
-    (y) => o.isValidElement(y) && y.type.displayName === "SidebarSecondaryMenuItemExtras"
-  ), p = u.filter(
-    (y) => !b.includes(y)
-  ), h = N({
-    render: s,
-    ref: c,
-    defaultTagName: "a",
-    props: S(
-      {
-        className: t(
-          v({
-            variant: a ? "selected" : "unselected"
-          }),
-          n
-        ),
-        "aria-current": a ? "page" : void 0,
-        children: /* @__PURE__ */ m(k, { children: [
-          r != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: t(
-                "min-w-0 flex-1 truncate text-left",
-                !l && "sr-only"
-              ),
-              children: p
-            }
+}), 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({
+      render: i,
+      ref: u,
+      defaultTagName: "a",
+      props: j(
+        {
+          className: b(
+            re({
+              variant: r ? "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
           ),
-          b.length > 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: b })
-        ] })
-      },
-      d
-    )
-  });
-  return /* @__PURE__ */ e("li", { className: "contents", children: h });
-});
-q.displayName = "SidebarSecondaryMenuItem";
-const X = o.forwardRef(({ className: n, render: a, ...r }, s) => (
-  // Disclosure row: Base UI Collapsible gives per-row open state +
-  // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.
-  /* @__PURE__ */ e(
-    x.Root,
-    {
-      ref: s,
-      render: a ?? /* @__PURE__ */ e("li", {}),
-      className: t("contents", n),
-      ...r
-    }
-  )
-));
-X.displayName = "SidebarSecondaryMenuSub";
-const G = o.forwardRef(({ className: n, selected: a = !1, icon: r, children: s, ...i }, d) => {
-  const { expanded: c } = g();
-  return /* @__PURE__ */ m(
-    x.Trigger,
-    {
-      ref: d,
-      "aria-current": a ? "page" : void 0,
-      className: t(
-        v({
-          variant: a ? "selected" : "unselected"
-        }),
-        "text-left",
-        n
-      ),
-      ...i,
-      children: [
-        r != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
-        /* @__PURE__ */ e("span", { className: t("flex-1 truncate", !c && "sr-only"), children: s }),
-        /* @__PURE__ */ e(
-          R,
-          {
-            size: 16,
-            "aria-hidden": "true",
-            className: t(
-              "shrink-0 transition-transform group-data-[panel-open]/row:rotate-180",
-              !c && "hidden"
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-G.displayName = "SidebarSecondaryMenuSubTrigger";
-const J = o.forwardRef(({ className: n, children: a, ...r }, s) => /* @__PURE__ */ e(x.Panel, { ref: s, className: t(n), ...r, children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: a }) }));
-J.displayName = "SidebarSecondaryMenuSubContent";
-const K = o.forwardRef(({ className: n, selected: a = !1, render: r, children: s, ...i }, d) => {
-  const { expanded: c } = g(), l = N({
-    render: r,
-    ref: d,
-    defaultTagName: "a",
-    props: S(
-      {
-        className: t(
-          v({
-            variant: a ? "selected" : "unselected"
-          }),
-          // Level-2 left indent (no icon column). The dedicated level-2 padding
-          // token was removed in the next-gen sync; reconstruct the indent from
-          // surviving tokens so the label aligns under level-1 labels (row
-          // padding + icon column + gap).
-          "pl-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-menu-item-global-icon-size)+var(--ui-sidebar-secondary-menu-item-global-container-gap))]",
-          n
-        ),
-        "aria-current": a ? "page" : void 0,
-        children: /* @__PURE__ */ e("span", { className: t("flex-1 truncate text-left", !c && "sr-only"), children: s })
-      },
-      i
-    )
-  });
-  return /* @__PURE__ */ e("li", { className: "contents", children: l });
-});
-K.displayName = "SidebarSecondaryMenuSubItem";
-const Q = o.forwardRef(({ className: n, variant: a, shortcut: r, tag: s, children: i, ...d }, c) => {
-  const { expanded: l } = g(), u = a === "tag" || a === "tag-externalLink", b = a === "externalLink" || a === "tag-externalLink", p = a === "shortcut";
-  return /* @__PURE__ */ m(
+          "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: [
+              /* @__PURE__ */ e(
+                A,
+                {
+                  render: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      ref: m,
+                      className: b(
+                        "flex-1 min-w-[60px] truncate text-start",
+                        !d && "sr-only"
+                      )
+                    }
+                  ),
+                  children: a
+                }
+              ),
+              /* @__PURE__ */ e(M, { children: a })
+            ] }),
+            l
+          ] })
+        },
+        o
+      )
+    });
+    return /* @__PURE__ */ e("li", { className: "contents", children: E });
+  }
+);
+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(
     "span",
     {
-      ref: c,
-      className: t(
-        "inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
-        !l && "hidden",
-        n
+      ref: o,
+      className: b(
+        "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
       ),
-      ...d,
+      ...a,
       children: [
-        u && (s ?? i),
-        p && /* @__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: r ?? i }),
-        b && /* @__PURE__ */ e(
-          I,
+        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(
+          ae,
           {
             size: 16,
             className: "text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]"
@@ -401,70 +551,74 @@ const Q = o.forwardRef(({ className: n, variant: a, shortcut: r, tag: s, childre
     }
   );
 });
-Q.displayName = "SidebarSecondaryMenuItemExtras";
-const W = o.forwardRef(({ className: n, icon: a, shortcut: r, children: s, onClick: i, ...d }, c) => {
-  const { expanded: l, toggleExpanded: u } = g();
-  return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ m(
-    "button",
-    {
-      ref: c,
-      type: "button",
-      "aria-expanded": l,
-      className: t(
-        v({ variant: "unselected" }),
-        "text-left",
-        n
-      ),
-      onClick: (b) => {
-        i == null || i(b), b.defaultPrevented || u();
-      },
-      ...d,
-      children: [
-        a != null && // Flip the chevron when collapsed so a chevron-left ("collapse")
-        // becomes a chevron-right ("expand") — the icon always points toward
-        // the action it triggers.
-        /* @__PURE__ */ e(
-          "span",
-          {
-            className: t(
-              "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
-              !l && "rotate-180"
-            ),
-            children: a
-          }
+he.displayName = "SidebarSecondaryMenuItemExtras";
+const ge = n.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(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        "aria-expanded": c,
+        className: b(
+          re({ variant: "unselected" }),
+          "text-start",
+          t
         ),
-        /* @__PURE__ */ e("span", { className: t("flex-1 truncate", !l && "sr-only"), children: s }),
-        r != null && /* @__PURE__ */ e(
-          "span",
-          {
-            className: t(
-              "shrink-0 ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]",
-              !l && "sr-only"
+        onClick: (k) => {
+          o == null || o(k), k.defaultPrevented || v();
+        },
+        ...u,
+        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: [
+            /* @__PURE__ */ e(
+              A,
+              {
+                render: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    ref: S,
+                    className: b("flex-1 min-w-[60px] truncate", !c && "sr-only")
+                  }
+                ),
+                children: a
+              }
             ),
-            children: r
-          }
-        )
-      ]
-    }
-  ) });
-});
-W.displayName = "SidebarSecondaryCollapseTrigger";
+            /* @__PURE__ */ e(M, { children: a })
+          ] }),
+          i
+        ]
+      }
+    );
+    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 })
+    ] }) });
+  }
+);
+ge.displayName = "SidebarSecondaryCollapseTrigger";
 export {
-  L as SidebarSecondary,
-  W as SidebarSecondaryCollapseTrigger,
-  B as SidebarSecondaryCollapsedBreadcrumb,
-  _ as SidebarSecondaryContent,
-  V as SidebarSecondaryFooter,
-  A as SidebarSecondaryHeader,
-  O as SidebarSecondaryMenu,
-  q as SidebarSecondaryMenuItem,
-  Q as SidebarSecondaryMenuItemExtras,
-  X as SidebarSecondaryMenuSub,
-  J as SidebarSecondaryMenuSubContent,
-  K as SidebarSecondaryMenuSubItem,
-  G as SidebarSecondaryMenuSubTrigger,
-  j as SidebarSecondarySection,
-  D as SidebarSecondarySectionLabel,
-  v as sidebarSecondaryMenuItemVariants
+  se as SidebarSecondary,
+  ge as SidebarSecondaryCollapseTrigger,
+  ee as SidebarSecondaryCollapsedBreadcrumb,
+  le as SidebarSecondaryContent,
+  de as SidebarSecondaryFooter,
+  oe as SidebarSecondaryHeader,
+  me as SidebarSecondaryMenu,
+  ve as SidebarSecondaryMenuItem,
+  he as SidebarSecondaryMenuItemExtras,
+  be as SidebarSecondarySection,
+  pe as SidebarSecondarySectionLabel,
+  re as sidebarSecondaryMenuItemVariants
 };
 //# sourceMappingURL=sidebar-secondary.js.map