@getmicdrop/svelte-components 5.1.3 → 5.3.0

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,28 +1,46 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
-  /** @type {boolean} Whether the checkbox is checked */
-  export let checked = false;
-  /** @type {string} The value attribute */
-  export let value = "";
-  /** @type {string} Name attribute for form submission */
-  export let name = "";
-  /** @type {boolean} Whether the checkbox is disabled */
-  export let disabled = false;
-  /** @type {'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow'} Color variant */
-  export let color = "blue";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
+  interface Props {
+    checked?: boolean;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { checked: boolean; value: string }) => void;
+    onclick?: () => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    checked = $bindable(false),
+    value = "",
+    name = "",
+    disabled = false,
+    color = "blue",
+    class: className = "",
+    onchange,
+    onclick,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    children,
+    ...restProps
+  }: Props = $props();
 
-  function handleChange(event) {
-    checked = event.target.checked;
-    dispatch("change", { checked, value });
+  function handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onchange?.({ checked, value });
   }
 
-  // Flowbite color classes
   const colorClasses = {
     blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600",
     red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
@@ -32,20 +50,21 @@
     yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
   };
 
-  $: colorClass = colorClasses[color] || colorClasses.blue;
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
 
-  $: inputClasses = [
+  let inputClasses = $derived([
     "w-4 h-4 rounded",
     "bg-gray-100 border-gray-300",
     "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
     "focus:ring-2",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" ");
+  ].join(" "));
 </script>
 
 <label
   class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+  {...restProps}
 >
   <input
     type="checkbox"
@@ -53,17 +72,17 @@
     {value}
     {disabled}
     bind:checked
-    on:change={handleChange}
-    on:click
-    on:focus
-    on:blur
-    on:keydown
-    on:keyup
+    onchange={handleChange}
+    {onclick}
+    {onfocus}
+    {onblur}
+    {onkeydown}
+    {onkeyup}
     class={inputClasses}
   />
