diff --git a/src/lib/holocene/accordion/accordion-group.svelte b/src/lib/holocene/accordion/accordion-group.svelte
index d41224635..853e7e685 100644
--- a/src/lib/holocene/accordion/accordion-group.svelte
+++ b/src/lib/holocene/accordion/accordion-group.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  const { children }: { children: Snippet } = $props();
+</script>
+
 <div class="*:border-t-0 [&>*:first-child]:border-t">
-  <slot />
+  {@render children()}
 </div>
diff --git a/src/lib/holocene/accordion/accordion.stories.svelte b/src/lib/holocene/accordion/accordion.stories.svelte
index 3846bdbcc..40c4a6467 100644
--- a/src/lib/holocene/accordion/accordion.stories.svelte
+++ b/src/lib/holocene/accordion/accordion.stories.svelte
@@ -3,9 +3,9 @@
 
   import { iconNames } from '$lib/holocene/icon';
 
-  import Accordion from './accordion.svelte';
+  import Accordion, { type Props } from './accordion.svelte';
 
-  export const meta = {
+  export const meta: Meta<Props> = {
     title: 'Accordion',
     component: Accordion,
     args: {
@@ -16,18 +16,14 @@
       error: '',
     },
     argTypes: {
-      title: { name: 'Title', control: 'text' },
-      subtitle: { name: 'Subtitle', control: 'text' },
-      open: { name: 'Open', control: 'boolean' },
-      expandable: { name: 'Expandable', control: 'boolean' },
-      error: { name: 'Error', control: 'text' },
-      icon: {
-        name: 'Icon',
-        control: 'select',
-        options: iconNames,
-      },
+      title: { control: 'text' },
+      subtitle: { control: 'text' },
+      open: { control: 'boolean' },
+      expandable: { control: 'boolean' },
+      error: { control: 'text' },
+      icon: { control: 'select', options: iconNames },
     },
-  } satisfies Meta<Accordion>;
+  };
 </script>
 
 <script lang="ts">
@@ -41,7 +37,11 @@
 
 <Template let:args>
   <div class="flex flex-col gap-2">
-    <Accordion {...args} onToggle={action('onToggle')}>
+    <Accordion
+      {...args}
+      onToggle={action('onToggle')}
+      onclick={() => window.alert('CLICKED')}
+    >
       <p>Accordion Content</p>
     </Accordion>
     <AccordionGroup>
diff --git a/src/lib/holocene/accordion/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
index eef09c1d8..6f202408b 100644
--- a/src/lib/holocene/accordion/accordion.svelte
+++ b/src/lib/holocene/accordion/accordion.svelte
@@ -1,14 +1,5 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  import { twMerge as merge } from 'tailwind-merge';
-  import { v4 } from 'uuid';
-
-  import Badge from '$lib/holocene/badge.svelte';
-  import type { IconName } from '$lib/holocene/icon';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-
-  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+<script module>
+  export type Props = HTMLAttributes<HTMLDivElement> & {
     title: string;
     id?: string;
     subtitle?: string;
@@ -19,19 +10,38 @@
     onToggle?: () => void;
     'data-testid'?: string;
     class?: string;
-  }
+    summary?: Snippet;
+    action?: Snippet;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import type { Snippet } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
+  import { v4 } from 'uuid';
 
-  export let title: string;
-  export let id: string = v4();
-  export let subtitle = '';
-  export let icon = null;
-  export let open = false;
-  export let expandable = true;
-  export let error = '';
-  export let onToggle = () => {};
+  import Badge from '$lib/holocene/badge.svelte';
+  import type { IconName } from '$lib/holocene/icon';
+  import Icon from '$lib/holocene/icon/icon.svelte';
 
-  let className = '';
-  export { className as class };
+  let {
+    title,
+    id = v4(),
+    subtitle = '',
+    icon = null,
+    open = false,
+    expandable = true,
+    error = '',
+    onToggle = () => {},
+    class: className = '',
+    summary,
+    action,
+    children,
+    ...restProps
+  }: Props = $props();
 
   const toggleAccordion = () => {
     open = !open;
@@ -42,7 +52,7 @@
 {#if expandable}
   <div
     class={merge('surface-primary w-full border border-subtle', className)}
-    {...$$restProps}
+    {...restProps}
   >
     <button
       id="{id}-trigger"
@@ -50,7 +60,7 @@
       aria-controls="{id}-content"
       class="flex w-full flex-col p-4 focus-visible:bg-interactive-secondary-hover focus-visible:outline-none"
       type="button"
-      on:click={toggleAccordion}
+      onclick={toggleAccordion}
     >
       <div class="flex w-full flex-row items-center justify-between gap-2">
         <div class="flex w-full items-center gap-2">
@@ -59,21 +69,21 @@
             {title}
           </h3>
           <div class="text-secondary max-sm:hidden">
-            <slot name="summary" />
+            {@render summary?.()}
           </div>
         </div>
         <div
           class="flex flex-row items-center gap-2 pr-2"
-          on:click|stopPropagation
-          on:keyup|stopPropagation
+          onclick={(e) => e.stopPropagation()}
+          onkeyup={(e) => e.stopPropagation()}
           role="none"
         >
-          <slot name="action" />
+          {@render action?.()}
         </div>
         <Icon class="shrink-0" name={open ? 'chevron-up' : 'chevron-down'} />
       </div>
       <div class="text-secondary sm:hidden">
-        <slot name="summary" />
+        {@render summary?.()}
       </div>
       <p class="flex items-center">
         {#if error}
@@ -90,11 +100,11 @@
       class="mt-4 block w-full p-4"
       class:hidden={!open}
     >
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 {:else}
-  <div class="surface-primary w-full border border-subtle p-4" {...$$restProps}>
+  <div class="surface-primary w-full border border-subtle p-4" {...restProps}>
     <div class="flex w-full flex-col">
       <div class="flex w-full flex-row items-center justify-between gap-2">
         <div class="flex w-full items-center gap-2">
@@ -103,15 +113,15 @@
             {title}
           </h3>
           <div class="text-secondary max-sm:hidden">
-            <slot name="summary" />
+            {@render summary?.()}
           </div>
         </div>
         <div class="flex flex-row items-center gap-2 pr-2">
-          <slot name="action" />
+          {@render action?.()}
         </div>
       </div>
       <div class="text-secondary sm:hidden">
-        <slot name="summary" />
+        {@render summary?.()}
       </div>
       <p class="flex items-center">
         {#if error}
@@ -122,7 +132,7 @@
     </div>
 
     <div class="mt-6 block w-full" class:hidden={!open}>
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 {/if}