lithesome 0.10.3 → 0.12.0

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();
-</script>
-
+</script>
+
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
@@ -19,15 +19,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/AccordionButton.svelte.d.ts

@@ -1,14 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { AccordionButtonProps } from './types.js';
 declare const __propDef: {
-    props: any;
+    props: AccordionButtonProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type AccordionButtonProps = typeof __propDef.props;
+type AccordionButtonProps_ = typeof __propDef.props;
+export { AccordionButtonProps_ as AccordionButtonProps };
 export type AccordionButtonEvents = typeof __propDef.events;
 export type AccordionButtonSlots = typeof __propDef.slots;
-export default class AccordionButton extends SvelteComponent<AccordionButtonProps, AccordionButtonEvents, AccordionButtonSlots> {
+export default class AccordionButton extends SvelteComponent<AccordionButtonProps_, AccordionButtonEvents, AccordionButtonSlots> {
 }
-export {};

package/dist/components/Checkbox/Checkbox.svelte

@@ -16,22 +16,21 @@ const handleClick = (e) => {
     return;
   checked = checked === "mixed" ? true : !checked;
 };
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { checked })}
-	role="checkbox"
-	aria-checked={checked}
-	aria-required={required}
-	data-state={checked ? 'checked' : 'unchecked'}
-	data-checkbox=""
-	onclick={handleClick}
-	{...props}
->
-	{#if children}
-		{@render children({ checked })}
-	{/if}
-</button>
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { checked })}
+	role="checkbox"
+	aria-checked={checked}
+	aria-required={required}
+	disabled={disabled || undefined}
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-checkbox=""
+	onclick={handleClick}
+	{...props}
+>
+	{@render children?.({ checked })}
+</button>

package/dist/components/Combobox/ComboboxContent.svelte

@@ -52,38 +52,38 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => ctx.close()
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => ctx.close()
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => ctx.close()
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => ctx.close()
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Hovercard/HovercardContent.svelte

@@ -62,50 +62,50 @@ const handleMouseleave = (e) => {
   ctx.hovered = false;
   ctx.close();
 };
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.visible = false;
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		onmouseenter={handleMouseenter}
-		onmouseleave={handleMouseleave}
-		role="menu"
-		tabindex={-1}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.visible = false;
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		onmouseenter={handleMouseenter}
-		onmouseleave={handleMouseleave}
-		role="menu"
-		tabindex={-1}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.visible = false;
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		onmouseenter={handleMouseenter}
+		onmouseleave={handleMouseleave}
+		role="menu"
+		tabindex={-1}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.visible = false;
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		onmouseenter={handleMouseenter}
+		onmouseleave={handleMouseleave}
+		role="menu"
+		tabindex={-1}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Menu/MenuContent.svelte

@@ -51,32 +51,32 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Modal/ModalContent.svelte

