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

package/dist/bits/toolbar/components/toolbar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ToolbarRootProps } 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 Toolbar: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<ToolbarRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type Toolbar = InstanceType<typeof Toolbar>;

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

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from "./types.js";

package/dist/bits/toolbar/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";

package/dist/bits/toolbar/index.d.ts

@@ -1,6 +1 @@
-export { default as Root } from "./components/toolbar.svelte";
-export { default as Button } from "./components/toolbar-button.svelte";
-export { default as Link } from "./components/toolbar-link.svelte";
-export { default as Group } from "./components/toolbar-group.svelte";
-export { default as GroupItem } from "./components/toolbar-group-item.svelte";
-export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from "./types.js";
+export * as Toolbar from "./exports.js";

package/dist/bits/toolbar/index.js

@@ -1,5 +1 @@
-export { default as Root } from "./components/toolbar.svelte";
-export { default as Button } from "./components/toolbar-button.svelte";
-export { default as Link } from "./components/toolbar-link.svelte";
-export { default as Group } from "./components/toolbar-group.svelte";
-export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export * as Toolbar from "./exports.js";

package/dist/bits/toolbar/toolbar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WritableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
 import type { WithRefProps } from "../../internal/types.js";
 type ToolbarRootStateProps = WithRefProps<ReadableBoxedValues<{
@@ -12,9 +12,6 @@ declare class ToolbarRootState {
     orientation: ToolbarRootStateProps["orientation"];
     rovingFocusGroup: UseRovingFocusReturn;
     constructor(props: ToolbarRootStateProps);
-    createGroup(props: InitToolbarGroupProps): ToolbarGroupSingleState | ToolbarGroupMultipleState;
-    createLink(props: ToolbarLinkStateProps): ToolbarLinkState;
-    createButton(props: ToolbarButtonStateProps): ToolbarButtonState;
     props: {
         readonly id: string;
         readonly role: "toolbar";
@@ -61,7 +58,6 @@ declare class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
     constructor(props: ToolbarGroupMultipleStateProps, root: ToolbarRootState);
     includesItem: (item: string) => boolean;
     toggleItem: (item: string) => void;
-    createItem(props: ToolbarGroupItemStateProps): ToolbarGroupItemState;
 }
 type ToolbarGroupState = ToolbarGroupSingleState | ToolbarGroupMultipleState;
 type ToolbarGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -79,10 +75,10 @@ declare class ToolbarGroupItemState {
         readonly tabindex: number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
-        readonly "data-state": "on" | "off";
+        readonly "data-state": "off" | "on";
         readonly "data-value": string;
-        readonly "aria-pressed": "false" | "true" | undefined;
-        readonly "aria-checked": "mixed" | "false" | "true" | undefined;
+        readonly "aria-pressed": "true" | "false" | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly "data-toolbar-item": "";
         readonly "data-toolbar-group-item": "";
         readonly disabled: true | undefined;

package/dist/bits/toolbar/toolbar.svelte.js

@@ -1,9 +1,8 @@
-import { box } from "svelte-toolbelt";
+import { useRefById } from "svelte-toolbelt";
 import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 const ROOT_ATTR = "data-toolbar-root";
 // all links, buttons, and items must have the ITEM_ATTR for roving focus
 const ITEM_ATTR = "data-toolbar-item";
@@ -33,19 +32,6 @@ class ToolbarRootState {
             candidateAttr: ITEM_ATTR,
         });
     }
-    createGroup(props) {
-        const { type, ...rest } = props;
-        const groupState = type === "single"
-            ? new ToolbarGroupSingleState(rest, this)
-            : new ToolbarGroupMultipleState(rest, this);
-        return groupState;
-    }
-    createLink(props) {
-        return new ToolbarLinkState(props, this);
-    }
-    createButton(props) {
-        return new ToolbarButtonState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "toolbar",
@@ -118,9 +104,6 @@ class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
             this.#value.current = [...this.#value.current, item];
         }
     };
