@sckyzo/cosmos-react 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to `@sckyzo/cosmos-react` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.4.1...@sckyzo/cosmos-react@0.5.0) (2026-11-01)
+
+
+### Features
+
+* **react:** add a floating Shell and a Sidebar edge toggle ([4e5c334](https://github.com/SckyzO/cosmos/commit/4e5c33446ecce015d03e972fcafe20b33a95c278))
+* **react:** export the SidebarGutter type ([6144bca](https://github.com/SckyzO/cosmos/commit/6144bca63b97dc75bba0888ea4f693fd1b919a19))
+* **react:** group Sidebar rows and add a tight gutter ([96c686c](https://github.com/SckyzO/cosmos/commit/96c686c8a9ea459db3657a2fd8d63f46bc6e68b4))
+
+
+### Bug Fixes
+
+* **react:** make the collapsed Sidebar's rows square ([08c1392](https://github.com/SckyzO/cosmos/commit/08c139273b48cbfc6e6d3a92c35bfdf1b1065bdf))
+* **react:** mark only titled blocks after another in the rail ([f1d4e44](https://github.com/SckyzO/cosmos/commit/f1d4e44cdccdd4e10945db72844798af4561b768))
+
 ## [0.4.1](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.4.0...@sckyzo/cosmos-react@0.4.1) (2026-10-31)
 
 

package/dist/index.cjs

@@ -879,6 +879,8 @@ var Shell = ({
   onCollapsedChange,
   collapseControl = "topbar",
   container = "fluid",
+  variant = "attached",
+  sidebarGutter,
   defaultSidebarOpen = false,
   sidebarOpen: controlledOpen,
   onSidebarOpenChange,
@@ -905,10 +907,22 @@ var Shell = ({
     wasMobile.current = isMobile;
   }, [isMobile, open, setOpen]);
   const navId = react.useId();
+  const gutter = sidebarGutter ?? (variant === "floating" ? "tight" : "default");
   const shell = react.useMemo(
-    () => ({ collapsed, setCollapsed, isMobile, open, setOpen, navId, collapseControl }),
-    [collapsed, setCollapsed, isMobile, open, setOpen, navId, collapseControl]
+    () => ({
+      collapsed,
+      setCollapsed,
+      isMobile,
+      open,
+      setOpen,
+      navId,
+      collapseControl,
+      variant,
+      sidebarGutter: gutter
+    }),
+    [collapsed, setCollapsed, isMobile, open, setOpen, navId, collapseControl, variant, gutter]
   );
+  const floating = variant === "floating" && !isMobile;
   const layout = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     sidebar && (isMobile ? (
       // Off screen until opened. The Drawer brings the portal, scrim, focus trap, Escape
@@ -926,24 +940,34 @@ var Shell = ({
         }
       )
     ) : /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "shrink-0", children: sidebar })),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      topbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topbar }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-visible", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-w-0 flex-1 lg:overflow-auto", children }),
-        secondary && /* @__PURE__ */ jsxRuntime.jsx(
-          "aside",
-          {
-            className: clsx.clsx(
-              "shrink-0 border-t border-[var(--color-border)] lg:overflow-auto lg:border-s lg:border-t-0",
-              // `max-lg:` sorts after the plain width utility: full width while stacked.
-              secondaryWidthClassName,
-              "max-lg:w-full"
-            ),
-            children: secondary
-          }
-        )
-      ] })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          "flex min-w-0 flex-1 flex-col",
+          floating && "overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-panel)] shadow-sm"
+        ),
+        "data-shell-panel": floating ? "" : void 0,
+        children: [
+          topbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topbar }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-visible", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-w-0 flex-1 lg:overflow-auto", children }),
+            secondary && /* @__PURE__ */ jsxRuntime.jsx(
+              "aside",
+              {
+                className: clsx.clsx(
+                  "shrink-0 border-t border-[var(--color-border)] lg:overflow-auto lg:border-s lg:border-t-0",
+                  // `max-lg:` sorts after the plain width utility: full width while stacked.
+                  secondaryWidthClassName,
+                  "max-lg:w-full"
+                ),
+                children: secondary
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: sidebar ? shell : null, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -951,12 +975,23 @@ var Shell = ({
       className: clsx.clsx(
         "flex h-screen w-screen overflow-hidden bg-[var(--color-bg-base)] text-[var(--color-text-base)]",
         container === "boxed" && "justify-center",
+        // Floating: 10px around and between the two cards.
+        floating && container === "fluid" && "gap-2.5 p-2.5",
         className
       ),
       children: container === "boxed" ? (
         // The column's hairlines only show where the page background does: the window is
         // wider than the column.
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full max-w-[1440px] min-w-0 border-[var(--color-border)] min-[1441px]:border-x", children: layout })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              "flex h-full w-full max-w-[1440px] min-w-0 border-[var(--color-border)] min-[1441px]:border-x",
+              floating && "gap-2.5 p-2.5"
+            ),
+            children: layout
+          }
+        )
       ) : layout
     }
   ) });
