@stasho/ds 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/accordion/accordion.tsx

@@ -45,6 +45,7 @@ const AccordionTrigger = forwardRef<
           "size-4 shrink-0 text-accent-500 dark:text-accent",
           "transition-transform duration-200",
           "group-data-[state=open]:rotate-180",
+          "group-data-[state=closed]:group-hover:translate-y-[3px]",
           "motion-reduce:transition-none",
         )}
       />
@@ -57,10 +58,21 @@ const AccordionContent = forwardRef<
   HTMLDivElement,
   ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...rest }, ref) => (
-  <AccordionPrimitive.Content ref={ref} {...rest}>
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "group overflow-hidden",
+      "motion-safe:data-[state=open]:animate-accordion-down",
+      "motion-safe:data-[state=closed]:animate-accordion-up",
+    )}
+    {...rest}
+  >
     <div
       className={cn(
         "pb-4 text-sm leading-relaxed text-muted-foreground",
+        "opacity-0 -translate-y-1 transition-[opacity,transform] duration-200 ease-out",
+        "group-data-[state=open]:opacity-100 group-data-[state=open]:translate-y-0",
+        "motion-reduce:transition-none motion-reduce:opacity-100 motion-reduce:translate-y-0",
         className,
       )}
     >

package/src/styles/tokens.css

@@ -375,4 +375,27 @@
     animation: none;
     opacity: 1;
   }
+}
+
+/* ── Accordion open/close (height) ───────────── */
+
+/* Registered as real Tailwind utilities so the `data-[state=...]:` variant can
+   compose (a plain `.animate-accordion-*` CSS class can't carry a Tailwind
+   variant). Applied in the component as `motion-safe:data-[state=open]:…` — the
+   `data-[state]` attribute selector out-specifies `motion-reduce:animate-none`,
+   so reduced motion is honored by gating the animation INTO motion-safe rather
+   than disabling it OUT, which sidesteps the specificity conflict entirely. */
+@theme {
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
 }