lithesome 0.6.1 → 0.6.2

package/dist/components/Accordion/Accordion.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { AccordionContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("accordion");
-</script>
-
+export const { context, contextName } = setupContext();
+</script>
+
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), single = $bindable(false), ...props } = $props();
@@ -12,15 +12,15 @@ setContext(contextName, ctx);
 $effect(() => {
   ctx.single = single;
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { active })}
-	data-accordion=""
-	{...props}
->
-	{@render children({ active })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { active })}
+	data-accordion=""
+	{...props}
+>
+	{@render children({ active })}
+</div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -11,21 +11,21 @@ const handleClick = (e) => {
   if (!item?.disabled)
     ctx.toggle(itemId);
 };
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { active, disabled: item?.disabled || false })}
-	aria-expanded={active}
-	aria-disabled={item?.disabled}
-	aria-controls={active ? ctx.uid('content') : undefined}
-	tabindex={item?.disabled ? -1 : 0}
-	data-accordionbutton=""
-	data-active={active || undefined}
-	onclick={handleClick}
-	{...props}
->
-	{@render children({ active, disabled: item?.disabled || false })}
-</button>
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { active, disabled: item?.disabled || false })}
+	aria-expanded={active}
+	aria-disabled={item?.disabled}
+	aria-controls={active ? ctx.uid('content') : undefined}
+	tabindex={item?.disabled ? -1 : 0}
+	data-accordionbutton=""
+	data-active={active || undefined}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ active, disabled: item?.disabled || false })}
+</button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -12,23 +12,23 @@ const attrs = $derived({
   "data-active": active || void 0,
   class: classProp(klass, { active })
 });
-</script>
-
-{#if _transition}
-	{#if active}
-		<div
-			bind:this={self}
-			use:useActions={use}
-			in:_transition.in.fn={_transition.in.params}
-			out:_transition.out.fn={_transition.out.params}
-			{...attrs}
-			{...props}
-		>
-			{@render children({ active })}
-		</div>
-	{/if}
-{:else if active}
-	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children({ active })}
-	</div>
-{/if}
+</script>
+
+{#if _transition}
+	{#if active}
+		<div
+			bind:this={self}
+			use:useActions={use}
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ active })}
+		</div>
+	{/if}
+{:else if active}
+	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
+		{@render children({ active })}
+	</div>
+{/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass)}
-	role="heading"
-	aria-level={level}
-	data-accordionheading=""
-	{...props}
->
-	{@render children({})}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass)}
+	role="heading"
+	aria-level={level}
+	data-accordionheading=""
+	{...props}
+>
+	{@render children({})}
+</div>

package/dist/components/Accordion/AccordionItem.svelte

