bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,9 +1,8 @@
 import { Previous } from "runed";
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { box, useRefById } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { noop } from "../../internal/callbacks.js";
+import { noop } from "../../internal/noop.js";
 import { addEventListener } from "../../internal/events.js";
 import { getDisabled } from "../../internal/attrs.js";
 export const REGEXP_ONLY_DIGITS = "^\\d+$";
@@ -38,7 +37,10 @@ class PinInputRootState {
             return this.#pattern.current;
         }
     });
-    #prevInputMetadata = $state([null, null, "none"]);
+    #prevInputMetadata = $state({
+        prev: [null, null, "none"],
+        willSyntheticBlur: false,
+    });
     #pushPasswordManagerStrategy;
     #pwmb;
     #initialLoad;
@@ -77,7 +79,7 @@ class PinInputRootState {
         });
         $effect(() => {
             let unsub = noop;
-            untrack(() => {
+            return untrack(() => {
                 const input = this.#inputRef.current;
                 const container = this.#ref.current;
                 if (!input || !container)
@@ -85,7 +87,7 @@ class PinInputRootState {
                 if (this.#initialLoad.value.current !== input.value) {
                     this.value.current = input.value;
                 }
-                this.#prevInputMetadata = [
+                this.#prevInputMetadata.prev = [
                     input.selectionStart,
                     input.selectionEnd,
                     input.selectionDirection ?? "none",
@@ -119,7 +121,7 @@ class PinInputRootState {
                 const input = this.#inputRef.current;
                 if (!input)
                     return;
-                // forcefully remove :autofull state
+                // forcefully remove :autofill state
                 input.dispatchEvent(new Event("input"));
                 // update selection state
                 const start = input.selectionStart;
@@ -128,7 +130,7 @@ class PinInputRootState {
                 if (start !== null && end !== null) {
                     this.#mirrorSelectionStart = start;
                     this.#mirrorSelectionEnd = end;
-                    this.#prevInputMetadata = [start, end, dir];
+                    this.#prevInputMetadata.prev = [start, end, dir];
                 }
             });
         });
@@ -145,6 +147,30 @@ class PinInputRootState {
             }
         });
     }
+    keysToIgnore = [
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "Escape",
+        "Enter",
+        "Tab",
+        "Shift",
+        "Control",
+        "Meta",
+    ];
+    #onkeydown = (e) => {
+        const key = e.key;
+        if (this.keysToIgnore.includes(key))
+            return;
+        if (key && this.#regexPattern && !this.#regexPattern.test(key)) {
+            e.preventDefault();
+        }
+    };
     #rootStyles = $derived.by(() => ({
         position: "relative",
         cursor: this.#disabled.current ? "default" : "text",
@@ -220,7 +246,7 @@ class PinInputRootState {
         const selDir = input.selectionDirection ?? "none";
         const maxLength = input.maxLength;
         const val = input.value;
-        const prev = this.#prevInputMetadata;
+        const prev = this.#prevInputMetadata.prev;
         let start = -1;
         let end = -1;
         let direction;
@@ -262,7 +288,7 @@ class PinInputRootState {
         const dir = direction ?? selDir;
         this.#mirrorSelectionStart = s;
         this.#mirrorSelectionEnd = e;
-        this.#prevInputMetadata = [s, e, dir];
+        this.#prevInputMetadata.prev = [s, e, dir];
     };
     #oninput = (e) => {
         const newValue = e.currentTarget.value.slice(0, this.#maxLength.current);
@@ -294,11 +320,28 @@ class PinInputRootState {
     };
     #onpaste = (e) => {
         const input = this.#inputRef.current;
+        if (!this.#initialLoad.isIOS) {
+            if (!e.clipboardData || !input)
+                return;
+            const content = e.clipboardData.getData("text/plain");
+            const sanitizedContent = this.#onPaste?.current?.(content) ?? content;
+            if (sanitizedContent.length > 0 &&
+                this.#regexPattern &&
+                !this.#regexPattern.test(sanitizedContent)) {
+                e.preventDefault();
+                return;
+            }
+        }
         if (!this.#initialLoad.isIOS || !e.clipboardData || !input)
             return;
         const content = e.clipboardData.getData("text/plain");
         e.preventDefault();
         const sanitizedContent = this.#onPaste?.current?.(content) ?? content;
+        if (sanitizedContent.length > 0 &&
+            this.#regexPattern &&
+            !this.#regexPattern.test(sanitizedContent)) {
+            return;
+        }
         const start = input.selectionStart === null ? undefined : input.selectionStart;
         const end = input.selectionEnd === null ? undefined : input.selectionEnd;
         const isReplacing = start !== end;
@@ -325,6 +368,10 @@ class PinInputRootState {
         this.#isHoveringInput = false;
     };
     #onblur = () => {
+        if (this.#prevInputMetadata.willSyntheticBlur) {
+            this.#prevInputMetadata.willSyntheticBlur = false;
+            return;
+        }
         this.#isFocused.current = false;
     };
     inputProps = $derived.by(() => ({
@@ -342,6 +389,7 @@ class PinInputRootState {
         //
         onpaste: this.#onpaste,
         oninput: this.#oninput,
+        onkeydown: this.#onkeydown,
         onmouseover: this.#onmouseover,
         onmouseleave: this.#onmouseleave,
         onfocus: this.#onfocus,

package/dist/bits/pin-input/types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes, PrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
 export type PinInputRootSnippetProps = {
     cells: PinInputCell[];
     isFocused: boolean;
@@ -66,7 +66,7 @@ export type PinInputRootPropsWithoutHTML = Omit<WithChild<{
      */
     children: Snippet<[PinInputRootSnippetProps]>;
 }, PinInputRootSnippetProps>, "child">;
-export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<PrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
+export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
 export type PinInputCellPropsWithoutHTML = WithChild<{
     /**
      * This specific cell, which is provided by the `cells` snippet prop from
@@ -74,7 +74,7 @@ export type PinInputCellPropsWithoutHTML = WithChild<{
      */
     cell: PinInputCell;
 }>;
-export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<PrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
+export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
 export type PinInputCell = {
     /**
      * The character displayed in the cell.

package/dist/bits/pin-input/usePasswordManager.svelte.js

@@ -16,10 +16,10 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
     let hasPwmBadgeSpace = $state(false);
     let done = $state(false);
     function willPushPwmBadge() {
-        const strat = pushPasswordManagerStrategy.current;
-        if (strat === "none")
+        const strategy = pushPasswordManagerStrategy.current;
+        if (strategy === "none")
             return false;
-        const increaseWidthCase = strat === "increase-width" && hasPwmBadge && hasPwmBadgeSpace;
+        const increaseWidthCase = strategy === "increase-width" && hasPwmBadge && hasPwmBadgeSpace;
         return increaseWidthCase;
     }
     function trackPwmBadge() {
@@ -35,10 +35,10 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
         const y = centeredY;
         // do an extra search to check for all the password manager badges
-        const pwms = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
-        // if no password manager is detected, dispatch document.elementfrompoint to
+        const passwordManagerStrategy = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+        // if no password manager is detected, dispatch document.elementFromPoint to
         // identify the badges
-        if (pwms.length === 0) {
+        if (passwordManagerStrategy.length === 0) {
             const maybeBadgeEl = document.elementFromPoint(x, y);
             // if the found element is the container,
             // then it is not a badge, most times there is no badge in this case

package/dist/bits/popover/components/popover-arrow.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ArrowProps } from "../index.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import type { PopoverArrowProps } from "../types.js";
+	import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
 
-	let { ref = $bindable(null), ...restProps }: ArrowProps = $props();
+	let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
 </script>
 
-<FloatingLayer.Arrow bind:ref {...restProps} data-popover-arrow="" />
+<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />

package/dist/bits/popover/components/popover-close.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CloseProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverCloseProps } from "../types.js";
 	import { usePopoverClose } from "../popover.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -11,7 +10,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: CloseProps = $props();
+	}: PopoverCloseProps = $props();
 
 	const closeState = usePopoverClose({
 		id: box.with(() => id),

package/dist/bits/popover/components/popover-close.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CloseProps } from "../index.js";
+import type { PopoverCloseProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PopoverClose: $$__sveltets_2_IsomorphicComponent<CloseProps, {
+declare const PopoverClose: $$__sveltets_2_IsomorphicComponent<PopoverCloseProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type PopoverClose = InstanceType<typeof PopoverClose>;

package/dist/bits/popover/components/popover-content-static.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentProps } from "../types.js";
 	import { usePopoverContent } from "../popover.svelte.js";
-	import { PopperLayer } from "../../utilities/popper-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		child,
@@ -16,10 +17,10 @@
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
-		preventScroll = false,
 		trapFocus = true,
+		preventScroll = false,
 		...restProps
-	}: ContentStaticProps = $props();
+	}: PopoverContentProps = $props();
 
 	const contentState = usePopoverContent({
 		id: box.with(() => id),
@@ -30,42 +31,79 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.root.close();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.root.close();
-	}}
-	onCloseAutoFocus={(e) => {
+	}
+
+	function handleCloseAutoFocus(e: Event) {
 		onCloseAutoFocus(e);
 		if (e.defaultPrevented) return;
 		e.preventDefault();
 		contentState.root.triggerNode?.focus();
-	}}
-	{trapFocus}
-	{preventScroll}
-	loop
-	{forceMount}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props)}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		isStatic
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content-static.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { PopoverContentProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PopoverContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const PopoverContentStatic: $$__sveltets_2_IsomorphicComponent<PopoverContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type PopoverContentStatic = InstanceType<typeof PopoverContentStatic>;

package/dist/bits/popover/components/popover-content.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentProps } from "../types.js";
 	import { usePopoverContent } from "../popover.svelte.js";
-	import { PopperLayer } from "../../utilities/popper-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		child,
@@ -20,7 +20,7 @@
 		trapFocus = true,
 		preventScroll = false,
 		...restProps
-	}: ContentProps = $props();
+	}: PopoverContentProps = $props();
 
 	const contentState = usePopoverContent({
 		id: box.with(() => id),
@@ -31,43 +31,77 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
 
-<PopperLayer
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
+	function handleInteractOutside(e: PointerEvent) {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.root.close();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
 		contentState.root.close();
-	}}
-	onCloseAutoFocus={(e) => {
+	}
+
+	function handleCloseAutoFocus(e: Event) {
 		onCloseAutoFocus(e);
 		if (e.defaultPrevented) return;
 		e.preventDefault();
 		contentState.root.triggerNode?.focus();
-	}}
-	{trapFocus}
-	{preventScroll}
-	loop
-	{forceMount}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("popover"),
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onCloseAutoFocus={handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { PopoverContentProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PopoverContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const PopoverContent: $$__sveltets_2_IsomorphicComponent<PopoverContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type PopoverContent = InstanceType<typeof PopoverContent>;

package/dist/bits/popover/components/popover-trigger.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverTriggerProps } from "../types.js";
 	import { usePopoverTrigger } from "../popover.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import { useId } from "../../../internal/use-id.js";
+	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
 	let {
 		children,
@@ -12,8 +11,9 @@
 		id = useId(),
 		ref = $bindable(null),
 		type = "button",
+		disabled = false,
 		...restProps
-	}: TriggerProps = $props();
+	}: PopoverTriggerProps = $props();
 
 	const triggerState = usePopoverTrigger({
 		id: box.with(() => id),
@@ -21,12 +21,13 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayerAnchor {id}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -34,4 +35,4 @@
 			{@render children?.()}
 		</button>
 	{/if}
-</FloatingLayer.Anchor>
+</FloatingLayerAnchor>

package/dist/bits/popover/components/popover-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { PopoverTriggerProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PopoverTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const PopoverTrigger: $$__sveltets_2_IsomorphicComponent<PopoverTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type PopoverTrigger = InstanceType<typeof PopoverTrigger>;

package/dist/bits/popover/components/popover.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { PopoverRootProps } from "../types.js";
 	import { usePopoverRoot } from "../popover.svelte.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: PopoverRootProps = $props();
 
 	usePopoverRoot({
 		open: box.with(
@@ -27,6 +27,6 @@
 	});
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{@render children?.()}
-</FloatingLayer.Root>
+</FloatingLayer>

package/dist/bits/popover/exports.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
+export type { PortalProps } from "../utilities/portal/types.js";