@getmicdrop/svelte-components 5.1.3 → 5.3.0

package/dist/patterns/page/PageLoader.stories.svelte

@@ -15,13 +15,11 @@
       showRetry: { control: 'boolean' },
     },
   });
-
 </script>
 
 <script>
-  
-  let loading = true;
-  let hasError = false;
+  let loading = $state(true);
+  let hasError = $state(false);
 
   function simulateLoading() {
     loading = true;
@@ -92,13 +90,13 @@
     <div class="flex gap-2">
       <button
         class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-        on:click={simulateLoading}
+        onclick={simulateLoading}
       >
         Simulate Loading
       </button>
       <button
         class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
-        on:click={simulateError}
+        onclick={simulateError}
       >
         Simulate Error
       </button>

package/dist/patterns/page/PageLoader.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default PageLoader;
-type PageLoader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type PageLoader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const PageLoader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const PageLoader: import("svelte").Component<Record<string, never>, {}, "">;
 import PageLoader from './PageLoader.svelte';
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=PageLoader.stories.svelte.d.ts.map

package/dist/patterns/page/PageLoader.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA+HA;;;;mBAAsH;uBA1H7F,qBAAqB;6CAiHD,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;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;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;AAoHA,oFAAyD;uBA/GhC,qBAAqB"}

package/dist/patterns/page/PageLoader.svelte

@@ -1,27 +1,18 @@
 <script>
   import Spinner from "../../primitives/Spinner/Spinner.svelte";
   import Alert from "../../primitives/Alert/Alert.svelte";
-
-  /** Whether the page is loading */
-  export let isLoading = true;
-
-  /** Error message (if any) */
-  export let error = null;
-
-  /** Custom loading message */
-  export let loadingMessage = "";
-
-  /** Custom error title */
-  export let errorTitle = "Error";
-
-  /** Whether to show a retry button */
-  export let showRetry = false;
-
-  /** Callback for retry action */
-  export let onRetry = () => {};
-
-  /** Minimum height for the loading container */
-  export let minHeight = "h-64";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  let {
+    isLoading = true,
+    error = null,
+    loadingMessage = "",
+    errorTitle = "Error",
+    showRetry = false,
+    onRetry = () => {},
+    minHeight = "h-64",
+    children,
+  } = $props();
 </script>
 
 {#if isLoading}
@@ -38,15 +29,12 @@
     <Alert type="danger" title={errorTitle} message={error} />
     {#if showRetry}
       <div class="mt-4 text-center">
-        <button
-          class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 font-medium"
-          on:click={onRetry}
-        >
+        <Button variant="link" onclick={onRetry}>
           Try again
-        </button>
+        </Button>
       </div>
     {/if}
   </div>
 {:else}
-  <slot />
+  {@render children?.()}
 {/if}

package/dist/patterns/page/PageLoader.svelte.d.ts

@@ -1,52 +1,26 @@
 export default PageLoader;
-type PageLoader = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    error?: null | undefined;
-    isLoading?: boolean | undefined;
-    loadingMessage?: string | undefined;
-    errorTitle?: string | undefined;
-    showRetry?: boolean | undefined;
-    onRetry?: (() => void) | undefined;
-    minHeight?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type PageLoader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PageLoader: import("svelte").Component<{
+    isLoading?: boolean;
+    error?: any;
+    loadingMessage?: string;
+    errorTitle?: string;
+    showRetry?: boolean;
+    onRetry?: Function;
+    minHeight?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    isLoading?: boolean;
+    error?: any;
+    loadingMessage?: string;
+    errorTitle?: string;
+    showRetry?: boolean;
+    onRetry?: Function;
+    minHeight?: string;
+    children: any;
 };
-declare const PageLoader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    error?: null | undefined;
-    isLoading?: boolean | undefined;
-    loadingMessage?: string | undefined;
-    errorTitle?: string | undefined;
-    showRetry?: boolean | undefined;
-    onRetry?: (() => void) | undefined;
-    minHeight?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [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;
-}
 //# sourceMappingURL=PageLoader.svelte.d.ts.map

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA+EA;;;;;;;;;;;;;;eAAmN;sCAT7K,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":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;AAkDA;gBAtCiC,OAAO;YAAU,GAAG;qBAAmB,MAAM;iBAAe,MAAM;gBAAc,OAAO;;gBAAkC,MAAM;cAAY,GAAG;WAsCtH;wBAtCtC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,WAAW;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/page/SectionHeader.svelte

@@ -1,31 +1,12 @@
 <script>
-  /**
-   * SectionHeader - Section divider with title and optional actions
-   *
-   * Use to separate major sections within a page with a consistent
-   * heading style and optional action buttons.
-   *
-   * @example
-   * <SectionHeader title="Performers" count={performers.length}>
-   *   <Button slot="actions" size="sm" on:click={addPerformer}>Add</Button>
-   * </SectionHeader>
-   */
-
-  /** Section title */
-  export let title = '';
-
-  /** Optional description */
-  export let description = '';
-
-  /** Optional count badge (e.g., number of items) */
-  export let count = null;
-
-  /** Whether to show a divider line above */
-  export let divider = false;
-
-  /** Additional class for the header */
-  let className = '';
-  export { className as class };
+  let {
+    title = '',
+    description = '',
+    count = null,
+    divider = false,
+    class: className = '',
+    actions,
+  } = $props();
 </script>
 
 <div class={className}>
@@ -45,9 +26,9 @@
       {/if}
     </div>
 
-    {#if $$slots.actions}
+    {#if actions}
       <div class="flex items-center gap-2">
-        <slot name="actions" />
+        {@render actions()}
       </div>
     {/if}
   </div>

package/dist/patterns/page/SectionHeader.svelte.d.ts

@@ -1,39 +1,22 @@
 export default SectionHeader;
-type SectionHeader = SvelteComponent<{
-    class?: string | undefined;
-    title?: string | undefined;
-    description?: string | undefined;
-    divider?: boolean | undefined;
-    count?: null | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-}> & {
-    $$bindings?: string | undefined;
+type SectionHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SectionHeader: import("svelte").Component<{
+    title?: string;
+    description?: string;
+    count?: any;
+    divider?: boolean;
+    class?: string;
+    actions: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    count?: any;
+    divider?: boolean;
+    class?: string;
+    actions: any;
 };
-declare const SectionHeader: $$__sveltets_2_IsomorphicComponent<{
-    class?: string | undefined;
-    title?: string | undefined;
-    description?: string | undefined;
-    divider?: boolean | undefined;
-    count?: null | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-}, {}, 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;
-}
 //# sourceMappingURL=SectionHeader.svelte.d.ts.map

package/dist/patterns/page/SectionHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/SectionHeader.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAmFA;;;;;;;;;;eAAkL;6CAdrI,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":"SectionHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/SectionHeader.svelte.js"],"names":[],"mappings":";;;;;AA6CA;YAzC6B,MAAM;kBAAgB,MAAM;YAAU,GAAG;cAAY,OAAO;YAAU,MAAM;aAAW,GAAG;WAyC3D;wBAzCzC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/primitives/Accordion/Accordion.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   /**
    * Accordion Component - Flowbite Native (Pure Tailwind)
    *
@@ -6,26 +6,35 @@
    *   multiple: boolean - Allow multiple items open at once
    *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
    */
+  import type { Snippet } from 'svelte';
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
-  /** @type {boolean} Whether multiple items can be open at once */
-  export let multiple = false;
-  /** @type {boolean} Flush variant - no outer border */
-  export let flush = false;
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
+  interface Props {
+    multiple?: boolean;
+    flush?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
 
   // Store to track which items are open
-  const openItems = writable(new Set());
+  const openItems = writable(new Set<string>());
 
   // Context for child AccordionItem components
   setContext("accordion", {
     openItems,
     multiple,
     flush,
-    toggle: (id) => {
+    toggle: (id: string) => {
       openItems.update((items) => {
         if (items.has(id)) {
           items.delete(id);
@@ -41,11 +50,11 @@
   });
 
   // Flowbite-native classes
-  $: containerClasses = flush
+  let containerClasses = $derived(flush
     ? "divide-y divide-gray-200 dark:divide-gray-700"
-    : "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-200 dark:divide-gray-700";
+    : "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-200 dark:divide-gray-700");
 </script>
 
-<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"}>
-  <slot />
+<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
+  {#if children}{@render children()}{/if}
 </div>

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

@@ -1,44 +1,19 @@
-export default Accordion;
-type Accordion = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    multiple?: boolean | undefined;
-    flush?: boolean | undefined;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    multiple?: boolean | undefined;
-    flush?: boolean | undefined;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [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;
+/**
+   * Accordion Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   multiple: boolean - Allow multiple items open at once
+   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    multiple?: boolean;
+    flush?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;
 //# sourceMappingURL=Accordion.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA8EA;;;;;;;;;;eAAyJ;sCATnH,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":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   /**
    * AccordionItem Component - Flowbite Native (Pure Tailwind)
    *
@@ -7,21 +7,37 @@
    *   border: boolean - Show bottom border (Flowbite API)
    *   borderOpenClass: string - Additional classes when open
    */
+  import type { Snippet } from 'svelte';
   import { getContext, onMount } from "svelte";
   import { slide } from "svelte/transition";
+  import type { Writable } from "svelte/store";
   import { ChevronUpOutline } from "../Icons";
 
-  /** @type {boolean} Whether this item starts open */
-  export let open = false;
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-  /** @type {boolean} Whether to show border (flowbite API compatibility) */
-  export let border = true;
-  /** @type {string} CSS classes to apply when item is open (flowbite API compatibility) */
-  export let borderOpenClass = "";
+  interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = false,
+    class: className = "",
+    border = true,
+    borderOpenClass = "",
+    header,
+    children,
+    ...restProps
+  }: Props = $props();
 
-  const { openItems, toggle, flush } = getContext("accordion");
+  const { openItems, toggle, flush } = getContext<{
+    openItems: Writable<Set<string>>;
+    toggle: (id: string) => void;
+    flush: boolean;
+  }>("accordion");
 
   // Generate unique ID for this item
   let id = Math.random().toString(36).substring(2, 9);
@@ -32,14 +48,14 @@
     }
   });
 
-  $: isOpen = $openItems.has(id);
+  let isOpen = $derived($openItems.has(id));
 
   function handleClick() {
     toggle(id);
   }
 
   // Flowbite-native header classes
-  $: headerClasses = [
+  let headerClasses = $derived([
     "flex items-center justify-between w-full p-5 font-medium text-left",
     "text-gray-500 dark:text-gray-400",
     "bg-gray-100 dark:bg-gray-800",
@@ -47,22 +63,22 @@
     "focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
     "gap-3",
     isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
-  ].join(" ");
+  ].join(" "));
 </script>
 
-<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}">
+<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}" {...restProps}>
   <h2>
     <button
       type="button"
       class={headerClasses}
       aria-expanded={isOpen}
-      on:click={handleClick}
+      onclick={handleClick}
     >
       <span class="text-gray-900 dark:text-white">
-        <slot name="header">Accordion Item</slot>
+        {#if header}{@render header()}{:else}Accordion Item{/if}
       </span>
       <!-- Flowbite arrow icon -->
-      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" aria-hidden="true" />
+      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </button>
   </h2>
 
@@ -70,7 +86,7 @@
     <div transition:slide={{ duration: 200 }}>
       <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'} dark:bg-gray-900">
         <p class="text-gray-500 dark:text-gray-400">
-          <slot />
+          {#if children}{@render children()}{/if}
         </p>
       </div>
     </div>

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts

@@ -1,50 +1,22 @@
-export default AccordionItem;
-type AccordionItem = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    open?: boolean | undefined;
-    border?: boolean | undefined;
-    borderOpenClass?: string | undefined;
-}, {
-    header: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    open?: boolean | undefined;
-    border?: boolean | undefined;
-    borderOpenClass?: string | undefined;
-}, {
-    header: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    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;
+/**
+   * AccordionItem Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   open: boolean - Start expanded
+   *   border: boolean - Show bottom border (Flowbite API)
+   *   borderOpenClass: string - Additional classes when open
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;
 //# sourceMappingURL=AccordionItem.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsGA;;;;;;;;;;;;;eAA4K;sCATtI,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":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6EH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}