bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -1,21 +1,17 @@
 /**
- * This logic is adapted from Radix UI's ScrollArea component.
+ * This logic is adapted from Radix UI ScrollArea component.
  * https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx
  * Credit to Jenna Smith (@jjenzz) for the original implementation.
  * Incredible thought must have went into solving all the intricacies of this component.
  */
-import { useDebounce } from "runed";
+import { Context, useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { executeCallbacks } from "../../internal/executeCallbacks.js";
+import { box, executeCallbacks, useRefById } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { mergeProps, useId } from "../../shared/index.js";
-import { useStateMachine } from "../../internal/useStateMachine.svelte.js";
+import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
 import { clamp } from "../../internal/clamp.js";
-import { useResizeObserver } from "../../internal/useResizeObserver.svelte.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterTick } from "../../internal/afterTick.js";
+import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 const SCROLL_AREA_ROOT_ATTR = "data-scroll-area-root";
 const SCROLL_AREA_VIEWPORT_ATTR = "data-scroll-area-viewport";
 const SCROLL_AREA_CORNER_ATTR = "data-scroll-area-corner";
@@ -60,15 +56,6 @@ class ScrollAreaRootState {
         },
         [SCROLL_AREA_ROOT_ATTR]: "",
     }));
-    createViewport(props) {
-        return new ScrollAreaViewportState(props, this);
-    }
-    createScrollbar(props) {
-        return new ScrollAreaScrollbarState(props, this);
-    }
-    createCorner(props) {
-        return new ScrollAreaCornerImplState(props, this);
-    }
 }
 class ScrollAreaViewportState {
     #id;
@@ -105,10 +92,15 @@ class ScrollAreaViewportState {
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
-        style: {
-            minWidth: "100%",
-            display: "table",
-        },
+        "data-scroll-area-content": "",
+        /**
+         * When horizontal scrollbar is visible: this element should be at least
+         * as wide as its children for size calculations to work correctly.
+         *
+         * When horizontal scrollbar is NOT visible: this element's width should
+         * be constrained by the parent container to enable `text-overflow: ellipsis`
+         */
+        style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
     }));
 }
 class ScrollAreaScrollbarState {
@@ -134,18 +126,6 @@ class ScrollAreaScrollbarState {
             };
         });
     }
-    createScrollbarHover() {
-        return new ScrollAreaScrollbarHoverState(this);
-    }
-    createScrollbarScroll() {
-        return new ScrollAreaScrollbarScrollState(this);
-    }
-    createScrollbarAuto() {
-        return new ScrollAreaScrollbarAutoState(this);
-    }
-    createScrollbarVisible() {
-        return new ScrollAreaScrollbarVisibleState(this);
-    }
 }
 class ScrollAreaScrollbarHoverState {
     root;
@@ -239,17 +219,19 @@ class ScrollAreaScrollbarScrollState {
             const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
     }
-    #onpointerenter = () => {
+    onpointerenter(_) {
         this.machine.dispatch("POINTER_ENTER");
-    };
-    #onpointerleave = () => {
+    }
+    onpointerleave(_) {
         this.machine.dispatch("POINTER_LEAVE");
-    };
+    }
     props = $derived.by(() => ({
         "data-state": this.machine.state.current === "hidden" ? "hidden" : "visible",
-        onpointerenter: this.#onpointerenter,
-        onpointerleave: this.#onpointerleave,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
     }));
 }
 class ScrollAreaScrollbarAutoState {
@@ -299,24 +281,24 @@ class ScrollAreaScrollbarVisibleState {
             }
         });
     }
