Add classes to Card to Header (#268)

Author: techniq

.changeset/nine-tigers-smash.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Add `classes` to Card to Header

packages/svelte-ux/src/lib/components/Card.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
   import ProgressCircle from './ProgressCircle.svelte';
   import Header from './Header.svelte';
   import Overlay from './Overlay.svelte';
@@ -11,6 +13,14 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  export let classes: {
+    root?: string;
+    header?: ComponentProps<Header>['classes'];
+    headerContainer?: string;
+    content?: string;
+    actions?: string;
+  } = {};
+
   const settingsClasses = getComponentClasses('Card');
 </script>
 
@@ -27,6 +37,7 @@
     'Card',
     'relative z-0 bg-surface-100 border rounded elevation-1 flex flex-col justify-between',
     settingsClasses.root,
+    classes.root,
     className
   )}
 >
@@ -37,23 +48,23 @@
   {/if}
 
   {#if title || subheading || $$slots.header}
-    <div class="p-4">
+    <div class={cls('p-4', classes.headerContainer)}>
       <slot name="header">
-        <Header {title} {subheading} />
+        <Header {title} {subheading} classes={classes.header} />
       </slot>
     </div>
   {/if}
 
   <slot />
 
   {#if $$slots.contents}
-    <div class="px-4 flex-1">
+    <div class={cls('px-4 flex-1', classes.content)}>
       <slot name="contents" />
     </div>
   {/if}
 
   {#if $$slots.actions}
-    <div class="py-2 px-1">
+    <div class={cls('py-2 px-1', classes.actions)}>
       <slot name="actions" />
     </div>
   {/if}

packages/svelte-ux/src/lib/components/Header.svelte

@@ -8,29 +8,41 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  export let classes: {
+    root?: string;
+    container?: string;
+    title?: string;
+    subheading?: string;
+  } = {};
+
   const settingsClasses = getComponentClasses('Header');
 </script>
 
-<div class={cls('Header', 'flex items-center gap-4', settingsClasses.root, className)}>
+<div
+  class={cls('Header', 'flex items-center gap-4', settingsClasses.root, classes.root, className)}
+>
   <slot name="avatar" />
 
-  <div class="flex-1">
+  <div class={cls('flex-1', classes.container)}>
     <slot name="title">
       {#if title}
         {#if Array.isArray(title)}
           <Breadcrumb items={title} class="text-lg" />
         {:else}
-          <div class="text-lg">{title}</div>
+          <div class={cls('text-lg', classes.title)}>{title}</div>
         {/if}
       {/if}
     </slot>
 
     <slot name="subheading">
       {#if subheading}
         {#if Array.isArray(subheading)}
-          <Breadcrumb items={subheading} class="text-sm text-surface-content/50" />
+          <Breadcrumb
+            items={subheading}
+            class={cls('text-sm text-surface-content/50', classes.subheading)}
+          />
         {:else}
-          <div class="text-sm text-surface-content/50">{subheading}</div>
+          <div class={cls('text-sm text-surface-content/50', classes.subheading)}>{subheading}</div>
         {/if}
       {/if}
     </slot>