@lessly/ui 4.0.0 → 4.1.1

package/README.md

@@ -135,6 +135,14 @@ import '@lessly/ui/styles-federated.css';
 The shell keeps importing `@lessly/ui/styles.css`; it owns the fonts and the
 base layer.
 
+The preset is not optional on this path either, and installing it is not the
+same as reaching it: Tailwind v4 has no `presets:` key, so **both** entries —
+federation and standalone — need `@config`, and one that lacks it compiles to
+Tailwind's defaults with no error anywhere. What each sheet carries, why the
+federated one declares its variables at zero specificity, and why
+`theme(reference)` is not the fix are in
+[`docs/federated-styles.md`](docs/federated-styles.md).
+
 ## Storybook
 
 ```bash

package/dist/{chunk-DYHP7W3X.js → chunk-LTHOLX7I.js}

@@ -336,11 +336,57 @@ var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @_
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/components/entity-row.tsx
+// src/components/scroll-area.tsx
 import * as React4 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ScrollArea = React4.forwardRef(({ className, children, viewportClassName, viewportProps, type = "scroll", scrollHideDelay = 600, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    type,
+    scrollHideDelay,
+    className: cn("group/scroll relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4(
+        ScrollAreaPrimitive.Viewport,
+        {
+          ...viewportProps,
+          className: cn("scroll-overlay-viewport h-full w-full rounded-[inherit]", viewportClassName),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx4(ScrollBar, {}),
+      /* @__PURE__ */ jsx4(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx4(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    forceMount: true,
+    className: cn(
+      "motion-scroll-overlay flex touch-none select-none p-[2px] opacity-0",
+      "data-[state=visible]:opacity-100 group-hover/scroll:opacity-100 hover:opacity-100",
+      orientation === "vertical" && "h-full w-2",
+      orientation === "horizontal" && "h-2 flex-col",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx4(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border-strong" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/components/entity-row.tsx
+import * as React5 from "react";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { ChevronDown, ChevronRight } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var rowClass = "flex w-full items-center gap-3 px-4 py-2.5 text-left";
 var plateClass = "relative isolate after:pointer-events-none after:absolute after:inset-x-1.5 after:inset-y-1 after:-z-10 after:rounded-lg hover:after:bg-[var(--hov-bg)] disabled:hover:after:bg-transparent focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-border-focus";
 var stackClass = "flex-col items-stretch gap-1";
@@ -348,25 +394,25 @@ var caretMotion = {
   transitionDuration: "var(--motion-duration-normal)",
   transitionTimingFunction: "var(--motion-easing-standard)"
 };
-var EntityRow = React4.forwardRef(function EntityRow2({ mark, title, badge, sub, meta, summary, opens = "page", expanded, asChild = false, className, children, ...props }, ref) {
+var EntityRow = React5.forwardRef(function EntityRow2({ mark, title, badge, sub, meta, summary, opens = "page", expanded, asChild = false, className, children, ...props }, ref) {
   if (process.env.NODE_ENV !== "production" && opens === "disclosure" && expanded === void 0) {
     console.warn(
       '[EntityRow] `opens="disclosure"` needs `expanded`: it draws the caret AND sets `aria-expanded`, and without it the row renders a caret that never turns and states no state at all. Pass `expanded={open}`, or use `opens="page"` / `opens="modal"`.'
     );
   }
-  const line = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  const line = /* @__PURE__ */ jsxs4(Fragment2, { children: [
     mark,
-    /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs3("span", { className: "flex min-h-5 items-center gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: cn("truncate text-sm text-text-primary", opens !== "none" && "font-medium"), children: title }),
-        badge != null && /* @__PURE__ */ jsx4("span", { className: "flex h-5 shrink-0 items-center", children: badge })
+    /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "flex min-h-5 items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("span", { className: cn("truncate text-sm text-text-primary", opens !== "none" && "font-medium"), children: title }),
+        badge != null && /* @__PURE__ */ jsx5("span", { className: "flex h-5 shrink-0 items-center", children: badge })
       ] }),
-      sub != null && /* @__PURE__ */ jsx4("span", { className: "block truncate text-xs text-text-secondary", children: sub })
+      sub != null && /* @__PURE__ */ jsx5("span", { className: "block truncate text-xs text-text-secondary", children: sub })
     ] }),
-    meta != null && /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-sm text-text-secondary", children: meta }),
-    opens !== "none" && /* @__PURE__ */ jsxs3("span", { className: "flex size-4 shrink-0 items-center justify-center", children: [
-      opens === "page" && /* @__PURE__ */ jsx4(ChevronRight, { className: "size-4 text-text-tertiary", "aria-hidden": true }),
-      opens === "disclosure" && /* @__PURE__ */ jsx4(
+    meta != null && /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-sm text-text-secondary", children: meta }),
+    opens !== "none" && /* @__PURE__ */ jsxs4("span", { className: "flex size-4 shrink-0 items-center justify-center", children: [
+      opens === "page" && /* @__PURE__ */ jsx5(ChevronRight, { className: "size-4 text-text-tertiary", "aria-hidden": true }),
+      opens === "disclosure" && /* @__PURE__ */ jsx5(
         ChevronDown,
         {
           className: cn(
@@ -379,20 +425,20 @@ var EntityRow = React4.forwardRef(function EntityRow2({ mark, title, badge, sub,
       )
     ] })
   ] });
-  const content = summary == null ? line : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("span", { className: "flex w-full items-center gap-3", children: line }),
-    /* @__PURE__ */ jsx4("span", { className: "block w-full text-xs text-text-secondary", children: summary })
+  const content = summary == null ? line : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "flex w-full items-center gap-3", children: line }),
+    /* @__PURE__ */ jsx5("span", { className: "block w-full text-xs text-text-secondary", children: summary })
   ] });
   const classes = cn(rowClass, opens !== "none" && ["cursor-pointer", plateClass], summary != null && stackClass, className);
   const stateProps = opens === "disclosure" ? { "aria-expanded": expanded } : void 0;
   if (opens === "none") {
-    return /* @__PURE__ */ jsx4("div", { ...props, ref, className: classes, children: content });
+    return /* @__PURE__ */ jsx5("div", { ...props, ref, className: classes, children: content });
   }
   if (asChild) {
-    const child = React4.Children.only(children);
-    return /* @__PURE__ */ jsx4(Slot2, { ...props, ref, className: classes, ...stateProps, children: React4.cloneElement(child, stateProps, content) });
+    const child = React5.Children.only(children);
+    return /* @__PURE__ */ jsx5(Slot2, { ...props, ref, className: classes, ...stateProps, children: React5.cloneElement(child, stateProps, content) });
   }
-  return /* @__PURE__ */ jsx4("button", { ...props, ref, type: "button", className: classes, ...stateProps, children: content });
+  return /* @__PURE__ */ jsx5("button", { ...props, ref, type: "button", className: classes, ...stateProps, children: content });
 });
 EntityRow.displayName = "EntityRow";
 
@@ -438,10 +484,10 @@ function useSidebar(options = {}) {
 }
 
 // src/components/nav-row.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var base = "flex w-full cursor-pointer items-center text-left text-sm transition-colors duration-fast focus-visible:outline-none";
 var ring = "focus-visible:ring-2 focus-visible:ring-border-focus";
 var plate = "relative isolate after:pointer-events-none after:absolute after:inset-x-1.5 after:inset-y-1 after:-z-10 after:rounded-lg";
@@ -467,14 +513,14 @@ var state = {
   }
 };
 function Mark({ mark, open }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       className: cn(
         "flex size-5 items-center justify-center",
         mark === "drill" ? "rounded-md transition-colors duration-fast group-hover/nav-row:bg-[color-mix(in_srgb,var(--text-primary)_10%,transparent)]" : "text-text-tertiary"
       ),
-      children: mark === "drill" ? /* @__PURE__ */ jsx5(ChevronRight2, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(
+      children: mark === "drill" ? /* @__PURE__ */ jsx6(ChevronRight2, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx6(
         ChevronDown2,
         {
           className: "size-4",
@@ -485,11 +531,11 @@ function Mark({ mark, open }) {
     }
   );
 }
-var NavRow = React5.forwardRef(function NavRow2({ icon, label, sub, active = false, variant, trailing, mark, markOpen, mutedTrailing = false, hideLabel = false, asChild = false, className, children, ...props }, ref) {
+var NavRow = React6.forwardRef(function NavRow2({ icon, label, sub, active = false, variant, trailing, mark, markOpen, mutedTrailing = false, hideLabel = false, asChild = false, className, children, ...props }, ref) {
   const card = variant === "card";
-  const adornment = mark ? !hideLabel && /* @__PURE__ */ jsx5(Mark, { mark, open: markOpen }) : trailing;
-  const content = /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    Boolean(icon) && /* @__PURE__ */ jsx5(
+  const adornment = mark ? !hideLabel && /* @__PURE__ */ jsx6(Mark, { mark, open: markOpen }) : trailing;
+  const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    Boolean(icon) && /* @__PURE__ */ jsx6(
       "span",
       {
         className: cn(
@@ -500,11 +546,11 @@ var NavRow = React5.forwardRef(function NavRow2({ icon, label, sub, active = fal
         children: icon
       }
     ),
-    !hideLabel && (card ? /* @__PURE__ */ jsxs4("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx5("span", { className: "block truncate", children: label }),
-      Boolean(sub) && /* @__PURE__ */ jsx5("span", { className: "block truncate text-xs text-text-secondary", children: sub })
-    ] }) : /* @__PURE__ */ jsx5("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1 truncate", children: label })),
-    Boolean(adornment) && /* @__PURE__ */ jsx5(
+    !hideLabel && (card ? /* @__PURE__ */ jsxs5("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx6("span", { className: "block truncate", children: label }),
+      Boolean(sub) && /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-text-secondary", children: sub })
+    ] }) : /* @__PURE__ */ jsx6("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1 truncate", children: label })),
+    Boolean(adornment) && /* @__PURE__ */ jsx6(
       "span",
       {
         "data-slot": "nav-row-trailing",
@@ -515,7 +561,7 @@ var NavRow = React5.forwardRef(function NavRow2({ icon, label, sub, active = fal
         children: adornment
       }
     ),
-    card && /* @__PURE__ */ jsx5("span", { className: "size-4 shrink-0", "aria-hidden": "true" })
+    card && /* @__PURE__ */ jsx6("span", { className: "size-4 shrink-0", "aria-hidden": "true" })
   ] });
   const classes = cn(
     base,
@@ -527,20 +573,20 @@ var NavRow = React5.forwardRef(function NavRow2({ icon, label, sub, active = fal
   );
   const expanded = mark === "disclosure" ? markOpen : void 0;
   if (asChild) {
-    const child = React5.Children.only(children);
-    return /* @__PURE__ */ jsx5(Slot3, { ref, className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: React5.cloneElement(child, void 0, content) });
+    const child = React6.Children.only(children);
+    return /* @__PURE__ */ jsx6(Slot3, { ref, className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: React6.cloneElement(child, void 0, content) });
   }
-  return /* @__PURE__ */ jsx5("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: content });
+  return /* @__PURE__ */ jsx6("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: content });
 });
 NavRow.displayName = "NavRow";
 
 // src/components/rail-toggle.tsx
-import * as React6 from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var RAIL_COLUMN_BOX = "flex size-10 shrink-0 items-center justify-center [&>*]:shrink-0";
 var BAR_TRAVEL = 6;
 function RailMark({ collapsed, className }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -553,8 +599,8 @@ function RailMark({ collapsed, className }) {
       className: cn("size-4", className),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx6("rect", { "data-slot": "rail-mark-frame", x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("rect", { "data-slot": "rail-mark-frame", x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+        /* @__PURE__ */ jsx7(
           "path",
           {
             "data-slot": "rail-mark-bar",
@@ -567,8 +613,8 @@ function RailMark({ collapsed, className }) {
     }
   );
 }
-var RailToggle = React6.forwardRef(function RailToggle2({ collapsed, className, "aria-label": ariaLabel, ...rest }, ref) {
-  return /* @__PURE__ */ jsx6(
+var RailToggle = React7.forwardRef(function RailToggle2({ collapsed, className, "aria-label": ariaLabel, ...rest }, ref) {
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       ref,
@@ -581,7 +627,7 @@ var RailToggle = React6.forwardRef(function RailToggle2({ collapsed, className,
         className
       ),
       ...rest,
-      children: /* @__PURE__ */ jsx6(RailMark, { collapsed })
+      children: /* @__PURE__ */ jsx7(RailMark, { collapsed })
     }
   );
 });
@@ -604,6 +650,8 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
+  ScrollArea,
+  ScrollBar,
   EntityRow,
   useIsMobile,
   useSidebar,

package/dist/index.d.ts

@@ -848,7 +848,27 @@ declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitiv
 declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/** A scroll region whose bar is drawn OVER the content rather than beside it (#2357).
+ *
+ *  The platform's own bar is two things we don't want: on Windows and Linux it takes a lane out of
+ *  the layout, so a region that starts scrolling reflows everything in it, and it is painted by the
+ *  OS in a grey that answers to neither theme. This draws the bar itself, absolutely positioned, on
+ *  the kit's own border token — so one declaration is correct in light and dark.
+ *
+ *  `type="scroll"` plus `forceMount` is what makes it appear only when it is wanted. Radix keeps
+ *  `data-state` on the bar — `visible` while the region is being scrolled, `hidden` once
+ *  `scrollHideDelay` has passed — and the bar stays mounted so the pointer can bring it back too:
+ *  hovering anywhere over the region is the other half of the rule, and CSS alone answers it.
+ */
+declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Classes for the scrolling viewport — where a scroll region's own padding belongs, so that
+     *  the bar rides over the padding instead of being inset by it. */
+    viewportClassName?: string;
+    /** Forwarded to the viewport, so a caller can reach the element that actually scrolls. */
+    viewportProps?: React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> & {
+        [key: `data-${string}`]: string;
+    };
+} & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -2917,10 +2937,9 @@ declare const Col: React$1.ForwardRefExoticComponent<ColProps & React$1.RefAttri
 /**
  * The page column: the one grid a console page lays its cards on, in one of two widths.
  *
- * `reading` (the default) is capped and centred in the well — the width a page of cards, a form, a
- * settings page, an overview or an entity detail is read at, which is most of the console. `full`
- * drops the cap and fills the well, for a page whose main content is a table, a matrix, a roster, a
- * log or a chart: something that gets better with horizontal room.
+ * `reading` (the default) is capped and centred in the well, which is most of the console; `full`
+ * drops the cap and fills it. Which one a page takes is Guidelines/Page & navigation/Page column's
+ * answer.
  *
  * It writes no horizontal padding, ever. `AppShell` spells the inset once for `main` and the
  * top-bar row together, so a column that padded itself again would push the page off the trail
@@ -3010,7 +3029,7 @@ type ConnectorStatus = 'active' | 'needs-reconnect' | 'not-connected';
 interface ConnectorCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * The account name — what this connector is linked WITH, never a bare provider name and never a
-     * bare "Connected" (#270). E.g. "GitHub — acme", "Google Ads — ads@acme.com".
+     * bare "Connected" (#270). E.g. "GitHub: acme", "Google Ads: ads@acme.com".
      */
     name: string;
     /** What kind of external account this is, in the provider's words: "GitHub organization". */