lithesome 0.12.1 → 0.12.3

package/dist/components/Combobox/ComboboxContent.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">import { context } from "./Combobox.svelte";
-import { useFloating, useActions, getTransition, classProp, log } from "../../internal/index.js";
-import { usePortal, useOutside } from "../../index.js";
-import { onMount } from "svelte";
+import { classProp, FloatingContent } from "../../internal/index.js";
 let {
   children,
   transition,
@@ -15,57 +13,25 @@ let {
   ...props
 } = $props();
 const ctx = context();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  id: ctx.uid("content"),
-  "aria-labelledby": ctx.uid("trigger"),
-  role: "listbox",
-  class: classProp(klass, { visible: ctx.visible }),
-  "data-comboboxcontent": "",
-  hidden: !ctx.mounted || void 0
-});
-onMount(() => {
-  if (!ctx)
-    log.error("<ComboboxContent> Must be a direct child of <Combobox />");
-});
-$effect(() => {
-  if (ctx.visible && self)
-    ctx.content = self;
-});
+const state = $derived({ visible: ctx.visible });
 </script>
 
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		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:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => ctx.close()
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+<FloatingContent
+	{children}
+	componentName="Select"
+	visible={ctx.visible}
+	bind:self
+	{state}
+	{ctx}
+	{transition}
+	{use}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={classProp(klass, state)}
+	hidden={!ctx.mounted || undefined}
+	{...props}
+/>

package/dist/components/Combobox/ComboboxInput.svelte

@@ -29,8 +29,8 @@ const handleKeydown = (e) => {
   if (disabled)
     return;
   const { key } = e;
+  ctx.touched = true;
   if (!PREVENT_KEYS.includes(key)) {
-    ctx.touched = true;
     if (!ctx.visible)
       ctx.open();
   }

package/dist/components/Hovercard/HovercardContent.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">import { context } from "./Hovercard.svelte";
-import { useFloating, useActions, getTransition, classProp, log } from "../../internal/index.js";
-import { useOutside, usePortal } from "../../index.js";
-import { onMount } from "svelte";
+import { classProp, FloatingContent } from "../../internal/index.js";
 let {
   children,
   transition,
@@ -17,21 +15,7 @@ let {
   ...props
 } = $props();
 const ctx = context();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  id: ctx.uid("content"),
-  "aria-labelledby": ctx.uid("trigger"),
-  class: classProp(klass, { visible: ctx.visible }),
-  "data-hovercardcontent": ""
-});
-onMount(async () => {
-  if (!ctx)
-    log.error("<HoverCardContent> Must be a direct child of <HoverCard />");
-});
-$effect(() => {
-  if (ctx.visible && self)
-    ctx.content = self;
-});
+const state = $derived({ visible: ctx.visible });
 const handleMouseenter = (e) => {
   onMouseenter?.(e);
   ctx.hovered = true;
@@ -44,50 +28,23 @@ const handleMouseleave = (e) => {
 };
 </script>
 
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		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:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		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}
+<FloatingContent
+	{children}
+	componentName="Hovercard"
+	visible={ctx.visible}
+	bind:self
+	bind:sameWidth
+	bind:transition
+	bind:constrainViewport
+	bind:placement
+	bind:portalTarget
+	{state}
+	{ctx}
+	{use}
+	outsideCallback={() => ctx.forceClose()}
+	role="listbox"
+	class={classProp(klass, state)}
+	onmouseenter={handleMouseenter}
+	onmouseleave={handleMouseleave}
+	{...props}
+/>

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

@@ -17,5 +17,6 @@ export declare class HovercardContext extends FloatingContext {
     constructor(init: Init);
     open(): void;
     close(): void;
+    forceClose(): void;
 }
 export {};

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

@@ -27,6 +27,10 @@ export class HovercardContext extends FloatingContext {
                 this.visible = false;
         }, this.delays.out);
     }
+    forceClose() {
+        this.visible = false;
+        this.timeout = null;
+    }
     #effects = effects(() => {
         this.hooks?.onChange?.(this.visible);
     });

package/dist/components/Menu/MenuContent.svelte

@@ -1,64 +1,35 @@
 <script lang="ts">import { context } from "./Menu.svelte";
-import { useFloating, useActions, getTransition, classProp, log } from "../../internal/index.js";
-import { useOutside, usePortal } from "../../index.js";
-import { onMount } from "svelte";
+import { FloatingContent } from "../../internal/index.js";
 let {
   children,
   transition,
   use = [],
   portalTarget = "body",
+  sameWidth = false,
   class: klass,
   self = $bindable(),
   placement = "bottom",
-  constrainViewport,
-  sameWidth = false,
+  constrainViewport = false,
   ...props
 } = $props();
 const ctx = context();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  id: ctx.uid("content"),
