@cloudflare/kumo 1.19.0 → 2.0.0

package/dist/chunks/{sidebar-ltbfius1eolkl8tb.js → sidebar-kh37grvfxto14ek6.js}

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as s, jsxs as E, Fragment as ye } from "react/jsx-runtime";
-import ke, { forwardRef as u, useState as k, useCallback as D, useMemo as W, createContext as L, useContext as R, useRef as P, useEffect as Ne } from "react";
+import { jsx as s, jsxs as P, Fragment as ye } from "react/jsx-runtime";
+import ke, { forwardRef as u, useState as k, useCallback as D, useMemo as W, createContext as A, useContext as R, useRef as L, useEffect as Ne } from "react";
 import { CaretRightIcon as F, MagnifyingGlassIcon as Ce, SidebarSimpleIcon as Me } from "@phosphor-icons/react";
-import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
+import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as X } from "./link-provider-mn2voeohon7cj9o4.js";
-import { a as Ie, T as Re } from "./tooltip-hikjvdbg3xghnq1x.js";
-import { bq as U, br as V, ap as Te, au as ze, av as _e, aw as Be, bs as De } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
+import { a as Ie, T as Re } from "./tooltip-odudhkxe282wxinq.js";
+import { aO as U, aQ as V, aq as Te, av as ze, aw as _e, ax as Be, aP as De } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const $e = {
   variant: {
     sidebar: {
@@ -49,7 +49,7 @@ const $e = {
   variant: "sidebar",
   collapsible: "icon",
   side: "left"
-}, Ye = {
+}, Qe = {
   width: {
     expanded: "16rem",
     icon: "3rem"
@@ -57,39 +57,39 @@ const $e = {
   mobile: {
     breakpoint: 768
   }
-}, j = "16rem", Ae = "3rem", Ee = 768;
-function Le() {
+}, j = "16rem", Oe = "3rem", Pe = 768;
+function Ae() {
   const [t, a] = k(!1);
   return Ne(() => {
-    const e = window.matchMedia(`(max-width: ${Ee - 1}px)`), n = () => a(e.matches);
-    return e.addEventListener("change", n), a(e.matches), () => e.removeEventListener("change", n);
+    const e = window.matchMedia(`(max-width: ${Pe - 1}px)`), i = () => a(e.matches);
+    return e.addEventListener("change", i), a(e.matches), () => e.removeEventListener("change", i);
   }, []), t;
 }
-const K = L(null);
+const K = A(null);
 function T() {
   const t = R(K);
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Provider");
   return t;
 }
-const Oe = 256, Pe = 200, Ge = 480;
+const Ee = 256, Le = 200, Ge = 480;
 function q({
   defaultOpen: t = !0,
   open: a,
   onOpenChange: e,
-  variant: n = G.variant,
+  variant: i = G.variant,
   side: r = G.side,
   collapsible: o = G.collapsible,
   resizable: b = !1,
-  defaultWidth: m = Oe,
-  minWidth: d = Pe,
+  defaultWidth: m = Ee,
+  minWidth: d = Le,
   maxWidth: l = Ge,
   onWidthChange: c,
   children: x,
   className: g,
   style: h
 }) {
-  const p = Le(), [f, S] = k(!1), [N, z] = k(m), [w, C] = k(!1), _ = D(
+  const p = Ae(), [f, S] = k(!1), [N, z] = k(m), [w, C] = k(!1), _ = D(
     (v) => {
       const I = Math.min(l, Math.max(d, v));
       z(I), c?.(I);
@@ -103,16 +103,16 @@ function q({
     [e, M]
   ), H = D(() => {
     p ? S((v) => !v) : B((v) => !v);
-  }, [p, B]), O = M ? "expanded" : "collapsed", Se = b ? `${N}px` : j, we = W(
+  }, [p, B]), E = M ? "expanded" : "collapsed", Se = b ? `${N}px` : j, we = W(
     () => ({
-      state: O,
+      state: E,
       open: M,
       setOpen: B,
       openMobile: f,
       setOpenMobile: S,
       isMobile: p,
       toggleSidebar: H,
-      variant: n,
+      variant: i,
       side: r,
       collapsible: o,
       width: N,
@@ -124,14 +124,14 @@ function q({
       setWidth: _
     }),
     [
-      O,
+      E,
       M,
       B,
       f,
       S,
       p,
       H,
-      n,
+      i,
       r,
       o,
       N,
@@ -147,14 +147,14 @@ function q({
     "div",
     {
       "data-sidebar-wrapper": "",
-      "data-state": O,
+      "data-state": E,
       "data-side": r,
       style: {
         "--sidebar-width": Se,
-        "--sidebar-width-icon": Ae,
+        "--sidebar-width-icon": Oe,
         ...h
       },
-      className: i(
+      className: n(
         "group/sidebar-wrapper flex min-h-svh w-full",
         "has-data-[variant=inset]:bg-kumo-recessed",
         w && "select-none",
@@ -166,7 +166,7 @@ function q({
 }
 q.displayName = "Sidebar.Provider";
 const $ = u(
-  ({ className: t, children: a, ...e }, n) => {
+  ({ className: t, children: a, ...e }, i) => {
     const {
       state: r,
       isMobile: o,
@@ -183,7 +183,7 @@ const $ = u(
       return /* @__PURE__ */ s(
         "aside",
         {
-          ref: n,
+          ref: i,
           "data-state": "expanded",
           "data-side": d,
           "data-variant": l,
@@ -193,7 +193,7 @@ const $ = u(
             minWidth: "var(--sidebar-width)",
             maxWidth: "var(--sidebar-width)"
           },
-          className: i(
+          className: n(
             "relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-kumo-base text-kumo-default",
             l === "sidebar" && (d === "left" ? "border-r border-kumo-hairline" : "border-l border-kumo-hairline"),
             l === "floating" && "m-2 rounded-lg border border-kumo-hairline shadow-lg",
@@ -204,12 +204,12 @@ const $ = u(
         }
       );
     if (o)
-      return /* @__PURE__ */ s(Te, { open: b, onOpenChange: m, children: /* @__PURE__ */ E(ze, { children: [
+      return /* @__PURE__ */ s(Te, { open: b, onOpenChange: m, children: /* @__PURE__ */ P(ze, { children: [
         /* @__PURE__ */ s(_e, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" }),
         /* @__PURE__ */ s(
           Be,
           {
-            className: i(
+            className: n(
               "fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-kumo-base p-0",
               "duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
               d === "left" && "left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
@@ -225,7 +225,7 @@ const $ = u(
               {
                 "data-sidebar": "sidebar",
                 "data-mobile": "true",
-                className: i(
+                className: n(
                   "flex h-full w-full flex-col bg-kumo-base text-kumo-default",
                   t
                 ),
@@ -239,14 +239,14 @@ const $ = u(
     return /* @__PURE__ */ s(
       "aside",
       {
-        ref: n,
+        ref: i,
         "data-state": r,
         "data-side": d,
         "data-variant": l,
         "data-collapsible": c,
         "data-sidebar": "sidebar",
         style: { width: r === "expanded" ? f : p },
-        className: i(
+        className: n(
           "group/sidebar relative flex h-full shrink-0 grow-0 flex-col",
           // overflow-hidden makes flex min-width resolve to 0 (per spec),
           // preventing children from pushing the sidebar wider than its width
@@ -268,12 +268,12 @@ const $ = u(
   }
 );
 $.displayName = "Sidebar";
-const Y = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const Q = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   "div",
   {
     ref: e,
     "data-sidebar": "header",
-    className: i(
+    className: n(
       "flex items-center gap-2 border-b border-kumo-hairline px-2 py-3",
       "overflow-hidden",
       // Collapsed: just remove border, keep same height
@@ -283,13 +283,13 @@ const Y = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-Y.displayName = "Sidebar.Header";
-const J = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+Q.displayName = "Sidebar.Header";
+const Y = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   "div",
   {
     ref: e,
     "data-sidebar": "content",
-    className: i(
+    className: n(
       "flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2",
       // Collapsed: flatten spacing so icons are evenly spaced
       "group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0",
@@ -299,13 +299,13 @@ const J = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-J.displayName = "Sidebar.Content";
-const Q = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+Y.displayName = "Sidebar.Content";
+const J = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   "div",
   {
     ref: e,
     "data-sidebar": "footer",
-    className: i(
+    className: n(
       "flex min-w-0 flex-col gap-2 border-t border-kumo-hairline px-2 py-2",
       // Collapsed: remove border, tighten padding
       "group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1",
@@ -314,8 +314,8 @@ const Q = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ...a
   }
 ));
-Q.displayName = "Sidebar.Footer";
-const A = L({
+J.displayName = "Sidebar.Footer";
+const O = A({
   isCollapsible: !1,
   isOpen: !0
 }), Z = u(
@@ -323,12 +323,12 @@ const A = L({
     className: t,
     collapsible: a = !1,
     defaultOpen: e = !0,
-    open: n,
+    open: i,
     onOpenChange: r,
     children: o,
     ...b
   }, m) => {
-    const [d, l] = k(e), c = n ?? d, x = D(
+    const [d, l] = k(e), c = i ?? d, x = D(
       (p) => {
         l(p), r?.(p);
       },
@@ -341,7 +341,7 @@ const A = L({
       {
         ref: m,
         "data-sidebar": "group",
-        className: i(
+        className: n(
           "flex min-w-0 flex-col gap-0.5",
           // Collapsed: remove internal gap so icons stack uniformly
           "group-data-[state=collapsed]/sidebar:gap-0",
@@ -351,27 +351,27 @@ const A = L({
         children: o
       }
     );
-    return a ? /* @__PURE__ */ s(A.Provider, { value: g, children: /* @__PURE__ */ s(
+    return a ? /* @__PURE__ */ s(O.Provider, { value: g, children: /* @__PURE__ */ s(
       U,
       {
         defaultOpen: e,
-        open: n,
+        open: i,
         onOpenChange: x,
         className: "min-w-0",
         children: h
       }
-    ) }) : /* @__PURE__ */ s(A.Provider, { value: g, children: h });
+    ) }) : /* @__PURE__ */ s(O.Provider, { value: g, children: h });
   }
 );
 Z.displayName = "Sidebar.Group";
-const ee = u(({ className: t, children: a, ...e }, n) => {
-  const { isCollapsible: r } = R(A);
-  return r ? /* @__PURE__ */ E(
+const ee = u(({ className: t, children: a, ...e }, i) => {
+  const { isCollapsible: r } = R(O);
+  return r ? /* @__PURE__ */ P(
     V,
     {
-      ref: n,
+      ref: i,
       "data-sidebar": "group-label",
-      className: i(
+      className: n(
         "group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-kumo-subtle",
         "group-data-[state=collapsed]/sidebar:hidden",
         t
@@ -382,7 +382,7 @@ const ee = u(({ className: t, children: a, ...e }, n) => {
         /* @__PURE__ */ s(
           F,
           {
-            className: i(
+            className: n(
               "ml-auto size-3 shrink-0 text-kumo-subtle transition-transform duration-200",
               "group-data-[panel-open]/group-label:rotate-90"
             )
@@ -393,9 +393,9 @@ const ee = u(({ className: t, children: a, ...e }, n) => {
   ) : /* @__PURE__ */ s(
     "div",
     {
-      ref: n,
+      ref: i,
       "data-sidebar": "group-label",
-      className: i(
+      className: n(
         "truncate px-3 py-1 text-xs font-medium text-kumo-subtle",
         "group-data-[state=collapsed]/sidebar:hidden",
         t
@@ -406,14 +406,14 @@ const ee = u(({ className: t, children: a, ...e }, n) => {
   );
 });
 ee.displayName = "Sidebar.GroupLabel";
-const ae = u(({ className: t, children: a, ...e }, n) => {
-  const { isCollapsible: r, isOpen: o } = R(A);
+const ae = u(({ className: t, children: a, ...e }, i) => {
+  const { isCollapsible: r, isOpen: o } = R(O);
   return r ? /* @__PURE__ */ s(
     "div",
     {
-      ref: n,
+      ref: i,
       "data-sidebar": "group-content",
-      className: i(
+      className: n(
         "grid",
         // Animate height via grid-rows — matches production NavGroup pattern
         "transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
@@ -430,21 +430,21 @@ const ae = u(({ className: t, children: a, ...e }, n) => {
   ) : /* @__PURE__ */ s(
     "div",
     {
-      ref: n,
+      ref: i,
       "data-sidebar": "group-content",
-      className: i("flex flex-col", t),
+      className: n("flex flex-col", t),
       ...e,
       children: a
     }
   );
 });
 ae.displayName = "Sidebar.GroupContent";
-const te = L(!1), se = L(!1), ne = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+const te = A(!1), se = A(!1), ie = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   "ul",
   {
     ref: e,
     "data-sidebar": "menu",
-    className: i(
+    className: n(
       "m-0 flex min-w-0 list-none flex-col gap-0.5 p-0",
       "group-data-[state=collapsed]/sidebar:gap-0",
       t
@@ -452,24 +452,24 @@ const te = L(!1), se = L(!1), ne = u(({ className: t, ...a }, e) => /* @__PURE__
     ...a
   }
 ));
-ne.displayName = "Sidebar.Menu";
-const ie = u(({ className: t, children: a, ...e }, n) => /* @__PURE__ */ s(te.Provider, { value: !0, children: /* @__PURE__ */ s(
+ie.displayName = "Sidebar.Menu";
+const ne = u(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ s(te.Provider, { value: !0, children: /* @__PURE__ */ s(
   "li",
   {
-    ref: n,
+    ref: i,
     "data-sidebar": "menu-item",
-    className: i("relative", t),
+    className: n("relative", t),
     ...e,
     children: a
   }
 ) }));
-ie.displayName = "Sidebar.MenuItem";
+ne.displayName = "Sidebar.MenuItem";
 const re = u(
   ({
     className: t,
     icon: a,
     active: e = !1,
-    size: n = "base",
+    size: i = "base",
     href: r,
     tooltip: o,
     children: b,
@@ -478,26 +478,26 @@ const re = u(
     const { state: l } = T(), c = X(), x = R(te), g = a ? ke.isValidElement(a) ? a : /* @__PURE__ */ s(
       a,
       {
-        className: i("shrink-0", n === "base" ? "size-4" : "size-3.5")
+        className: n("shrink-0", i === "base" ? "size-4" : "size-3.5")
       }
-    ) : null, h = /* @__PURE__ */ E(ye, { children: [
+    ) : null, h = /* @__PURE__ */ P(ye, { children: [
       g,
       /* @__PURE__ */ s(
         "span",
         {
-          className: i(
+          className: n(
             "flex flex-1 items-center min-w-0 text-left overflow-hidden",
             "group-data-[state=collapsed]/sidebar:hidden"
           ),
           children: b
         }
       )
-    ] }), p = i(
+    ] }), p = n(
       // Layout
-      "group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer",
+      "group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg cursor-pointer",
       // Sizing
-      n === "base" && "min-h-[34px] px-3 py-1.5 text-sm font-medium",
-      n === "sm" && "min-h-[28px] px-2 py-1 text-sm",
+      i === "base" && "min-h-[34px] px-3 py-1.5 text-sm font-medium",
+      i === "sm" && "min-h-[28px] px-2 py-1 text-sm",
       // Default state — transition includes padding so collapsed centering animates smoothly
       "text-kumo-default",
       "transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]",
@@ -509,7 +509,7 @@ const re = u(
       // When a child sub-button is active, don't show active styling on the parent trigger
       "has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-kumo-tint",
       // Focus
-      "focus-visible:ring-1 focus-visible:ring-kumo-hairline",
+      "focus-visible:ring-2 focus-visible:ring-kumo-brand",
       // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;
       // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.
       "group-data-[state=collapsed]/sidebar:px-2",
@@ -520,12 +520,12 @@ const re = u(
       c,
       {
         ref: d,
-        className: i(p, "no-underline!"),
+        className: n(p, "no-underline!"),
         href: r,
         to: r,
         "data-active": e || void 0,
         "data-sidebar": "menu-button",
-        "data-size": n,
+        "data-size": i,
         onClick: m.onClick,
         children: h
       }
@@ -537,7 +537,7 @@ const re = u(
         className: p,
         "data-active": e || void 0,
         "data-sidebar": "menu-button",
-        "data-size": n,
+        "data-size": i,
         ...m,
         children: h
       }
@@ -551,9 +551,10 @@ const oe = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
     ref: e,
     type: "button",
     "data-sidebar": "menu-action",
-    className: i(
+    className: n(
       "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1",
       "text-kumo-strong hover:bg-kumo-overlay",
+      "focus-visible:ring-2 focus-visible:ring-kumo-brand",
       "transition-colors duration-150",
       "group-data-[state=collapsed]/sidebar:hidden",
       t
@@ -567,7 +568,7 @@ const de = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "menu-badge",
-    className: i(
+    className: n(
       "inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-hairline",
       "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-strong",
       // Hidden when collapsed
@@ -583,7 +584,7 @@ const le = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "menu-sub",
-    className: i(
+    className: n(
       "m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-hairline p-0 pl-2.5",
       // Hidden when collapsed
       "group-data-[state=collapsed]/sidebar:hidden",
@@ -593,32 +594,32 @@ const le = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   }
 ));
 le.displayName = "Sidebar.MenuSub";
-const ue = u(({ className: t, children: a, ...e }, n) => /* @__PURE__ */ s(se.Provider, { value: !0, children: /* @__PURE__ */ s(
+const ue = u(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ s(se.Provider, { value: !0, children: /* @__PURE__ */ s(
   "li",
   {
-    ref: n,
+    ref: i,
     "data-sidebar": "menu-sub-item",
-    className: i("relative", t),
+    className: n("relative", t),
     ...e,
     children: a
   }
 ) }));
 ue.displayName = "Sidebar.MenuSubItem";
-const ce = u(({ className: t, active: a = !1, href: e, children: n, ...r }, o) => {
-  const b = X(), m = R(se), d = i(
-    "flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none",
+const ce = u(({ className: t, active: a = !1, href: e, children: i, ...r }, o) => {
+  const b = X(), m = R(se), d = n(
+    "flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium",
     "text-kumo-default transition-colors duration-150",
     !a && "hover:bg-kumo-tint",
     a && "bg-kumo-tint",
-    "focus-visible:ring-1 focus-visible:ring-kumo-hairline",
+    "focus-visible:ring-2 focus-visible:ring-kumo-brand",
     t
-  ), l = /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left", children: n });
+  ), l = /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left", children: i });
   let c;
   return e ? c = /* @__PURE__ */ s(
     b,
     {
       ref: o,
-      className: i(d, "no-underline!"),
+      className: n(d, "no-underline!"),
       href: e,
       to: e,
       "data-active": a || void 0,
@@ -645,23 +646,24 @@ const be = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "separator",
-    className: i("mx-2 min-h-px h-px border-0 bg-kumo-hairline", t),
+    className: n("mx-2 min-h-px h-px border-0 bg-kumo-hairline", t),
     ...a
   }
 ));
 be.displayName = "Sidebar.Separator";
 const pe = u(
-  ({ className: t, placeholder: a = "Search...", shortcut: e, children: n, ...r }, o) => /* @__PURE__ */ E(
+  ({ className: t, placeholder: a = "Search...", shortcut: e, children: i, ...r }, o) => /* @__PURE__ */ P(
     "button",
     {
       ref: o,
       type: "button",
       "data-sidebar": "input",
-      className: i(
+      className: n(
         "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm",
         "bg-kumo-base text-kumo-subtle ring ring-kumo-hairline",
         "transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
         "hover:bg-kumo-overlay",
+        "focus-visible:ring-2 focus-visible:ring-kumo-brand",
         // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition
         "group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0",
         t
@@ -669,14 +671,14 @@ const pe = u(
       ...r,
       children: [
         /* @__PURE__ */ s(Ce, { className: "size-4 shrink-0 text-kumo-subtle" }),
-        /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden", children: n ?? a }),
+        /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden", children: i ?? a }),
         e && /* @__PURE__ */ s("kbd", { className: "ml-auto font-sans text-xs text-kumo-subtle group-data-[state=collapsed]/sidebar:hidden", children: e })
       ]
     }
   )
 );
 pe.displayName = "Sidebar.Input";
-const me = u(({ className: t, children: a, onClick: e, ...n }, r) => {
+const me = u(({ className: t, children: a, onClick: e, ...i }, r) => {
   const { toggleSidebar: o } = T();
   return /* @__PURE__ */ s(
     "button",
@@ -685,23 +687,24 @@ const me = u(({ className: t, children: a, onClick: e, ...n }, r) => {
       type: "button",
       "data-sidebar": "trigger",
       "aria-label": "Toggle sidebar",
-      className: i(
+      className: n(
         "flex items-center rounded-md p-1.5",
         "text-kumo-subtle hover:text-kumo-strong hover:bg-kumo-overlay",
+        "focus-visible:ring-2 focus-visible:ring-kumo-brand",
         "transition-colors duration-150",
         t
       ),
       onClick: (b) => {
         e?.(b), o();
       },
-      ...n,
+      ...i,
       children: a ?? /* @__PURE__ */ s(Me, { className: "size-5" })
     }
   );
 });
 me.displayName = "Sidebar.Trigger";
 const ge = u(({ className: t, ...a }, e) => {
-  const { toggleSidebar: n } = T();
+  const { toggleSidebar: i } = T();
   return /* @__PURE__ */ s(
     "button",
     {
@@ -710,7 +713,7 @@ const ge = u(({ className: t, ...a }, e) => {
       "data-sidebar": "rail",
       "aria-label": "Toggle sidebar",
       tabIndex: -1,
-      className: i(
+      className: n(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
         "hover:after:bg-kumo-brand/20",
@@ -719,14 +722,14 @@ const ge = u(({ className: t, ...a }, e) => {
         "sm:flex",
         t
       ),
-      onClick: n,
+      onClick: i,
       ...a
     }
   );
 });
 ge.displayName = "Sidebar.Rail";
 const fe = u(({ className: t, ...a }, e) => {
-  const { side: n, resizable: r, setIsResizing: o, setWidth: b, setOpen: m, open: d, minWidth: l } = T(), c = P(0), x = P(0), g = P(!1);
+  const { side: i, resizable: r, setIsResizing: o, setWidth: b, setOpen: m, open: d, minWidth: l } = T(), c = L(0), x = L(0), g = L(!1);
   if (!r) return null;
   const h = (p) => {
     p.preventDefault(), o(!0), c.current = p.clientX, g.current = !d;
@@ -737,7 +740,7 @@ const fe = u(({ className: t, ...a }, e) => {
     const N = () => {
       o(!1), document.removeEventListener("pointermove", z), document.removeEventListener("pointerup", w);
     }, z = (C) => {
-      const _ = n === "left" ? C.clientX - c.current : c.current - C.clientX, y = x.current + _;
+      const _ = i === "left" ? C.clientX - c.current : c.current - C.clientX, y = x.current + _;
       if (g.current) {
         y >= l && (g.current = !1, m(!0), b(y));
         return;
@@ -757,11 +760,11 @@ const fe = u(({ className: t, ...a }, e) => {
     {
       ref: e,
       "data-sidebar": "resize-handle",
-      className: i(
+      className: n(
         "absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block",
         "hover:bg-kumo-brand/30 active:bg-kumo-brand/50",
-        n === "left" && "right-0",
-        n === "right" && "left-0",
+        i === "left" && "right-0",
+        i === "right" && "left-0",
         t
       ),
       onPointerDown: h,
@@ -774,7 +777,7 @@ function he({ className: t }) {
   return /* @__PURE__ */ s(
     F,
     {
-      className: i(
+      className: n(
         "ml-auto size-4 shrink-0 text-kumo-subtle transition-transform duration-200",
         // Auto-rotate when inside an open Collapsible trigger
         "group-data-[panel-open]/menu-button:rotate-90",
@@ -786,12 +789,12 @@ function he({ className: t }) {
   );
 }
 he.displayName = "Sidebar.MenuChevron";
-const He = U, We = V, xe = u(({ className: t, keepMounted: a = !0, ...e }, n) => /* @__PURE__ */ s(
+const He = U, We = V, xe = u(({ className: t, keepMounted: a = !0, ...e }, i) => /* @__PURE__ */ s(
   De,
   {
-    ref: n,
+    ref: i,
     keepMounted: a,
-    className: i(
+    className: n(
       "overflow-hidden",
       // Default: keep the measured height that Base UI writes to --collapsible-panel-height.
       // This must also remain true during the initial close frame so the exit transition has
@@ -810,16 +813,16 @@ const He = U, We = V, xe = u(({ className: t, keepMounted: a = !0, ...e }, n) =>
   }
 ));
 xe.displayName = "Sidebar.CollapsibleContent";
-const Je = Object.assign($, {
+const Ye = Object.assign($, {
   Provider: q,
-  Header: Y,
-  Content: J,
-  Footer: Q,
+  Header: Q,
+  Content: Y,
+  Footer: J,
   Group: Z,
   GroupLabel: ee,
   GroupContent: ae,
-  Menu: ne,
-  MenuItem: ie,
+  Menu: ie,
+  MenuItem: ne,
   MenuButton: re,
   MenuAction: oe,
   MenuBadge: de,
@@ -838,19 +841,19 @@ const Je = Object.assign($, {
 });
 export {
   G as A,
-  Ye as B,
+  Qe as B,
   $e as K,
-  Je as S,
+  Ye as S,
   q as a,
   $ as b,
-  Y as c,
-  J as d,
-  Q as e,
+  Q as c,
+  Y as d,
+  J as e,
   Z as f,
   ee as g,
   ae as h,
-  ne as i,
-  ie as j,
+  ie as i,
+  ne as j,
   re as k,
   oe as l,
   de as m,
@@ -868,4 +871,4 @@ export {
   xe as y,
   T as z
 };
-//# sourceMappingURL=sidebar-ltbfius1eolkl8tb.js.map
+//# sourceMappingURL=sidebar-kh37grvfxto14ek6.js.map