@@ -14,24 +14,24 @@ const attrs = $derived({
   "aria-labelledby": ctx.uid("title"),
   "data-modalcontent": ""
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useTrap={{ allowOutsideClick: true }}
-		use:useActions={use}
-		in:inFn|global={inConf}
-		out:outFn|global={outConf}
-		{...props}
-		{...attrs}
-	>
-		{@render children({})}
-	</div>
-{:else if ctx.visible}
-	<div bind:this={self} use:useTrap={{ allowOutsideClick: true }} use:useActions={use} {...props} {...attrs}>
-		{@render children({})}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useTrap={{ allowOutsideClick: true }}
+		use:useActions={use}
+		in:inFn|global={inConf}
+		out:outFn|global={outConf}
+		{...props}
+		{...attrs}
+	>
+		{@render children({})}
+	</div>
+{:else if ctx.visible}
+	<div bind:this={self} use:useTrap={{ allowOutsideClick: true }} use:useActions={use} {...props} {...attrs}>
+		{@render children({})}
+	</div>
+{/if}

package/dist/components/Popover/PopoverContent.svelte

@@ -51,54 +51,54 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.close();
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		use:useTrap={{
-			allowOutsideClick: true,
-			onDeactivate: () => {
-				ctx.visible = false;
-			}
-		}}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.close();
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		use:useTrap={{
-			allowOutsideClick: true,
-			onDeactivate: () => {
-				ctx.visible = false;
-			}
-		}}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.close();
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		use:useTrap={{
+			allowOutsideClick: true,
+			onDeactivate: () => {
+				ctx.visible = false;
+			}
+		}}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.close();
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		use:useTrap={{
+			allowOutsideClick: true,
+			onDeactivate: () => {
+				ctx.visible = false;
+			}
+		}}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Portal/Portal.svelte

@@ -8,8 +8,8 @@ let {
   target = $bindable("body"),
   ...props
 } = $props();
-</script>
-
-<div bind:this={self} use:useActions={use} use:usePortal={target} class={classProp(klass)} data-portal="" {...props}>
-	{@render children({})}
-</div>
+</script>
+
+<div bind:this={self} use:useActions={use} use:usePortal={target} class={classProp(klass)} data-portal="" {...props}>
+	{@render children({})}
+</div>

package/dist/components/Select/SelectContent.svelte

@@ -52,32 +52,32 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+let {
+  children,
+  class: klass,
+  use = [],
+  self = $bindable(),
+  checked = $bindable(false),
+  required = false,
+  disabled = $bindable(false),
+  onClick,
+  ...props
+} = $props();
+const handleClick = (e) => {
+  onClick?.(e);
+  if (disabled)
+    return;
+  checked = !checked;
+};
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { checked, disabled })}
+	role="switch"
+	aria-checked={checked}
+	aria-required={required}
+	aria-readonly={disabled || undefined}
+	disabled={disabled || undefined}
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-switch=""
+	onclick={handleClick}
+	{...props}
+>
+	{@render children?.({ checked, disabled })}
+</button>

package/dist/components/Switch/Switch.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { SwitchProps } from './types.js';
+declare const __propDef: {
+    props: SwitchProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SwitchProps_ = typeof __propDef.props;
+export { SwitchProps_ as SwitchProps };
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps_, SwitchEvents, SwitchSlots> {
+}

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.svelte';
+export type * from './types.js';

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.svelte';

package/dist/components/Switch/types.d.ts

@@ -0,0 +1,17 @@
+import type { Handler, PropsMaybeChildren } from '../../internal/types.js';
+interface SwitchState {
+    /** If the Switch is checked or not. */
+    checked: boolean;
+    /** If the Switch is disabled or not. */
+    disabled: boolean;
+}
+export interface SwitchProps extends PropsMaybeChildren<HTMLButtonElement, SwitchState> {
+    /** If the switch is checked or not. */
+    checked?: boolean;
+    /** Adds aria attributes. */
+    required?: boolean;
+    /** Disabled the switch, disallowing the internal events. */
+    disabled?: boolean;
+    onClick?: Handler<MouseEvent, HTMLButtonElement>;
+}
+export {};

package/dist/components/Switch/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
+import { ToastContext } from "./context.svelte.js";
+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(), ...props } = $props();
+const ctx = new ToastContext();
+setContext(contextName, ctx);
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass)}
+	role="alert"
+	aria-labelledby={ctx.uid('title')}
+	aria-describedby={ctx.uid('description')}
+	aria-live="assertive"
+	tabindex="-1"
+	data-toast=""
+	{...props}
+>
+	{@render children({})}
+</div>

package/dist/components/Toast/Toast.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { ToastContext } from './context.svelte.js';
+export declare const context: () => ToastContext, contextName: string;
+import type { ToastProps } from './types.js';
+declare const __propDef: {
+    props: ToastProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToastProps_ = typeof __propDef.props;
+export { ToastProps_ as ToastProps };
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps_, ToastEvents, ToastSlots> {
+}

package/dist/components/Toast/ToastMessage.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+import { context } from "./Toast.svelte";
+let { children, use = [], class: klass, self = $bindable(), ...props } = $props();
+const ctx = context();
+</script>
+
+<p
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('description')}
+	class={classProp(klass)}
+	data-toastdescription=""
+	{...props}
+>
+	{@render children({})}
+</p>