-    setSizes = (sizes) => {
+    setSizes(sizes) {
         this.sizes = sizes;
-    };
-    getScrollPosition = (pointerPos, dir) => {
+    }
+    getScrollPosition(pointerPos, dir) {
         return getScrollPositionFromPointer({
             pointerPos,
             pointerOffset: this.pointerOffset,
             sizes: this.sizes,
             dir,
         });
-    };
-    onThumbPointerUp = () => {
+    }
+    onThumbPointerUp() {
         this.pointerOffset = 0;
-    };
-    onThumbPointerDown = (pointerPos) => {
+    }
+    onThumbPointerDown(pointerPos) {
         this.pointerOffset = pointerPos;
-    };
-    xOnThumbPositionChange = () => {
+    }
+    xOnThumbPositionChange() {
         if (!(this.root.viewportNode && this.thumbNode))
             return;
         const scrollPos = this.root.viewportNode.scrollLeft;
@@ -327,40 +309,34 @@ class ScrollAreaScrollbarVisibleState {
         });
         const transformStyle = `translate3d(${offset}px, 0, 0)`;
         this.thumbNode.style.transform = transformStyle;
-    };
-    xOnWheelScroll = (scrollPos) => {
+    }
+    xOnWheelScroll(scrollPos) {
         if (!this.root.viewportNode)
             return;
         this.root.viewportNode.scrollLeft = scrollPos;
-    };
-    xOnDragScroll = (pointerPos) => {
+    }
+    xOnDragScroll(pointerPos) {
         if (!this.root.viewportNode)
             return;
         this.root.viewportNode.scrollLeft = this.getScrollPosition(pointerPos, this.root.dir.current);
-    };
-    yOnThumbPositionChange = () => {
+    }
+    yOnThumbPositionChange() {
         if (!(this.root.viewportNode && this.thumbNode))
             return;
         const scrollPos = this.root.viewportNode.scrollTop;
         const offset = getThumbOffsetFromScroll({ scrollPos, sizes: this.sizes });
         const transformStyle = `translate3d(0, ${offset}px, 0)`;
         this.thumbNode.style.transform = transformStyle;
-    };
-    yOnWheelScroll = (scrollPos) => {
+    }
+    yOnWheelScroll(scrollPos) {
         if (!this.root.viewportNode)
             return;
         this.root.viewportNode.scrollTop = scrollPos;
-    };
-    yOnDragScroll = (pointerPos) => {
+    }
+    yOnDragScroll(pointerPos) {
         if (!this.root.viewportNode)
             return;
         this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.dir.current);
-    };
-    createScrollbarX(props) {
-        return new ScrollAreaScrollbarXState(props, this);
-    }
-    createScrollbarY(props) {
-        return new ScrollAreaScrollbarYState(props, this);
     }
 }
 class ScrollAreaScrollbarXState {
@@ -382,17 +358,20 @@ class ScrollAreaScrollbarXState {
             onRefChange: (node) => {
                 this.root.scrollbarXNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             if (!this.ref.current)
                 return;
             if (this.#mounted.current) {
-                afterTick(() => {
-                    this.computedStyle = getComputedStyle(this.ref.current);
-                });
+                this.computedStyle = getComputedStyle(this.ref.current);
             }
         });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
     }
     onThumbPointerDown = (pointerPos) => {
         this.scrollbarVis.onThumbPointerDown(pointerPos.x);
@@ -446,9 +425,6 @@ class ScrollAreaScrollbarXState {
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
     }));
-    createShared() {
-        return new ScrollAreaScrollbarSharedState(this);
-    }
 }
 class ScrollAreaScrollbarYState {
     #id;
@@ -469,31 +445,40 @@ class ScrollAreaScrollbarYState {
             onRefChange: (node) => {
                 this.root.scrollbarYNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             if (!this.ref.current)
                 return;
             if (this.#mounted.current) {
-                afterTick(() => {
-                    this.computedStyle = getComputedStyle(this.ref.current);
-                });
+                this.computedStyle = getComputedStyle(this.ref.current);
             }
         });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
+        this.onThumbPointerDown = this.onThumbPointerDown.bind(this);
+        this.onDragScroll = this.onDragScroll.bind(this);
+        this.onThumbPointerUp = this.onThumbPointerUp.bind(this);
+        this.onThumbPositionChange = this.onThumbPositionChange.bind(this);
+        this.onWheelScroll = this.onWheelScroll.bind(this);
+        this.onResize = this.onResize.bind(this);
     }
-    onThumbPointerDown = (pointerPos) => {
+    onThumbPointerDown(pointerPos) {
         this.scrollbarVis.onThumbPointerDown(pointerPos.y);
-    };
-    onDragScroll = (pointerPos) => {
+    }
+    onDragScroll(pointerPos) {
         this.scrollbarVis.yOnDragScroll(pointerPos.y);
-    };
-    onThumbPointerUp = () => {
+    }
+    onThumbPointerUp() {
         this.scrollbarVis.onThumbPointerUp();
-    };
-    onThumbPositionChange = () => {
+    }
+    onThumbPositionChange() {
         this.scrollbarVis.yOnThumbPositionChange();
-    };
-    onWheelScroll = (e, maxScrollPos) => {
+    }
+    onWheelScroll(e, maxScrollPos) {
         if (!this.root.viewportNode)
             return;
         const scrollPos = this.root.viewportNode.scrollTop + e.deltaY;
@@ -502,8 +487,8 @@ class ScrollAreaScrollbarYState {
         if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
             e.preventDefault();
         }
-    };
-    onResize = () => {
+    }
+    onResize() {
         if (!(this.ref.current && this.root.viewportNode && this.computedStyle))
             return;
         this.scrollbarVis.setSizes({
@@ -515,7 +500,7 @@ class ScrollAreaScrollbarYState {
                 paddingEnd: toInt(this.computedStyle.paddingBottom),
             },
         });
-    };
+    }
     thumbSize = $derived.by(() => {
         return getThumbSize(this.scrollbarVis.sizes);
     });
