@lessly/ui 1.3.0 → 1.5.0

package/README.md

@@ -6,7 +6,8 @@ Module Federation host provides to federation extension remotes at runtime, and
 it is published to the public npm registry (npmjs.com).
 
 > **Contract:** the package name (`@lessly/ui`), its exports (`.`,
-> `./tailwind-preset`, `./styles.css`), and its peer dependencies (React 19,
+> `./tailwind-preset`, `./styles.css`, `./styles-federated.css`), and its peer
+> dependencies (React 19,
 > react-router 7, optional `tailwindcss >=3.4`) are a cross-project contract. Do
 > not change them without coordinating the workspace host and every federation
 > remote.
@@ -24,7 +25,10 @@ it is published to the public npm registry (npmjs.com).
   upstream in `lessly-hub/design-system`) with `darkMode: 'class'` added, and
   `styles.css` bundles the package's `theme.css` (CSS variables, `.light`
   overrides, typography classes) plus this library's fonts and base layer.
-  Token values are never edited here — they change by bumping `@lessly/tokens`.
+  `styles-federated.css` is the same sheet without the `@font-face` rules and
+  the `@layer base` block, for remotes that must not restyle the page they load
+  into. Token values are never edited here — they change by bumping
+  `@lessly/tokens`.
 
 ## Install
 
@@ -42,9 +46,46 @@ import { Button, useTheme } from '@lessly/ui';
 import '@lessly/ui/styles.css';
 ```
 
-Your app's Tailwind config must use the preset so token utilities resolve. The
-preset needs Tailwind CSS >= 3.4 (declared as an optional peer dependency —
-only required if you consume the preset):
+Tailwind is what turns the kit's class names into CSS. The package ships **no
+compiled utility CSS** — every consumer runs its own Tailwind over the token
+preset (`tailwindcss >= 3.4`, an optional peer dependency, required only if you
+consume the preset).
+
+### Tailwind v4 (CSS-first)
+
+Everything is declared in your CSS entry:
+
+```css
+@import 'tailwindcss';
+/* The token preset. v4 has no `presets:` key of its own, so the preset is
+   loaded from a JS/TS config file — without this, `bg-bg-surface`,
+   `text-text-primary` and `gap-gutter` emit nothing at all. */
+@config './tailwind.config.ts';
+/* Token variables, `.light` overrides, fonts, base layer. */
+@import '@lessly/ui/styles.css';
+/* Scan the library. v4 does not scan `node_modules` on its own, and the kit's
+   components (Grid, Col, …) carry literal utilities (`md:col-span-5`,
+   `gap-gutter`) as strings inside `dist/index.js`. The glob matters: a bare
+   directory path is skipped, because Tailwind honours your `.gitignore` and
+   `node_modules/` is in it. */
+@source './node_modules/@lessly/ui/dist/**/*.js';
+```
+
+with the config file next to it holding nothing but the preset:
+
+```ts
+import type { Config } from 'tailwindcss';
+import { lesslyPreset } from '@lessly/ui/tailwind-preset';
+export default { presets: [lesslyPreset] } satisfies Config;
+```
+
+Paths in `@source` and `@config` are relative to the CSS file. If your CSS entry
+sits in `src/`, they read `'../tailwind.config.ts'` and
+`'../node_modules/@lessly/ui/dist/**/*.js'`.
+
+### Tailwind v3
+
+The preset and the library scan both go in the JS config:
 
 ```ts
 import { lesslyPreset } from '@lessly/ui/tailwind-preset';
