@acronis-platform/ui-react 0.31.0 → 0.34.0

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

@@ -1,55 +1,55 @@
-import { jsx as a, jsxs as b, Fragment as T } from "react/jsx-runtime";
-import * as d from "react";
-import { mergeProps as v } from "@base-ui/react/merge-props";
-import { useRender as S } from "@base-ui/react/use-render";
-import { Collapsible as p } from "@base-ui/react/collapsible";
-import { ChevronRightIcon as k, ChevronDownIcon as w, SquareArrowUpRightIcon as I } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as z } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as o } from "../../../lib/utils.js";
-const C = d.createContext(null);
-function y() {
-  return d.useContext(C) ?? {
+import { jsx as a, jsxs as m, Fragment as T } from "react/jsx-runtime";
+import * as o from "react";
+import { mergeProps as h } 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 k, ChevronDownIcon as R, SquareArrowUpRightIcon as I } 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";
+const M = o.createContext(null);
+function g() {
+  return o.useContext(M) ?? {
     expanded: !0,
     toggleExpanded: () => {
     }
   };
 }
-function E(n, e, r) {
-  const [s, i] = d.useState(e), t = n !== void 0, c = t ? n : s, l = d.useCallback(
+function z(n, e, r) {
+  const [s, i] = o.useState(e), d = n !== void 0, c = d ? n : s, l = o.useCallback(
     (u) => {
-      t || i(u), r == null || r(u);
+      d || i(u), r == null || r(u);
     },
-    [t, r]
+    [d, r]
   );
   return [c, l];
 }
-const P = d.forwardRef(
+const P = o.forwardRef(
   ({
     className: n,
     expanded: e,
     defaultExpanded: r = !0,
     onExpandedChange: s,
     "aria-label": i = "Section navigation",
-    render: t,
+    render: d,
     children: c,
     ...l
   }, u) => {
-    const [m, g] = E(
+    const [b, p] = z(
       e,
       r,
       s
-    ), R = d.useMemo(
-      () => ({ expanded: m, toggleExpanded: () => g(!m) }),
-      [m, g]
-    ), M = S({
-      render: t,
+    ), S = o.useMemo(
+      () => ({ expanded: b, toggleExpanded: () => p(!b) }),
+      [b, p]
+    ), y = N({
+      render: d,
       ref: u,
       defaultTagName: "nav",
-      props: v(
+      props: h(
         {
           "aria-label": i,
-          "data-state": m ? "expanded" : "collapsed",
-          className: o(
+          "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
           ),
@@ -58,33 +58,38 @@ const P = d.forwardRef(
         l
       )
     });
-    return /* @__PURE__ */ a(C.Provider, { value: R, children: M });
+    return /* @__PURE__ */ a(M.Provider, { value: S, children: y });
   }
 );
 P.displayName = "SidebarSecondary";
-const L = d.forwardRef(({ className: n, label: e, children: r, ...s }, i) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: i,
-    className: o(
-      "flex items-center shrink-0",
-      "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
-    ),
-    ...s,
-    children: /* @__PURE__ */ a("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? r })
-  }
+const L = o.forwardRef(({ className: n, label: e, 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__ */ a(
+    "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
+      ),
+      ...s,
+      children: /* @__PURE__ */ a("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? r })
+    }
+  )
 ));
 L.displayName = "SidebarSecondaryHeader";
-const _ = d.forwardRef(({ className: n, ...e }, r) => (
+const A = o.forwardRef(({ className: n, ...e }, r) => (
   // Expanded: the section list. Hidden in collapsed mode, where the
   // CollapsedBreadcrumb sibling takes over.
   /* @__PURE__ */ a(
     "div",
     {
       ref: r,
-      className: o(
+      className: t(
         "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
         "hidden group-data-[state=expanded]/sidebar:flex",
         n
@@ -93,43 +98,49 @@ const _ = d.forwardRef(({ className: n, ...e }, r) => (
     }
   )
 ));
-_.displayName = "SidebarSecondaryContent";
-const A = d.forwardRef(({ className: n, parentLabel: e, currentLabel: r, separator: s, ...i }, t) => (
+A.displayName = "SidebarSecondaryContent";
+const _ = o.forwardRef(({ className: n, parentLabel: e, 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. Laid out vertically:
-  // parent → separator → current page.
-  /* @__PURE__ */ b(
+  // 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: t,
-      className: o(
-        "flex flex-col items-center shrink-0",
+      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__ */ a("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
+        /* @__PURE__ */ a("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: e }),
         /* @__PURE__ */ a(
           "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__ */ a(k, { size: 16 })
+            children: s ?? /* @__PURE__ */ a(k, { size: 16, className: "rotate-90" })
           }
         ),
-        /* @__PURE__ */ a("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: r })
+        /* @__PURE__ */ a("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 })
       ]
     }
   )
 ));
-A.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-const B = d.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
+_.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+const B = o.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: o(
+    className: t(
       "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)]",
@@ -139,14 +150,14 @@ const B = d.forwardRef(({ className: n, ...e }, r) => /* @__PURE__ */ a(
   }
 ));
 B.displayName = "SidebarSecondaryFooter";
-const x = d.createContext({ expandable: !1 }), F = { expandable: !1 }, H = { expandable: !0 }, V = d.forwardRef(
-  ({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: t, ...c }, l) => {
-    const u = o(
+const f = o.createContext({ expandable: !1 }), V = { expandable: !1 }, F = { expandable: !0 }, H = o.forwardRef(
+  ({ className: n, expandable: e = !1, open: r, defaultOpen: s = !0, onOpenChange: i, children: d, ...c }, l) => {
+    const u = t(
       "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
       n
     );
-    return e ? /* @__PURE__ */ a(x.Provider, { value: H, children: /* @__PURE__ */ a(
-      p.Root,
+    return e ? /* @__PURE__ */ a(f.Provider, { value: F, children: /* @__PURE__ */ a(
+      x.Root,
       {
         ref: l,
         open: r,
@@ -154,21 +165,21 @@ const x = d.createContext({ expandable: !1 }), F = { expandable: !1 }, H = { exp
         onOpenChange: i,
         render: /* @__PURE__ */ a("div", { className: u }),
         ...c,
-        children: t
+        children: d
       }
-    ) }) : /* @__PURE__ */ a(x.Provider, { value: F, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children: t }) });
+    ) }) : /* @__PURE__ */ a(f.Provider, { value: V, children: /* @__PURE__ */ a("div", { ref: l, className: u, ...c, children: d }) });
   }
 );
-V.displayName = "SidebarSecondarySection";
-const h = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", N = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j = d.forwardRef(({ className: n, actions: e, unreadRollup: r, children: s, ...i }, t) => {
-  const { expandable: c } = d.useContext(x);
+H.displayName = "SidebarSecondarySection";
+const w = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", C = "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", j = o.forwardRef(({ className: n, actions: e, unreadRollup: r, children: s, ...i }, d) => {
+  const { expandable: c } = o.useContext(f);
   if (!c) {
-    const l = o(h, N, n);
-    return e == null ? /* @__PURE__ */ a("div", { ref: t, className: l, ...i, children: s }) : /* @__PURE__ */ b(
+    const l = t(w, C, n);
+    return e == null ? /* @__PURE__ */ a("div", { ref: d, className: l, ...i, children: s }) : /* @__PURE__ */ m(
       "div",
       {
-        ref: t,
-        className: o(
+        ref: d,
+        className: t(
           l,
           "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
         ),
@@ -180,28 +191,28 @@ const h = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
       }
     );
   }
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ m(
     "div",
     {
-      ref: t,
-      className: o(
+      ref: d,
+      className: t(
         "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
-        N,
+        C,
         n
       ),
       ...i,
       children: [
-        /* @__PURE__ */ b(
-          p.Trigger,
+        /* @__PURE__ */ m(
+          x.Trigger,
           {
-            className: o(
+            className: t(
               "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-left",
-              h,
+              w,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
             ),
             children: [
               /* @__PURE__ */ a(
-                w,
+                R,
                 {
                   size: 16,
                   "aria-hidden": "true",
@@ -219,22 +230,22 @@ const h = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-
   );
 });
 j.displayName = "SidebarSecondarySectionLabel";
-const D = d.forwardRef(({ className: n, ...e }, r) => {
-  const { expandable: s } = d.useContext(x), i = /* @__PURE__ */ a(
+const D = o.forwardRef(({ className: n, ...e }, r) => {
+  const { expandable: s } = o.useContext(f), i = /* @__PURE__ */ a(
     "ul",
     {
       ref: r,
-      className: o(
+      className: t(
         "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
         n
       ),
       ...e
     }
   );
-  return s ? /* @__PURE__ */ a(p.Panel, { children: i }) : i;
+  return s ? /* @__PURE__ */ a(x.Panel, { children: i }) : i;
 });
 D.displayName = "SidebarSecondaryMenu";
-const O = "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)]", f = z(O, {
+const O = "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(O, {
   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)]",
@@ -244,60 +255,68 @@ const O = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-me
   defaultVariants: {
     variant: "unselected"
   }
-}), U = d.forwardRef(({ className: n, selected: e = !1, icon: r, render: s, children: i, ...t }, c) => {
-  const { expanded: l } = y(), u = S({
+}), U = o.forwardRef(({ className: n, selected: e = !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)
+  ), S = N({
     render: s,
     ref: c,
     defaultTagName: "a",
-    props: v(
+    props: h(
       {
-        className: o(
-          f({
+        className: t(
+          v({
             variant: e ? "selected" : "unselected"
           }),
           n
         ),
         "aria-current": e ? "page" : void 0,
-        children: /* @__PURE__ */ b(T, { children: [
+        children: /* @__PURE__ */ m(T, { children: [
           r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
           /* @__PURE__ */ a(
             "span",
             {
-              className: o("flex-1 truncate text-left", !l && "sr-only"),
-              children: i
+              className: t(
+                "min-w-0 flex-1 truncate text-left",
+                !l && "sr-only"
+              ),
+              children: p
             }
-          )
+          ),
+          b.length > 0 && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center", children: b })
         ] })
       },
-      t
+      d
     )
   });
-  return /* @__PURE__ */ a("li", { className: "contents", children: u });
+  return /* @__PURE__ */ a("li", { className: "contents", children: S });
 });
 U.displayName = "SidebarSecondaryMenuItem";
-const q = d.forwardRef(({ className: n, render: e, ...r }, s) => (
+const q = o.forwardRef(({ className: n, render: e, ...r }, s) => (
   // Disclosure row: Base UI Collapsible gives per-row open state +
   // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.
   /* @__PURE__ */ a(
-    p.Root,
+    x.Root,
     {
       ref: s,
       render: e ?? /* @__PURE__ */ a("li", {}),
-      className: o("contents", n),
+      className: t("contents", n),
       ...r
     }
   )
 ));
 q.displayName = "SidebarSecondaryMenuSub";
-const X = d.forwardRef(({ className: n, selected: e = !1, icon: r, children: s, ...i }, t) => {
-  const { expanded: c } = y();
-  return /* @__PURE__ */ b(
-    p.Trigger,
+const X = o.forwardRef(({ className: n, selected: e = !1, icon: r, children: s, ...i }, d) => {
+  const { expanded: c } = g();
+  return /* @__PURE__ */ m(
+    x.Trigger,
     {
-      ref: t,
+      ref: d,
       "aria-current": e ? "page" : void 0,
-      className: o(
-        f({
+      className: t(
+        v({
           variant: e ? "selected" : "unselected"
         }),
         "text-left",
@@ -306,13 +325,13 @@ const X = d.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
       ...i,
       children: [
         r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: r }),
-        /* @__PURE__ */ a("span", { className: o("flex-1 truncate", !c && "sr-only"), children: s }),
+        /* @__PURE__ */ a("span", { className: t("flex-1 truncate", !c && "sr-only"), children: s }),
         /* @__PURE__ */ a(
-          w,
+          R,
           {
             size: 16,
             "aria-hidden": "true",
-            className: o(
+            className: t(
               "shrink-0 transition-transform group-data-[panel-open]/row:rotate-180",
               !c && "hidden"
             )
@@ -323,17 +342,17 @@ const X = d.forwardRef(({ className: n, selected: e = !1, icon: r, children: s,
   );
 });
 X.displayName = "SidebarSecondaryMenuSubTrigger";
-const G = d.forwardRef(({ className: n, children: e, ...r }, s) => /* @__PURE__ */ a(p.Panel, { ref: s, className: o(n), ...r, children: /* @__PURE__ */ a("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
+const G = o.forwardRef(({ className: n, children: e, ...r }, s) => /* @__PURE__ */ a(x.Panel, { ref: s, className: t(n), ...r, children: /* @__PURE__ */ a("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
 G.displayName = "SidebarSecondaryMenuSubContent";
-const J = d.forwardRef(({ className: n, selected: e = !1, render: r, children: s, ...i }, t) => {
-  const { expanded: c } = y(), l = S({
+const J = o.forwardRef(({ className: n, selected: e = !1, render: r, children: s, ...i }, d) => {
+  const { expanded: c } = g(), l = N({
     render: r,
-    ref: t,
+    ref: d,
     defaultTagName: "a",
-    props: v(
+    props: h(
       {
-        className: o(
-          f({
+        className: t(
+          v({
             variant: e ? "selected" : "unselected"
           }),
           // Level-2 left indent (no icon column). The dedicated level-2 padding
@@ -344,7 +363,7 @@ const J = d.forwardRef(({ className: n, selected: e = !1, render: r, children: s
           n
         ),
         "aria-current": e ? "page" : void 0,
-        children: /* @__PURE__ */ a("span", { className: o("flex-1 truncate text-left", !c && "sr-only"), children: s })
+        children: /* @__PURE__ */ a("span", { className: t("flex-1 truncate text-left", !c && "sr-only"), children: s })
       },
       i
     )
@@ -352,22 +371,22 @@ const J = d.forwardRef(({ className: n, selected: e = !1, render: r, children: s
   return /* @__PURE__ */ a("li", { className: "contents", children: l });
 });
 J.displayName = "SidebarSecondaryMenuSubItem";
-const K = d.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, children: i, ...t }, c) => {
-  const { expanded: l } = y(), u = e === "tag" || e === "tag-externalLink", m = e === "externalLink" || e === "tag-externalLink", g = e === "shortcut";
-  return /* @__PURE__ */ b(
+const K = o.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, children: i, ...d }, c) => {
+  const { expanded: l } = g(), u = e === "tag" || e === "tag-externalLink", b = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
+  return /* @__PURE__ */ m(
     "span",
     {
       ref: c,
-      className: o(
+      className: t(
         "inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
         !l && "hidden",
         n
       ),
-      ...t,
+      ...d,
       children: [
         u && (s ?? i),
-        g && /* @__PURE__ */ a("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 }),
-        m && /* @__PURE__ */ a(
+        p && /* @__PURE__ */ a("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__ */ a(
           I,
           {
             size: 16,
@@ -379,26 +398,48 @@ const K = d.forwardRef(({ className: n, variant: e, shortcut: r, tag: s, childre
   );
 });
 K.displayName = "SidebarSecondaryMenuItemExtras";
-const Q = d.forwardRef(({ className: n, icon: e, children: r, onClick: s, ...i }, t) => {
-  const { expanded: c, toggleExpanded: l } = y();
-  return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ b(
+const Q = o.forwardRef(({ className: n, icon: e, shortcut: r, children: s, onClick: i, ...d }, c) => {
+  const { expanded: l, toggleExpanded: u } = g();
+  return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ m(
     "button",
     {
-      ref: t,
+      ref: c,
       type: "button",
-      "aria-expanded": c,
-      className: o(
-        f({ variant: "unselected" }),
+      "aria-expanded": l,
+      className: t(
+        v({ variant: "unselected" }),
         "text-left",
         n
       ),
-      onClick: (u) => {
-        s == null || s(u), u.defaultPrevented || l();
+      onClick: (b) => {
+        i == null || i(b), b.defaultPrevented || u();
       },
-      ...i,
+      ...d,
       children: [
-        e != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: e }),
-        /* @__PURE__ */ a("span", { className: o("flex-1 truncate", !c && "sr-only"), children: r })
+        e != 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__ */ a(
+          "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: e
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: t("flex-1 truncate", !l && "sr-only"), children: s }),
+        r != null && /* @__PURE__ */ a(
+          "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"
+            ),
+            children: r
+          }
+        )
       ]
     }
   ) });
@@ -407,8 +448,8 @@ Q.displayName = "SidebarSecondaryCollapseTrigger";
 export {
   P as SidebarSecondary,
   Q as SidebarSecondaryCollapseTrigger,
-  A as SidebarSecondaryCollapsedBreadcrumb,
-  _ as SidebarSecondaryContent,
+  _ as SidebarSecondaryCollapsedBreadcrumb,
+  A as SidebarSecondaryContent,
   B as SidebarSecondaryFooter,
   L as SidebarSecondaryHeader,
   D as SidebarSecondaryMenu,
@@ -418,8 +459,8 @@ export {
   G as SidebarSecondaryMenuSubContent,
   J as SidebarSecondaryMenuSubItem,
   X as SidebarSecondaryMenuSubTrigger,
-  V as SidebarSecondarySection,
+  H as SidebarSecondarySection,
   j as SidebarSecondarySectionLabel,
-  f as sidebarSecondaryMenuItemVariants
+  v as sidebarSecondaryMenuItemVariants
 };
 //# sourceMappingURL=sidebar-secondary.js.map