-  {#if $$slots.default}
+  {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      <slot />
+      {@render children()}
     </span>
   {/if}
 </label>

package/dist/primitives/Checkbox/Checkbox.svelte.d.ts

@@ -1,64 +1,24 @@
-export default Checkbox;
-type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+interface Props {
+    checked?: boolean;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: {
+        checked: boolean;
+        value: string;
+    }) => void;
+    onclick?: () => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/primitives/Checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA4DH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/primitives/DarkModeToggle.svelte

@@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
   import { onMount } from "svelte";
   import SunIcon from "./Icons/SunIcon.svelte";
   import MoonIcon from "./Icons/MoonIcon.svelte";
 
-  // Optional props for layout control
-  // export let isExpanded = false; // Deprecated
-  export let containerSelector = ".performer-portal"; // Can be '.micdrop', '.performer-portal', etc.
+  interface Props {
+    /** Container selector for applying dark class */
+    containerSelector?: string;
+  }
+
+  let { containerSelector = ".performer-portal" }: Props = $props();
 
-  // Theme mode: 'auto' | 'light' | 'dark'
-  let themeMode = "auto";
-  let isDark = false; // Current display state (for applying classes)
+  let themeMode = $state<"auto" | "light" | "dark">("auto");
+  let isDark = $state(false);
 
-  /** @param {boolean} enable */
-  function setMicdropDarkClass(enable) {
-    // Support both performers portal and micdrop frontend
+  function setMicdropDarkClass(enable: boolean) {
     const container = document.querySelector(containerSelector);
     if (enable) {
       if (container) container.classList.add("dark");
@@ -38,19 +38,16 @@
   }
 
   onMount(() => {
-    // Check localStorage for saved theme
     const savedTheme = localStorage.getItem("theme");
 
     if (savedTheme === "dark" || savedTheme === "light") {
       themeMode = savedTheme;
     } else {
-      // No saved preference or 'auto' = auto mode
       themeMode = "auto";
     }
 
     applyTheme();
 
-    // Listen for system preference changes (only matters in auto mode)
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
       if (themeMode === "auto") {
@@ -64,9 +61,7 @@
     };
   });
 
-  /** @param {MouseEvent} event */
-  function toggleTheme(event) {
-    // Cycle: auto -> light -> dark -> auto
+  function toggleTheme(event: MouseEvent) {
     if (themeMode === "auto") {
       themeMode = "light";
       localStorage.setItem("theme", "light");
@@ -80,31 +75,28 @@
 
     applyTheme();
 
-    // Immediately blur the button to remove focus state on mobile
-    if (event && event.currentTarget) {
-      // @ts-ignore
-      event.currentTarget.blur();
+    if (event?.currentTarget) {
+      (event.currentTarget as HTMLElement).blur();
     }
   }
 
-  // Tooltip text based on current mode
-  $: titleText =
+  let titleText = $derived(
     themeMode === "auto"
       ? "Auto theme (following device) - click for light mode"
       : themeMode === "light"
         ? "Light mode - click for dark mode"
-        : "Dark mode - click for auto";
+        : "Dark mode - click for auto"
+  );
 </script>
 
 <div class="flex w-full items-center justify-center py-4 transition-all">
   <button
-    on:click={toggleTheme}
-    on:touchend={(e) => e.currentTarget.blur()}
+    onclick={toggleTheme}
+    ontouchend={(e) => (e.currentTarget as HTMLElement).blur()}
     class="relative flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900 transition-all hover:border-blue-500 hover:shadow-md focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
     aria-label="Toggle theme"
     title={titleText}
   >
-    <!-- Sun icon - shown when mode is 'light' -->
     <span
       class="text-amber-500 transition-all duration-300 {themeMode === 'light'
         ? 'scale-100 rotate-0 opacity-100'
@@ -113,7 +105,6 @@
       <SunIcon size="20" />
     </span>
 
-    <!-- Moon icon - shown when mode is 'dark' -->
     <span
       class="transition-all duration-300 {themeMode === 'dark'
         ? 'scale-100 rotate-0 opacity-100'
@@ -122,10 +113,8 @@
       <MoonIcon size="20" color="white" />
     </span>
 
-    <!-- Auto icon container - shown when mode is 'auto' -->
     {#if themeMode === "auto"}
       <div class="absolute inset-0 overflow-hidden rounded-lg">
-        <!-- Light half (top-left) with sun -->
         <div
           class="absolute flex h-full w-full items-center justify-center bg-white"
           style="clip-path: polygon(0 0, 100% 0, 0 100%)"
@@ -134,7 +123,6 @@
             <SunIcon size="12" />
           </span>
         </div>
-        <!-- Dark half (bottom-right) with moon -->
         <div
           class="absolute flex h-full w-full items-center justify-center bg-gray-800"
           style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"

package/dist/primitives/DarkModeToggle.svelte.d.ts

@@ -1,27 +1,8 @@
-export default DarkModeToggle;
-type DarkModeToggle = SvelteComponent<{
-    containerSelector?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const DarkModeToggle: $$__sveltets_2_IsomorphicComponent<{
-    containerSelector?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    /** Container selector for applying dark class */
+    containerSelector?: string;
 }
+declare const DarkModeToggle: import("svelte").Component<Props, {}, "">;
+type DarkModeToggle = ReturnType<typeof DarkModeToggle>;
+export default DarkModeToggle;
 //# sourceMappingURL=DarkModeToggle.svelte.d.ts.map

package/dist/primitives/DarkModeToggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.js"],"names":[],"mappings":";;;;;;;;AAwJA;;;;mBAAiJ;6CATpG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/DarkModeToggle.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAyHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/primitives/Drawer/Drawer.svelte

@@ -1,33 +1,27 @@
 <script>
-  import { createEventDispatcher, onDestroy } from "svelte";
-
-  /** @type {boolean} Whether the drawer is visible */
-  export let show = false;
-  /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
-  export let hidden = true;
-  /** @type {string} Optional title for the drawer header */
-  export let title = "";
-  /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
-  export let placement = "left";
-  /** @type {'sm' | 'md' | 'lg' | 'xl' | 'full'} Width preset for left/right drawers */
-  export let width = "md";
-  /** @type {boolean} Whether clicking the backdrop closes the drawer */
-  export let closeOnBackdropClick = true;
-  /** @type {boolean} Whether pressing Escape closes the drawer */
-  export let closeOnEscape = true;
-  /** @type {string} Optional id for the drawer element */
-  export let id = "";
-  /** @type {boolean} Whether to show swipeable edge handle (bottom placement only) */
-  export let edge = false;
-  /** @type {number} Offset from bottom for edge handle in pixels */
-  export let edgeOffset = 60;
-
-  const dispatch = createEventDispatcher();
-
-  // Support both show and hidden props (flowbite uses hidden)
-  $: isVisible = show || !hidden;
-
-  // Width classes for left/right drawers
+  import { onDestroy } from "svelte";
+
+  let {
+    show = $bindable(false),
+    hidden = $bindable(true),
+    title = "",
+    placement = "left",
+    width = "md",
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    id = "",
+    edge = false,
+    edgeOffset = 60,
+    onclose,
+    onopen,
+    header,
+    children,
+    actions,
+    ...restProps
+  } = $props();
+
+  let isVisible = $derived(show || !hidden);
+
   const widthClasses = {
     sm: "w-64",
     md: "w-80",
@@ -36,13 +30,12 @@
     full: "w-full"
   };
 
-  // Get the appropriate width class
-  $: widthClass = widthClasses[width] || widthClasses.md;
+  let widthClass = $derived(widthClasses[width] || widthClasses.md);
 
   function close() {
     hidden = true;
     show = false;
-    dispatch("close");
+    onclose?.();
   }
 
   function handleBackdropClick(e) {
@@ -57,23 +50,23 @@
     }
   }
 
-  // Handle edge swipe to open drawer
   function handleEdgeClick() {
     if (edge && placement === "bottom") {
       hidden = false;
       show = true;
-      dispatch("open");
+      onopen?.();
     }
   }
 
-  // Lock body scroll when drawer is open
-  $: if (typeof document !== "undefined") {
-    if (isVisible) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (isVisible) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
     }
-  }
+  });
 
   onDestroy(() => {
     if (typeof document !== "undefined") {
@@ -82,32 +75,29 @@
   });
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
-<!-- Swipeable Edge Handle (bottom placement only) -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if edge && placement === "bottom" && !isVisible}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
     style="bottom: {edgeOffset}px"
-    on:click={handleEdgeClick}
+    onclick={handleEdgeClick}
   >
     <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
   </div>
 {/if}
 
-<!-- Backdrop -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if isVisible}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
-    on:click={handleBackdropClick}
+    onclick={handleBackdropClick}
   ></div>
 {/if}
 
-<!-- Drawer -->
 <div
   {id}
   class="
@@ -121,12 +111,12 @@
   tabindex="-1"
   aria-labelledby={title ? `${id}-label` : undefined}
   aria-hidden={!isVisible}
+  {...restProps}
 >
-  <!-- Optional header with title -->
-  {#if title || $$slots.header}
+  {#if title || header}
     <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-      {#if $$slots.header}
-        <slot name="header" />
+      {#if header}
+        {@render header()}
       {:else}
         <h5
           id={id ? `${id}-label` : undefined}
@@ -138,15 +128,13 @@
     </div>
   {/if}
 
-  <!-- Content slot -->
   <div class="flex-1 overflow-y-auto overscroll-contain p-4">
-    <slot />
+    {#if children}{@render children()}{/if}
   </div>
 
-  <!-- Actions slot (optional) -->
-  {#if $$slots.actions}
+  {#if actions}
     <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
-      <slot name="actions" />
+      {@render actions()}
     </div>
   {/if}
 </div>