@@ -61,6 +102,21 @@ CSS variables use the upstream unprefixed names (`--bg-primary`,
 deprecated alias layer in `styles.css` and will be removed in the next major —
 migrate any direct `var(--color-*)` reads.
 
+### Federated remotes
+
+A Module Federation remote loads its CSS after the shell has painted, so it must
+not restyle the live page: `@font-face` rules and a `@layer base` body rule
+re-applied on top of a rendered page shift font metrics on every cold load.
+Import the federation-safe sheet instead — same tokens, aliases, ui variables
+and animation layer, without those two blocks:
+
+```ts
+import '@lessly/ui/styles-federated.css';
+```
+
+The shell keeps importing `@lessly/ui/styles.css`; it owns the fonts and the
+base layer.
+
 ## Storybook
 
 ```bash
@@ -86,7 +142,7 @@ npm package published to npmjs always contains the package, never the site or St
 
 | Script | Description |
 | --- | --- |
-| `pnpm build` | tsup package build → `dist/` (+ assembles `styles.css` from the @lessly/tokens theme, deprecated `--color-*` aliases, ui-local pieces, and the animation layer) — the npm package published to npmjs |
+| `pnpm build` | tsup package build → `dist/` (+ assembles `styles.css` from the @lessly/tokens theme, deprecated `--color-*` aliases, ui-local pieces, and the animation layer, and the federation-safe `styles-federated.css` beside it) — the npm package published to npmjs |
 | `pnpm build-storybook` | Storybook static site → `storybook-static/` — served at `ui.lessly.com/storybook` by `site/server.mjs` |
 | `pnpm build-site` | Landing app (`site/`) → `site/dist/` — served at `ui.lessly.com/` by `site/server.mjs` |
 | `pnpm storybook` | Storybook dev server on `http://localhost:6006` |

package/dist/index.d.ts

@@ -128,6 +128,11 @@ interface CardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'
      * action no bar is drawn at all, so a list starts at the top of the card.
      */
     title?: React$1.ReactNode;
+    /**
+     * The native HTML tooltip on the card's box, shown by the browser on hover. `title` is the
+     * visible heading here, so this is the only way to set the attribute.
+     */
+    tooltip?: string;
     action?: React$1.ReactNode;
     /**
      * `list` clips to the card's radius and hairlines between children.

package/dist/index.js

@@ -204,10 +204,11 @@ Button.displayName = "Button";
 import * as React3 from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Card = React3.forwardRef(
-  ({ className, title, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  ({ className, title, tooltip, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
     "div",
     {
       ref,
+      title: tooltip,
       className: cn(
         "rounded-xl border border-border-subtle bg-bg-surface text-text-primary shadow-sm",
         variant === "list" && "overflow-hidden",
@@ -3886,21 +3887,21 @@ var ImageCropper = React57.forwardRef(
     React57.useLayoutEffect(() => {
       const el = stageRef.current;
       if (!el) return void 0;
-      const read = () => {
-        const rect = el.getBoundingClientRect();
+      const read = (entry) => {
         const style = typeof getComputedStyle === "function" ? getComputedStyle(el) : null;
         const edge = (value) => value ? parseFloat(value) || 0 : 0;
         const bl = edge(style?.borderLeftWidth);
         const bt = edge(style?.borderTopWidth);
         inset.current = { left: bl, top: bt };
-        const w = rect.width - bl - edge(style?.borderRightWidth);
-        const h = rect.height - bt - edge(style?.borderBottomWidth);
+        const border = entry?.borderBoxSize?.[0];
+        const w = border ? border.inlineSize - bl - edge(style?.borderRightWidth) : el.clientWidth;
+        const h = border ? border.blockSize - bt - edge(style?.borderBottomWidth) : el.clientHeight;
         if (w <= 0 || h <= 0) return;
         setStage((prev) => prev.w === w && prev.h === h ? prev : { w, h });
       };
       read();
       if (typeof ResizeObserver === "undefined") return void 0;
-      const observer = new ResizeObserver(read);
+      const observer = new ResizeObserver((entries) => read(entries[0]));
       observer.observe(el);
       return () => observer.disconnect();
     }, []);
@@ -5107,13 +5108,13 @@ function ItemLabel({ item, kind }) {
   const name = nameOf(item);
   return /* @__PURE__ */ jsx85("span", { className: cn("min-w-0 flex-1 truncate", !name && "text-text-tertiary"), children: name ?? UNNAMED[kind] });
 }
-function Mark2({ item, size }) {
+function Mark2({ item, size, reserve }) {
   const box = size === "md" ? "size-7" : "size-5";
   if (item.icon) {
     return /* @__PURE__ */ jsx85("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-md", box), "aria-hidden": "true", children: item.icon });
   }
   const initial = nameOf(item)?.trim().charAt(0).toUpperCase();
-  if (!initial) return null;
+  if (!initial) return reserve ? /* @__PURE__ */ jsx85("span", { "aria-hidden": "true", className: cn("shrink-0", box) }) : null;
   return /* @__PURE__ */ jsx85(
     "span",
     {
@@ -5172,7 +5173,7 @@ function OrgProductSwitcher({
         children: [
           /* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: "Organizations" }),
           organizations.map((o) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
-            /* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm" }),
+            /* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm", reserve: true }),
             /* @__PURE__ */ jsx85(ItemLabel, { item: o, kind: "organization" }),
             o.id === activeOrgId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
           ] }, o.id)),
@@ -5180,7 +5181,7 @@ function OrgProductSwitcher({
             /* @__PURE__ */ jsx85(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
             /* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: orgName ? `${orgName} \xB7 Products` : "Products" }),
             products.map((p) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect?.(p.id), children: [
-              /* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm" }),
+              /* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm", reserve: true }),
               /* @__PURE__ */ jsx85(ItemLabel, { item: p, kind: "product" }),
               p.id === activeProductId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
             ] }, p.id))

package/dist/styles-federated.css