@@ -17,17 +17,17 @@ onMount(() => {
 $effect(() => {
   ctx.setDisabled(uid(), disabled);
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={uid()}
-	class={classProp(klass, { active, disabled })}
-	data-accordionitem=""
-	data-disabled={disabled || undefined}
-	data-state={active ? 'opened' : 'closed'}
-	{...props}
->
-	{@render children({ active, disabled })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { active, disabled })}
+	data-accordionitem=""
+	data-disabled={disabled || undefined}
+	data-state={active ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ active, disabled })}
+</div>

package/dist/components/Checkbox/Checkbox.svelte

@@ -11,7 +11,7 @@ let {
   self = $bindable(),
   checked = $bindable(false),
   required = false,
-  disabled = false,
+  disabled = $bindable(false),
   onClick,
   ...props
 } = $props();

package/dist/components/Combobox/Combobox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { ComboboxContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("combobox");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";

package/dist/components/Hovercard/Hovercard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { HovercardContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("hovercard");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, classProp, parseDelay } from "../../internal/index.js";

package/dist/components/Menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { MenuContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("menu");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";

package/dist/components/Modal/Modal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { ModalContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("modal");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { createUID, useActions, portal, KEYS, isBrowser, classProp } from "../../internal/index.js";

package/dist/components/Pin/Pin.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { PinContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("pin");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";

package/dist/components/Popover/Popover.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { PopoverContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("popover");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, KEYS, classProp } from "../../internal/index.js";

package/dist/components/Popover/PopoverContent.svelte

@@ -30,7 +30,7 @@ const attrs = $derived({
   "aria-labelledby": ctx.uid("trigger"),
   role: "menu",
   class: classProp(klass, { visible: ctx.visible }),
-  "data-menucontent": ""
+  "data-popovercontent": ""
 });
 onMount(async () => {
   if (!ctx)

package/dist/components/Popover/context.svelte.js

@@ -14,6 +14,9 @@ export class PopoverContext extends Context {
         this.visible = !this.visible;
     }
     #effects = effects(() => {
-        this.hooks?.onChange?.(this.visible);
+        $effect(() => {
+            if (this._mounted)
+                this.hooks?.onChange?.(this.visible);
+        });
     });
 }

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { RadiogroupContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("radiogroup");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";

package/dist/components/Select/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { SelectContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("select");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts" generics="ValueType">import { useActions, classProp } from "../../internal/index.js";

package/dist/components/Tabs/Tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { TabsContext } from "./context.svelte.js";
-export const { context, contextName } = setupContext("tabs");
+export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";

package/dist/internal/helpers/context.svelte.d.ts

@@ -1,16 +1,16 @@
 import { type UID } from './utils.svelte.js';
 export declare class Context<H = any> {
+    #private;
     uid: UID;
     protected hooks: H | null;
+    protected _mounted: boolean;
     constructor(name: string, hooks?: H);
 }
 /**
- * Helper function to create a svelte context with a
- * unique name to avoid naming collisions.
+ * Helper function to create a svelte context with a unique name to avoid naming collisions.
  * @param name The name of the context
- * @returns
  */
-export declare const setupContext: <T>(name: string) => {
+export declare const setupContext: <T>() => {
     contextName: string;
     context: () => T;
 };

package/dist/internal/helpers/context.svelte.js

@@ -1,23 +1,27 @@
 import { createUID } from './utils.svelte.js';
-import { onDestroy, getContext } from 'svelte';
+import { onDestroy, getContext, onMount } from 'svelte';
 export class Context {
     uid = $state();
     hooks = null;
+    _mounted = $state(false);
     constructor(name, hooks) {
         const { uid } = createUID(name);
         this.uid = uid;
         if (hooks)
             this.hooks = hooks;
     }
+    #onMount = effects(() => {
+        $effect(() => {
+            this._mounted = true;
+        });
+    });
 }
 /**
- * Helper function to create a svelte context with a
- * unique name to avoid naming collisions.
+ * Helper function to create a svelte context with a unique name to avoid naming collisions.
  * @param name The name of the context
- * @returns
  */
-export const setupContext = (name) => {
-    let { uid } = createUID(name + 'Context');
+export const setupContext = () => {
+    let { uid } = createUID('context');
     return {
         contextName: uid(),
         context: () => getContext(uid())
@@ -27,13 +31,16 @@ export const setupContext = (name) => {
  * Auto cleanup effects when the component is unmounted from the DOM.
  */
 export const effects = (fn) => {
-    let cleanUp = $effect.root(fn);
+    let cleanUp = null;
     const destroy = () => {
         if (cleanUp === null)
             return;
         cleanUp();
         cleanUp = null;
     };
+    onMount(() => {
+        cleanUp = $effect.root(fn);
+    });
     onDestroy(destroy);
     return destroy;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"
@@ -21,7 +21,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "5.0.0-next.99"
   },
   "devDependencies": {
     "@bitmachina/highlighter": "1.0.0-alpha.7",
@@ -48,7 +48,7 @@
     "rehype-slug": "^6.0.0",
     "remark-external-links": "^9.0.1",
     "shiki": "^1.2.0",
-    "svelte": "5.0.0-next.94",
+    "svelte": "5.0.0-next.99",
     "svelte-check": "^3.6.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",