-  "aria-labelledby": ctx.uid("trigger"),
-  role: "menu",
-  class: classProp(klass, { visible: ctx.visible }),
-  "data-menucontent": ""
-});
-onMount(async () => {
-  if (!ctx)
-    log.error("<MenuContent> Must be a direct child of <Menu />");
-});
-$effect(() => {
-  if (ctx.visible && self)
-    ctx.content = self;
-});
+const state = $derived({ visible: ctx.visible });
 </script>
 
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		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:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+<FloatingContent
+	{children}
+	componentName="Menu"
+	visible={ctx.visible}
+	{state}
+	{ctx}
+	{transition}
+	{use}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={klass}
+	{...props}
+/>

package/dist/components/Popover/PopoverContent.svelte

@@ -1,86 +1,47 @@
 <script lang="ts">import { context } from "./Popover.svelte";
-import { useFloating, useActions, getTransition, classProp, log } from "../../internal/index.js";
-import { useOutside, usePortal, useTrap } from "../../index.js";
-import { onMount } from "svelte";
+import { FloatingContent } from "../../internal/index.js";
+import { useTrap } from "../../index.js";
 let {
   children,
   transition,
   use = [],
   portalTarget = "body",
+  sameWidth = false,
   class: klass,
   self = $bindable(),
   placement = "bottom",
-  constrainViewport,
-  sameWidth = false,
+  constrainViewport = false,
   ...props
 } = $props();
 const ctx = context();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  id: ctx.uid("content"),
