bits-ui 1.0.0-next.44 → 1.0.0-next.46

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -6,6 +6,7 @@
 	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 Mounted from "../../utilities/mounted.svelte";
 
 	let {
 		children,
@@ -112,6 +113,7 @@
 					{@render children?.()}
 				</div>
 			{/if}
+			<Mounted onMountedChange={(m) => (contentState.root.contentMounted = m)} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -16,8 +16,10 @@ declare class LinkPreviewRootState {
     timeout: number | null;
     contentNode: HTMLElement | null;
     contentId: string | undefined;
+    contentMounted: boolean;
     triggerNode: HTMLElement | null;
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
+    isOpening: boolean;
     constructor(props: LinkPreviewRootStateProps);
     clearTimeout: () => void;
     handleOpen: () => void;
@@ -41,6 +43,7 @@ declare class LinkPreviewTriggerState {
             currentTarget: HTMLElement;
         }) => void;
         readonly onblur: () => void;
+        readonly onpointerleave: (e: PointerEvent) => void;
     };
 }
 type LinkPreviewContentStateProps = WithRefProps;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -18,8 +18,10 @@ class LinkPreviewRootState {
     timeout = null;
     contentNode = $state(null);
     contentId = $state(undefined);
+    contentMounted = $state(false);
     triggerNode = $state(null);
     isPointerInTransit = box(false);
+    isOpening = $state(false);
     constructor(props) {
         this.open = props.open;
         this.openDelay = props.openDelay;
@@ -67,15 +69,21 @@ class LinkPreviewRootState {
         this.clearTimeout();
         if (this.open.current)
             return;
+        this.isOpening = true;
         this.timeout = window.setTimeout(() => {
-            this.open.current = true;
+            if (this.isOpening) {
+                this.open.current = true;
+                this.isOpening = false;
+            }
         }, this.openDelay.current);
     };
     immediateClose = () => {
         this.clearTimeout();
+        this.isOpening = false;
         this.open.current = false;
     };
     handleClose = () => {
+        this.isOpening = false;
         this.clearTimeout();
         if (!this.isPointerDownOnContent && !this.hasSelection) {
             this.timeout = window.setTimeout(() => {
@@ -105,6 +113,13 @@ class LinkPreviewTriggerState {
             return;
         this.#root.handleOpen();
     };
+    #onpointerleave = (e) => {
+        if (isTouch(e))
+            return;
+        if (!this.#root.contentMounted) {
+            this.#root.immediateClose();
+        }
+    };
     #onfocus = (e) => {
         if (!isFocusVisible(e.currentTarget))
             return;
@@ -124,6 +139,7 @@ class LinkPreviewTriggerState {
         onpointerenter: this.#onpointerenter,
         onfocus: this.#onfocus,
         onblur: this.#onblur,
+        onpointerleave: this.#onpointerleave,
     }));
 }
 class LinkPreviewContentState {

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

@@ -18,6 +18,7 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     value: number[];
 }>>;
 declare class SliderRootState {
+    #private;
     id: SliderRootStateProps["id"];
     ref: SliderRootStateProps["ref"];
     value: SliderRootStateProps["value"];
@@ -84,7 +85,7 @@ declare class SliderRootState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
         readonly style: {
-            readonly touchAction: "pan-x" | "pan-y";
+            readonly touchAction: string | undefined;
         };
         readonly "data-slider-root": "";
     };

package/dist/bits/slider/slider.svelte.js

@@ -125,7 +125,7 @@ class SliderRootState {
         };
     };
     handlePointerMove = (e) => {
-        if (!this.isActive)
+        if (!this.isActive || this.disabled.current)
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -170,7 +170,7 @@ class SliderRootState {
         }
     };
     handlePointerDown = (e) => {
-        if (e.button !== 0)
+        if (e.button !== 0 || this.disabled.current)
             return;
         const sliderNode = this.ref.current;
         const closestThumb = this.getClosestThumb(e);
@@ -186,6 +186,8 @@ class SliderRootState {
         this.handlePointerMove(e);
     };
     handlePointerUp = () => {
+        if (this.disabled.current)
+            return;
         if (this.isActive) {
             this.onValueCommit.current(untrack(() => this.value.current));
         }
@@ -306,12 +308,17 @@ class SliderRootState {
         ticks: this.ticksRenderArr,
         thumbs: this.thumbsRenderArr,
     }));
+    #touchAction = $derived.by(() => {
+        if (this.disabled.current)
+            return undefined;
+        return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
+    });
     props = $derived.by(() => ({
         id: this.id.current,
         "data-orientation": getDataOrientation(this.orientation.current),
         "data-disabled": getDataDisabled(this.disabled.current),
         style: {
-            touchAction: this.orientation.current === "horizontal" ? "pan-y" : "pan-x",
+            touchAction: this.#touchAction,
         },
         [SLIDER_ROOT_ATTR]: "",
     }));

package/dist/internal/use-grace-area.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Getter } from "svelte-toolbelt";
-export declare function useGraceArea(triggerNode: Getter<HTMLElement | null>, contentNode: Getter<HTMLElement | null>): {
+export declare function useGraceArea(getTriggerNode: Getter<HTMLElement | null>, getContentNode: Getter<HTMLElement | null>): {
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
     onPointerExit: import("./create-event-hook.svelte.js").EventHookOn<void>;
 };

package/dist/internal/use-grace-area.svelte.js

@@ -3,8 +3,10 @@ import { boxAutoReset } from "./box-auto-reset.svelte.js";
 import { createEventHook } from "./create-event-hook.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
 import { addEventListener } from "./events.js";
-export function useGraceArea(triggerNode, contentNode) {
+export function useGraceArea(getTriggerNode, getContentNode) {
     const isPointerInTransit = boxAutoReset(false, 300);
+    const triggerNode = $derived(getTriggerNode());
+    const contentNode = $derived(getContentNode());
     let pointerGraceArea = $state(null);
     const pointerExit = createEventHook();
     function handleRemoveGraceArea() {
@@ -24,17 +26,15 @@ export function useGraceArea(triggerNode, contentNode) {
         isPointerInTransit.current = true;
     }
     $effect(() => {
-        const trigger = triggerNode();
-        const content = contentNode();
-        if (!trigger || !content)
+        if (!triggerNode || !contentNode)
             return;
         const handleTriggerLeave = (e) => {
-            handleCreateGraceArea(e, content);
+            handleCreateGraceArea(e, contentNode);
         };
         const handleContentLeave = (e) => {
-            handleCreateGraceArea(e, trigger);
+            handleCreateGraceArea(e, triggerNode);
         };
-        const unsub = executeCallbacks(addEventListener(trigger, "pointerleave", handleTriggerLeave), addEventListener(content, "pointerleave", handleContentLeave));
+        const unsub = executeCallbacks(addEventListener(triggerNode, "pointerleave", handleTriggerLeave), addEventListener(contentNode, "pointerleave", handleContentLeave));
         return unsub;
     });
     $effect(() => {
@@ -46,10 +46,8 @@ export function useGraceArea(triggerNode, contentNode) {
             const target = e.target;
             if (!isElement(target))
                 return;
-            const trigger = triggerNode();
-            const content = contentNode();
             const pointerPosition = { x: e.clientX, y: e.clientY };
-            const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
+            const hasEnteredTarget = triggerNode?.contains(target) || contentNode?.contains(target);
             const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
             if (hasEnteredTarget) {
                 handleRemoveGraceArea();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.44",
+  "version": "1.0.0-next.46",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",