bits-ui 2.16.4 → 2.17.0

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

@@ -131,14 +131,16 @@ export declare class AccordionContentState {
     };
     readonly props: {
         readonly hidden: boolean | "until-found" | undefined;
-        readonly id: string;
-        readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": Orientation;
         readonly style: {
             readonly "--bits-accordion-content-height": `${number}px`;
             readonly "--bits-accordion-content-width": `${number}px`;
         };
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
     };
 }
 export declare class AccordionHeaderState {

package/dist/bits/accordion/accordion.svelte.js

@@ -1,6 +1,6 @@
 import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from "../../internal/attrs.js";
+import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
@@ -237,6 +237,7 @@ export class AccordionContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.item.isActive),
+        ...getDataTransitionAttrs(this.item.contentPresence.transitionStatus),
         "data-disabled": boolToEmptyStrOrUndef(this.item.isDisabled),
         "data-orientation": this.item.root.opts.orientation.current,
         [accordionAttrs.content]: "",

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

@@ -42,13 +42,15 @@ export declare class CollapsibleContentState {
     };
     readonly props: {
         readonly hidden: boolean | "until-found" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
         readonly id: string;
         readonly style: {
             readonly "--bits-collapsible-content-height": string | undefined;
             readonly "--bits-collapsible-content-width": string | undefined;
         };
         readonly "data-state": "open" | "closed";
-        readonly "data-disabled": "" | undefined;
     };
 }
 interface CollapsibleTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,6 +1,6 @@
 import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { on } from "svelte/events";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
