bits-ui 2.16.4 → 2.17.0

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -24,4 +24,7 @@
 	dir={menuState.root.opts.dir.current}
 	_internal_variant="menubar"
 	{...restProps}
+	_internal_should_skip_exit_animation={() =>
+		menuState.root.skipExitAnimationForMenuValue === menuState.opts.value.current
+	}
 />

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

@@ -18,6 +18,8 @@ export declare class MenubarRootState {
     readonly attachment: RefAttachment;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
+    /** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
+    skipExitAnimationForMenuValue: string | null;
     valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
     constructor(opts: MenubarRootStateOpts);
     /**

package/dist/bits/menubar/menubar.svelte.js

@@ -21,6 +21,8 @@ export class MenubarRootState {
     attachment;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
+    /** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
+    skipExitAnimationForMenuValue = $state(null);
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
@@ -55,6 +57,10 @@ export class MenubarRootState {
     };
     updateValue = (value) => {
         const currValue = this.opts.value.current;
+        const switchingMenus = Boolean(currValue && value && currValue !== value);
+        if (switchingMenus) {
+            this.skipExitAnimationForMenuValue = currValue;
+        }
         const currHandler = this.valueToChangeHandler.get(currValue)?.current;
         const nextHandler = this.valueToChangeHandler.get(value)?.current;
         this.opts.value.current = value;
@@ -64,6 +70,11 @@ export class MenubarRootState {
         if (nextHandler) {
             nextHandler(true);
         }
+        if (switchingMenus) {
+            afterTick(() => {
+                this.skipExitAnimationForMenuValue = null;
+            });
+        }
     };
     getTriggers = () => {
         const node = this.opts.ref.current;
@@ -271,13 +282,22 @@ export class MenubarContentState {
         if (isPrevKey)
             candidates.reverse();
         const candidateValues = candidates.map(({ value }) => value);
-        const currentIndex = candidateValues.indexOf(this.menu.opts.value.current);
+        // use the root's open menu id — during rapid switching, stale content can still be
+        // focused while another menu is already open; per-menu value would navigate from the wrong index
+        const openMenuValue = this.root.opts.value.current;
+        if (!openMenuValue)
+            return;
+        const currentIndex = candidateValues.indexOf(openMenuValue);
+        if (currentIndex === -1)
+            return;
         candidates = this.root.opts.loop.current
             ? wrapArray(candidates, currentIndex + 1)
             : candidates.slice(currentIndex + 1);
         const [nextValue] = candidates;
-        if (nextValue)
+        if (nextValue) {
             this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
+            e.preventDefault();
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,

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

@@ -3,6 +3,7 @@
 	import { NavigationMenuContentState } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import type { NavigationMenuContentProps } from "../../../types.js";
 	import Portal from "../../utilities/portal/portal.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
@@ -38,8 +39,12 @@
 		open={forceMount || contentState.open || contentState.isLastActiveValue}
 		ref={contentState.opts.ref}
 	>
-		{#snippet presence()}
-			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
+		{#snippet presence({ transitionStatus })}
+			<NavigationMenuContentImpl
+				{...mergeProps(mergedProps, getDataTransitionAttrs(transitionStatus))}
+				{children}
+				{child}
+			/>
 			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PresenceLayer>

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

@@ -4,6 +4,7 @@
 	import { NavigationMenuIndicatorState } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import Portal from "../../utilities/portal/portal.svelte";
 
@@ -25,8 +26,14 @@
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
 		<PresenceLayer open={forceMount || indicatorState.isVisible} ref={boxWith(() => ref)}>
-			{#snippet presence()}
-				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
+			{#snippet presence({ transitionStatus })}
+				<NavigationMenuIndicatorImpl
+					{...mergeProps(mergedProps, getDataTransitionAttrs(transitionStatus))}
+					{children}
+					{child}
+					{id}
+					bind:ref
+				/>
 			{/snippet}
 		</PresenceLayer>
 	</Portal>

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

@@ -2,6 +2,7 @@
 	import type { NavigationMenuViewportProps } from "../types.js";
 	import { NavigationMenuViewportState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
+	import { getDataTransitionAttrs } from "../../../internal/attrs.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { Mounted } from "../../utilities/index.js";
@@ -29,11 +30,12 @@
 </script>
 
 <PresenceLayer open={forceMount || viewportState.open} ref={viewportState.opts.ref}>
-	{#snippet presence()}
+	{#snippet presence({ transitionStatus })}
+		{@const presenceProps = getDataTransitionAttrs(transitionStatus)}
 		{#if child}
-			{@render child({ props: mergedProps })}
+			{@render child({ props: mergeProps(mergedProps, presenceProps) })}
 		{:else}
-			<div {...mergedProps}>
+			<div {...mergeProps(mergedProps, presenceProps)}>
 				{@render children?.()}
 			</div>
 		{/if}

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

@@ -80,7 +80,7 @@ export class NavigationMenuRootState {
         const isOpen = this.opts?.value?.current !== "";
         if (isOpen || this.isDelaySkipped.current) {
             // 150 for user to switch trigger or move into content view
-            return 100;
+            return 150;
         }
         else {
             return this.opts.delayDuration.current;

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

@@ -87,9 +87,6 @@ export declare class PopoverContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly tabindex: -1;
-        readonly "data-state": "open" | "closed";
         readonly style: {
             readonly pointerEvents: "auto";
             readonly contain: "layout style";
@@ -98,6 +95,11 @@ export declare class PopoverContentState {
         readonly onfocusin: (e: BitsFocusEvent) => void;
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (e: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
@@ -134,6 +136,8 @@ export declare class PopoverOverlayState {
         open: boolean;
     };
     readonly props: {
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
         readonly id: string;
         readonly style: {
             readonly pointerEvents: "auto";

package/dist/bits/popover/popover.svelte.js

@@ -1,7 +1,7 @@
 import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { kbd } from "../../internal/kbd.js";
-import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { isElement, isTouch } from "../../internal/is.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
@@ -325,6 +325,7 @@ export class PopoverContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         [popoverAttrs.content]: "",
         style: {
             pointerEvents: "auto",
@@ -397,6 +398,7 @@ export class PopoverOverlayState {
             pointerEvents: "auto",
         },
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),
         ...this.attachment,
     }));
 }

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

@@ -41,11 +41,13 @@ declare abstract class SelectBaseRootState {
     readonly highlightedValue: string | null;
     readonly highlightedId: string | undefined;
     readonly highlightedLabel: string | null;
+    contentIsPositioned: boolean;
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     domContext: DOMContext;
     constructor(opts: SelectBaseRootStateOpts);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
+    scrollHighlightedNodeIntoView(node: HTMLElement): void;
     getCandidateNodes(): HTMLElement[];
     setHighlightedToFirstCandidate(initial?: boolean): void;
     getNodeByValue(value: string): HTMLElement | null;
@@ -211,10 +213,6 @@ export declare class SelectContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly role: "listbox";
-        readonly "aria-multiselectable": "true" | undefined;
-        readonly "data-state": "open" | "closed";
         readonly style: {
             readonly display: "flex";
             readonly flexDirection: "column";
@@ -223,6 +221,12 @@ export declare class SelectContentState {
             readonly pointerEvents: "auto";
         };
         readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly role: "listbox";
+        readonly "aria-multiselectable": "true" | undefined;
+        readonly "data-state": "open" | "closed";
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;

package/dist/bits/select/select.svelte.js

@@ -2,7 +2,7 @@ import { Context, Previous, watch } from "runed";
 import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
-import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, getDataOpenClosed, boolToTrueOrUndef, } from "../../internal/attrs.js";
+import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, getDataOpenClosed, boolToTrueOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
 import { isIOS } from "../../internal/is.js";
@@ -65,6 +65,7 @@ class SelectBaseRootState {
             return null;
         return this.highlightedNode.getAttribute("data-label");
     });
+    contentIsPositioned = $state(false);
     isUsingKeyboard = false;
     isCombobox = false;
     domContext = new DOMContext(() => null);
@@ -87,9 +88,14 @@ class SelectBaseRootState {
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
-            node.scrollIntoView({ block: this.opts.scrollAlignment.current });
+            this.scrollHighlightedNodeIntoView(node);
         }
     }
+    scrollHighlightedNodeIntoView(node) {
+        if (!this.viewportNode || !this.contentIsPositioned)
+            return;
+        node.scrollIntoView({ block: this.opts.scrollAlignment.current });
+    }
     getCandidateNodes() {
         const node = this.contentNode;
         if (!node)
@@ -713,13 +719,20 @@ export class SelectContentState {
         }
         onDestroyEffect(() => {
             this.root.contentNode = null;
+            this.root.contentIsPositioned = false;
             this.isPositioned = false;
         });
         watch(() => this.root.opts.open.current, () => {
             if (this.root.opts.open.current)
                 return;
+            this.root.contentIsPositioned = false;
             this.isPositioned = false;
         });
+        watch([() => this.isPositioned, () => this.root.highlightedNode], () => {
+            if (!this.isPositioned || !this.root.highlightedNode)
+                return;
+            this.root.scrollHighlightedNodeIntoView(this.root.highlightedNode);
+        });
         this.onpointermove = this.onpointermove.bind(this);
     }
     onpointermove(_) {
@@ -759,6 +772,7 @@ export class SelectContentState {
         role: "listbox",
         "aria-multiselectable": this.root.isMulti ? "true" : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         [this.root.getBitsAttr("content")]: "",
         style: {
             display: "flex",
@@ -782,6 +796,7 @@ export class SelectContentState {
             // onPlaced is also called when the menu is closed, so we need to check if the menu
             // is actually open to avoid setting positioning to true when the menu is closed
             if (this.root.opts.open.current) {
+                this.root.contentIsPositioned = true;
                 this.isPositioned = true;
             }
         },
@@ -1120,7 +1135,9 @@ export class SelectScrollDownButtonState {
             }
             this.scrollIntoViewTimer = afterSleep(5, () => {
                 const activeItem = this.root.highlightedNode;
-                activeItem?.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
+                if (!activeItem)
+                    return;
+                this.root.scrollHighlightedNodeIntoView(activeItem);
             });
         });
     }

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

@@ -153,12 +153,14 @@ export declare class TooltipContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly "data-state": "closed" | "delayed-open" | "instant-open";
-        readonly "data-disabled": "" | undefined;
         readonly style: {
             readonly outline: "none";
         };
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly "data-state": "closed" | "delayed-open" | "instant-open";
+        readonly "data-disabled": "" | undefined;
     };
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;

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

@@ -2,7 +2,7 @@ import { onMountEffect, attachRef, DOMContext, simpleBox, boxWith, } from "svelt
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { createBitsAttrs, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToEmptyStrOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { TimeoutFn } from "../../internal/timeout-fn.js";
 import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
@@ -163,8 +163,8 @@ export class TooltipProviderState {
     onClose = (tooltip) => {
         if (this.#openTooltip === tooltip) {
             this.#openTooltip = null;
+            this.#startTimer();
         }
-        this.#startTimer();
     };
     isTooltipOpen = (tooltip) => {
         return this.#openTooltip === tooltip;
@@ -665,6 +665,7 @@ export class TooltipContentState {
         id: this.opts.id.current,
         "data-state": this.root.stateAttr,
         "data-disabled": boolToEmptyStrOrUndef(this.root.disabled),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         style: {
             outline: "none",
         },

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -348,7 +348,7 @@ export declare class FloatingContentState {
             readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
             readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
             readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-            position: "relative" | "absolute" | "fixed" | "sticky" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
+            position: "relative" | "absolute" | "inherit" | "fixed" | "sticky" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
             readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             readonly quotes?: import("csstype").Property.Quotes | undefined;
             readonly resize?: import("csstype").Property.Resize | undefined;
@@ -901,10 +901,10 @@ export declare class FloatingContentState {
             readonly vectorEffect?: import("csstype").Property.VectorEffect | undefined;
             readonly "pointer-events"?: string | undefined;
             readonly "--bits-floating-transform-origin": `${any} ${any}`;
-            readonly "--bits-floating-available-width": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-available-height": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-anchor-width": "undefinedpx" | `${number}px`;
-            readonly "--bits-floating-anchor-height": "undefinedpx" | `${number}px`;
+            readonly "--bits-floating-available-width": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-available-height": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-anchor-width": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-anchor-height": `${number}px` | "undefinedpx";
         };
         readonly dir: Direction;
     };

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

@@ -12,5 +12,9 @@
 </script>
 
 {#if forceMount || open || presenceState.isPresent}
-	{@render presence?.({ present: presenceState.isPresent })}
+	{@render
+		presence?.({
+			present: presenceState.isPresent,
+			transitionStatus: presenceState.transitionStatus,
+		})}
 {/if}

package/dist/bits/utilities/presence-layer/presence.svelte.d.ts

@@ -1,50 +1,15 @@
 import { type ReadableBox, type ReadableBoxedValues } from "svelte-toolbelt";
-import { Previous } from "runed";
-import { StateMachine } from "../../../internal/state-machine.js";
+import type { TransitionState } from "../../../internal/attrs.js";
 export interface PresenceOptions extends ReadableBoxedValues<{
     open: boolean;
     ref: HTMLElement | null;
 }> {
 }
-type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
-/**
- * Cached style properties to avoid storing live CSSStyleDeclaration
- * which triggers style recalculations when accessed.
- */
-interface CachedStyles {
-    display: string;
-    animationName: string;
-}
-declare const presenceMachine: {
-    readonly mounted: {
-        readonly UNMOUNT: "unmounted";
-        readonly ANIMATION_OUT: "unmountSuspended";
-    };
-    readonly unmountSuspended: {
-        readonly MOUNT: "mounted";
-        readonly ANIMATION_END: "unmounted";
-    };
-    readonly unmounted: {
-        readonly MOUNT: "mounted";
-    };
-};
-type PresenceMachine = StateMachine<typeof presenceMachine>;
 export declare class Presence {
+    #private;
     readonly opts: PresenceOptions;
-    prevAnimationNameState: string;
-    styles: CachedStyles;
-    initialStatus: PresenceStatus;
-    previousPresent: Previous<boolean>;
-    machine: PresenceMachine;
     present: ReadableBox<boolean>;
     constructor(opts: PresenceOptions);
-    /**
-     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
-     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
-     * make sure we only trigger ANIMATION_END for the currently active animation.
-     */
-    handleAnimationEnd(event: AnimationEvent): void;
-    handleAnimationStart(event: AnimationEvent): void;
     isPresent: boolean;
+    get transitionStatus(): TransitionState;
 }
-export {};