bits-ui 1.5.3 → 1.6.1

package/dist/bits/navigation-menu/components/navigation-menu-content.svelte

@@ -28,16 +28,14 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-{#if contentState.context.viewportRef.current}
-	<Portal to={contentState.context.viewportRef.current}>
-		<PresenceLayer
-			{id}
-			present={forceMount || contentState.open || contentState.isLastActiveValue}
-		>
-			{#snippet presence()}
-				<NavigationMenuContentImpl {...mergedProps} {children} {child} />
-				<Mounted bind:mounted={contentState.mounted} />
-			{/snippet}
-		</PresenceLayer>
-	</Portal>
-{/if}
+<Portal
+	to={contentState.context.viewportRef.current || undefined}
+	disabled={!contentState.context.viewportRef.current}
+>
+	<PresenceLayer {id} present={forceMount || contentState.open || contentState.isLastActiveValue}>
+		{#snippet presence()}
+			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
+			<Mounted bind:mounted={contentState.mounted} />
+		{/snippet}
+	</PresenceLayer>
+</Portal>

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -173,7 +173,7 @@ class NavigationMenuListState {
         });
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: opts.id,
-            candidateSelector: `:is([${NAVIGATION_MENU_TRIGGER_ATTR}], [${NAVIGATION_MENU_LINK_ATTR}]):not([data-disabled])`,
+            candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
         });
@@ -297,13 +297,14 @@ class NavigationMenuTriggerState {
         // if opened via pointer move, we prevent the click event
         if (this.hasPointerMoveOpened.current)
             return;
-        if (this.open) {
+        const shouldClose = this.open && this.context.opts.isRootMenu;
+        if (shouldClose) {
             this.context.onItemSelect("");
         }
-        else {
+        else if (!this.open) {
             this.context.onItemSelect(this.itemContext.opts.value.current);
         }
-        this.wasClickClose = this.open;
+        this.wasClickClose = shouldClose;
     };
     onkeydown = (e) => {
         const verticalEntryKey = this.context.opts.dir.current === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;

package/dist/bits/slider/components/slider-thumb.svelte

@@ -28,9 +28,14 @@
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps })}
+	{@render child({
+		active: thumbState.root.isThumbActive(thumbState.opts.index.current),
+		props: mergedProps,
+	})}
 {:else}
 	<span {...mergedProps}>
-		{@render children?.()}
+		{@render children?.({
+			active: thumbState.root.isThumbActive(thumbState.opts.index.current),
+		})}
 	</span>
 {/if}

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

@@ -17,6 +17,7 @@ declare class SliderBaseRootState {
     isActive: boolean;
     direction: "rl" | "lr" | "tb" | "bt";
     constructor(opts: SliderBaseRootStateProps);
+    isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];
     getThumbScale: () => [number, number];
     getPositionFromValue: (thumbValue: number) => number;
@@ -90,6 +91,7 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     } | null;
     currentThumbIdx: number;
     constructor(opts: SliderMultiRootStateProps);
