@johly/bits-ui 2.18.1

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

@@ -0,0 +1,146 @@
+import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { Orientation } from "../../shared/index.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export declare const toolbarAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item", "group", "group-item", "link", "button"]>;
+interface ToolbarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    orientation: Orientation;
+    loop: boolean;
+}> {
+}
+export declare class ToolbarRootState {
+    static create(opts: ToolbarRootStateOpts): ToolbarRootState;
+    readonly opts: ToolbarRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarRootStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly role: "toolbar";
+        readonly "data-orientation": Orientation;
+    };
+}
+interface ToolbarGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+}> {
+}
+declare abstract class ToolbarGroupBaseState {
+    readonly opts: ToolbarGroupBaseStateOpts;
+    readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface ToolbarGroupSingleStateOpts extends ToolbarGroupBaseStateOpts, WritableBoxedValues<{
+    value: string;
+}> {
+}
+declare class ToolbarGroupSingleState extends ToolbarGroupBaseState {
+    readonly opts: ToolbarGroupSingleStateOpts;
+    readonly root: ToolbarRootState;
+    readonly isMulti: false;
+    readonly anyPressed: boolean;
+    constructor(opts: ToolbarGroupSingleStateOpts, root: ToolbarRootState);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
+}
+interface ToolbarGroupMultipleStateOpts extends ToolbarGroupBaseStateOpts, WritableBoxedValues<{
+    value: string[];
+}> {
+}
+declare class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
+    readonly opts: ToolbarGroupMultipleStateOpts;
+    readonly root: ToolbarRootState;
+    readonly isMulti: true;
+    readonly anyPressed: boolean;
+    constructor(opts: ToolbarGroupMultipleStateOpts, root: ToolbarRootState);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
+}
+type ToolbarGroup = ToolbarGroupSingleState | ToolbarGroupMultipleState;
+interface ToolbarGroupRootOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+}> {
+    type: "single" | "multiple";
+    value: WritableBox<string> | WritableBox<string[]>;
+}
+export declare class ToolbarGroupState {
+    static create(opts: ToolbarGroupRootOpts): ToolbarGroup;
+}
+interface ToolbarGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> {
+}
+export declare class ToolbarGroupItemState {
+    #private;
+    static create(opts: ToolbarGroupItemStateOpts): ToolbarGroupItemState;
+    readonly opts: ToolbarGroupItemStateOpts;
+    readonly group: ToolbarGroup;
+    readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState);
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly isPressed: boolean;
+    readonly props: {
+        readonly id: string;
+        readonly role: "radio" | undefined;
+        readonly tabindex: number;
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "off" | "on";
+        readonly "data-value": string;
+        readonly "aria-pressed": "true" | "false" | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed" | undefined;
+        readonly disabled: true | undefined;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface ToolbarLinkStateOpts extends WithRefOpts {
+}
+export declare class ToolbarLinkState {
+    #private;
+    static create(opts: ToolbarLinkStateOpts): ToolbarLinkState;
+    readonly opts: ToolbarLinkStateOpts;
+    readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "link" | undefined;
+        readonly tabindex: number;
+        readonly "data-orientation": Orientation;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface ToolbarButtonStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+}> {
+}
+export declare class ToolbarButtonState {
+    #private;
+    static create(opts: ToolbarButtonStateOpts): ToolbarButtonState;
+    readonly opts: ToolbarButtonStateOpts;
+    readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "button" | undefined;
+        readonly tabindex: number;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": Orientation;
+        readonly disabled: true | undefined;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export {};

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

@@ -0,0 +1,264 @@
+import { attachRef, } from "svelte-toolbelt";
+import { Context } from "runed";
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export const toolbarAttrs = createBitsAttrs({
+    component: "toolbar",
+    parts: ["root", "item", "group", "group-item", "link", "button"],
+});
+const ToolbarRootContext = new Context("Toolbar.Root");
+const ToolbarGroupContext = new Context("Toolbar.Group");
+export class ToolbarRootState {
+    static create(opts) {
+        return ToolbarRootContext.set(new ToolbarRootState(opts));
+    }
+    opts;
+    rovingFocusGroup;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.rovingFocusGroup = new RovingFocusGroup({
+            orientation: this.opts.orientation,
+            loop: this.opts.loop,
+            rootNode: this.opts.ref,
+            candidateAttr: toolbarAttrs.item,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "toolbar",
+        "data-orientation": this.opts.orientation.current,
+        [toolbarAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+class ToolbarGroupBaseState {
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toolbarAttrs.group]: "",
+        role: "group",
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        ...this.attachment,
+    }));
+}
+class ToolbarGroupSingleState extends ToolbarGroupBaseState {
+    opts;
+    root;
+    isMulti = false;
+    anyPressed = $derived.by(() => this.opts.value.current !== "");
+    constructor(opts, root) {
+        super(opts, root);
+        this.opts = opts;
+        this.root = root;
+    }
+    includesItem(item) {
+        return this.opts.value.current === item;
+    }
+    toggleItem(item) {
+        if (this.includesItem(item)) {
+            this.opts.value.current = "";
+        }
+        else {
+            this.opts.value.current = item;
+        }
+    }
+}
+class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
+    opts;
+    root;
+    isMulti = true;
+    anyPressed = $derived.by(() => this.opts.value.current.length > 0);
+    constructor(opts, root) {
+        super(opts, root);
+        this.opts = opts;
+        this.root = root;
+    }
+    includesItem(item) {
+        return this.opts.value.current.includes(item);
+    }
+    toggleItem(item) {
+        if (this.includesItem(item)) {
+            this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
+        }
+        else {
+            this.opts.value.current = [...this.opts.value.current, item];
+        }
+    }
+}
+export class ToolbarGroupState {
+    static create(opts) {
+        const { type, ...rest } = opts;
+        const rootState = ToolbarRootContext.get();
+        const groupState = type === "single"
+            ? new ToolbarGroupSingleState(rest, rootState)
+            : new ToolbarGroupMultipleState(rest, rootState);
+        return ToolbarGroupContext.set(groupState);
+    }
+}
+export class ToolbarGroupItemState {
+    static create(opts) {
+        const group = ToolbarGroupContext.get();
+        return new ToolbarGroupItemState(opts, group, group.root);
+    }
+    opts;
+    group;
+    root;
+    attachment;
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
+    constructor(opts, group, root) {
+        this.opts = opts;
+        this.group = group;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        $effect(() => {
+            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #toggleItem() {
+        if (this.#isDisabled)
+            return;
+        this.group.toggleItem(this.opts.value.current);
+    }
+    onclick(_) {
+        if (this.#isDisabled)
+            return;
+        this.#toggleItem();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#toggleItem();
+            return;
+        }
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    isPressed = $derived.by(() => this.group.includesItem(this.opts.value.current));
+    #ariaChecked = $derived.by(() => {
+        return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
+    });
+    #ariaPressed = $derived.by(() => {
+        return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
+    });
+    #tabIndex = $state(0);
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: this.group.isMulti ? undefined : "radio",
+        tabindex: this.#tabIndex,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "data-state": getToggleItemDataState(this.isPressed),
+        "data-value": this.opts.value.current,
+        "aria-pressed": this.#ariaPressed,
+        "aria-checked": this.#ariaChecked,
+        [toolbarAttrs.item]: "",
+        [toolbarAttrs["group-item"]]: "",
+        disabled: boolToTrueOrUndef(this.#isDisabled),
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class ToolbarLinkState {
+    static create(opts) {
+        return new ToolbarLinkState(opts, ToolbarRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        $effect(() => {
+            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
+        });
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onkeydown(e) {
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    #role = $derived.by(() => {
+        if (!this.opts.ref.current)
+            return undefined;
+        const tagName = this.opts.ref.current.tagName;
+        if (tagName !== "A")
+            return "link";
+        return undefined;
+    });
+    #tabIndex = $state(0);
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toolbarAttrs.link]: "",
+        [toolbarAttrs.item]: "",
+        role: this.#role,
+        tabindex: this.#tabIndex,
+        "data-orientation": this.root.opts.orientation.current,
+        //
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class ToolbarButtonState {
+    static create(opts) {
+        return new ToolbarButtonState(opts, ToolbarRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        $effect(() => {
+            this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
+        });
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onkeydown(e) {
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    #tabIndex = $state(0);
+    #role = $derived.by(() => {
+        if (!this.opts.ref.current)
+            return undefined;
+        const tagName = this.opts.ref.current.tagName;
+        if (tagName !== "BUTTON")
+            return "button";
+        return undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toolbarAttrs.item]: "",
+        [toolbarAttrs.button]: "",
+        role: this.#role,
+        tabindex: this.#tabIndex,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
+        //
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+//
+// HELPERS
+//
+function getToggleItemDataState(condition) {
+    return condition ? "on" : "off";
+}

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

@@ -0,0 +1,34 @@
+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 { BitsPrimitiveAnchorAttributes, BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type ToolbarRootPropsWithoutHTML = WithChild<{
+    /**
+     * The orientation of the toolbar. This determines how keyboard navigation
+     * will work within the toolbar.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether or not to loop through the toolbar items when navigating with the
+     * keyboard.
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+}>;
+export type ToolbarRootProps = ToolbarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarRootPropsWithoutHTML>;
+export type ToolbarGroupPropsWithoutHTML = Omit<ToggleGroupRootPropsWithoutHTML, "orientation" | "loop" | "rovingFocus">;
+export type ToolbarGroupProps = ToolbarGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarGroupPropsWithoutHTML>;
+export type ToolbarGroupItemPropsWithoutHTML = ToggleGroupItemPropsWithoutHTML;
+export type ToolbarGroupItemProps = ToggleGroupItemProps;
+export type ToolbarButtonPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the button is disabled or not.
+     */
+    disabled?: boolean | null | undefined;
+}>;
+export type ToolbarButtonProps = ToolbarButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToolbarButtonPropsWithoutHTML>;
+export type ToolbarLinkPropsWithoutHTML = WithChild;
+export type ToolbarLinkProps = ToolbarLinkPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, ToolbarLinkPropsWithoutHTML>;

package/dist/bits/toolbar/types.js

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

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

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

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

@@ -0,0 +1,3 @@
+declare const TooltipArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
+type TooltipArrow = ReturnType<typeof TooltipArrow>;
+export default TooltipArrow;

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { TooltipContentStaticProps } from "../types.js";
+	import { TooltipContentState } from "../tooltip.svelte.js";
+	import { createId } from "../../../internal/create-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";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		forceMount = false,
+		style,
+		...restProps
+	}: TooltipContentStaticProps = $props();
+
+	const contentState = TooltipContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		isStatic
+		enabled={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+		ref={contentState.opts.ref}
+		tooltip={true}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		tooltip={true}
+		isStatic
+		open={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+		ref={contentState.opts.ref}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { TooltipContentStaticProps } from "../types.js";
+declare const TooltipContentStatic: import("svelte").Component<TooltipContentStaticProps, {}, "ref">;
+type TooltipContentStatic = ReturnType<typeof TooltipContentStatic>;
+export default TooltipContentStatic;

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

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { TooltipContentProps } from "../types.js";
+	import { TooltipContentState } from "../tooltip.svelte.js";
+	import { createId } from "../../../internal/create-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";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		side = "top",
+		sideOffset = 0,
+		align = "center",
+		avoidCollisions = true,
+		arrowPadding = 0,
+		sticky = "partial",
+		strategy,
+		hideWhenDetached = false,
+		customAnchor,
+		collisionPadding = 0,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		forceMount = false,
+		style,
+		...restProps
+	}: TooltipContentProps = $props();
+
+	const contentState = TooltipContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const floatingProps = $derived({
+		side,
+		sideOffset,
+		align,
+		avoidCollisions,
+		arrowPadding,
+		sticky,
+		hideWhenDetached,
+		collisionPadding,
+		strategy,
+		customAnchor: customAnchor ?? contentState.root.triggerNode,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		enabled={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={true}
+		ref={contentState.opts.ref}
+		tooltip={true}
+		shouldRender={contentState.shouldRender}
+		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalWrapperProps = mergeProps(wrapperProps, {
+				style: {
+					pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
+				},
+			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalWrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		open={contentState.root.opts.open.current}
+		{id}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		forceMount={false}
+		ref={contentState.opts.ref}
+		tooltip={true}
+		shouldRender={contentState.shouldRender}
+		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalWrapperProps = mergeProps(wrapperProps, {
+				style: {
+					pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
+				},
+			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalWrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}