@@ -530,9 +515,6 @@ class ScrollAreaScrollbarYState {
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
     }));
-    createShared() {
-        return new ScrollAreaScrollbarSharedState(this);
-    }
 }
 class ScrollAreaScrollbarSharedState {
     scrollbarState;
@@ -581,15 +563,18 @@ class ScrollAreaScrollbarSharedState {
         });
         useResizeObserver(() => this.scrollbarState.ref.current, this.handleResize);
         useResizeObserver(() => this.root.contentNode, this.handleResize);
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
     }
-    handleDragScroll = (e) => {
+    handleDragScroll(e) {
         if (!this.rect)
             return;
         const x = e.clientX - this.rect.left;
         const y = e.clientY - this.rect.top;
         this.scrollbarState.onDragScroll({ x, y });
-    };
-    #onpointerdown = (e) => {
+    }
+    onpointerdown(e) {
         if (e.button !== 0)
             return;
         const target = e.target;
@@ -602,11 +587,11 @@ class ScrollAreaScrollbarSharedState {
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "auto";
         this.handleDragScroll(e);
-    };
-    #onpointermove = (e) => {
+    }
+    onpointermove(e) {
         this.handleDragScroll(e);
-    };
-    #onpointerup = (e) => {
+    }
+    onpointerup(e) {
         const target = e.target;
         if (target.hasPointerCapture(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
@@ -615,7 +600,7 @@ class ScrollAreaScrollbarSharedState {
         if (this.root.viewportNode)
             this.root.viewportNode.style.scrollBehavior = "";
         this.rect = null;
-    };
+    }
     props = $derived.by(() => mergeProps({
         ...this.scrollbarState.props,
         style: {
@@ -623,13 +608,10 @@ class ScrollAreaScrollbarSharedState {
             ...this.scrollbarState.props.style,
         },
         [SCROLL_AREA_SCROLLBAR_ATTR]: "",
-        onpointerdown: this.#onpointerdown,
-        onpointermove: this.#onpointermove,
-        onpointerup: this.#onpointerup,
+        onpointerdown: this.onpointerdown,
+        onpointermove: this.onpointermove,
+        onpointerup: this.onpointerup,
     }));
-    createThumb(props) {
-        return new ScrollAreaThumbImplState(props, this);
-    }
 }
 class ScrollAreaThumbImplState {
     #id;
@@ -656,7 +638,7 @@ class ScrollAreaThumbImplState {
             onRefChange: (node) => {
                 this.#scrollbarState.scrollbarVis.thumbNode = node;
             },
-            condition: () => this.#mounted.current,
+            deps: () => this.#mounted.current,
         });
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
@@ -674,8 +656,10 @@ class ScrollAreaThumbImplState {
             const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
+        this.onpointerdowncapture = this.onpointerdowncapture.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
     }
-    #onpointerdowncapture = (e) => {
+    onpointerdowncapture(e) {
         const thumb = e.target;
         if (!thumb)
             return;
@@ -683,10 +667,10 @@ class ScrollAreaThumbImplState {
         const x = e.clientX - thumbRect.left;
         const y = e.clientY - thumbRect.top;
         this.#scrollbarState.handleThumbPointerDown({ x, y });
-    };
-    #onpointerup = () => {
+    }
+    onpointerup(_) {
         this.#scrollbarState.handleThumbPointerUp();
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-state": this.#scrollbarState.scrollbarVis.hasThumb ? "visible" : "hidden",
@@ -695,8 +679,8 @@ class ScrollAreaThumbImplState {
             height: "var(--bits-scroll-area-thumb-height)",
             transform: this.#scrollbarState.scrollbarVis.prevTransformStyle,
         },
-        onpointerdowncapture: this.#onpointerdowncapture,
-        onpointerup: this.#onpointerup,
+        onpointerdowncapture: this.onpointerdowncapture,
+        onpointerup: this.onpointerup,
         [SCROLL_AREA_THUMB_ATTR]: "",
     }));
 }
@@ -739,46 +723,46 @@ class ScrollAreaCornerImplState {
         [SCROLL_AREA_CORNER_ATTR]: "",
     }));
 }