@@ -135,6 +135,7 @@ export class CollapsibleContentState {
             ? "until-found"
             : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [collapsibleAttrs.content]: "",
         ...(this.opts.hiddenUntilFound.current && !this.shouldRender

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

@@ -8,14 +8,16 @@
 	let {
 		open = $bindable(false),
 		dir = "ltr",
+		// debugMode = false,
 		onOpenChange = noop,
 		onOpenChangeComplete = noop,
 		children,
 	}: ContextMenuRootProps = $props();
 
 	const root = MenuRootState.create({
-		variant: boxWith(() => "context-menu"),
+		variant: boxWith(() => "context-menu" as const),
 		dir: boxWith(() => dir),
+		// debugMode: boxWith(() => debugMode),
 		onClose: () => {
 			open = false;
 			onOpenChange?.(false);

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -135,6 +135,7 @@ export declare class DateFieldRootState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     };
     updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
     handleSegmentClick(e: BitsMouseEvent): void;
@@ -256,6 +257,7 @@ declare abstract class BaseNumericSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | {
         "aria-labelledby": string;
         contenteditable: string | undefined;
@@ -285,6 +287,7 @@ declare abstract class BaseNumericSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     };
 }
 declare class DateFieldYearSegmentState extends BaseNumericSegmentState {
@@ -345,6 +348,7 @@ export declare class DateFieldDayPeriodSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | {
         "aria-labelledby": string;
         contenteditable: string | undefined;
@@ -373,6 +377,7 @@ export declare class DateFieldDayPeriodSegmentState {
         style: {
             caretColor: string;
         };
+        onbeforeinput: (e: InputEvent) => void;
     } | undefined;
 }
 interface DateFieldLiteralSegmentStateOpts extends WithRefOpts {

package/dist/bits/date-field/date-field.svelte.js

@@ -414,6 +414,11 @@ export class DateFieldRootState {
         style: {
             caretColor: "transparent",
         },
+        onbeforeinput: (e) => {
+            if (!e.data || e.data.length <= 1) {
+                e.preventDefault();
+            }
+        },
     };
     #getLabelledBy(segmentId) {
         return `${segmentId} ${this.getLabelNode()?.id ?? ""}`;

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

@@ -138,6 +138,8 @@ export declare class DialogContentState {
     };
     readonly props: {
         readonly "data-state": "open" | "closed";
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
         readonly id: string;
         readonly role: "dialog" | "alertdialog";
         readonly "aria-modal": "true";
@@ -169,6 +171,8 @@ export declare class DialogOverlayState {
     };
     readonly props: {
         readonly "data-state": "open" | "closed";
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
         readonly id: string;
         readonly style: {
             readonly pointerEvents: "auto";

package/dist/bits/dialog/dialog.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef, boxWith, onDestroyEffect, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 const dialogAttrs = createBitsAttrs({
@@ -280,6 +280,7 @@ export class DialogContentState {
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
         "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         ...this.root.sharedProps,
         ...this.attachment,
     }));
@@ -310,6 +311,7 @@ export class DialogOverlayState {
         },
         "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
         "data-nested": boolToEmptyStrOrUndef(this.root.parent !== null),
+        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),
         ...this.root.sharedProps,
         ...this.attachment,
     }));

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

@@ -77,12 +77,14 @@ export declare class LinkPreviewContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly tabindex: -1;
-        readonly "data-state": "open" | "closed";
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => 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;

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

@@ -1,7 +1,7 @@
 import { afterSleep, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
-import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
@@ -225,6 +225,7 @@ export class LinkPreviewContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
         [linkPreviewAttrs.content]: "",
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -97,12 +97,21 @@
 	function handleOnFocusOutside(e: FocusEvent) {
 		onFocusOutside(e);
 		if (e.defaultPrevented) return;
-		// We prevent closing when the trigger is focused to avoid triggering a re-open animation
-		// on pointer interaction.
 		if (!isHTMLElement(e.target)) return;
-		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
+		if (e.target.id === subContentState.parentMenu.triggerNode?.id) return;
+		const parentContent = subContentState.parentMenu.parentMenu?.contentNode;
+		if (parentContent?.contains(e.target)) {
 			subContentState.parentMenu.onClose();
+			e.preventDefault();
+			return;
+		}
+		// focus moved to a descendant sub-content (rendered in a portal)
+		const subContentSelector = `[${subContentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+		if (e.target.closest(subContentSelector)) {
+			e.preventDefault();
+			return;
 		}
+		subContentState.parentMenu.onClose();
 	}
 </script>
 

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

@@ -99,12 +99,21 @@
 	function handleOnFocusOutside(e: FocusEvent) {
 		onFocusOutside(e);
 		if (e.defaultPrevented) return;
-		// We prevent closing when the trigger is focused to avoid triggering a re-open animation
-		// on pointer interaction.
 		if (!isHTMLElement(e.target)) return;
-		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
+		if (e.target.id === subContentState.parentMenu.triggerNode?.id) return;
+		const parentContent = subContentState.parentMenu.parentMenu?.contentNode;
+		if (parentContent?.contains(e.target)) {
 			subContentState.parentMenu.onClose();
+			e.preventDefault();
+			return;
+		}
+		// focus moved to a descendant sub-content rendered in a portal
+		const subContentSelector = `[${subContentState.parentMenu.root.getBitsAttr("sub-content")}]`;
+		if (e.target.closest(subContentSelector)) {
+			e.preventDefault();
+			return;
 		}
+		subContentState.parentMenu.onClose();
 	}
 </script>
 

package/dist/bits/menu/components/menu-sub-trigger.svelte

@@ -15,7 +15,7 @@
 		children,
 		child,
 		onSelect = noop,
-		openDelay = 100,
+		openDelay = 0,
 		...restProps
 	}: MenuSubTriggerProps = $props();
 

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

@@ -8,21 +8,26 @@
 	let {
 		open = $bindable(false),
 		dir = "ltr",
+		// debugMode = false,
 		onOpenChange = noop,
 		onOpenChangeComplete = noop,
 		_internal_variant: variant = "dropdown-menu",
+		_internal_should_skip_exit_animation: shouldSkipExitAnimation = undefined,
 		children,
 	}: MenuRootProps & {
 		_internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
+		_internal_should_skip_exit_animation?: () => boolean;
 	} = $props();
 
 	const root = MenuRootState.create({
 		variant: boxWith(() => variant),
 		dir: boxWith(() => dir),
+		// debugMode: boxWith(() => debugMode),
 		onClose: () => {
 			open = false;
 			onOpenChange(false);
 		},
+		shouldSkipExitAnimation: () => shouldSkipExitAnimation?.() ?? false,
 	});
 
 	MenuMenuState.create(

package/dist/bits/menu/components/menu.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { MenuRootProps } from "../types.js";
 type $$ComponentProps = MenuRootProps & {
     _internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
+    _internal_should_skip_exit_animation?: () => boolean;
 };
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Menu = ReturnType<typeof Menu>;

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

@@ -16,6 +16,8 @@ export interface MenuRootStateOpts extends ReadableBoxedValues<{
     variant: MenuVariant;
 }> {
     onClose: AnyFn;
+    /** When closing, if this returns true, exit animations are skipped (instant unmount). */
+    shouldSkipExitAnimation?: () => boolean;
 }
 export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
 export declare const menuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
@@ -79,10 +81,6 @@ export declare class MenuContentState {
         open: boolean;
     };
     readonly props: {
-        readonly id: string;
-        readonly role: "menu";
-        readonly "aria-orientation": "vertical";
-        readonly "data-state": "open" | "closed";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
@@ -91,6 +89,12 @@ export declare class MenuContentState {
             readonly pointerEvents: "auto";
             readonly contain: "layout style";
         };
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly role: "menu";
+        readonly "aria-orientation": "vertical";
+        readonly "data-state": "open" | "closed";
     };
     readonly popperProps: {
         onCloseAutoFocus: (e: Event) => void;