src/shared/ui/ExpandableWrapper/ExpandableWrapper.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
+import { cubicOut } from 'svelte/easing';
 import type { HTMLAttributes } from 'svelte/elements';
 import { Spring } from 'svelte/motion';
 import { slide } from 'svelte/transition';
@@ -42,6 +43,10 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
      * @default 'clockwise'
      */
     rotation?: 'clockwise' | 'counterclockwise';
+    /**
+     * Classes for intermnal container
+     */
+    containerClassName?: string;
 }
 
 let {
@@ -53,6 +58,7 @@ let {
     badge,
     rotation = 'clockwise',
     class: className = '',
+    containerClassName = '',
     ...props
 }: Props = $props();
 
@@ -91,7 +97,7 @@ function handleWrapperClick() {
 }
 
 function handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === 'Enter' || (e.key === ' ' && !expanded)) {
         e.preventDefault();
         handleWrapperClick();
     }
@@ -169,17 +175,18 @@ $effect(() => {
         class={cn(
             'relative p-2 rounded-2xl border transition-all duration-250 ease-out flex flex-col gap-1.5 backdrop-blur-lg',
             expanded
-                ? 'bg-white/95 border-indigo-400/40 shadow-[0_30px_70px_-10px_rgba(99,102,241,0.25)]'
+                ? 'bg-white/5 border-indigo-400/40 shadow-[0_30px_70px_-10px_rgba(99,102,241,0.25)]'
                 : ' bg-white/25 border-white/40 shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)]',
             disabled && 'opacity-80 grayscale-[0.2]',
+            containerClassName,
         )}
     >
         {@render visibleContent?.({ expanded, disabled })}
 
         {#if expanded}
             <div
-                in:slide={{ duration: 250, delay: 50 }}
+                in:slide={{ duration: 250, easing: cubicOut }}
-                out:slide={{ duration: 250 }}
+                out:slide={{ duration: 250, easing: cubicOut }}
             >
                 {@render hiddenContent?.({ expanded, disabled })}
             </div>