@sckyzo/cosmos-react 0.4.0 → 0.5.0

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;
@@ -3224,7 +3332,7 @@ var ProfileHeader = ({
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 basis-60 sm:pt-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Heading2, { className: "text-xl font-bold break-words text-[var(--color-text-primary)]", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: name }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Heading2, { className: "min-w-0 text-xl font-bold break-words text-[var(--color-text-primary)]", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: name }) }),
             badges
           ] }),
           headline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm break-words text-[var(--color-text-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: headline }) }),
@@ -3463,7 +3571,9 @@ var Button = ({
     type,
     disabled: disabled || loading,
     className: clsx.clsx(
-      "focus-visible:focus-indicator inline-flex items-center justify-center font-medium transition-colors",
+      // A label on one line in a button of fixed height: a row too narrow for it wraps or
+      // scrolls the buttons, not the text.
+      "focus-visible:focus-indicator inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors",
       VARIANT_CLASS[variant][intent],
       TEXT_CLASS[size],
       variant === "link" ? LINK_CLASS : [
@@ -3475,19 +3585,19 @@ var Button = ({
     ),
     ...rest,
     children: [
-      Icon2 && iconPosition === "start" && !loading && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: ICON_SIZE[size] }),
+      Icon2 && iconPosition === "start" && !loading && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("shrink-0", ICON_SIZE[size]) }),
       loading && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           "aria-hidden": true,
           className: clsx.clsx(
-            "animate-spin rounded-full border-2 border-current border-t-transparent",
+            "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent",
             ICON_SIZE[size]
           )
         }
       ),
       children,
-      Icon2 && iconPosition === "end" && !loading && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: ICON_SIZE[size] })
+      Icon2 && iconPosition === "end" && !loading && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("shrink-0", ICON_SIZE[size]) })
     ]
   }
 );
@@ -4066,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,
@@ -4152,7 +4262,7 @@ var HealthSummary = ({
       }
     );
   }
-  const Icon2 = ICON[shown];
+  const Icon2 = ICON2[shown];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4526,7 +4636,7 @@ var CheckName = ({ check, open, onToggle, outputId }) => check.output === void 0
   }
 );
 var Output = ({ check, open, outputId }) => check.output === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { id: outputId, hidden: !open, className: "min-w-0", children: open && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { code: check.output }) });
-var Dash = () => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-[var(--color-text-muted)] max-sm:hidden", children: "\u2014" });
+var Dash = () => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-[var(--color-text-muted)] @max-[48rem]:hidden", children: "\u2014" });
 var CheckRow = ({ check, open, onToggle, outputId, now }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "li",
   {
@@ -4535,15 +4645,15 @@ var CheckRow = ({ check, open, onToggle, outputId, now }) => /* @__PURE__ */ jsx
       (check.status === "WARN" || check.status === "CRIT") && "bg-gray-50/60 dark:bg-white/[0.02]"
     ),
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 sm:grid sm:grid-cols-[6.5rem_minmax(0,10rem)_minmax(0,12rem)_minmax(0,1fr)_5rem_6rem] sm:items-center sm:gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 @min-[48rem]:grid @min-[48rem]:grid-cols-[6.5rem_minmax(6rem,10rem)_minmax(0,12rem)_minmax(12rem,1fr)_5rem_7rem] @min-[48rem]:items-center @min-[48rem]:gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: check.status, label: STATUS_NAME[check.status] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckName, { check, open, onToggle, outputId }),
-        check.target ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs break-all text-[var(--color-text-secondary)] sm:truncate", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: check.target }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {}),
+        check.target ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs break-all text-[var(--color-text-secondary)] @min-[48rem]:truncate", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: check.target }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {}),
         check.message ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: check.message }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {}),
-        check.latency !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums sm:text-end", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: formatLatency(check.latency) }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {}),
-        check.checkedAt !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-text-secondary)] tabular-nums sm:text-end", children: /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: check.checkedAt, now }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {})
+        check.latency !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums @min-[48rem]:text-end", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: formatLatency(check.latency) }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {}),
+        check.checkedAt !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-text-secondary)] tabular-nums @min-[48rem]:text-end", children: /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: check.checkedAt, now }) }) : /* @__PURE__ */ jsxRuntime.jsx(Dash, {})
       ] }),
-      check.output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(open && "mt-3 sm:ms-[7.25rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(Output, { check, open, outputId }) })
+      check.output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(open && "mt-3 @min-[48rem]:ms-[7.25rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(Output, { check, open, outputId }) })
     ]
   }
 );
