@lessly/ui 4.0.0 → 4.1.0

package/dist/router.js

@@ -3,6 +3,7 @@ import {
   NavRow,
   RAIL_COLUMN_BOX,
   RailToggle,
+  ScrollArea,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -15,7 +16,7 @@ import {
   cn,
   useIsMobile,
   useSidebar
-} from "./chunk-DYHP7W3X.js";
+} from "./chunk-LTHOLX7I.js";
 
 // src/components/extension-link.tsx
 import { Link } from "react-router";
@@ -150,13 +151,11 @@ function AppSidebar({
         /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-header" }),
         railTopNode && /* @__PURE__ */ jsx3("div", { "data-testid": "sidebar-rail-top", className: "shrink-0 px-3 pt-3", children: railTopNode }),
         /* @__PURE__ */ jsx3(
-          "div",
+          ScrollArea,
           {
-            "data-testid": "sidebar-scroll",
-            className: cn(
-              "min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pb-2",
-              railTopNode ? "pt-2" : "pt-3"
-            ),
+            className: "min-h-0 flex-1",
+            viewportClassName: cn("px-3 pb-2", railTopNode ? "pt-2" : "pt-3"),
+            viewportProps: { "data-testid": "sidebar-scroll" },
             children: /* @__PURE__ */ jsx3(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive })
           }
         ),

package/dist/styles-federated.css

@@ -514,7 +514,6 @@
 
 
 
-
 /* === Theme Variables === */
 /* The token palettes (colors, typography, motion, shadows, grid) live in
    @lessly/tokens/theme.css — dark `:root` + `.light`, unprefixed names
@@ -677,6 +676,24 @@
   margin-inline: auto;
 }
 
+/* Backs the overlay scrollbar <ScrollArea> draws: the bar rides over the content and is only there
+   while it is wanted — while you scroll, and while the pointer is over the region — then fades. A
+   real class rather than a Tailwind arbitrary utility for the reason the motion classes above are,
+   and token-driven so prefers-reduced-motion takes the fade to 0ms and the bar simply appears. */
+.motion-scroll-overlay {
+  transition-property: opacity;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+/* Radix's viewport wraps its children in a `display: table` div, which is how it lets content
+   wider than the region push the horizontal bar. A rail is the opposite case: its rows are as wide
+   as the rail and a table row is as wide as its widest cell, so a long label stops truncating and
+   spills. `display: block` on that wrapper gives the rows the region's width back. */
+.scroll-overlay-viewport > div {
+  display: block !important;
+}
+
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;

package/dist/styles.css

@@ -534,13 +534,6 @@
   font-style: normal;
   font-display: swap;
 }
-@font-face {
-  font-family: "Instrument Serif";
-  src: url("/fonts/instrument-serif/instrument-serif-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
 @font-face {
   font-family: "Fira Mono";
   src: url("/fonts/fira-mono/fira-mono-regular.woff2") format("woff2");
@@ -724,6 +717,24 @@
   margin-inline: auto;
 }
 
+/* Backs the overlay scrollbar <ScrollArea> draws: the bar rides over the content and is only there
+   while it is wanted — while you scroll, and while the pointer is over the region — then fades. A
+   real class rather than a Tailwind arbitrary utility for the reason the motion classes above are,
+   and token-driven so prefers-reduced-motion takes the fade to 0ms and the bar simply appears. */
+.motion-scroll-overlay {
+  transition-property: opacity;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+/* Radix's viewport wraps its children in a `display: table` div, which is how it lets content
+   wider than the region push the horizontal bar. A rail is the opposite case: its rows are as wide
+   as the rail and a table row is as wide as its widest cell, so a long label stops truncating and
+   spills. `display: block` on that wrapper gives the rows the region's width back. */
+.scroll-overlay-viewport > div {
+  display: block !important;
+}
+
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -36,8 +36,8 @@
     "build": "tsup && node scripts/build-styles.mjs",
     "build-site": "pnpm build && vite build --config site/vite.config.ts",
     "build-storybook": "storybook build",
+    "build:company-facts": "tsx scripts/build-company-facts.mts",
     "build:current-emails": "tsx scripts/build-current-emails.mts",
-    "build:email-logo": "tsx scripts/build-email-logo.mts",
     "changeset": "changeset",
     "dev-css-stale": "node scripts/dev-css-stale.mjs",
     "dev-site": "vite --config site/vite.config.ts",
@@ -115,7 +115,6 @@
     "@eslint/js": "^9.39.5",
     "@react-email/components": "^0.5.6",
     "@react-email/render": "^1.3.2",
-    "@resvg/resvg-js": "^2.6.2",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "8.6.18",
     "@storybook/react": "^8.6.18",