minor tweaks for card (#1755)

* minor tweaks for card

* Add image error handling and lazy loading, fix small shadow and update CardProps typing

Author: jjagielka

src/lib/card/Card.svelte

@@ -26,10 +26,21 @@
 
 {#snippet childSlot()}
   {#if img}
-    <img class={image({ class: clsx(theme?.image, styling.image) })} src={img} alt={img} />
-    {@render children()}
+    <img
+      class={image({ class: clsx(theme?.image, styling.image) })}
+      src={img}
+      alt=""
+      loading="lazy"
+      onerror={(e) => {
+        const target = e.currentTarget as HTMLImageElement;
+        if (target) {
+          target.style.display = "none";
+        }
+      }}
+    />
+    {@render children?.()}
   {:else}
-    {@render children()}
+    {@render children?.()}
   {/if}
 {/snippet}
 

src/lib/card/theme.ts

@@ -41,8 +41,9 @@ export const card = tv({
       rose: { base: "border-rose-200 bg-rose-400 dark:bg-rose-800 dark:border-rose-700" }
     },
     shadow: {
-      sm: { base: "shadow-md" },
-      normal: { base: "shadow-sm" },
+      xs: { base: "shadow-xs" },
+      sm: { base: "shadow-sm" },
+      normal: { base: "shadow" },
       md: { base: "shadow-md" },
       lg: { base: "shadow-lg" },
       xl: { base: "shadow-xl" },

src/lib/types.ts

@@ -354,7 +354,6 @@ export type CheckIconProps = SVGAttributes<SVGSVGElement>;
 // card
 export type CardProps = Omit<CardVariants, "href"> &
   AnchorDivAttributes & {
-    children: Snippet;
     img?: string;
     imgClass?: ClassValue;
     contentClass?: string;