+    isThumbActive(index: number): boolean;
     applyPosition({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;
         activeThumbIdx: number;
@@ -1807,6 +1809,7 @@ declare class SliderThumbState {
     props: {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly "data-active": "" | undefined;
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -1820,6 +1823,7 @@ declare class SliderThumbState {
     } | {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly "data-active": "" | undefined;
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;

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

@@ -31,6 +31,9 @@ class SliderBaseRootState {
         this.opts = opts;
         useRefById(opts);
     }
+    isThumbActive(_index) {
+        return this.isActive;
+    }
     #touchAction = $derived.by(() => {
         if (this.opts.disabled.current)
             return undefined;
@@ -284,6 +287,9 @@ class SliderMultiRootState extends SliderBaseRootState {
             }
         });
     }
+    isThumbActive(index) {
+        return this.isActive && this.activeThumb?.idx === index;
+    }
     applyPosition({ clientXY, activeThumbIdx, start, end, }) {
         const min = this.opts.min.current;
         const max = this.opts.max.current;
@@ -658,6 +664,7 @@ class SliderThumbState {
         ...this.root.thumbsPropsArr[this.opts.index.current],
         id: this.opts.id.current,
         onkeydown: this.onkeydown,
+        "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
     }));
 }
 class SliderTickState {

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

@@ -106,6 +106,9 @@ export type SliderMultipleRootProps = SliderMultiRootPropsWithoutHTML & Without<
 export type SliderRootProps = SliderRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
 export type SliderRangePropsWithoutHTML = WithChild;
 export type SliderRangeProps = SliderRangePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRangePropsWithoutHTML>;
+export type SliderThumbSnippetProps = {
+    active: boolean;
+};
 export type SliderThumbPropsWithoutHTML = WithChild<{
     /**
      * Whether the thumb is disabled or not.
@@ -118,7 +121,7 @@ export type SliderThumbPropsWithoutHTML = WithChild<{
      * `Slider.Root` component.
      */
     index: number;
-}>;
+}, SliderThumbSnippetProps>;
 export type SliderThumbProps = SliderThumbPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderThumbPropsWithoutHTML>;
 export type SliderTickPropsWithoutHTML = WithChild<{
     /**

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

@@ -1,7 +1,6 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import { CustomEventDispatcher } from "../../internal/events.js";
-export declare const TooltipOpenEvent: CustomEventDispatcher<unknown>;
+import type { PointerEventHandler } from "svelte/elements";
 type TooltipProviderStateProps = ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -16,8 +15,9 @@ declare class TooltipProviderState {
     isOpenDelayed: boolean;
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
     constructor(opts: TooltipProviderStateProps);
-    onOpen: () => void;
-    onClose: () => void;
+    onOpen: (tooltip: TooltipRootState) => void;
+    onClose: (tooltip: TooltipRootState) => void;
+    isTooltipOpen: (tooltip: TooltipRootState) => boolean;
 }
 type TooltipRootStateProps = ReadableBoxedValues<{
     delayDuration: number | undefined;
@@ -66,7 +66,7 @@ declare class TooltipTriggerState {
         disabled: boolean;
         onpointerup: () => void;
         onpointerdown: () => void;
-        onpointermove: (e: PointerEvent) => void;
+        onpointermove: PointerEventHandler<HTMLElement>;
         onpointerleave: () => void;
         onfocus: (e: FocusEvent & {
             currentTarget: HTMLElement;

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

@@ -1,22 +1,18 @@
-import { box, executeCallbacks, onMountEffect, useRefById } from "svelte-toolbelt";
+import { box, onMountEffect, useRefById } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getDataDisabled } from "../../internal/attrs.js";
-import { CustomEventDispatcher } from "../../internal/events.js";
 const TOOLTIP_CONTENT_ATTR = "data-tooltip-content";
 const TOOLTIP_TRIGGER_ATTR = "data-tooltip-trigger";
-export const TooltipOpenEvent = new CustomEventDispatcher("bits.tooltip.open", {
-    bubbles: false,
-    cancelable: false,
-});
 class TooltipProviderState {
     opts;
     isOpenDelayed = $state(true);
     isPointerInTransit = box(false);
     #timerFn;
+    #openTooltip = $state(null);
     constructor(opts) {
         this.opts = opts;
         this.#timerFn = useTimeoutFn(() => {
@@ -24,18 +20,34 @@ class TooltipProviderState {
         }, this.opts.skipDelayDuration.current, { immediate: false });
     }
     #startTimer = () => {
-        this.#timerFn.start();
+        const skipDuration = this.opts.skipDelayDuration.current;
+        if (skipDuration === 0) {
+            return;
+        }
+        else {
+            this.#timerFn.start();
+        }
     };
     #clearTimer = () => {
         this.#timerFn.stop();
     };
-    onOpen = () => {
+    onOpen = (tooltip) => {
+        if (this.#openTooltip && this.#openTooltip !== tooltip) {
+            this.#openTooltip.handleClose();
+        }
         this.#clearTimer();
         this.isOpenDelayed = false;
+        this.#openTooltip = tooltip;
     };
-    onClose = () => {
+    onClose = (tooltip) => {
+        if (this.#openTooltip === tooltip) {
+            this.#openTooltip = null;
+        }
         this.#startTimer();
     };
+    isTooltipOpen = (tooltip) => {
+        return this.#openTooltip === tooltip;
+    };
 }
 class TooltipRootState {
     opts;
@@ -73,14 +85,11 @@ class TooltipRootState {
             }, this.delayDuration, { immediate: false });
         });
         watch(() => this.opts.open.current, (isOpen) => {
-            if (!this.provider.onClose)
-                return;
             if (isOpen) {
-                this.provider.onOpen();
-                TooltipOpenEvent.dispatch(document);
+                this.provider.onOpen(this);
             }
             else {
-                this.provider.onClose();
+                this.provider.onClose(this);
             }
         });
     }
@@ -94,7 +103,19 @@ class TooltipRootState {
         this.opts.open.current = false;
     };
     #handleDelayedOpen = () => {
-        this.#timerFn.start();
+        this.#timerFn.stop();
+        const shouldSkipDelay = !this.provider.isOpenDelayed;
+        const delayDuration = this.delayDuration ?? 0;
+        // if no delay needed (either skip delay active or delay is 0), open immediately
+        if (shouldSkipDelay || delayDuration === 0) {
+            // set wasOpenDelayed based on whether we actually had a delay
+            this.#wasOpenDelayed = delayDuration > 0 && shouldSkipDelay;
+            this.opts.open.current = true;
+        }
+        else {
+            // use timer for actual delays
+            this.#timerFn.start();
+        }
     };
     onTriggerEnter = () => {
         this.#handleDelayedOpen();
@@ -145,7 +166,9 @@ class TooltipTriggerState {
             return;
         if (e.pointerType === "touch")
             return;
-        if (this.#hasPointerMoveOpened || this.root.provider.isPointerInTransit.current)
+        if (this.#hasPointerMoveOpened)
+            return;
+        if (this.root.provider.isPointerInTransit.current)
             return;
         this.root.onTriggerEnter();
         this.#hasPointerMoveOpened = true;
@@ -209,20 +232,23 @@ class TooltipContentState {
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
             onPointerExit: () => {
-                this.root.handleClose();
+                if (this.root.provider.isTooltipOpen(this.root)) {
+                    this.root.handleClose();
+                }
             },
             setIsPointerInTransit: (value) => {
                 this.root.provider.isPointerInTransit.current = value;
             },
+            transitTimeout: this.root.provider.opts.skipDelayDuration.current,
         });
-        onMountEffect(() => executeCallbacks(on(window, "scroll", (e) => {
+        onMountEffect(() => on(window, "scroll", (e) => {
             const target = e.target;
             if (!target)
                 return;
             if (target.contains(this.root.triggerNode)) {
                 this.root.handleClose();
             }
-        }), TooltipOpenEvent.listen(window, this.root.handleClose)));
+        }));
     }
     onInteractOutside = (e) => {
         if (isElement(e.target) &&

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

@@ -5,6 +5,7 @@ interface UseGraceAreaOpts {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     setIsPointerInTransit?: (value: boolean) => void;
+    transitTimeout?: number;
 }
 export declare function useGraceArea(opts: UseGraceAreaOpts): {
     isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;

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

@@ -5,7 +5,7 @@ import { boxAutoReset } from "./box-auto-reset.svelte.js";
 import { isElement, isHTMLElement } from "./is.js";
 export function useGraceArea(opts) {
     const enabled = $derived(opts.enabled());
-    const isPointerInTransit = boxAutoReset(false, 300, (value) => {
+    const isPointerInTransit = boxAutoReset(false, opts.transitTimeout ?? 300, (value) => {
         if (enabled) {
             opts.setIsPointerInTransit?.(value);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -21,6 +21,7 @@
     "@sveltejs/kit": "^2.16.1",
     "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "4.0.0",
+    "@types/css.escape": "^1.5.2",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
@@ -41,6 +42,7 @@
     "@floating-ui/core": "^1.6.4",
     "@floating-ui/dom": "^1.6.7",
     "@internationalized/date": "^3.5.6",
+    "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
     "runed": "^0.23.2",
     "svelte-toolbelt": "^0.7.1",