-export const [setScrollAreaRootContext, getScrollAreaRootContext] = createContext("ScrollArea.Root");
-export const [setScrollAreaScrollbarContext, getScrollAreaScrollbarContext] = createContext("ScrollArea.Scrollbar");
-export const [setScrollAreaScrollbarVisibleContext, getScrollAreaScrollbarVisibleContext] = createContext("ScrollArea.ScrollbarVisible");
-export const [setScrollAreaScrollbarAxisContext, getScrollAreaScrollbarAxisContext] = createContext("ScrollArea.ScrollbarAxis");
-export const [setScrollAreaScrollbarSharedContext, getScrollAreaScrollbarSharedContext] = createContext("ScrollArea.ScrollbarShared");
+export const ScrollAreaRootContext = new Context("ScrollArea.Root");
+export const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
+export const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
+export const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
+export const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
 export function useScrollAreaRoot(props) {
-    return setScrollAreaRootContext(new ScrollAreaRootState(props));
+    return ScrollAreaRootContext.set(new ScrollAreaRootState(props));
 }
 export function useScrollAreaViewport(props) {
-    return getScrollAreaRootContext().createViewport(props);
+    return new ScrollAreaViewportState(props, ScrollAreaRootContext.get());
 }
 export function useScrollAreaScrollbar(props) {
-    return setScrollAreaScrollbarContext(getScrollAreaRootContext().createScrollbar(props));
+    return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(props, ScrollAreaRootContext.get()));
 }
 export function useScrollAreaScrollbarVisible() {
-    return setScrollAreaScrollbarVisibleContext(getScrollAreaScrollbarContext().createScrollbarVisible());
+    return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
 }
 export function useScrollAreaScrollbarAuto() {
-    return getScrollAreaScrollbarContext().createScrollbarAuto();
+    return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
 }
 export function useScrollAreaScrollbarScroll() {
-    return getScrollAreaScrollbarContext().createScrollbarScroll();
+    return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
 }
 export function useScrollAreaScrollbarHover() {
-    return getScrollAreaScrollbarContext().createScrollbarHover();
+    return new ScrollAreaScrollbarHoverState(ScrollAreaScrollbarContext.get());
 }
 export function useScrollAreaScrollbarX(props) {
-    return setScrollAreaScrollbarAxisContext(getScrollAreaScrollbarVisibleContext().createScrollbarX(props));
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(props, ScrollAreaScrollbarVisibleContext.get()));
 }
 export function useScrollAreaScrollbarY(props) {
-    return setScrollAreaScrollbarAxisContext(getScrollAreaScrollbarVisibleContext().createScrollbarY(props));
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(props, ScrollAreaScrollbarVisibleContext.get()));
 }
 export function useScrollAreaScrollbarShared() {
-    return setScrollAreaScrollbarSharedContext(getScrollAreaScrollbarAxisContext().createShared());
+    return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
 }
 export function useScrollAreaThumb(props) {
-    return getScrollAreaScrollbarSharedContext().createThumb(props);
+    return new ScrollAreaThumbImplState(props, ScrollAreaScrollbarSharedContext.get());
 }
 export function useScrollAreaCorner(props) {
-    return getScrollAreaRootContext().createCorner(props);
+    return new ScrollAreaCornerImplState(props, ScrollAreaRootContext.get());
 }
 function toInt(value) {
     return value ? Number.parseInt(value, 10) : 0;

package/dist/bits/scroll-area/types.d.ts

@@ -1,4 +1,4 @@
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { Direction, Orientation, WithChild, Without } from "../../shared/index.js";
 export type ScrollAreaType = "hover" | "scroll" | "auto" | "always";
 export type ScrollAreaRootPropsWithoutHTML = WithChild<{
@@ -20,9 +20,9 @@ export type ScrollAreaRootPropsWithoutHTML = WithChild<{
      */
     scrollHideDelay?: number;
 }>;
-export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
+export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
 export type ScrollAreaViewportPropsWithoutHTML = Omit<WithChild, "child">;
-export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
+export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
 export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
     orientation: Orientation;
     /**
@@ -31,7 +31,7 @@ export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
+export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
 export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
     /**
      * Whether to forcefully mount the component. Useful when working with
@@ -39,9 +39,9 @@ export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }>;
-export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
+export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
 export type ScrollAreaCornerPropsWithoutHTML = WithChild;
-export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML & Without<PrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
+export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
 export type _ScrollbarStubProps = Omit<ScrollAreaScrollbarProps, "orientation" | "ref" | "id"> & {
     id: string;
 };

package/dist/bits/select/components/select-content-static.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SelectContentStaticProps } from "../types.js";
+	import { useSelectContent } from "../select.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		forceMount = false,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
+		...restProps
+	}: SelectContentStaticProps = $props();
+
+	const contentState = useSelectContent({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	function handleInteractOutside(e: PointerEvent) {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		onPlaced={() => (contentState.isPositioned = true)}
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		isStatic
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		preventScroll={false}
+		onPlaced={() => (contentState.isPositioned = true)}
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/select/components/select-content-static.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SelectContentStaticProps } from "../types.js";
+declare const SelectContentStatic: import("svelte").Component<SelectContentStaticProps, {}, "ref">;
+type SelectContentStatic = ReturnType<typeof SelectContentStatic>;
+export default SelectContentStatic;