@@ -0,0 +1,937 @@
+/* === @lessly/ui styles, federation-safe — generated by scripts/build-styles.mjs === */
+/* dist/styles.css without its font declarations and its base layer: a Module
+   Federation remote loads after the shell has painted and must not restyle the
+   live page (FED-008). Everything else is identical. */
+
+/*
+ * Auto-generated by tokens/build.js — do not edit manually.
+ * Source of truth: tokens/primitives.json + tokens/semantic.json.
+ * Run: node tokens/build.js
+ *
+ * Dark is the default theme (:root). Light activates via a `light` class
+ * on a parent element (usually <html> or <body>).
+ */
+
+:root {
+  --bg-primary: #191b24;
+  --bg-secondary: #12141b;
+  --bg-surface: #1f222d;
+  --bg-elevated: #252936;
+  --bg-overlay: #252936;
+  --bg-sunken: #0e1015;
+  --bg-selected: #1f222d;
+  --bg-brand: #06297d;
+  --bg-brand-subtle: #1f2541;
+  --bg-brand-hover: #08349b;
+  --bg-brand-bright: #165ff2;
+  --bg-brand-bright-hover: #3d7af4;
+  --bg-success: #13703c;
+  --bg-success-bright: #21be63;
+  --bg-success-subtle: #0a1911;
+  --bg-warning: #b3780e;
+  --bg-warning-subtle: #1a1508;
+  --bg-danger: #78100b;
+  --bg-danger-subtle: #1a0a09;
+  --bg-teal-subtle: #091918;
+  --bg-violet-subtle: #12091a;
+  --bg-rose-subtle: #1a090b;
+  --text-primary: #eeeff0;
+  --text-secondary: #a5a9b5;
+  --text-tertiary: #8a93a8;
+  --text-disabled: #60687f;
+  --text-inverse: #0e1015;
+  --text-on-brand: #f6f7f7;
+  --text-on-success: #f6f7f7;
+  --text-on-success-bright: #08090c;
+  --text-on-warning: #08090c;
+  --text-on-danger: #f6f7f7;
+  --text-brand: #6394f6;
+  --text-success: #2eda76;
+  --text-warning: #efb042;
+  --text-danger: #f06a6a;
+  --text-link: #6394f6;
+  --text-link-hover: #a3b7e0;
+  --text-teal: #70eada;
+  --text-violet: #ad6cee;
+  --text-rose: #f06a85;
+  --icon-primary: #cfd1d7;
+  --icon-secondary: #737c95;
+  --icon-disabled: #393d4b;
+  --icon-brand: #6394f6;
+  --icon-success: #2eda76;
+  --icon-warning: #efb042;
+  --icon-danger: #f06a6a;
+  --border-subtle: #2a2e3b;
+  --border-default: #535a6e;
+  --border-strong: #8a91a7;
+  --border-selected: #737c95;
+  --border-brand: #165ff2;
+  --border-focus: #3d7af4;
+  --border-success: #1da456;
+  --border-warning: #b3780e;
+  --border-danger: #e82020;
+  --field-bg: #0e1015;
+  --field-bg-hover: #12141b;
+  --field-bg-focus: #0e1015;
+  --field-bg-valid: #191b24;
+  --field-border: #60687f;
+  --field-border-hover: #737c95;
+  --field-border-focus: #3d7af4;
+  --field-border-filled: #737c95;
+  --field-border-error: #e82020;
+  --field-border-success: #188a49;
+  --field-ring-focus: rgba(61,122,244,0.25);
+  --field-ring-error: rgba(232,32,32,0.2);
+  --field-ring-success: rgba(24,138,73,0.15);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-md: 0 0 0 1px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
+  --shadow-xl: 0 0 0 1px rgba(255,255,255,0.18), 0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
+  --shadow-overlay: 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.5);
+  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.4);
+  --shadow-glow-brand: 0 0 12px rgba(6,41,125,0.5);
+  --overlay-backdrop: rgba(8,9,12,0.80);
+  --overlay-scrim: rgba(8,9,12,0.60);
+  --overlay-modal-bg: #1f222d;
+  --focus-ring-color: #3d7af4;
+  --focus-ring-offset: 2px;
+  --focus-ring-width: 2px;
+  --grid-gutter: 16px;
+  --grid-margin-sm: 16px;
+  --grid-margin-md: 24px;
+  --grid-margin-xl: 40px;
+  --grid-container-max: 1440px;
+
+  /* typography text-styles — theme-invariant, :root only (see typographyVars in build.js) */
+  --text-display-xl-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-xl-font-size: 3.5rem;
+  --text-display-xl-line-height: 1.05;
+  --text-display-xl-font-weight: 400;
+  --text-display-xl-letter-spacing: -0.02em;
+  --text-display-lg-font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  --text-display-lg-font-size: 3rem;
+  --text-display-lg-line-height: 1.1;
+  --text-display-lg-font-weight: 400;
+  --text-display-lg-letter-spacing: -0.02em;
+  --text-h1-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h1-font-size: 2.4375rem;
+  --text-h1-line-height: 1.15;
+  --text-h1-font-weight: 800;
+  --text-h1-letter-spacing: -0.025em;
+  --text-h2-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h2-font-size: 2.0625rem;
+  --text-h2-line-height: 1.2;
+  --text-h2-font-weight: 800;
+  --text-h2-letter-spacing: -0.02em;
+  --text-h3-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h3-font-size: 1.6875rem;
+  --text-h3-line-height: 1.25;
+  --text-h3-font-weight: 800;
+  --text-h3-letter-spacing: -0.015em;
+  --text-h4-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h4-font-size: 1.4375rem;
+  --text-h4-line-height: 1.3;
+  --text-h4-font-weight: 800;
+  --text-h4-letter-spacing: -0.01em;
+  --text-h5-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h5-font-size: 1.1875rem;
+  --text-h5-line-height: 1.35;
+  --text-h5-font-weight: 800;
+  --text-h5-letter-spacing: -0.005em;
+  --text-h6-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-h6-font-size: 1rem;
+  --text-h6-line-height: 1.4;
+  --text-h6-font-weight: 800;
+  --text-h6-letter-spacing: 0;
+  --text-body-lg-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-body-lg-font-size: 1.125rem;
+  --text-body-lg-line-height: 1.6;
+  --text-body-lg-font-weight: 400;
+  --text-body-lg-letter-spacing: 0;
+  --text-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-body-font-size: 1rem;
+  --text-body-line-height: 1.6;
+  --text-body-font-weight: 400;
+  --text-body-letter-spacing: 0;
+  --text-body-sm-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-body-sm-font-size: 0.875rem;
+  --text-body-sm-line-height: 1.5;
+  --text-body-sm-font-weight: 400;
+  --text-body-sm-letter-spacing: 0;
+  --text-caption-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-caption-font-size: 0.75rem;
+  --text-caption-line-height: 1.4;
+  --text-caption-font-weight: 400;
+  --text-caption-letter-spacing: 0;
+  --text-overline-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-overline-font-size: 0.6875rem;
+  --text-overline-line-height: 1.4;
+  --text-overline-font-weight: 600;
+  --text-overline-letter-spacing: 0.06em;
+  --text-overline-text-transform: uppercase;
+  --text-label-lg-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-label-lg-font-size: 1rem;
+  --text-label-lg-line-height: 1.4;
+  --text-label-lg-font-weight: 500;
+  --text-label-lg-letter-spacing: 0;
+  --text-label-md-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-label-md-font-size: 0.875rem;
+  --text-label-md-line-height: 1.4;
+  --text-label-md-font-weight: 500;
+  --text-label-md-letter-spacing: 0;
+  --text-label-sm-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-label-sm-font-size: 0.75rem;
+  --text-label-sm-line-height: 1.4;
+  --text-label-sm-font-weight: 500;
+  --text-label-sm-letter-spacing: 0;
+  --text-button-lg-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-button-lg-font-size: 1rem;
+  --text-button-lg-line-height: 1;
+  --text-button-lg-font-weight: 600;
+  --text-button-lg-letter-spacing: 0;
+  --text-button-md-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-button-md-font-size: 0.8125rem;
+  --text-button-md-line-height: 1;
+  --text-button-md-font-weight: 600;
+  --text-button-md-letter-spacing: 0;
+  --text-button-sm-font-family: "Inter", system-ui, -apple-system, sans-serif;
+  --text-button-sm-font-size: 0.6875rem;
+  --text-button-sm-line-height: 1;
+  --text-button-sm-font-weight: 600;
+  --text-button-sm-letter-spacing: 0;
+  --text-code-lg-font-family: "Fira Mono", "Fira Code", "Cascadia Code", monospace;
+  --text-code-lg-font-size: 1rem;
+  --text-code-lg-line-height: 1.6;
+  --text-code-lg-font-weight: 400;
+  --text-code-lg-letter-spacing: 0;
+  --text-code-font-family: "Fira Mono", "Fira Code", "Cascadia Code", monospace;
+  --text-code-font-size: 0.875rem;
+  --text-code-line-height: 1.5;
+  --text-code-font-weight: 400;
+  --text-code-letter-spacing: 0;
+  --text-code-sm-font-family: "Fira Mono", "Fira Code", "Cascadia Code", monospace;
+  --text-code-sm-font-size: 0.75rem;
+  --text-code-sm-line-height: 1.4;
+  --text-code-sm-font-weight: 400;
+  --text-code-sm-letter-spacing: 0;
+
+  /* layout — large dimensions (160–384px) for section spacing, theme-invariant (see layoutVars in build.js) */
+  --layout-40: 160px;
+  --layout-48: 192px;
+  --layout-56: 224px;
+  --layout-64: 256px;
+  --layout-80: 320px;
+  --layout-96: 384px;
+
+  /* motion — primitive + semantic duration/easing, theme-invariant (see motionVars in build.js) */
+  --motion-duration-instant: 0ms;
+  --motion-duration-fast: 100ms;
+  --motion-duration-normal: 200ms;
+  --motion-duration-slow: 300ms;
+  --motion-duration-slower: 500ms;
+  --motion-duration-slowest: 800ms;
+  --motion-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --motion-easing-in: cubic-bezier(0.42, 0, 1, 1);
+  --motion-easing-out: cubic-bezier(0, 0, 0.58, 1);
+  --motion-easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
+  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --motion-duration-ui: 100ms;
+  --motion-duration-collapse: 100ms;
+  --motion-duration-slide: 200ms;
+  --motion-duration-overlay: 300ms;
+  --motion-duration-toast: 300ms;
+  --motion-easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --motion-easing-enter: cubic-bezier(0, 0, 0.58, 1);
+  --motion-easing-exit: cubic-bezier(0.42, 0, 1, 1);
+  --motion-easing-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* shadcn/ui role bridge — aliases to the Lessly tokens above (see SHADCN_BRIDGE
+     in build.js). Re-declared under .light below so a nested .light re-themes too. */
+  --background: var(--bg-primary);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-overlay);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--bg-brand-bright);
+  --primary-foreground: var(--text-on-brand);
+  --secondary: var(--bg-elevated);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-sunken);
+  --muted-foreground: var(--text-tertiary);
+  --accent: var(--bg-elevated);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--bg-danger);
+  --destructive-foreground: var(--text-on-danger);
+  --border: var(--border-default);
+  --input: var(--field-border);
+  --ring: var(--focus-ring-color);
+  --success: var(--bg-success);
+  --success-foreground: var(--text-on-success);
+  --warning: var(--bg-warning);
+  --warning-foreground: var(--text-on-warning);
+  --link: var(--text-link);
+  --link-hover: var(--text-link-hover);
+  --inverted-foreground: var(--bg-brand);
+}
+
+.light {
+  --bg-primary: #f6f7f7;
+  --bg-secondary: #eeeff0;
+  --bg-surface: #f2f3f4;
+  --bg-elevated: #edeef0;
+  --bg-overlay: #ffffff;
+  --bg-sunken: #e1e2e4;
+  --bg-selected: #f2f3f4;
+  --bg-brand-subtle: #e4ecfe;
+  --bg-brand-hover: #05226a;
+  --bg-brand-bright-hover: #0b4cd5;
+  --bg-success-subtle: #ebf3ef;
+  --bg-warning: #eca01c;
+  --bg-warning-subtle: #f4f0eb;
+  --bg-danger-subtle: #f4ebeb;
+  --bg-teal-subtle: #ebf3f2;
+  --bg-violet-subtle: #efebf3;
+  --bg-rose-subtle: #f4ebed;
+  --text-primary: #0e1015;
+  --text-secondary: #393d4b;
+  --text-tertiary: #535a6e;
+  --text-disabled: #737c95;
+  --text-inverse: #f6f7f7;
+  --text-brand: #0b4cd5;
+  --text-success: #13703c;
+  --text-warning: #7a5409;
+  --text-danger: #94120e;
+  --text-link: #0940b8;
+  --text-link-hover: #0b4cd5;
+  --text-teal: #107469;
+  --text-violet: #450d77;
+  --text-rose: #780b1f;
+  --icon-primary: #252936;
+  --icon-secondary: #535a6e;
+  --icon-disabled: #8a91a7;
+  --icon-brand: #165ff2;
+  --icon-success: #13703c;
+  --icon-warning: #7a5409;
+  --icon-danger: #94120e;
+  --border-subtle: #cfd1d7;
+  --border-default: #bbbec7;
+  --border-strong: #60687f;
+  --border-focus: #0940b8;
+  --border-success: #188a49;
+  --field-bg: #ffffff;
+  --field-bg-hover: #f6f7f7;
+  --field-bg-focus: #ffffff;
+  --field-bg-valid: #eeeff0;
+  --field-border: #a5a9b5;
+  --field-border-focus: #165ff2;
+  --field-border-success: #13703c;
+  --field-ring-focus: rgba(22,95,242,0.15);
+  --field-ring-error: rgba(232,32,32,0.12);
+  --field-ring-success: rgba(19,112,60,0.1);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-overlay: 0 12px 32px rgba(16,24,40,0.1), 0 2px 8px rgba(16,24,40,0.06);
+  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.08);
+  --shadow-glow-brand: 0 0 12px rgba(6,41,125,0.2);
+  --overlay-backdrop: rgba(14,16,21,0.50);
+  --overlay-scrim: rgba(14,16,21,0.30);
+  --overlay-modal-bg: #ffffff;
+  --focus-ring-color: #0940b8;
+
+  /* shadcn role bridge re-declared so .light on a nested element (not just <html>)
+     re-resolves the aliases to light values. */
+  --background: var(--bg-primary);
+  --foreground: var(--text-primary);
+  --card: var(--bg-surface);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-overlay);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--bg-brand-bright);
+  --primary-foreground: var(--text-on-brand);
+  --secondary: var(--bg-elevated);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-sunken);
+  --muted-foreground: var(--text-tertiary);
+  --accent: var(--bg-elevated);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--bg-danger);
+  --destructive-foreground: var(--text-on-danger);
+  --border: var(--border-default);
+  --input: var(--field-border);
+  --ring: var(--focus-ring-color);
+  --success: var(--bg-success);
+  --success-foreground: var(--text-on-success);
+  --warning: var(--bg-warning);
+  --warning-foreground: var(--text-on-warning);
+  --link: var(--text-link);
+  --link-hover: var(--text-link-hover);
+  --inverted-foreground: var(--bg-brand);
+}
+
+/* Link utility — the composite .text-<style> classes generated here are stripped by scripts/build-styles.mjs; their --text-* variables above are untouched. */
+.link {
+  color: var(--text-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.link:hover {
+  color: var(--text-link-hover);
+}
+
+/* Reduced motion — collapse every motion variable to instant/linear (see reducedMotionBlock in build.js). */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant: 0ms;
+    --motion-duration-fast: 0ms;
+    --motion-duration-normal: 0ms;
+    --motion-duration-slow: 0ms;
+    --motion-duration-slower: 0ms;
+    --motion-duration-slowest: 0ms;
+    --motion-duration-ui: 0ms;
+    --motion-duration-collapse: 0ms;
+    --motion-duration-slide: 0ms;
+    --motion-duration-overlay: 0ms;
+    --motion-duration-toast: 0ms;
+    --motion-easing-default: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-in: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-out: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-in-out: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-spring: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-standard: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-enter: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-exit: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-emphasized: cubic-bezier(0, 0, 1, 1);
+  }
+}
+
+/* === Deprecated aliases — remove in the next major ===
+   Old vendored `--color-*` names mapped onto the @lessly/tokens variables above.
+   Generated by scripts/build-styles.mjs — do not edit. */
+:root {
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-sunken: var(--bg-sunken);
+  --color-bg-brand: var(--bg-brand);
+  --color-bg-brand-subtle: var(--bg-brand-subtle);
+  --color-bg-brand-hover: var(--bg-brand-hover);
+  --color-bg-brand-bright: var(--bg-brand-bright);
+  --color-bg-success: var(--bg-success);
+  --color-bg-success-subtle: var(--bg-success-subtle);
+  --color-bg-warning: var(--bg-warning);
+  --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-danger: var(--bg-danger);
+  --color-bg-danger-subtle: var(--bg-danger-subtle);
+  --color-bg-teal-subtle: var(--bg-teal-subtle);
+  --color-bg-violet-subtle: var(--bg-violet-subtle);
+  --color-bg-rose-subtle: var(--bg-rose-subtle);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-disabled);
+  --color-text-inverse: var(--text-inverse);
+  --color-text-on-brand: var(--text-on-brand);
+  --color-text-on-success: var(--text-on-success);
+  --color-text-on-warning: var(--text-on-warning);
+  --color-text-on-danger: var(--text-on-danger);
+  --color-text-brand: var(--text-brand);
+  --color-text-success: var(--text-success);
+  --color-text-warning: var(--text-warning);
+  --color-text-danger: var(--text-danger);
+  --color-text-link: var(--text-link);
+  --color-text-link-hover: var(--text-link-hover);
+  --color-text-teal: var(--text-teal);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-icon-brand: var(--icon-brand);
+  --color-icon-success: var(--icon-success);
+  --color-icon-warning: var(--icon-warning);
+  --color-icon-danger: var(--icon-danger);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-border-brand: var(--border-brand);
+  --color-border-focus: var(--border-focus);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-danger: var(--border-danger);
+}
+
+.light {
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-elevated: var(--bg-elevated);
+  --color-bg-sunken: var(--bg-sunken);
+  --color-bg-brand-subtle: var(--bg-brand-subtle);
+  --color-bg-brand-hover: var(--bg-brand-hover);
+  --color-bg-success-subtle: var(--bg-success-subtle);
+  --color-bg-warning: var(--bg-warning);
+  --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-danger-subtle: var(--bg-danger-subtle);
+  --color-bg-teal-subtle: var(--bg-teal-subtle);
+  --color-bg-violet-subtle: var(--bg-violet-subtle);
+  --color-bg-rose-subtle: var(--bg-rose-subtle);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-disabled);
+  --color-text-inverse: var(--text-inverse);
+  --color-text-brand: var(--text-brand);
+  --color-text-success: var(--text-success);
+  --color-text-warning: var(--text-warning);
+  --color-text-danger: var(--text-danger);
+  --color-text-link: var(--text-link);
+  --color-text-link-hover: var(--text-link-hover);
+  --color-text-teal: var(--text-teal);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-icon-brand: var(--icon-brand);
+  --color-icon-success: var(--icon-success);
+  --color-icon-warning: var(--icon-warning);
+  --color-icon-danger: var(--icon-danger);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-border-focus: var(--border-focus);
+  --color-border-success: var(--border-success);
+}
+
+/* === Fonts === */
+
+
+
+
+
+
+
+
+/* === Theme Variables === */
+/* The token palettes (colors, typography, motion, shadows, grid) live in
+   @lessly/tokens/theme.css — dark `:root` + `.light`, unprefixed names
+   (--bg-primary, --text-primary, ...). scripts/build-styles.mjs prepends that
+   file plus a generated layer of deprecated `--color-*` aliases to
+   dist/styles.css; only ui-specific pieces are declared here. */
+
+/* Tailwind v4 scalar spacing unit. The Lessly preset overrides theme.spacing with a
+   fixed keyed scale, which suppresses Tailwind's own --spacing var; tw-animate-css
+   slide-in-from-*/slide-out-to-* offsets compute calc(N * var(--spacing)), so without
+   this they collapse to 0. :where() keeps zero specificity — a consumer that sets its
+   own --spacing always wins over this fallback. */
+:where(:root) {
+  --spacing: 0.25rem;
+}
+:root {
+  /* === Nav / menu surfaces (0.3.0 sidebar) === */
+  /* The floating surface sits on the package's overlay pair: --menu-bg on
+     --bg-overlay, --menu-shadow on --shadow-overlay. theme.css re-resolves both
+     per theme, so `.light` needs no override for either. */
+  --hov-bg: color-mix(in srgb, var(--text-primary) 7%, transparent);
+  --menu-bg: var(--bg-overlay);
+  --menu-shadow: var(--shadow-overlay);
+  --menu-hov: var(--hov-bg);
+
+  /* === Auth / login-window surface (onboarding screens) ===
+     Dark and light are deliberately DIFFERENT treatments, not inverts: dark leans on
+     a border hairline + deep glow ground (no shadow), light drops the border and floats
+     the card on an elevation shadow. The glow layers can't be one token pair either —
+     dark pools --bg-brand, light washes --bg-brand-subtle — so both live per theme
+     rather than as a color-mix over a single token. */
+  --auth-glow-a: rgba(99, 148, 246, 0.1);
+  --auth-glow-b: rgba(6, 41, 125, 0.42);
+  --auth-card-border: var(--border-subtle);
+  --auth-card-shadow: none;
+  --auth-btn-shadow: none;
+}
+
+.light {
+  /* Light keeps opaque hover plates: a translucent text-mix would vanish on a
+     white menu. Pinned 0.3.0-prototype literals — the package has no hover-surface
+     roles yet, so these can't move onto tokens the way --menu-bg did. */
+  --hov-bg: #ffffff;
+  --menu-hov: #f2f4f7;
+
+  /* Auth screen — see :root above. */
+  --auth-glow-a: rgba(11, 76, 213, 0.09);
+  --auth-glow-b: rgba(228, 236, 254, 0.85);
+  --auth-card-border: transparent;
+  --auth-card-shadow: var(--shadow-lg);
+  --auth-btn-shadow: var(--shadow-md);
+}
+
+/* === Base === */
+
+
+/* === Motion === */
+/* Backs the <AutoHeight> primitive: eases a container's height as its content changes size.
+   Motion-token driven, so it inherits reduce-motion (the vars resolve to 0ms). A real class rather
+   than a Tailwind arbitrary utility, which the content scanner can drop for a newly-used class.
+   Overflow is NOT clipped here — the component clips only while the height is animating (so the
+   settled box doesn't slice focus rings or tooltips on full-width children). */
+.motion-auto-height {
+  transition-property: height;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+/* Backs ToggleGroup's `sliding` mark: one thumb that travels between equal-width slots instead of a
+   fill appearing on each. A real class for the same reason as the one above, and `slide` because the
+   thumb crosses the width of a slot — `ui`, the hover/focus tint step, would clip it to near a snap.
+   `standard` because it is on screen before and after and only moves in place. */
+.motion-segment-thumb {
+  transition-property: transform;
+  transition-duration: var(--motion-duration-slide);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+/* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+.slide-in-from-left-2 {
+  --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+}
+.slide-in-from-top-2 {
+  --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+}
+.data-\[motion\=from-end\]\:slide-in-from-right-52 {
+  &[data-motion="from-end"] {
+    --tw-enter-translate-x: calc(52*var(--spacing));
+  }
+}
+.data-\[motion\=from-start\]\:slide-in-from-left-52 {
+  &[data-motion="from-start"] {
+    --tw-enter-translate-x: calc(52*var(--spacing)*-1);
+  }
+}
+.data-\[motion\=to-end\]\:slide-out-to-right-52 {
+  &[data-motion="to-end"] {
+    --tw-exit-translate-x: calc(52*var(--spacing));
+  }
+}
+.data-\[motion\=to-start\]\:slide-out-to-left-52 {
+  &[data-motion="to-start"] {
+    --tw-exit-translate-x: calc(52*var(--spacing)*-1);
+  }
+}
+.data-\[motion\^\=from-\]\:animate-in {
+  &[data-motion^="from-"] {
+    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);
+  }
+}
+.data-\[motion\^\=from-\]\:fade-in {
+  &[data-motion^="from-"] {
+    --tw-enter-opacity: 0;
+  }
+}
+.data-\[motion\^\=to-\]\:animate-out {
+  &[data-motion^="to-"] {
+    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);
+  }
+}
+.data-\[motion\^\=to-\]\:fade-out {
+  &[data-motion^="to-"] {
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2 {
+  &[data-side="bottom"] {
+    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+  }
+}
+.data-\[side\=left\]\:slide-in-from-right-2 {
+  &[data-side="left"] {
+    --tw-enter-translate-x: calc(2*var(--spacing));
+  }
+}
+.data-\[side\=right\]\:slide-in-from-left-2 {
+  &[data-side="right"] {
+    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+  }
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2 {
+  &[data-side="top"] {
+    --tw-enter-translate-y: calc(2*var(--spacing));
+  }
+}
+.data-\[state\=closed\]\:animate-accordion-up {
+  &[data-state="closed"] {
+    animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=closed\]\:animate-collapsible-up {
+  &[data-state="closed"] {
+    animation: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=closed\]\:animate-out {
+  &[data-state="closed"] {
+    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);
+  }
+}
+.data-\[state\=closed\]\:fade-out-0 {
+  &[data-state="closed"] {
+    --tw-exit-opacity: calc(0/100);
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[state\=closed\]\:zoom-out-95 {
+  &[data-state="closed"] {
+    --tw-exit-scale: calc(95*1%);
+    --tw-exit-scale: .95;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-bottom {
+  &[data-state="closed"] {
+    --tw-exit-translate-y: 100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-left {
+  &[data-state="closed"] {
+    --tw-exit-translate-x: -100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-right {
+  &[data-state="closed"] {
+    --tw-exit-translate-x: 100%;
+  }
+}
+.data-\[state\=closed\]\:slide-out-to-top {
+  &[data-state="closed"] {
+    --tw-exit-translate-y: -100%;
+  }
+}
+.data-\[state\=hidden\]\:animate-out {
+  &[data-state="hidden"] {
+    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);
+  }
+}
+.data-\[state\=hidden\]\:fade-out {
+  &[data-state="hidden"] {
+    --tw-exit-opacity: 0;
+  }
+}
+.data-\[state\=open\]\:animate-accordion-down {
+  &[data-state="open"] {
+    animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=open\]\:animate-collapsible-down {
+  &[data-state="open"] {
+    animation: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+  }
+}
+.data-\[state\=open\]\:animate-in {
+  &[data-state="open"] {
+    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);
+  }
+}
+.data-\[state\=open\]\:fade-in-0 {
+  &[data-state="open"] {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
+  }
+}
+.data-\[state\=open\]\:zoom-in-90 {
+  &[data-state="open"] {
+    --tw-enter-scale: calc(90*1%);
+    --tw-enter-scale: .9;
+  }
+}
+.data-\[state\=open\]\:zoom-in-95 {
+  &[data-state="open"] {
+    --tw-enter-scale: calc(95*1%);
+    --tw-enter-scale: .95;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-bottom {
+  &[data-state="open"] {
+    --tw-enter-translate-y: 100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-left {
+  &[data-state="open"] {
+    --tw-enter-translate-x: -100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-right {
+  &[data-state="open"] {
+    --tw-enter-translate-x: 100%;
+  }
+}
+.data-\[state\=open\]\:slide-in-from-top {
+  &[data-state="open"] {
+    --tw-enter-translate-y: -100%;
+  }
+}
+.data-\[state\=visible\]\:animate-in {
+  &[data-state="visible"] {
+    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);
+  }
+}
+.data-\[state\=visible\]\:fade-in {
+  &[data-state="visible"] {
+    --tw-enter-opacity: 0;
+  }
+}
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity,1);
+    transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
+    filter: blur(var(--tw-enter-blur,0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity,1);
+    transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));
+    filter: blur(var(--tw-exit-blur,0));
+  }
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))));
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))));
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+}
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));
+  }
+  to {
+    height: 0;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
+    }
+  }
+}

package/dist/styles.css

@@ -643,6 +643,12 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.slide-in-from-left-2 {
+  --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+}
+.slide-in-from-top-2 {
+  --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+}
 .data-\[motion\=from-end\]\:slide-in-from-right-52 {
   &[data-motion="from-end"] {
     --tw-enter-translate-x: calc(52*var(--spacing));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -19,7 +19,8 @@
       "types": "./dist/tailwind-preset.d.ts",
       "default": "./dist/tailwind-preset.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./styles-federated.css": "./dist/styles-federated.css"
   },
   "files": [
     "dist"