package/dist/components/Toast/ToastMessage.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { ToastMessageProps } from './types.js';
+declare const __propDef: {
+    props: ToastMessageProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToastMessageProps_ = typeof __propDef.props;
+export { ToastMessageProps_ as ToastMessageProps };
+export type ToastMessageEvents = typeof __propDef.events;
+export type ToastMessageSlots = typeof __propDef.slots;
+export default class ToastMessage extends SvelteComponent<ToastMessageProps_, ToastMessageEvents, ToastMessageSlots> {
+}

package/dist/components/Toast/ToastTitle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+import { context } from "./Toast.svelte";
+let { children, use = [], class: klass, self = $bindable(), ...props } = $props();
+const ctx = context();
+</script>
+
+<h3 bind:this={self} use:useActions={use} id={ctx.uid('title')} class={classProp(klass)} data-toasttitle="" {...props}>
+	{@render children({})}
+</h3>

package/dist/components/Toast/ToastTitle.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { ToastTitleProps } from './types.js';
+declare const __propDef: {
+    props: ToastTitleProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToastTitleProps_ = typeof __propDef.props;
+export { ToastTitleProps_ as ToastTitleProps };
+export type ToastTitleEvents = typeof __propDef.events;
+export type ToastTitleSlots = typeof __propDef.slots;
+export default class ToastTitle extends SvelteComponent<ToastTitleProps_, ToastTitleEvents, ToastTitleSlots> {
+}

package/dist/components/Toast/Toaster.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+import { usePortal } from "../../index.js";
+import { toasts } from "./context.svelte.js";
+let {
+  children,
+  use = [],
+  class: klass,
+  self = $bindable(),
+  portalTarget = "body",
+  ...props
+} = $props();
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	use:usePortal={portalTarget}
+	class={classProp(klass)}
+	data-toaster=""
+	{...props}
+>
+	{@render children(toasts)}
+</div>

package/dist/components/Toast/Toaster.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { ToasterProps } from './types.js';
+declare const __propDef: {
+    props: ToasterProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ToasterProps_ = typeof __propDef.props;
+export { ToasterProps_ as ToasterProps };
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = typeof __propDef.slots;
+export default class Toaster extends SvelteComponent<ToasterProps_, ToasterEvents, ToasterSlots> {
+}

package/dist/components/Toast/context.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Context } from '../../internal/index.js';
+import type { Toast, ToastConfig, ToastType } from './types.js';
+export declare let toasts: Toast[];
+export declare class ToastContext extends Context {
+    constructor();
+}
+export declare class Toaster {
+    add(type: ToastType, config: ToastConfig): void;
+    removeById(toastId: string): void;
+}
+export declare const toaster: Toaster;

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

@@ -0,0 +1,37 @@
+import { Context, createUID, log, parseDuration, defaultConfig } from '../../internal/index.js';
+export let toasts = $state([]);
+export class ToastContext extends Context {
+    constructor() {
+        super('toast');
+    }
+}
+export class Toaster {
+    add(type, config) {
+        if (!config.title || !config.message)
+            throw log.error('`title` and `message` must be provided.');
+        const duration = parseDuration(config.duration || '5s');
+        const { uid } = createUID('toast');
+        const toast = {
+            id: uid(),
+            type,
+            config: defaultConfig(config, {
+                title: '',
+                message: '',
+                dismissable: false,
+                duration,
+                props: {}
+            })
+        };
+        toasts.push(toast);
+        setTimeout(() => {
+            if (toasts.find((el) => el.id === toast.id)) {
+                this.removeById(toast.id);
+            }
+        }, duration);
+    }
+    removeById(toastId) {
+        const i = toasts.findIndex((el) => el.id === toastId);
+        toasts.splice(i, 1);
+    }
+}
+export const toaster = new Toaster();

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Toaster } from './Toaster.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as ToastTitle } from './ToastTitle.svelte';
+export { default as ToastMessage } from './ToastMessage.svelte';
+export { toaster } from './context.svelte.js';
+export type * from './types.js';

package/dist/components/Toast/index.js

@@ -0,0 +1,5 @@
+export { default as Toaster } from './Toaster.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as ToastTitle } from './ToastTitle.svelte';
+export { default as ToastMessage } from './ToastMessage.svelte';
+export { toaster } from './context.svelte.js';

package/dist/components/Toast/types.d.ts

@@ -0,0 +1,31 @@
+import type { Props } from '../../internal/index.js';
+export type ToastType = 'success' | 'warning' | 'error' | 'info' | 'attention';
+export interface ToastConfig {
+    /** The title of the toast. */
+    title: string;
+    /** The message to be displayed. */
+    message: string;
+    /** The durtation of the toast to be visible. */
+    duration?: string | number;
+    /** Allows the toast to be removed early. */
+    dismissable?: boolean;
+    /** Any custom props that you wish to pass down. */
+    props?: Record<string, any>;
+}
+export interface Toast {
+    /** The unique ID ofthe toast. */
+    id: string;
+    /** The type of the toast. */
+    type: ToastType;
+    config: ToastConfig;
+}
+export interface ToasterProps extends Props<HTMLDivElement, Toast[]> {
+    /** The element to portal the content menu to. */
+    portalTarget?: string | HTMLElement;
+}
+export interface ToastProps extends Props<HTMLDivElement> {
+}
+export interface ToastTitleProps extends Props<HTMLHeadingElement> {
+}
+export interface ToastMessageProps extends Props<HTMLParagraphElement> {
+}

package/dist/components/Toast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
 export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
+export * from './components/Switch/index.js';
+export * from './components/Toast/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/index.js

@@ -10,6 +10,8 @@ export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
 export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
+export * from './components/Switch/index.js';
+export * from './components/Toast/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/internal/components/FloatingArrow.svelte

@@ -19,6 +19,6 @@ onMount(() => {
     throw log.error(`Cannot initialize arrow node of <${component}Arrow />.`);
   ctx.arrow = self;
 });
-</script>
-
-<div bind:this={self} use:useActions={use} class={classProp(klass, state)} {...dataProps} {...props}></div>
+</script>
+
+<div bind:this={self} use:useActions={use} class={classProp(klass, state)} {...dataProps} {...props}></div>

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

@@ -40,6 +40,7 @@ export const setupContext = () => {
  */
 export const effects = (fn) => {
     let cleanUp = null;
+    let mounted = false;
     const destroy = () => {
         if (cleanUp === null)
             return;
@@ -47,8 +48,10 @@ export const effects = (fn) => {
         cleanUp = null;
     };
     onMount(() => {
-        cleanUp = $effect.root(fn);
+        mounted = true;
     });
+    if (mounted)
+        $effect.root(fn);
     onDestroy(destroy);
     return destroy;
 };

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

@@ -39,3 +39,10 @@ export declare const parseDelay: (delay: number | [number, number]) => {
     in: number;
     out: number;
 };
+/**
+ * Transforms the string value to a number.
+ *
+ * Supported identifiers: `ms`, `s`
+ * @param value The value to be transformed.
+ */
+export declare const parseDuration: (value: number | string) => number;

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

@@ -1,3 +1,4 @@
+import { log } from './log.js';
 /**
  * Calculates the index position of the action given.
  * @param action Which direction to navigate the index.
@@ -86,3 +87,19 @@ export const parseDelay = (delay) => {
         out: Array.isArray(delay) ? delay[1] : delay
     };
 };
+/**
+ * Transforms the string value to a number.
+ *
+ * Supported identifiers: `ms`, `s`
+ * @param value The value to be transformed.
+ */
+export const parseDuration = (value) => {
+    if (typeof value === 'number')
+        return value;
+    if (!/ms|s$/.test(value))
+        throw log.error('`duration` prop was given a string but not a leading identifier (ms/s).');
+    const duration = parseFloat(value.split(/ms|s/)[0]);
+    if (/(?=ms)(?!s)/.test(value))
+        return duration;
+    return duration * 1000;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"
@@ -21,10 +21,10 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "5.0.0-next.120"
+    "svelte": "5.0.0-next.137"
   },
   "devDependencies": {
-    "@bitmachina/highlighter": "1.0.0-alpha.7",
+    "@bitmachina/highlighter": "1.0.0-alpha",
     "@steeze-ui/lucide-icons": "^1.2.0",
     "@steeze-ui/svelte-icon": "^1.5.0",
     "@sveltejs/adapter-vercel": "^5.1.1",
@@ -48,7 +48,7 @@
     "rehype-slug": "^6.0.0",
     "remark-external-links": "^9.0.1",
     "shiki": "^1.2.0",
-    "svelte": "5.0.0-next.120",
+    "svelte": "5.0.0-next.137",
     "svelte-check": "^3.6.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",