bits-ui 2.14.0 → 2.14.2

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

@@ -1,6 +1,7 @@
 import { DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
     delayDuration: number;
@@ -44,6 +45,7 @@ export declare class TooltipRootState {
     readonly disabled: boolean;
     readonly ignoreNonKeyboardFocus: boolean;
     contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
     triggerNode: HTMLElement | null;
     readonly stateAttr: string;
     constructor(opts: TooltipRootStateOpts, provider: TooltipProviderState);
@@ -75,6 +77,7 @@ export declare class TooltipTriggerState {
         readonly disabled: boolean;
         readonly onpointerup: PointerEventHandler<HTMLElement>;
         readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointerenter: PointerEventHandler<HTMLElement>;
         readonly onpointermove: PointerEventHandler<HTMLElement>;
         readonly onpointerleave: PointerEventHandler<HTMLElement>;
         readonly onfocus: FocusEventHandler<HTMLElement>;
@@ -97,6 +100,7 @@ export declare class TooltipContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
+    get shouldRender(): boolean;
     readonly snippetProps: {
         open: boolean;
     };

package/dist/bits/tooltip/tooltip.svelte.js

@@ -5,7 +5,7 @@ import { isElement, isFocusVisible } from "../../internal/is.js";
 import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { TimeoutFn } from "../../internal/timeout-fn.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
-import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export const tooltipAttrs = createBitsAttrs({
     component: "tooltip",
     parts: ["content", "trigger"],
@@ -72,6 +72,7 @@ export class TooltipRootState {
     ignoreNonKeyboardFocus = $derived.by(() => this.opts.ignoreNonKeyboardFocus.current ??
         this.provider.opts.ignoreNonKeyboardFocus.current);
     contentNode = $state(null);
+    contentPresence;
     triggerNode = $state(null);
     #wasOpenDelayed = $state(false);
     #timerFn;
@@ -87,7 +88,7 @@ export class TooltipRootState {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
         }, this.delayDuration ?? 0);
-        new OpenChangeComplete({
+        this.contentPresence = new PresenceManager({
             open: this.opts.open,
             ref: boxWith(() => this.contentNode),
             onComplete: () => {
@@ -158,12 +159,19 @@ export class TooltipTriggerState {
     #hasPointerMoveOpened = $state(false);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
     domContext;
+    #transitCheckTimeout = null;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.domContext = new DOMContext(opts.ref);
         this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
     }
+    #clearTransitCheck = () => {
+        if (this.#transitCheckTimeout !== null) {
+            clearTimeout(this.#transitCheckTimeout);
+            this.#transitCheckTimeout = null;
+        }
+    };
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
     };
@@ -180,6 +188,27 @@ export class TooltipTriggerState {
             this.handlePointerUp();
         }, { once: true });
     };
+    #onpointerenter = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.pointerType === "touch")
+            return;
+        // if in transit, wait briefly to see if user is actually heading to old content or staying here
+        if (this.root.provider.isPointerInTransit.current) {
+            this.#clearTransitCheck();
+            this.#transitCheckTimeout = window.setTimeout(() => {
+                // if still in transit after delay, user is likely staying on this trigger
+                if (this.root.provider.isPointerInTransit.current) {
+                    this.root.provider.isPointerInTransit.current = false;
+                    this.root.onTriggerEnter();
+                    this.#hasPointerMoveOpened = true;
+                }
+            }, 250);
+            return;
+        }
+        this.root.onTriggerEnter();
+        this.#hasPointerMoveOpened = true;
+    };
     #onpointermove = (e) => {
         if (this.#isDisabled)
             return;
@@ -187,14 +216,16 @@ export class TooltipTriggerState {
             return;
         if (this.#hasPointerMoveOpened)
             return;
-        if (this.root.provider.isPointerInTransit.current)
-            return;
+        // moving within trigger means we're definitely not in transit anymore
+        this.#clearTransitCheck();
+        this.root.provider.isPointerInTransit.current = false;
         this.root.onTriggerEnter();
         this.#hasPointerMoveOpened = true;
     };
     #onpointerleave = () => {
         if (this.#isDisabled)
             return;
+        this.#clearTransitCheck();
         this.root.onTriggerLeave();
         this.#hasPointerMoveOpened = false;
     };
@@ -228,6 +259,7 @@ export class TooltipTriggerState {
         disabled: this.opts.disabled.current,
         onpointerup: this.#onpointerup,
         onpointerdown: this.#onpointerdown,
+        onpointerenter: this.#onpointerenter,
         onpointermove: this.#onpointermove,
         onpointerleave: this.#onpointerleave,
         onfocus: this.#onfocus,
@@ -294,6 +326,9 @@ export class TooltipContentState {
     onCloseAutoFocus = (e) => {
         e.preventDefault();
     };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -47,7 +47,7 @@
 		ref,
 		tooltip = false,
 		...restProps
-	}: Omit<PopperLayerImplProps, "open" | "children"> & {
+	}: Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
 		enabled: boolean;
 	} = $props();
 </script>

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { PopperLayerImplProps } from "./types.js";
-type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children"> & {
+type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
     enabled: boolean;
 };
 declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PopperLayerImplProps } from "./types.js";
 	import PopperLayerInner from "./popper-layer-inner.svelte";
-	import PresenceLayer from "../presence-layer/presence-layer.svelte";
 
 	let {
 		popper,
@@ -40,51 +39,50 @@
 		customAnchor = null,
 		isStatic = false,
 		ref,
+		shouldRender,
 		...restProps
 	}: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {open} {ref}>
-	{#snippet presence()}
-		<PopperLayerInner
-			{popper}
-			{onEscapeKeydown}
-			{escapeKeydownBehavior}
-			{preventOverflowTextSelection}
-			{id}
-			{onPointerDown}
-			{onPointerUp}
-			{side}
-			{sideOffset}
-			{align}
-			{alignOffset}
-			{arrowPadding}
-			{avoidCollisions}
-			{collisionBoundary}
-			{collisionPadding}
-			{sticky}
-			{hideWhenDetached}
-			{updatePositionStrategy}
-			{strategy}
-			{dir}
-			{preventScroll}
-			{wrapperId}
-			{style}
-			{onPlaced}
-			{customAnchor}
-			{isStatic}
-			enabled={open}
-			{onInteractOutside}
-			{onCloseAutoFocus}
-			{onOpenAutoFocus}
-			{interactOutsideBehavior}
-			{loop}
-			{trapFocus}
-			{isValidEvent}
-			{onFocusOutside}
-			forceMount={false}
-			{ref}
-			{...restProps}
-		/>
-	{/snippet}
-</PresenceLayer>
+{#if shouldRender}
+	<PopperLayerInner
+		{popper}
+		{onEscapeKeydown}
+		{escapeKeydownBehavior}
+		{preventOverflowTextSelection}
+		{id}
+		{onPointerDown}
+		{onPointerUp}
+		{side}
+		{sideOffset}
+		{align}
+		{alignOffset}
+		{arrowPadding}
+		{avoidCollisions}
+		{collisionBoundary}
+		{collisionPadding}
+		{sticky}
+		{hideWhenDetached}
+		{updatePositionStrategy}
+		{strategy}
+		{dir}
+		{preventScroll}
+		{wrapperId}
+		{style}
+		{onPlaced}
+		{customAnchor}
+		{isStatic}
+		enabled={open}
+		{onInteractOutside}
+		{onCloseAutoFocus}
+		{onOpenAutoFocus}
+		{interactOutsideBehavior}
+		{loop}
+		{trapFocus}
+		{isValidEvent}
+		{onFocusOutside}
+		forceMount={false}
+		{ref}
+		{...restProps}
+	/>
+{/if}

package/dist/bits/utilities/popper-layer/types.d.ts

@@ -31,4 +31,8 @@ export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerI
      * symbol so that conflicts don't occur.
      */
     tooltip?: boolean;
+    /**
+     * Whether the popper layer should be rendered.
+     */
+    shouldRender: boolean;
 }, "enabled">;

package/dist/internal/animations-complete.js

@@ -1,30 +1,23 @@
 import { afterTick, onDestroyEffect } from "svelte-toolbelt";
 export class AnimationsComplete {
     #opts;
-    #currentFrame = undefined;
-    #isRunning = false;
+    #currentFrame = null;
     constructor(opts) {
         this.#opts = opts;
         onDestroyEffect(() => this.#cleanup());
     }
     #cleanup() {
-        if (this.#currentFrame) {
-            window.cancelAnimationFrame(this.#currentFrame);
-            this.#currentFrame = undefined;
-        }
-        this.#isRunning = false;
+        if (!this.#currentFrame)
+            return;
+        window.cancelAnimationFrame(this.#currentFrame);
+        this.#currentFrame = null;
     }
     run(fn) {
-        // prevent multiple concurrent runs
-        if (this.#isRunning)
-            return;
+        // if already running, cleanup and restart
         this.#cleanup();
-        this.#isRunning = true;
         const node = this.#opts.ref.current;
-        if (!node) {
-            this.#isRunning = false;
+        if (!node)
             return;
-        }
         if (typeof node.getAnimations !== "function") {
             this.#executeCallback(fn);
             return;
@@ -43,7 +36,6 @@ export class AnimationsComplete {
     #executeCallback(fn) {
         const execute = () => {
             fn();
-            this.#isRunning = false;
         };
         if (this.#opts.afterTick) {
             afterTick(execute);

package/dist/internal/date-time/field/helpers.js

@@ -60,7 +60,9 @@ function createContentObj(props) {
                  * If we're operating in a 12 hour clock and the part is an hour, we handle
                  * the conversion to 12 hour format with 2 digit hours and leading zeros here.
                  */
-                if (part === "hour" && "dayPeriod" in segmentValues && props.hourCycle !== 24) {
+                const is12HourMode = props.hourCycle === 12 ||
+                    (props.hourCycle === undefined && getDefaultHourCycle(locale) === 12);
+                if (part === "hour" && is12HourMode) {
                     /**
                      * If the value is over 12, we convert to 12 hour format and add leading
                      * zeroes if the value is less than 10.

package/dist/internal/date-time/field/time-helpers.js

@@ -6,6 +6,7 @@ import { styleToString } from "svelte-toolbelt";
 import { useId } from "../../use-id.js";
 import { getPlaceholder } from "../placeholders.js";
 import { isZonedDateTime } from "../utils.js";
+import { getDefaultHourCycle } from "./helpers.js";
 export function initializeSegmentValues() {
     const initialParts = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
         if (part === "dayPeriod") {
@@ -50,7 +51,9 @@ function createTimeContentObj(props) {
              * If we're operating in a 12 hour clock and the part is an hour, we handle
              * the conversion to 12 hour format with 2 digit hours and leading zeros here.
              */
-            if (part === "hour" && "dayPeriod" in segmentValues && props.hourCycle !== 24) {
+            const is12HourMode = props.hourCycle === 12 ||
+                (props.hourCycle === undefined && getDefaultHourCycle(locale) === 12);
+            if (part === "hour" && is12HourMode) {
                 /**
                  * If the value is over 12, we convert to 12 hour format and add leading
                  * zeroes if the value is less than 10.

package/dist/internal/presence-manager.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ReadableBoxedValues } from "svelte-toolbelt";
+interface PresenceManagerOpts extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+    onComplete?: () => void;
+    enabled?: boolean;
+}
+export declare class PresenceManager {
+    #private;
+    constructor(opts: PresenceManagerOpts);
+    get shouldRender(): boolean;
+}
+export {};

package/dist/internal/presence-manager.svelte.js

@@ -0,0 +1,34 @@
+import { watch } from "runed";
+import { AnimationsComplete } from "./animations-complete.js";
+export class PresenceManager {
+    #opts;
+    #enabled;
+    #afterAnimations;
+    #shouldRender = $state(false);
+    constructor(opts) {
+        this.#opts = opts;
+        this.#shouldRender = opts.open.current;
+        this.#enabled = opts.enabled ?? true;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.#opts.ref,
+            afterTick: this.#opts.open,
+        });
+        watch(() => this.#opts.open.current, (isOpen) => {
+            if (isOpen)
+                this.#shouldRender = true;
+            if (!this.#enabled)
+                return;
+            this.#afterAnimations.run(() => {
+                if (isOpen === this.#opts.open.current) {
+                    if (!this.#opts.open.current) {
+                        this.#shouldRender = false;
+                    }
+                    this.#opts.onComplete?.();
+                }
+            });
+        });
+    }
+    get shouldRender() {
+        return this.#shouldRender;
+    }
+}

package/dist/internal/should-enable-focus-trap.d.ts

@@ -1,5 +1,4 @@
-export declare function shouldEnableFocusTrap({ forceMount, present, open, }: {
+export declare function shouldEnableFocusTrap({ forceMount, open, }: {
     forceMount: boolean;
-    present: boolean;
     open: boolean;
 }): boolean;

package/dist/internal/should-enable-focus-trap.js

@@ -1,5 +1,5 @@
-export function shouldEnableFocusTrap({ forceMount, present, open, }) {
+export function shouldEnableFocusTrap({ forceMount, open, }) {
     if (forceMount)
         return open;
-    return present && open;
+    return open;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -28,7 +28,7 @@
     "csstype": "^3.1.3",
     "jsdom": "^24.1.3",
     "publint": "^0.2.12",
-    "svelte": "^5.38.10",
+    "svelte": "5.38.1",
     "svelte-check": "^4.3.1",
     "typescript": "^5.9.2",
     "vite": "^7.1.5",

package/dist/internal/open-change-complete.d.ts

@@ -1,13 +0,0 @@
-import type { ReadableBoxedValues } from "svelte-toolbelt";
-interface OpenChangeCompleteOpts extends ReadableBoxedValues<{
-    open: boolean;
-    ref: HTMLElement | null;
-}> {
-    onComplete: () => void;
-    enabled?: boolean;
-}
-export declare class OpenChangeComplete {
-    #private;
-    constructor(opts: OpenChangeCompleteOpts);
-}
-export {};

package/dist/internal/open-change-complete.js

@@ -1,24 +0,0 @@
-import { watch } from "runed";
-import { AnimationsComplete } from "./animations-complete.js";
-export class OpenChangeComplete {
-    #opts;
-    #enabled;
-    #afterAnimations;
-    constructor(opts) {
-        this.#opts = opts;
-        this.#enabled = opts.enabled ?? true;
-        this.#afterAnimations = new AnimationsComplete({
-            ref: this.#opts.ref,
-            afterTick: this.#opts.open,
-        });
-        watch([() => this.#opts.open.current], ([open]) => {
-            if (!this.#enabled)
-                return;
-            this.#afterAnimations.run(() => {
-                if (open === this.#opts.open.current) {
-                    this.#opts.onComplete();
-                }
-            });
-        });
-    }
-}