@@ -4671,7 +4781,9 @@ var HealthCheckList = ({
       role: ariaLabel ? "group" : void 0,
       "aria-label": ariaLabel,
       className: clsx.clsx(
-        variant === "list" && "overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-panel)]",
+        // The rows lay their columns out from the list's own width, not the screen's: in a card the
+        // list is narrower than the screen, and a grid of fixed columns left the message nothing.
+        variant === "list" && "@container overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-panel)]",
         variant === "grid" && "flex flex-col gap-4",
         className
       ),
@@ -5764,9 +5876,9 @@ function StackedListItem({
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-x-0 -top-px bottom-0", "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: title })
   ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm/6 font-semibold text-gray-900 dark:text-white", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: title }) });
-  const titleRow = badge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-3", children: [
+  const titleRow = badge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1", children: [
     titleEl,
-    badge
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-none", children: badge })
   ] }) : titleEl;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
@@ -7832,7 +7944,9 @@ var AvatarGroup = ({
     "span",
     {
       className: clsx.clsx(
-        "relative inline-flex shrink-0 ring-2 ring-[var(--color-bg-panel)] has-focus-visible:z-10",
+        // The surface behind each avatar: a tinted fill lets the one before it, and its ring, show
+        // through otherwise.
+        "relative inline-flex shrink-0 bg-[var(--color-bg-panel)] ring-2 ring-[var(--color-bg-panel)] has-focus-visible:z-10",
         AVATAR_SHAPE_CLASS[shape],
         index > 0 && OVERLAP_CLASS[spacing][size],
         index < last && INITIALS_SHIFT_CLASS[spacing][size]
@@ -8810,7 +8924,8 @@ var STATE_CONFIG = {
   saving: { label: "Saving\u2026", loading: true },
   // The `success` intent carries the dark text on green (white on green-500 is about 2.3:1).
   saved: { label: "Saved", icon: lucideReact.Check, intent: "success" },
-  error: { label: "Error", intent: "danger" }
+  // What to do next, not the name of the state: the save failed, the click saves again.
+  error: { label: "Try again", intent: "danger" }
 };
 var StatefulSaveButton = ({
   state,
@@ -9160,7 +9275,9 @@ function NotificationsPanelTrigger({
       "aria-expanded": open,
       onClick: () => setOpen(!open),
       className: clsx.clsx(
-        "focus-visible:focus-indicator h-ctrl-40 w-ctrl-40 relative flex items-center justify-center rounded-lg border transition-colors",
+        // The ping around the count grows to twice its size: clipped to the bell, it never widens
+        // the row that holds it. The focus ring is a shadow, outside the clip.
+        "focus-visible:focus-indicator h-ctrl-40 w-ctrl-40 relative flex items-center justify-center overflow-hidden rounded-lg border transition-colors",
         muted ? "border-gray-200 text-gray-400 dark:border-gray-700 dark:text-gray-600" : "border-gray-200 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
         className
       ),
@@ -13745,21 +13862,30 @@ var DatePicker = (props) => {
         ]
       }
     ),
-    isRange ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("flex items-center gap-2", !fullWidth && "w-fit"), children: [
-      renderTrigger(
-        fieldId,
-        "from",
-        selectedRange.from,
-        props.fromPlaceholder ?? "Start date"
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "to" }),
-      renderTrigger(
-        void 0,
-        "to",
-        selectedRange.to,
-        props.toPlaceholder ?? "End date"
+    isRange ? (
+      // Two dates side by side don't fit a phone: the end date goes under the start date.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx.clsx("flex flex-wrap items-center gap-2", !fullWidth && "w-fit max-w-full"),
+          children: [
+            renderTrigger(
+              fieldId,
+              "from",
+              selectedRange.from,
+              props.fromPlaceholder ?? "Start date"
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "to" }),
+            renderTrigger(
+              void 0,
+              "to",
+              selectedRange.to,
+              props.toPlaceholder ?? "End date"
+            )
+          ]
+        }
       )
-    ] }) : renderTrigger(
+    ) : renderTrigger(
       fieldId,
       "from",
       selectedSingle,
@@ -14014,7 +14140,7 @@ var OtpInput = ({
     if (finalValue.length === length) onComplete?.(finalValue);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("flex items-center gap-2", className), role: "group", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { dir: "ltr", className: "flex items-center gap-2", children: Array.from({ length }).map((_, i) => {
+    /* @__PURE__ */ jsxRuntime.jsx("div", { dir: "ltr", className: "flex min-w-0 items-center gap-2", children: Array.from({ length }).map((_, i) => {
       const cellChar = value[i] ?? "";
       const display = mask && cellChar ? "\u2022" : cellChar;
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14037,7 +14163,8 @@ var OtpInput = ({
           onPaste: handlePaste(i),
           onFocus: (e) => e.target.select(),
           className: clsx.clsx(
-            "h-ctrl-48 w-10 rounded-lg border bg-white text-center text-lg font-semibold text-gray-900 tabular-nums transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white",
+            // 2.5rem wide, narrower when the row doesn't fit (eight cells on a phone).
+            "h-ctrl-48 w-10 min-w-0 rounded-lg border bg-white text-center text-lg font-semibold text-gray-900 tabular-nums transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white",
             fieldStateClass({ invalid: error, success })
           )
         },
@@ -16079,7 +16206,8 @@ function Item4({
             "dd",
             {
               className: clsx.clsx(
-                "text-sm font-medium text-[var(--color-text-primary)]",
+                // A value with no space in it (an e-mail) breaks inside the row.
+                "min-w-0 text-sm font-medium break-words text-[var(--color-text-primary)]",
                 mono && "font-mono text-xs"
               ),
               children: isolate(children)
@@ -16101,7 +16229,7 @@ function Item4({
           "dd",
           {
             className: clsx.clsx(
-              "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300",
+              "mt-1 min-w-0 text-sm/6 break-words text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300",
               mono && "font-mono"
             ),
             children: isolate(children)
@@ -16198,7 +16326,7 @@ var KpiCard = ({
   );
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: label }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-xs font-medium tracking-wider break-words hyphens-auto text-gray-500 uppercase dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: label }) }),
       Icon2 && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -16221,7 +16349,9 @@ var KpiCard = ({
           "span",
           {
             className: clsx.clsx(
-              "block text-3xl font-bold tracking-tight tabular-nums",
+              // A figure with no break in it (`€12,418,906.40`) wraps in a narrow card instead of
+              // running out of it: cut, it would read as another number.
+              "block text-3xl font-bold tracking-tight break-words tabular-nums",
               intent === "neutral" ? "text-gray-900 dark:text-white" : INTENT_STYLE[intent].text
             ),
             children: withExact ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -16706,7 +16836,8 @@ var MiniCalendar = ({
                 "aria-current": isToday ? "date" : void 0,
                 className: clsx.clsx(
                   // The number sits above the middle of the cell (`pb-1.5`) to leave room for the event dot under it.
-                  "h-ctrl-36 relative flex items-center justify-center rounded-md border pb-1.5 text-xs font-medium transition-colors focus-visible:ring-inset",
+                  // At least 28px wide: a calendar as wide as its content had columns as narrow as the numbers.
+                  "h-ctrl-36 min-w-ctrl-28 relative flex items-center justify-center rounded-md border pb-1.5 text-xs font-medium transition-colors focus-visible:ring-inset",
                   isSelected ? "bg-brand-500 hover:bg-brand-600 focus-visible:focus-indicator-on-accent border-transparent text-white" : isToday ? "border-brand-500 text-brand-600 hover:bg-brand-50 focus-visible:focus-indicator dark:text-brand-400 dark:hover:bg-white/5" : "focus-visible:focus-indicator border-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                 ),
                 children: [
@@ -18515,12 +18646,13 @@ var DataTableBulkActions = ({
       icon: item.icon,
       disabled: item.disabled,
       onClick: () => item.onClick(selectedRows),
+      className: "shrink-0",
       children: item.label
     },
     item.key
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("flex items-center gap-2", phoneIcons && "max-sm:hidden"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("flex flex-wrap items-center gap-2", phoneIcons && "max-sm:hidden"), children: [
       button(first, true),
       rest.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden items-center gap-2 @min-[1152px]:flex", children: rest.map((item) => button(item, false)) }),
@@ -18920,6 +19052,43 @@ var PageSizeSelect = ({ value, options, onChange }) => {
   ] });
 };
 
+// src/table/columnWidths.ts
+var DEFAULT_COLUMN_MIN_WIDTH = "8rem";
+var NUMBER = String.raw`(?:\d+(?:\.\d+)?|\.\d+)`;
+var LENGTH = new RegExp(`^${NUMBER}(?:px|rem|em|ch)$`);
+var PERCENT2 = new RegExp(`^(${NUMBER})%$`);
+var ratio = (n) => Number(n.toFixed(4));
+var tableMinWidth = (columns, fixed, takesTheRest) => {
+  if (columns.length === 0) return void 0;
+  const lengths = [...fixed];
+  const autoMins = [];
+  const percents = [];
+  columns.forEach((c, i) => {
+    const width = c.width?.trim() ?? "";
+    const min = c.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
+    const share = PERCENT2.exec(width);
+    if (i === takesTheRest) autoMins.push(LENGTH.test(width) ? width : min);
+    else if (LENGTH.test(width)) lengths.push(width);
+    else if (share) percents.push({ share: Number(share[1]) / 100, min });
+    else autoMins.push(min);
+  });
+  const bounds = percents.map((p) => `calc(${p.min} / ${ratio(p.share)})`);
+  const left = ratio(1 - percents.reduce((sum, p) => sum + p.share, 0));
+  const widest = [...new Set(autoMins)];
+  const parts = [
+    ...lengths,
+    ...autoMins.length > 0 ? [`${autoMins.length} * ${widest.length === 1 ? widest[0] : `max(${widest.join(", ")})`}`] : []
+  ];
+  if (parts.length > 0 && left > 0) {
+    bounds.push(
+      left === 1 ? `calc(${parts.join(" + ")})` : `calc((${parts.join(" + ")}) / ${left})`
+    );
+  }
+  const distinct = [...new Set(bounds)];
+  if (distinct.length === 0) return void 0;
+  return distinct.length === 1 ? distinct[0] : `max(${distinct.join(", ")})`;
+};
+
 // src/table/pipeline.ts
 var filtersToRecord = (filters) => {
   const out = {};
@@ -19809,12 +19978,15 @@ var DataTable = ({
     [filteredRows, columns, manual, sortKey, sortDir]
   );
   const firstColumnTakesTheRest = (selectable || actionColumn) && columns.length > 0 && columns.every((c) => c.width);
-  const statedMinWidth = firstColumnTakesTheRest ? `calc(${[
-    expandable && EXPAND_COLUMN_WIDTH,
-    selectable && SELECT_COLUMN_WIDTH,
-    ...columns.map((c) => c.width),
-    actionColumn && (rowEditing ? EDIT_ACTION_COLUMN_WIDTH : ACTION_COLUMN_WIDTH)
-  ].filter(Boolean).join(" + ")})` : void 0;
+  const tableMinimum = tableMinWidth(
+    columns,
+    [
+      expandable && EXPAND_COLUMN_WIDTH,
+      selectable && SELECT_COLUMN_WIDTH,
+      actionColumn && (rowEditing ? EDIT_ACTION_COLUMN_WIDTH : ACTION_COLUMN_WIDTH)
+    ].filter((w) => Boolean(w)),
+    firstColumnTakesTheRest ? 0 : void 0
+  );
   const mobileSortable = columns.some((c) => c.sortable);
   const hasRows = sortedRows.length > 0;
   const showSkeleton = loading && !hasRows;
@@ -20279,7 +20451,11 @@ var DataTable = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: clsx.clsx("flex min-w-0 items-center gap-3", mobileCards && "max-sm:flex-1"),
+              className: clsx.clsx(
+                // The actions go to the next line when the count leaves them too little room.
+                "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2",
+                mobileCards && "max-sm:flex-1"
+              ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-brand-700 dark:text-brand-300 text-sm font-medium whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("bdi", { children: [
                   selection.size,
@@ -20294,7 +20470,7 @@ var DataTable = ({
                     children: "Clear"
                   }
                 ),
-                (bulkActionItems || bulkActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 ps-1", children: [
+                (bulkActionItems || bulkActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-auto flex-wrap items-center gap-2 ps-1", children: [
                   bulkActionItems && /* @__PURE__ */ jsxRuntime.jsx(
                     DataTableBulkActions,
                     {
@@ -20431,7 +20607,7 @@ var DataTable = ({
                         "aria-labelledby": ariaLabelledBy,
                         "aria-busy": loading || void 0,
                         "aria-rowcount": windowed ? pageRows.length + 1 : void 0,
-                        style: statedMinWidth ? { minWidth: statedMinWidth } : void 0,
+                        style: tableMinimum ? { minWidth: tableMinimum } : void 0,
                         className: "w-full table-fixed",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
@@ -21382,7 +21558,7 @@ var SocialAuthButtons = ({
         onClick: () => onProviderClick(provider),
         disabled: isDisabled,
         "aria-label": label,
-        className: "focus-visible:focus-indicator h-ctrl-40 flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+        className: "focus-visible:focus-indicator h-ctrl-40 flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 [&>svg]:shrink-0",
         children: [
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon2, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })