@lessly/ui 4.1.1 → 5.0.0

package/dist/router.d.ts

@@ -68,16 +68,37 @@ interface SidebarNavProps {
 declare function SidebarNav({ items, collapsed, basePath, LinkComponent, isItemActive, className, }: SidebarNavProps): React.JSX.Element;
 
 interface AppSidebarProps {
-    items: NavItem[];
+    /** The rows in the middle, as links. Optional since #878: a rail whose middle is not a list of
+     *  links writes it as `children` instead. */
+    items?: NavItem[];
+    /** The middle, written by the caller — panes, disclosures, a back row, anything `NavItem` has no
+     *  field for. It stands exactly where the rows stand, and it owns its own scrolling: the box the
+     *  rail gives it holds the rail's own inset and does not scroll, so an `overflow-y-auto` region
+     *  inside it measures against the rail's own height instead of against a box the padding made
+     *  taller.
+     *
+     *  Like `railTop` it takes a function, for the same reason: the rail drives its own collapse, so
+     *  this is the only way a caller's node can read a state it has no other route to.
+     *
+     *  Passing this and `items` together is a caller error. This wins — a middle somebody wrote is
+     *  the more specific instruction, where a list may have arrived through a wrapper's spread — and
+     *  development says so out loud, because the alternative is rows that render nowhere in silence. */
+    children?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
     /** Expanded-slot mark/wordmark, rendered when `header` is absent. Also the narrow rail's fallback
      *  when `logoCollapsed` isn't given. */
     logo?: React.ReactNode;
-    /** Narrow-rail identity — a small mark, for the width where `header` has no room to be read.
-     *  Falls back to `logo`. */
+    /** The band's mark — a small one, standing on the glyph column at 32. It is drawn at both widths
+     *  and never fades: at the narrow width it is the whole of the identity, and at the wide one it is
+     *  the mark the node in `header` leads with. Falls back to `logo`. */
     logoCollapsed?: React.ReactNode;
     /** Identity slot above the rail — e.g. an <OrgProductSwitcher/> (#266). Falls back to `logo`.
-     *  Expanded-only: `logoCollapsed ?? logo` stands in it at the narrow width, because a switcher
-     *  clipped to the rail's own width reads as a tile with a severed word beside it. */
+     *  Expanded-only: it fades out at the narrow width, because a switcher clipped to the rail's own
+     *  width reads as a tile with a severed word beside it.
+     *
+     *  A node here draws no mark of its own. `logoCollapsed ?? logo` is the band's one mark and the
+     *  rail draws it at BOTH widths, so a second one stands 2px beside it, solid, in the same band.
+     *  `OrgProductSwitcher` yields its own with `mark="hold"`, which leaves its box and its words
+     *  exactly where they are. */
     header?: React.ReactNode;
     /** Top of the rail — e.g. a <QuickSearchRow/>. It sits between the header's rule and the rows,
      *  and it is pinned: outside the scroll region, so it holds one place while the rows below it
@@ -94,7 +115,7 @@ interface AppSidebarProps {
     isItemActive?: (item: NavItem, pathname: string) => boolean;
     className?: string;
 }
-declare function AppSidebar({ items, logo, logoCollapsed, header, railTop, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React.JSX.Element;
+declare function AppSidebar({ items, children, logo, logoCollapsed, header, railTop, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React.JSX.Element;
 
 interface AppShellProps {
     /** The sidebar, typically an <AppSidebar/>. Rendered in the desktop rail and, on mobile, inside a

package/dist/router.js

@@ -9,14 +9,17 @@ import {
   SheetDescription,
   SheetTitle,
   SheetTrigger,
+  SidebarDrawer,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   cn,
+  railToggleLabel,
   useIsMobile,
-  useSidebar
-} from "./chunk-LTHOLX7I.js";
+  useSidebar,
+  useSidebarDrawer
+} from "./chunk-OTYVKDP2.js";
 
 // src/components/extension-link.tsx
 import { Link } from "react-router";
@@ -99,19 +102,19 @@ function SidebarNav({
 }
 
 // src/components/app-sidebar.tsx
-import * as React from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SidebarDrawerContext = React.createContext(false);
-function SidebarDrawer({ children }) {
-  return /* @__PURE__ */ jsx3(SidebarDrawerContext.Provider, { value: true, children });
-}
 function Divider({ testId, className }) {
   return /* @__PURE__ */ jsx3("div", { "data-testid": testId, className: cn("h-px shrink-0 bg-border-subtle", className) });
 }
 var RAIL_WIDE = "w-[248px]";
 var RAIL_NARROW = "w-[64px]";
+var footTooltipOffset = (collapsed) => collapsed ? 16 : 4;
+function drawsNothing(node) {
+  return node == null || typeof node === "boolean" || node === "" || Array.isArray(node) && node.length === 0;
+}
 function AppSidebar({
   items,
+  children,
   logo,
   logoCollapsed,
   header,
@@ -124,7 +127,7 @@ function AppSidebar({
   isItemActive,
   className
 }) {
-  const drawer = React.useContext(SidebarDrawerContext);
+  const drawer = useSidebarDrawer();
   const { collapsed: railCollapsed, toggle } = useSidebar({
     collapsed: controlled,
     defaultCollapsed,
@@ -132,54 +135,135 @@ function AppSidebar({
   });
   const collapsed = drawer ? false : railCollapsed;
   const railTopNode = typeof railTop === "function" ? railTop(collapsed) : railTop;
-  return /* @__PURE__ */ jsx3(
-    "aside",
-    {
-      "data-collapsed": collapsed,
-      className: cn(
-        "flex h-full shrink-0 flex-col overflow-hidden motion-rail-collapse",
-        // A nav row drops its own label at the narrow width. What this fades is a label whatever
-        // stands in `railTop` keeps mounted at both — QuickSearchRow's, for one — so the closing
-        // edge slides over the words instead of cutting through them.
-        "[&_[data-slot=nav-row-label]]:transition-opacity [&_[data-slot=nav-row-label]]:duration-fast",
-        collapsed ? RAIL_NARROW : RAIL_WIDE,
-        collapsed && "[&_[data-slot=nav-row-label]]:opacity-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full shrink-0 flex-col", RAIL_WIDE), children: [
-        /* @__PURE__ */ jsx3("div", { className: cn("flex h-14 shrink-0 items-center gap-2", drawer ? "pl-3 pr-10" : "px-3"), children: collapsed ? /* @__PURE__ */ jsx3("div", { className: RAIL_COLUMN_BOX, children: logoCollapsed ?? logo }) : header ?? logo }),
-        /* @__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(
-          ScrollArea,
-          {
-            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 })
-          }
+  const separateMark = header != null || logoCollapsed != null;
+  const asked = typeof children === "function" ? children(collapsed) : children;
+  const written = drawsNothing(asked) ? null : asked;
+  if (process.env.NODE_ENV !== "production" && written !== null && items != null) {
+    console.warn(
+      "[AppSidebar] `children` and `items` are two middles and only one is drawn: `children` wins and the rows are dropped. Put the links inside the middle you wrote, or drop `children`."
+    );
+  }
+  return (
+    // ONE PROVIDER, ROUND THE WHOLE RAIL.
+    //
+    // The rail composes a tooltip at its foot and `SidebarNav` composes one per row at the narrow
+    // width, and a provider per instance is what `.storybook/preview.tsx` states the rule against:
+    // nested, the foot's control opened at Radix's own 700ms while every row beside it opened at
+    // 200, and it could never join their skip-delay group. Here rather than left to `AppShell`, so
+    // a rail rendered on its own still has one — nesting inside the shell's is harmless.
+    /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsx3(
+      "aside",
+      {
+        "data-collapsed": collapsed,
+        className: cn(
+          "flex h-full shrink-0 flex-col overflow-hidden motion-rail-collapse",
+          // A nav row drops its own label at the narrow width. What this fades is a label whatever
+          // stands in `railTop` keeps mounted at both — QuickSearchRow's, for one — so the closing
+          // edge slides over the words instead of cutting through them.
+          //
+          // The trailing mark goes on the same clock: a disclosure chevron is `nav-row-trailing`, it
+          // is as far past the closing edge as the words beside it, and left untimed it snapped out
+          // while they faded.
+          //
+          // `duration-fast` is the token scale rather than a typed number, so a `@lessly/tokens`
+          // release retunes it, and the step reaches the utility as `var(--motion-duration-fast,
+          // 100ms)` — the same variable `.motion-rail-collapse` reads, which the token layer's
+          // `prefers-reduced-motion` block takes to 0ms, so the words and the width stop together.
+          // `motion-reduce:transition-none` is what a consumer running the preset without
+          // `@lessly/ui/styles.css` stops on: they are left with the 100ms fallback, and no media
+          // query reaches a literal.
+          "[&_[data-slot=nav-row-label]]:transition-opacity [&_[data-slot=nav-row-label]]:duration-fast",
+          "[&_[data-slot=nav-row-label]]:motion-reduce:transition-none",
+          "[&_[data-slot=nav-row-trailing]]:transition-opacity [&_[data-slot=nav-row-trailing]]:duration-fast",
+          "[&_[data-slot=nav-row-trailing]]:motion-reduce:transition-none",
+          collapsed ? RAIL_NARROW : RAIL_WIDE,
+          collapsed && "[&_[data-slot=nav-row-label]]:opacity-0 [&_[data-slot=nav-row-trailing]]:opacity-0",
+          className
         ),
-        !drawer && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-foot" }),
-          /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 px-3 py-2", children: /* @__PURE__ */ jsx3(RailToggle, { collapsed, onClick: toggle }) })
+        children: /* @__PURE__ */ jsxs2("div", { className: cn("flex h-full shrink-0 flex-col", RAIL_WIDE), children: [
+          /* @__PURE__ */ jsx3("div", { className: cn("relative flex h-14 shrink-0 items-center", drawer ? "pl-3 pr-10" : "px-3"), children: separateMark ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-testid": "sidebar-identity-expanded",
+                "aria-hidden": collapsed || void 0,
+                inert: collapsed,
+                className: cn(
+                  "flex w-full items-center gap-2 transition-opacity duration-normal motion-reduce:transition-none",
+                  collapsed && "pointer-events-none opacity-0"
+                ),
+                children: header ?? logo
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-testid": "sidebar-identity-collapsed",
+                "aria-hidden": !collapsed || void 0,
+                inert: !collapsed,
+                className: cn("absolute", RAIL_COLUMN_BOX, !collapsed && "pointer-events-none"),
+                children: logoCollapsed ?? logo
+              }
+            )
+          ] }) : (
+            /* ONE MARK, MOUNTED ONCE.
+               With neither `header` nor `logoCollapsed`, both slots resolve to the same `logo`, and
+               a node fading into an identical node is not a transition — it is one mark ghosted off
+               another. Mounted twice it was worse than a picture: one `id` inside an SVG logo
+               belongs to two elements and `getElementById` finds the hidden one, a `ref` fires
+               twice and measures the transparent copy, effects subscribe twice, and `inert` pauses
+               no player.
+               It stands in RAIL_COLUMN_BOX at BOTH widths, which is the box the closed mark and the
+               foot's toggle already stand in: centre 32, the column every row's glyph is on. That
+               is a class list that never changes, so there is no frame for it to move on. */
+            /* @__PURE__ */ jsx3("div", { "data-testid": "sidebar-identity-single", className: RAIL_COLUMN_BOX, children: logo })
+          ) }),
+          /* @__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 }),
+          written !== null ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              "data-testid": "sidebar-body",
+              className: cn(
+                "flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-2",
+                railTopNode ? "pt-2" : "pt-3"
+              ),
+              children: written
+            }
+          ) : /* @__PURE__ */ jsx3(
+            ScrollArea,
+            {
+              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: items ?? [], collapsed, basePath, LinkComponent, isItemActive })
+            }
+          ),
+          !drawer && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(Divider, { testId: "sidebar-divider-foot" }),
+            /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 px-3 py-2", children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+              /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx3(RailToggle, { collapsed, onClick: toggle }) }),
+              /* @__PURE__ */ jsx3(TooltipContent, { side: "right", sideOffset: footTooltipOffset(collapsed), children: railToggleLabel(collapsed) })
+            ] }) })
+          ] })
         ] })
-      ] })
-    }
+      }
+    ) })
   );
 }
 
 // src/components/app-shell.tsx
-import * as React2 from "react";
+import * as React from "react";
 import { Menu } from "lucide-react";
 import { useLocation as useLocation2 } from "react-router";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
-  return React2.isValidElement(sidebar) ? React2.cloneElement(sidebar, { collapsed: false }) : sidebar;
+  return React.isValidElement(sidebar) ? React.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
 function AppShell({ sidebar, topBar, children, className }) {
   const { pathname } = useLocation2();
-  const [mobileOpen, setMobileOpen] = React2.useState(false);
-  React2.useEffect(() => {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  React.useEffect(() => {
     setMobileOpen(false);
   }, [pathname]);
   const isMobile = useIsMobile();
@@ -196,7 +280,7 @@ function AppShell({ sidebar, topBar, children, className }) {
               /* @__PURE__ */ jsxs3(SheetContent, { side: "left", className: "w-[248px] bg-bg-primary p-0", children: [
                 /* @__PURE__ */ jsx4(SheetTitle, { className: "sr-only", children: "Navigation" }),
                 /* @__PURE__ */ jsx4(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
-                /* @__PURE__ */ jsx4(SidebarDrawer, { children: expandedSidebar(sidebar) })
+                /* @__PURE__ */ jsx4(SidebarDrawer, { onDismiss: () => setMobileOpen(false), children: expandedSidebar(sidebar) })
               ] })
             ] }),
             /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: topBar })

package/dist/styles-federated.css

@@ -19,7 +19,7 @@
   --bg-elevated: #252936;
   --bg-overlay: #252936;
   --bg-sunken: #0e1015;
-  --bg-selected: #1f222d;
+  --bg-selected: #252735;
   --bg-brand: #06297d;
   --bg-brand-subtle: #1f2541;
   --bg-brand-hover: #08349b;
@@ -103,12 +103,12 @@
   --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-family: "Sora", "Inter", system-ui, -apple-system, sans-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-family: "Sora", "Inter", system-ui, -apple-system, sans-serif;
   --text-display-lg-font-size: 3rem;
   --text-display-lg-line-height: 1.1;
   --text-display-lg-font-weight: 400;
@@ -283,7 +283,7 @@
   --bg-elevated: #edeef0;
   --bg-overlay: #ffffff;
   --bg-sunken: #e1e2e4;
-  --bg-selected: #f2f3f4;
+  --bg-selected: #eceded;
   --bg-brand-subtle: #e4ecfe;
   --bg-brand-hover: #05226a;
   --bg-brand-bright-hover: #0b4cd5;
@@ -342,6 +342,27 @@
   --overlay-modal-bg: #ffffff;
   --focus-ring-color: #0940b8;
 
+  /* Same value as :root on purpose, re-declared so .light lists every colour token a
+     light consumer gets rather than leaving some to inheritance. Why, and what holds
+     it honest: docs/tokens.md, "Theme invariance". */
+  --bg-brand: #06297d;
+  --bg-brand-bright: #165ff2;
+  --bg-success: #13703c;
+  --bg-success-bright: #21be63;
+  --bg-danger: #78100b;
+  --text-on-brand: #f6f7f7;
+  --text-on-success: #f6f7f7;
+  --text-on-success-bright: #08090c;
+  --text-on-warning: #08090c;
+  --text-on-danger: #f6f7f7;
+  --border-selected: #737c95;
+  --border-brand: #165ff2;
+  --border-warning: #b3780e;
+  --border-danger: #e82020;
+  --field-border-hover: #737c95;
+  --field-border-filled: #737c95;
+  --field-border-error: #e82020;
+
   /* 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);
@@ -471,11 +492,15 @@
   --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);
@@ -485,6 +510,10 @@
   --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);
@@ -502,17 +531,25 @@
   --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);
 }
 
 /* === Fonts === */
+/* This kit declares no face of its own, and scripts/build-styles.mjs refuses a build where one
+   reappears here. Written without the at-rule spelled out: that guard is a character scanner
+   over this file, so naming the rule in prose would register as a block.
 
-
-
-
-
-
+   The faces live in @lessly/tokens/fonts.css — Inter, Fira Mono and Sora, against RELATIVE
+   `./fonts/...` paths at files inside that package. A consumer imports that sheet and is done.
+   What stood here declared four of them a second time against ABSOLUTE `/fonts/**.woff2`, which
+   named files the kit does not ship and every consumer had to serve itself; one who did not
+   rendered in system fallback with no error at all. Sora, which `--text-display-*-font-family`
+   has named since @lessly/tokens@0.8.0, was never declared here in any form and so never
+   painted at all. */
 
 /* === Theme Variables === */
 /* The token palettes (colors, typography, motion, shadows, grid) live in
@@ -606,8 +643,10 @@
 
 /* === 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.
+   A real class because `height` is a property no Tailwind transition utility names: the only way to
+   write it in a class list is the arbitrary `transition-[height]`, which the content scanner can
+   drop the first time a file writes it. (The duration is not the reason — `duration-normal` carries
+   the same variable this line does.)
    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 {
@@ -617,9 +656,11 @@
 }
 
 /* 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. */
+   fill appearing on each. A named primitive rather than the three utilities that would now say the
+   same thing, so the thumb's timing is stated once and cannot drift between the call sites that
+   write it. `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);
@@ -630,9 +671,9 @@
    frame as it travels. One class on both, so the mark cannot be retuned away from the edge it
    answers for — the same reason two carets read one `caretMotion`. `transform` is here rather than
    in a class of its own because the bar is that edge said in miniature: retune one and the two stop
-   arriving together. A real class for the reason the two above are, and
-   token-driven because a Tailwind `duration-200` is a literal 200ms: under prefers-reduced-motion
-   the rail kept sliding for its full 200ms while every token-driven motion beside it went instant. */
+   arriving together. A real class for the reason the first one above is, and more so: `width,
+   transform` is a pair no Tailwind utility names at all, so writing it in a class list means the
+   arbitrary `transition-[width,transform]` — the form the scanner can drop. */
 .motion-rail-collapse {
   transition-property: width, transform;
   transition-duration: var(--motion-duration-normal);
@@ -697,6 +738,9 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.animate-accordion-down {
+  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);
+}
 .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);
 }