-  "aria-labelledby": ctx.uid("trigger"),
-  role: "menu",
-  class: classProp(klass, { visible: ctx.visible }),
-  "data-popovercontent": ""
-});
-onMount(async () => {
-  if (!ctx)
-    log.error("<PopoverContent> Must be a direct child of <Popover />");
-});
-$effect(() => {
-  if (ctx.visible && self)
-    ctx.content = self;
-});
+const state = $derived({ visible: ctx.visible });
 </script>
 
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		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:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.close();
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		use:useTrap={{
-			allowOutsideClick: true,
-			onDeactivate: () => {
-				ctx.visible = false;
+<FloatingContent
+	{children}
+	componentName="Popover"
+	visible={ctx.visible}
+	{state}
+	{ctx}
+	{transition}
+	use={[
+		[
+			useTrap,
+			{
+				allowOutsideClick: true,
+				onDeactivate: () => {
+					ctx.visible = false;
+				}
 			}
-		}}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+		],
+		...use
+	]}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={klass}
+	{...props}
+/>

package/dist/components/Select/SelectContent.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">import { context } from "./Select.svelte";
-import { useActions, getTransition, classProp, log, useFloating } from "../../internal/index.js";
-import { useOutside, usePortal } from "../../index.js";
-import { onMount } from "svelte";
+import { FloatingContent } from "../../internal/index.js";
 let {
   children,
   transition,
@@ -15,51 +13,24 @@ let {
   ...props
 } = $props();
 const ctx = context();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  id: ctx.uid("content"),
-  "aria-labelledby": ctx.uid("trigger"),
-  role: "listbox",
-  class: classProp(klass, { visible: ctx.visible }),
-  "data-selectcontent": "",
-  hidden: !ctx.mounted || void 0
-});
-onMount(() => {
-  if (!ctx)
-    log.error("<SelectContent> Must be a direct child of <Select />");
-});
-$effect(() => {
-  if (ctx.visible && self)
-    ctx.content = self;
-});
+const state = $derived({ visible: ctx.visible });
 </script>
 
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		use:useOutside={{ exclude: ctx.content, 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:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
-		use:useOutside={{ exclude: ctx.content, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+<FloatingContent
+	{children}
+	componentName="Select"
+	visible={ctx.visible}
+	{state}
+	{ctx}
+	{transition}
+	{use}
+	{sameWidth}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
+	outsideCallback={() => ctx.close()}
+	role="listbox"
+	class={klass}
+	hidden={!ctx.mounted || undefined}
+	{...props}
+/>

package/dist/components/Toast/Toast.svelte

@@ -1,26 +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>
+
 <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>
+</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/ToastMessage.svelte

@@ -2,15 +2,15 @@
 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>
+</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/ToastTitle.svelte

@@ -2,8 +2,8 @@
 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>
+</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/Toaster.svelte

@@ -9,15 +9,15 @@ let {
   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>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	use:usePortal={portalTarget}
+	class={classProp(klass)}
+	data-toaster=""
+	{...props}
+>
+	{@render children(toasts)}
+</div>

package/dist/internal/components/FloatingContent.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import {
+  useActions,
+  classProp,
+  log,
+  FloatingContext,
+  useFloating,
+  getTransition
+} from "../index.js";
+import { useOutside } from "../../actions/outside.js";
+import { usePortal } from "../../actions/portal.js";
+let {
+  children,
+  class: klass,
+  use = [],
+  visible = $bindable(),
+  self = $bindable(),
+  state = $bindable(),
+  transition = $bindable(),
+  sameWidth = $bindable(),
+  constrainViewport = $bindable(),
+  portalTarget = $bindable(),
+  placement = $bindable(),
+  outsideCallback,
+  ctx,
+  componentName,
+  ...props
+} = $props();
+const attrs = $derived({
+  [`data-${componentName.toLowerCase()}content`]: "",
+  id: ctx.uid("content"),
+  "aria-labelledby": ctx.uid("trigger"),
+  class: classProp(klass, state)
+});
+const { inTransition, outTransition } = getTransition(transition);
+$effect(() => {
+  if (!visible)
+    return;
+  if (!ctx)
+    throw log.error(`<${componentName}Content /> must be a child of <${componentName} />`);
+  if (!self)
+    throw log.error(`Cannot initialize content node of <${componentName}Content />.`);
+  ctx.content = self;
+});
+</script>
+
+{#if inTransition && outTransition && visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => outsideCallback() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: visible })}
+	</div>
+{:else if visible}
+	<div
+		bind:this={self}
+		use:useFloating={{ anchor: ctx.trigger, arrow: ctx.arrow, sameWidth, constrainViewport, placement }}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => outsideCallback() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: visible })}
+	</div>
+{/if}

package/dist/internal/components/FloatingContent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { FloatingContext, type Props, type ContentProps } from '../index.js';
+declare const __propDef: {
+    props: Props<HTMLDivElement, any> & ContentProps & {
+        componentName: string;
+        ctx: FloatingContext;
+        state?: Record<string, any> | undefined;
+        visible: boolean;
+        outsideCallback: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FloatingContentProps = typeof __propDef.props;
+export type FloatingContentEvents = typeof __propDef.events;
+export type FloatingContentSlots = typeof __propDef.slots;
+export default class FloatingContent extends SvelteComponent<FloatingContentProps, FloatingContentEvents, FloatingContentSlots> {
+}
+export {};

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

@@ -40,18 +40,16 @@ export const setupContext = () => {
  */
 export const effects = (fn) => {
     let cleanUp = null;
-    let mounted = false;
     const destroy = () => {
         if (cleanUp === null)
             return;
         cleanUp();
         cleanUp = null;
     };
-    onMount(() => {
-        mounted = true;
-    });
-    if (mounted)
-        $effect.root(fn);
+    try {
+        cleanUp = $effect.root(fn);
+    }
+    catch (error) { }
     onDestroy(destroy);
     return destroy;
 };

package/dist/internal/helpers/floating.d.ts

@@ -7,7 +7,7 @@ interface FloatingConfig {
     constrainViewport?: boolean;
     sameWidth?: boolean;
 }
-export declare const useFloating: (target: HTMLElement, config: FloatingConfig) => {
+export declare const useFloating: (node: HTMLElement, config: FloatingConfig) => {
     destroy(): void;
 } | undefined;
 export {};

package/dist/internal/helpers/floating.js

@@ -1,6 +1,6 @@
 import { computePosition, flip, shift, autoUpdate, size, arrow as floatingArrow } from '@floating-ui/dom';
 import { defaultConfig, setNodeStyles, setNodeProps } from '../index.js';
-export const useFloating = (target, config) => {
+export const useFloating = (node, config) => {
     const { anchor, arrow, placement, constrainViewport, sameWidth } = defaultConfig(config, {
         anchor: null,
         arrow: null,
@@ -11,8 +11,8 @@ export const useFloating = (target, config) => {
     if (!anchor)
         return;
     let cleanUp = null;
-    cleanUp = autoUpdate(anchor, target, () => {
-        computePosition(anchor, target, {
+    cleanUp = autoUpdate(anchor, node, () => {
+        computePosition(anchor, node, {
             placement,
             middleware: [
                 arrow ? floatingArrow({ element: arrow }) : undefined,
@@ -25,7 +25,7 @@ export const useFloating = (target, config) => {
                         if (sameWidth)
                             elements.floating.style.width = elements.reference.getBoundingClientRect().width + 'px';
                         if (constrainViewport) {
-                            setNodeStyles(anchor, {
+                            setNodeStyles(node, {
                                 maxWidth: `${availableWidth}px`,
                                 maxHeight: `${availableHeight}px`
                             });
@@ -35,12 +35,12 @@ export const useFloating = (target, config) => {
             ]
         }).then(({ x, y, placement, middlewareData }) => {
             const [side, alignment] = placement.split('-');
-            setNodeStyles(target, {
+            setNodeStyles(node, {
                 left: `${x}px`,
                 top: `${y}px`,
                 position: 'absolute'
             });
-            setNodeProps(target, {
+            setNodeProps(node, {
                 'data-side': side,
                 'data-alignment': alignment || 'center'
             });

package/dist/internal/index.d.ts

@@ -9,3 +9,4 @@ export * from './helpers/floating.js';
 export * from './helpers/log.js';
 export * from './helpers/context.svelte.js';
 export { default as FloatingArrow } from './components/FloatingArrow.svelte';
+export { default as FloatingContent } from './components/FloatingContent.svelte';

package/dist/internal/index.js

@@ -9,3 +9,4 @@ export * from './helpers/floating.js';
 export * from './helpers/log.js';
 export * from './helpers/context.svelte.js';
 export { default as FloatingArrow } from './components/FloatingArrow.svelte';
+export { default as FloatingContent } from './components/FloatingContent.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.12.1",
+	"version": "0.12.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",