@lessly/ui 2.2.0 → 2.3.0

package/dist/router.js

@@ -13,7 +13,7 @@ import {
   cn,
   useIsMobile,
   useSidebar
-} from "./chunk-F5RMHSPS.js";
+} from "./chunk-CEXND5YW.js";
 
 // src/components/extension-link.tsx
 import { Link } from "react-router";
@@ -143,7 +143,7 @@ function AppSidebar({
       onClick: toggle,
       "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
       "aria-expanded": !collapsed,
-      className: "flex size-6 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+      className: "flex size-6 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: /* @__PURE__ */ jsx3(PanelLeft, { className: "size-4", "aria-hidden": "true" })
     }
   ) : null;
@@ -168,7 +168,7 @@ function AppSidebar({
               onClick: toggle,
               "aria-label": "Expand sidebar",
               "aria-expanded": false,
-              className: "flex size-8 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
               children: /* @__PURE__ */ jsx3(PanelLeft, { className: "size-4", "aria-hidden": "true" })
             }
           )

package/dist/styles-federated.css

@@ -604,6 +604,34 @@
   transition-timing-function: var(--motion-easing-standard);
 }
 
+/* Backs the `useFreshHighlight` hook: a freshly-created row gets a brief background wash that fades
+   back to the resting surface, so the eye lands on the thing you just made. The tint is driven by
+   --fresh-tint (default the amber wash — closest to GitHub's yellow flash, chosen over the
+   brand/teal alternatives) so a call site can swap it.
+
+   Reduced-motion: the hold is the animation-DELAY, a fixed 3.2s that the token layer never touches —
+   so even when prefers-reduced-motion zeroes --motion-duration-* the tint is still shown for the
+   full hold (backwards fill), then removed instantly instead of fading. The emphasis survives; only
+   the fade is motion. `both` paints the `from` tint during the delay and keeps `to` after.
+
+   That `to` is `background-color: transparent`, and `both` HOLDS it until the hook drops the class —
+   so an element carrying both the wash and a resting tone is painted transparent for the whole fade,
+   its tone flashing away and snapping back. The wash needs an inner layer with no background of its
+   own. */
+@keyframes lessly-fresh-flash {
+  from {
+    background-color: var(--fresh-tint, var(--bg-warning-subtle));
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+.is-fresh {
+  animation: lessly-fresh-flash var(--motion-duration-slowest, 800ms)
+    var(--motion-easing-exit, ease-out) 3200ms both;
+}
+
 /* === Layout === */
 /* Backs the <PageColumn> primitive: the reading column, capped and centred in the well. A real class
    rather than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used
@@ -616,6 +644,12 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.animate-in {
+  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+}
+.animate-out {
+  animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+}
 .slide-in-from-left-2 {
   --tw-enter-translate-x: calc(2*var(--spacing)*-1);
 }

package/dist/styles.css

@@ -651,6 +651,34 @@
   transition-timing-function: var(--motion-easing-standard);
 }
 
+/* Backs the `useFreshHighlight` hook: a freshly-created row gets a brief background wash that fades
+   back to the resting surface, so the eye lands on the thing you just made. The tint is driven by
+   --fresh-tint (default the amber wash — closest to GitHub's yellow flash, chosen over the
+   brand/teal alternatives) so a call site can swap it.
+
+   Reduced-motion: the hold is the animation-DELAY, a fixed 3.2s that the token layer never touches —
+   so even when prefers-reduced-motion zeroes --motion-duration-* the tint is still shown for the
+   full hold (backwards fill), then removed instantly instead of fading. The emphasis survives; only
+   the fade is motion. `both` paints the `from` tint during the delay and keeps `to` after.
+
+   That `to` is `background-color: transparent`, and `both` HOLDS it until the hook drops the class —
+   so an element carrying both the wash and a resting tone is painted transparent for the whole fade,
+   its tone flashing away and snapping back. The wash needs an inner layer with no background of its
+   own. */
+@keyframes lessly-fresh-flash {
+  from {
+    background-color: var(--fresh-tint, var(--bg-warning-subtle));
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+.is-fresh {
+  animation: lessly-fresh-flash var(--motion-duration-slowest, 800ms)
+    var(--motion-easing-exit, ease-out) 3200ms both;
+}
+
 /* === Layout === */
 /* Backs the <PageColumn> primitive: the reading column, capped and centred in the well. A real class
    rather than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used
@@ -663,6 +691,12 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.animate-in {
+  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+}
+.animate-out {
+  animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+}
 .slide-in-from-left-2 {
   --tw-enter-translate-x: calc(2*var(--spacing)*-1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",