-    createItem(props) {
-        return new ToolbarGroupItemState(props, this, this.root);
-    }
 }
 class ToolbarGroupItemState {
     #id;
@@ -141,6 +124,9 @@ class ToolbarGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     toggleItem = () => {
         if (this.#isDisabled)
@@ -148,6 +134,8 @@ class ToolbarGroupItemState {
         this.#group.toggleItem(this.#value.current);
     };
     #onclick = () => {
+        if (this.#isDisabled)
+            return;
         this.toggleItem();
     };
     #onkeydown = (e) => {
@@ -162,12 +150,12 @@ class ToolbarGroupItemState {
     };
     isPressed = $derived.by(() => this.#group.includesItem(this.#value.current));
     #ariaChecked = $derived.by(() => {
-        return this.#group.isMulti ? undefined : getAriaChecked(this.isPressed);
+        return this.#group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
         return this.#group.isMulti ? getAriaPressed(this.isPressed) : undefined;
     });
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         role: this.#group.isMulti ? undefined : "radio",
@@ -198,6 +186,9 @@ class ToolbarLinkState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     #onkeydown = (e) => {
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
@@ -210,7 +201,7 @@ class ToolbarLinkState {
             return "link";
         return undefined;
     });
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         [LINK_ATTR]: "",
@@ -236,11 +227,14 @@ class ToolbarButtonState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     #onkeydown = (e) => {
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
     };
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     #role = $derived.by(() => {
         if (!this.#ref.current)
             return undefined;
@@ -277,14 +271,20 @@ export function useToolbarRoot(props) {
     return setToolbarRootContext(new ToolbarRootState(props));
 }
 export function useToolbarGroup(props) {
-    return setToolbarGroupContext(getToolbarRootContext().createGroup(props));
+    const { type, ...rest } = props;
+    const rootState = getToolbarRootContext();
+    const groupState = type === "single"
+        ? new ToolbarGroupSingleState(rest, rootState)
+        : new ToolbarGroupMultipleState(rest, rootState);
+    return setToolbarGroupContext(groupState);
 }
 export function useToolbarGroupItem(props) {
-    return getToolbarGroupContext().createItem(props);
+    const group = getToolbarGroupContext();
+    return new ToolbarGroupItemState(props, group, group.root);
 }
 export function useToolbarButton(props) {
-    return getToolbarRootContext().createButton(props);
+    return new ToolbarButtonState(props, getToolbarRootContext());
 }
 export function useToolbarLink(props) {
-    return getToolbarRootContext().createLink(props);
+    return new ToolbarLinkState(props, getToolbarRootContext());
 }

package/dist/bits/toolbar/types.d.ts

@@ -1,7 +1,7 @@
 import type { ToggleGroupItemProps, ToggleGroupItemPropsWithoutHTML, ToggleGroupRootPropsWithoutHTML } from "../toggle-group/types.js";
 import type { Orientation } from "../../shared/index.js";
 import type { WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveAnchorAttributes, PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type ToolbarRootPropsWithoutHTML = WithChild<{
     /**
      * The orientation of the toolbar. This determines how keyboard navigation
@@ -18,9 +18,9 @@ export type ToolbarRootPropsWithoutHTML = WithChild<{
      */
     loop?: boolean;
 }>;
-export type ToolbarRootProps = ToolbarRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ToolbarRootPropsWithoutHTML>;
+export type ToolbarRootProps = ToolbarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarRootPropsWithoutHTML>;
 export type ToolbarGroupPropsWithoutHTML = Omit<ToggleGroupRootPropsWithoutHTML, "orientation" | "loop" | "rovingFocus">;
-export type ToolbarGroupProps = ToolbarGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, ToolbarGroupPropsWithoutHTML>;
+export type ToolbarGroupProps = ToolbarGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarGroupPropsWithoutHTML>;
 export type ToolbarGroupItemPropsWithoutHTML = ToggleGroupItemPropsWithoutHTML;
 export type ToolbarGroupItemProps = ToggleGroupItemProps;
 export type ToolbarButtonPropsWithoutHTML = WithChild<{
@@ -29,6 +29,6 @@ export type ToolbarButtonPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }>;
-export type ToolbarButtonProps = ToolbarButtonPropsWithoutHTML & Without<PrimitiveButtonAttributes, ToolbarButtonPropsWithoutHTML>;
+export type ToolbarButtonProps = ToolbarButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToolbarButtonPropsWithoutHTML>;
 export type ToolbarLinkPropsWithoutHTML = WithChild;
-export type ToolbarLinkProps = ToolbarLinkPropsWithoutHTML & Without<PrimitiveAnchorAttributes, ToolbarLinkPropsWithoutHTML>;
+export type ToolbarLinkProps = ToolbarLinkPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, ToolbarLinkPropsWithoutHTML>;

package/dist/bits/tooltip/components/tooltip-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 { TooltipArrowProps } 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 }: TooltipArrowProps = $props();
 </script>
 
-<FloatingLayer.Arrow bind:ref {...restProps} />
+<FloatingLayerArrow bind:ref {...restProps} />

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

@@ -1,21 +1,30 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TooltipContentProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
+		side = "top",
+		sideOffset = 0,
+		align = "center",
+		avoidCollisions = true,
+		arrowPadding = 0,
+		sticky = "partial",
+		hideWhenDetached = false,
+		collisionPadding = 0,
 		onInteractOutside,
 		onEscapeKeydown,
 		forceMount = false,
 		...restProps
-	}: ContentStaticProps = $props();
+	}: TooltipContentProps = $props();
 
 	const contentState = useTooltipContent({
 		id: box.with(() => id),
@@ -25,38 +34,86 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
 
-<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.handleClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
 		contentState.root.handleClose();
-	}}
-	onOpenAutoFocus={(e) => e.preventDefault()}
-	onCloseAutoFocus={(e) => e.preventDefault()}
-	trapFocus={false}
-	loop={false}
-	preventScroll={false}
->
-	{#snippet popper({ props })}
-		{@const mergedProps = mergeProps(props)}
-		{#if child}
-			{@render child({ props: mergedProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...mergedProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("tooltip"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		isStatic
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("tooltip"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

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

@@ -1,4 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
+import type { TooltipContentProps } 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 TooltipContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
+declare const TooltipContentStatic: $$__sveltets_2_IsomorphicComponent<TooltipContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type TooltipContentStatic = InstanceType<typeof TooltipContentStatic>;

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TooltipContentProps } from "../types.js";
 	import { useTooltipContent } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		children,
@@ -24,7 +24,7 @@
 		onEscapeKeydown,
 		forceMount = false,
 		...restProps
-	}: ContentProps = $props();
+	}: TooltipContentProps = $props();
 
 	const contentState = useTooltipContent({
 		id: box.with(() => id),
@@ -46,38 +46,72 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, 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.handleClose();
-	}}
-	onEscapeKeydown={(e) => {
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
 		onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
 		contentState.root.handleClose();
-	}}
-	onOpenAutoFocus={(e) => e.preventDefault()}
-	onCloseAutoFocus={(e) => e.preventDefault()}
-	trapFocus={false}
-	loop={false}
-	preventScroll={false}
->
-	{#snippet popper({ props })}
-		{@const mergedProps = mergeProps(props, {
-			style: getFloatingContentCSSVars("tooltip"),
-		})}
-		{#if child}
-			{@render child({ props: mergedProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...mergedProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("tooltip"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const mergedProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("tooltip"),
+			})}
+			{#if child}
+				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

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

@@ -1,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { TooltipContentProps } 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 TooltipContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const TooltipContent: $$__sveltets_2_IsomorphicComponent<TooltipContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type TooltipContent = InstanceType<typeof TooltipContent>;

package/dist/bits/tooltip/components/tooltip-provider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { ProviderProps } from "../index.js";
+	import type { TooltipProviderProps } from "../types.js";
 	import { useTooltipProvider } from "../tooltip.svelte.js";
 
 	let {
@@ -11,7 +11,7 @@
 		disabled = false,
 		ignoreNonKeyboardFocus = false,
 		skipDelayDuration = 300,
-	}: ProviderProps = $props();
+	}: TooltipProviderProps = $props();
 
 	useTooltipProvider({
 		delayDuration: box.with(() => delayDuration),

package/dist/bits/tooltip/components/tooltip-provider.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { ProviderProps } from "../index.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 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TooltipProvider: $$__sveltets_2_IsomorphicComponent<ProviderProps, {
+declare const TooltipProvider: $$__sveltets_2_IsomorphicComponent<import("../types.js").TooltipProviderPropsWithoutHTML, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type TooltipProvider = InstanceType<typeof TooltipProvider>;

package/dist/bits/tooltip/components/tooltip-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 { TooltipTriggerProps } from "../types.js";
 	import { useTooltipTrigger } from "../tooltip.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.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,
@@ -14,7 +13,7 @@
 		type = "button",
 		ref = $bindable(null),
 		...restProps
-	}: TriggerProps = $props();
+	}: TooltipTriggerProps = $props();
 
 	const triggerState = useTooltipTrigger({
 		id: box.with(() => id),
@@ -28,7 +27,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayerAnchor {id}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -36,4 +35,4 @@
 			{@render children?.()}
 		</button>
 	{/if}
-</FloatingLayer.Anchor>
+</FloatingLayerAnchor>