@@ -2118,6 +2153,8 @@ var useKeepFocus = () => {
     hadFocus.current = false;
   }, []);
 };
+var GUTTER = "var(--cosmos-sidebar-gutter,20px)";
+var TIGHT_GUTTER = "10px";
 var COMPACT_WIDTH = 88;
 var SidebarContext = react.createContext({
   collapsed: false,
@@ -2136,32 +2173,41 @@ var useSidebarCollapsed = (override) => {
 };
 var SidebarDepthContext = react.createContext(0);
 var ROW_INSET = {
-  wide: { margin: "mx-5", width: "w-[calc(100%-2.5rem)]", px: 20 },
-  tight: { margin: "mx-2", width: "w-[calc(100%-1rem)]", px: 8 },
-  none: { margin: "mx-0", width: "w-full", px: 0 }
+  wide: {
+    margin: "mx-[var(--cosmos-sidebar-gutter,20px)]",
+    width: "w-[calc(100%-2*var(--cosmos-sidebar-gutter,20px))]",
+    px: GUTTER
+  },
+  tight: { margin: "mx-2", width: "w-[calc(100%-1rem)]", px: "8px" },
+  none: { margin: "mx-0", width: "w-full", px: "0px" }
 };
+var ROW_PADDING = 12;
+var ICON = 16;
+var TOP_LABEL = ROW_PADDING + ICON + 12;
 var LEVEL = [
-  { text: "text-sm", py: "py-row-10" },
   { text: "text-sm", py: "py-row-6" },
-  { text: "text-xs", py: "py-row-6" },
-  { text: "text-xs", py: "py-row-5" }
+  { text: "text-sm", py: "py-row-4" },
+  { text: "text-xs", py: "py-row-5" },
+  { text: "text-xs", py: "py-row-4" }
 ];
 var level = (depth) => LEVEL[Math.min(depth, LEVEL.length - 1)];
 var NESTED_PADDING = 10;
 var useNestedGeometry = (inset) => {
   const { labelOrigin } = react.useContext(SidebarContext);
-  const origin = labelOrigin ?? ROW_INSET[inset].px + 44;
-  const labelX = (depth) => origin + 16 * (depth - 1);
+  const margin = ROW_INSET[inset].px;
+  const at = (px2) => labelOrigin === void 0 ? `calc(${margin} + ${px2}px)` : `${labelOrigin + px2 - TOP_LABEL}px`;
+  const labelX = (depth) => TOP_LABEL + 16 * (depth - 1);
   return {
     /** Margin (and, for a `<button>`, width) that puts a nested row's pill at its own indent. */
     rowStyle: (depth, button) => {
-      const left = labelX(depth) - NESTED_PADDING;
-      return button ? { marginInlineStart: left, width: `calc(100% - ${left + ROW_INSET[inset].px}px)` } : { marginInlineStart: left };
+      const left = at(labelX(depth) - NESTED_PADDING);
+      return button ? { marginInlineStart: left, width: `calc(100% - ${left} - ${margin})` } : { marginInlineStart: left };
     },
     /** The guide line under a row's children: under a top-level icon, or 4 px before the label. */
-    guideStart: (depth) => depth === 0 ? ROW_INSET[inset].px + 22 : labelX(depth) - 4
+    guideStart: (depth) => depth === 0 ? at(ROW_PADDING + ICON / 2) : at(labelX(depth) - 4)
   };
 };
+var RAIL_ROW = "mx-auto mb-1 size-ctrl-36 justify-center text-sm";
 var ACTIVE_ROW = {
   tint: "bg-brand-500/10 text-brand-600 dark:text-brand-400",
   solid: "bg-brand-500 text-white"
@@ -2203,7 +2249,7 @@ var CompactLabel = ({
 var CompactTip = ({ label, children }) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, position: "end", block: true, children });
 var FOOTER_DIVIDER = {
   full: "border-t border-[var(--color-border)]",
-  inset: "relative before:absolute before:inset-x-5 before:top-0 before:h-px before:bg-[var(--color-border)]",
+  inset: "relative before:absolute before:inset-x-[var(--cosmos-sidebar-gutter,20px)] before:top-0 before:h-px before:bg-[var(--color-border)]",
   none: ""
 };
 var SidebarRoot = ({
@@ -2218,6 +2264,8 @@ var SidebarRoot = ({
   footer,
   footerDivider = "full",
   activeStyle = "tint",
+  gutter: gutterProp,
+  edgeToggle: edgeToggleProp,
   onCollapsedChange,
   className
 }) => {
@@ -2231,6 +2279,10 @@ var SidebarRoot = ({
   const inDrawer = shell?.isMobile === true;
   const compact = variant === "compact" && !inDrawer;
   const collapsed = inDrawer || compact ? false : shell ? shell.collapsed : ownCollapsed;
+  const floating = shell?.variant === "floating" && !inDrawer;
+  const gutter = gutterProp ?? shell?.sidebarGutter ?? "default";
+  const edgeToggle = (edgeToggleProp ?? floating) && !inDrawer && !compact;
+  const toggleCollapsed = () => shell ? shell.setCollapsed(!shell.collapsed) : setOwnCollapsed(!ownCollapsed);
   const ownNavId = react.useId();
   const navId = shell ? shell.navId : ownNavId;
   const showToggle = !inDrawer && !compact && (onCollapsedChange !== void 0 || shell?.collapseControl === "sidebar");
@@ -2258,11 +2310,15 @@ var SidebarRoot = ({
       ref: navRef,
       id: navId,
       "aria-label": "Main navigation",
-      style: inDrawer ? void 0 : { width: compact ? COMPACT_WIDTH : rail ? collapsedWidth : fit.width },
+      style: {
+        ...inDrawer ? {} : { width: compact ? COMPACT_WIDTH : rail ? collapsedWidth : fit.width },
+        ...gutter === "tight" ? { "--cosmos-sidebar-gutter": TIGHT_GUTTER } : {}
+      },
       className: clsx.clsx(
-        "flex h-full flex-col overflow-hidden bg-[var(--color-bg-panel)]",
-        // The drawer panel draws the edge and the shadow, and sets the width.
-        inDrawer ? "w-full" : "border-e border-[var(--color-border)]",
+        "relative flex h-full flex-col overflow-hidden bg-[var(--color-bg-panel)]",
+        // The drawer panel draws the edge and the shadow, and sets the width. Floating, the
+        // sidebar is a card of its own.
+        inDrawer ? "w-full" : floating ? "rounded-xl border border-[var(--color-border)] shadow-sm" : "border-e border-[var(--color-border)]",
         // Not before the first frames: the width measured at mount shows at once.
         fit.animated && clsx.clsx(
           overlay ? "transition-[width,box-shadow]" : "transition-[width]",
@@ -2276,14 +2332,33 @@ var SidebarRoot = ({
       ...hover.props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-x-hidden overflow-y-auto", children }),
+        edgeToggle && // Mouse only: hidden from assistive technology and out of the tab order, since the
+        // toggles already do the job by keyboard. The line shows under the pointer.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            "data-sidebar-edge": "",
+            onClick: toggleCollapsed,
+            title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+            className: clsx.clsx(
+              "group/edge absolute inset-y-0 end-0 z-10 w-2",
+              collapsed ? "cursor-e-resize rtl:cursor-w-resize" : "cursor-w-resize rtl:cursor-e-resize"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "group-hover/edge:bg-brand-500 absolute inset-y-3 end-0 w-0.5 rounded-full bg-transparent transition-colors" })
+          }
+        ),
         footer && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: clsx.clsx(
               "shrink-0 overflow-hidden",
-              compact ? "p-2" : "p-3",
+              compact ? "p-2" : rail ? "p-3" : "py-3",
               FOOTER_DIVIDER[footerDivider]
             ),
+            style: compact || rail ? void 0 : { paddingInline: `max(0px, calc(${GUTTER} - 8px))` },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               SidebarContext.Provider,
               {
@@ -2370,9 +2445,10 @@ var SidebarBrand = ({
   const baseClass = clsx.clsx(
     "focus-visible:focus-indicator flex h-[72px] items-center focus-visible:ring-inset",
     // The logo alone has the row to itself: centred, with no gap for the hidden title.
-    compact ? "justify-center" : "gap-3 px-5",
+    compact ? "justify-center" : collapsed ? "gap-3 px-5" : "gap-3",
     inDrawer ? "min-w-0 flex-1" : clsx.clsx("shrink-0", divider && "border-b border-[var(--color-border)]")
   );
+  const brandStyle = compact || collapsed ? void 0 : { paddingInline: `calc(${GUTTER} + 2px) ${GUTTER}` };
   const marker = inDrawer || !divider ? void 0 : "";
   let brand;
   if (href) {
@@ -2382,7 +2458,9 @@ var SidebarBrand = ({
         ref,
         href,
         className: baseClass,
+        style: brandStyle,
         "data-sidebar-brand": marker,
+        "data-sidebar-head": "",
         children: inner
       }
     );
@@ -2394,12 +2472,24 @@ var SidebarBrand = ({
         type: "button",
         onClick,
         className: clsx.clsx(baseClass, "w-full text-start"),
+        style: brandStyle,
         "data-sidebar-brand": marker,
+        "data-sidebar-head": "",
         children: inner
       }
     );
   } else {
-    brand = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: baseClass, "data-sidebar-brand": marker, children: inner });
+    brand = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: baseClass,
+        style: brandStyle,
+        "data-sidebar-brand": marker,
+        "data-sidebar-head": "",
+        children: inner
+      }
+    );
   }
   if (!inDrawer || !shell) return brand;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2410,6 +2500,7 @@ var SidebarBrand = ({
         divider && "border-b border-[var(--color-border)]"
       ),
       "data-sidebar-brand": divider ? "" : void 0,
+      "data-sidebar-head": "",
       children: [
         brand,
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2455,22 +2546,22 @@ var SidebarItem = ({
   const nested = !collapsed && depth > 0;
   const baseClass = clsx.clsx(
     "group focus-visible:focus-indicator flex items-center rounded-lg font-medium transition-colors",
-    compact ? "text-2xs relative flex-col gap-1 py-2 text-center" : clsx.clsx(
-      "gap-3",
-      nested ? "px-2.5" : collapsed ? "justify-center px-2" : "px-3",
+    compact ? clsx.clsx("text-2xs relative flex-col gap-1 py-2 text-center", ROW_INSET[inset].margin) : collapsed ? RAIL_ROW : clsx.clsx(
+      "mb-1 gap-3",
+      nested ? "px-2.5" : "px-3",
       level(nested ? depth : 0).py,
-      level(nested ? depth : 0).text
+      level(nested ? depth : 0).text,
+      ROW_INSET[inset].margin
     ),
-    ROW_INSET[inset].margin,
     active ? ACTIVE_ROW[ctx.activeStyle] : IDLE_ROW
   );
   const style = nested ? geometry.rowStyle(depth, !href) : void 0;
   const content = compact ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-5 shrink-0" }),
     /* @__PURE__ */ jsxRuntime.jsx(CompactLabel, { label, labelRef: setCompactLabel }),
     badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inset-e-1 absolute top-1", children: badge })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !nested && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
+    !nested && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", ...fitLabel(labelId), children: label }),
       badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
@@ -2500,7 +2591,7 @@ var SidebarItem = ({
         closeDrawer?.();
       },
       "aria-label": name,
-      className: clsx.clsx(baseClass, ROW_INSET[inset].width, !compact && "text-start"),
+      className: clsx.clsx(baseClass, !collapsed && ROW_INSET[inset].width, !compact && "text-start"),
       style,
       "aria-current": active ? "page" : void 0,
       "data-sidebar-item": "",
@@ -2563,13 +2654,13 @@ var SidebarSubMenu = ({
         "aria-label": compact ? void 0 : label,
         className: clsx.clsx(
           "group focus-visible:focus-indicator flex items-center rounded-lg font-medium transition-colors",
-          compact ? "text-2xs py-row-8 flex-col gap-1 text-center" : "py-row-10 justify-center px-2 text-sm",
-          ROW_INSET[inset].margin,
-          ROW_INSET[inset].width,
+          compact ? "text-2xs py-row-8 flex-col gap-1 text-center" : RAIL_ROW,
+          compact && ROW_INSET[inset].margin,
+          compact && ROW_INSET[inset].width,
           active ? ACTIVE_ROW[ctx.activeStyle] : IDLE_ROW
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("shrink-0", compact ? "size-5" : "size-4") }),
           compact && /* @__PURE__ */ jsxRuntime.jsx(CompactLabel, { label, labelRef: setCompactLabel })
         ]
       }
@@ -2585,10 +2676,10 @@ var SidebarSubMenu = ({
             inDrawer: false,
             inset: "tight",
             activeStyle: ctx.activeStyle,
-            labelOrigin: ROW_INSET.tight.px + NESTED_PADDING
+            labelOrigin: 8 + NESTED_PADDING
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(SidebarDepthContext.Provider, { value: 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pt-1 pb-2 text-xs font-semibold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pt-1 pb-1.5 text-xs font-medium text-[var(--color-text-muted)]", children: label }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -2611,14 +2702,14 @@ var SidebarSubMenu = ({
   const padding = nested ? "px-2.5" : "px-3";
   const tone = active ? ACTIVE_ROW[ctx.activeStyle] : inTrail ? TRAIL_ROW : nested && !ownPage ? GROUPING_ROW : IDLE_ROW;
   const row = clsx.clsx(
-    "group flex items-center rounded-lg font-medium transition-colors",
+    "group mb-1 flex items-center rounded-lg font-medium transition-colors",
     text,
     ROW_INSET[inset].margin,
     tone
   );
   const toggle = () => setOpen((v) => !v);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !nested && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
+    !nested && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4 shrink-0" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", ...fitLabel(labelId), children: label }),
     badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
   ] });
@@ -2741,14 +2832,18 @@ var SidebarGroup = ({
   if (collapsed) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1", children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-[18px] [[data-sidebar-head]+&]:pt-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
-        className: "text-2xs focus-visible:focus-indicator py-row-6 mx-2 flex w-[calc(100%-1rem)] items-center gap-2 rounded-lg px-3 font-semibold tracking-wider text-[var(--color-text-muted)] uppercase hover:text-[var(--color-text-secondary)]",
+        className: clsx.clsx(
+          "focus-visible:focus-indicator py-row-4 flex items-center gap-2 rounded-lg px-3 text-xs font-medium text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]",
+          ROW_INSET.wide.margin,
+          ROW_INSET.wide.width
+        ),
         children: [
           open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3 rtl:-scale-x-100" }),
           label
@@ -2761,10 +2856,8 @@ var SidebarGroup = ({
 var SectionTitle = ({ label, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
-    className: clsx.clsx(
-      "text-2xs px-5 font-semibold tracking-wider text-[var(--color-text-muted)] uppercase",
-      className
-    ),
+    className: clsx.clsx("text-xs font-medium text-[var(--color-text-muted)]", className),
+    style: { paddingInline: `calc(${GUTTER} + ${ROW_PADDING}px) ${GUTTER}` },
     children: label
   }
 );
@@ -2782,14 +2875,29 @@ var SidebarSection = ({
       /* @__PURE__ */ jsxRuntime.jsx("div", { children })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: collapsed ? void 0 : "mt-4", children: [
-    collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2 text-[var(--color-text-muted)]", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "1.75" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1.75" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "12", r: "1.75" })
-    ] }) }) : label && /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { label, className: "mb-1.5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-  ] });
+  const titled = Boolean(label);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: collapsed && titled ? "[[data-sidebar-head]+&]:-mt-3.5" : "pt-[18px] [[data-sidebar-head]+&]:pt-1",
+      children: [
+        collapsed ? titled && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-sidebar-mark": "",
+            className: "flex justify-center py-2 text-[var(--color-text-muted)] [[data-sidebar-head]+div>&]:invisible",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "1.75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1.75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "12", r: "1.75" })
+            ] })
+          }
+        ) : label && /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { label, className: "mb-1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+      ]
+    }
+  );
 };
 var Sidebar = SidebarRoot;
 Sidebar.Brand = SidebarBrand;
@@ -4068,7 +4176,7 @@ var DEFAULT_SUMMARY_LABELS = {
   UNKNOWN: "Status unknown",
   INFO: "Operational, with notices"
 };
-var ICON = {
+var ICON2 = {
   OK: lucideReact.CheckCircle,
   WARN: lucideReact.AlertTriangle,
   CRIT: lucideReact.XCircle,
@@ -4154,7 +4262,7 @@ var HealthSummary = ({
       }
     );
   }
-  const Icon2 = ICON[shown];
+  const Icon2 = ICON2[shown];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {