bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/tooltip/components/tooltip-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { TooltipTriggerProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TooltipTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const TooltipTrigger: $$__sveltets_2_IsomorphicComponent<TooltipTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type TooltipTrigger = InstanceType<typeof TooltipTrigger>;

package/dist/bits/tooltip/components/tooltip.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { TooltipRootProps } from "../types.js";
 	import { useTooltipRoot } from "../tooltip.svelte.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
-		disabled = false,
+		disabled,
 		delayDuration,
-		disableCloseOnTriggerClick = false,
+		disableCloseOnTriggerClick,
 		disableHoverableContent,
-		ignoreNonKeyboardFocus = false,
+		ignoreNonKeyboardFocus,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: TooltipRootProps = $props();
 
 	useTooltipRoot({
 		open: box.with(
@@ -37,6 +37,6 @@
 	});
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{@render children?.()}
-</FloatingLayer.Root>
+</FloatingLayer>

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

@@ -1,4 +1,3 @@
-import type { RootProps } from "../index.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Tooltip: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<import("../types.js").TooltipRootPropsWithoutHTML, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "open">;
 type Tooltip = InstanceType<typeof Tooltip>;

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

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/tooltip.svelte";
+export { default as Content } from "./components/tooltip-content.svelte";
+export { default as ContentStatic } from "./components/tooltip-content-static.svelte";
+export { default as Trigger } from "./components/tooltip-trigger.svelte";
+export { default as Arrow } from "./components/tooltip-arrow.svelte";
+export { default as Provider } from "./components/tooltip-provider.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, } from "./types.js";
+export type { PortalProps } from "../utilities/portal/types.js";

package/dist/bits/tooltip/exports.js

@@ -0,0 +1,7 @@
+export { default as Root } from "./components/tooltip.svelte";
+export { default as Content } from "./components/tooltip-content.svelte";
+export { default as ContentStatic } from "./components/tooltip-content-static.svelte";
+export { default as Trigger } from "./components/tooltip-trigger.svelte";
+export { default as Arrow } from "./components/tooltip-arrow.svelte";
+export { default as Provider } from "./components/tooltip-provider.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";

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

@@ -1,9 +1 @@
-export { default as Root } from "./components/tooltip.svelte";
-export { default as Content } from "./components/tooltip-content.svelte";
-export { default as ContentStatic } from "./components/tooltip-content-static.svelte";
-export { default as Trigger } from "./components/tooltip-trigger.svelte";
-export { default as Arrow } from "./components/tooltip-arrow.svelte";
-export { default as Provider } from "./components/tooltip-provider.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, } from "./types.js";
-export type { PortalProps } from "../utilities/portal/types.js";
+export * as Tooltip from "./exports.js";

package/dist/bits/tooltip/index.js

@@ -1,7 +1 @@
-export { default as Root } from "./components/tooltip.svelte";
-export { default as Content } from "./components/tooltip-content.svelte";
-export { default as ContentStatic } from "./components/tooltip-content-static.svelte";
-export { default as Trigger } from "./components/tooltip-trigger.svelte";
-export { default as Arrow } from "./components/tooltip-arrow.svelte";
-export { default as Provider } from "./components/tooltip-provider.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
+export * as Tooltip from "./exports.js";

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

@@ -21,14 +21,13 @@ declare class TooltipProviderState {
     constructor(props: TooltipProviderStateProps);
     onOpen: () => void;
     onClose: () => void;
-    createRoot(props: TooltipRootStateProps): TooltipRootState;
 }
 type TooltipRootStateProps = ReadableBoxedValues<{
     delayDuration: number | undefined;
     disableHoverableContent: boolean | undefined;
-    disableCloseOnTriggerClick: boolean;
-    disabled: boolean;
-    ignoreNonKeyboardFocus: boolean;
+    disableCloseOnTriggerClick: boolean | undefined;
+    disabled: boolean | undefined;
+    ignoreNonKeyboardFocus: boolean | undefined;
 }> & WritableBoxedValues<{
     open: boolean;
 }>;
@@ -54,8 +53,6 @@ declare class TooltipRootState {
     handleClose: () => void;
     onTriggerEnter: () => void;
     onTriggerLeave: () => void;
-    createTrigger(props: TooltipTriggerStateProps): TooltipTriggerState;
-    createContent(props: TooltipContentStateProps): TooltipContentState;
 }
 type TooltipTriggerStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -72,6 +69,7 @@ declare class TooltipTriggerState {
         "data-delay-duration": string;
         "data-tooltip-trigger": string;
         tabindex: number | undefined;
+        disabled: boolean;
         onpointerup: () => void;
         onpointerdown: () => void;
         onpointermove: (e: PointerEvent) => void;
@@ -92,10 +90,14 @@ declare class TooltipContentState {
         open: boolean;
     };
     props: {
-        id: string;
-        "data-state": string;
-        "data-disabled": "" | undefined;
-        "data-tooltip-content": string;
+        readonly id: string;
+        readonly "data-state": string;
+        readonly "data-disabled": "" | undefined;
+        readonly style: {
+            readonly pointerEvents: "auto";
+            readonly outline: "none";
+        };
+        readonly "data-tooltip-content": "";
     };
 }
 export declare function useTooltipProvider(props: TooltipProviderStateProps): TooltipProviderState;

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

@@ -1,12 +1,11 @@
-import { box } from "svelte-toolbelt";
+import { box, useRefById } from "svelte-toolbelt";
 import { useEventListener } from "runed";
 import { untrack } from "svelte";
 import { TOOLTIP_OPEN_EVENT } from "./utils.js";
-import { useTimeoutFn } from "../../internal/useTimeoutFn.svelte.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
-import { useGraceArea } from "../../internal/useGraceArea.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 import { getDataDisabled } from "../../internal/attrs.js";
 const CONTENT_ATTR = "data-tooltip-content";
 const TRIGGER_ATTR = "data-tooltip-trigger";
@@ -44,9 +43,6 @@ class TooltipProviderState {
     onClose = () => {
         this.#startTimer();
     };
-    createRoot(props) {
-        return new TooltipRootState(props, this);
-    }
 }
 class TooltipRootState {
     open;
@@ -132,12 +128,6 @@ class TooltipRootState {
             this.#timerFn.stop();
         }
     };
-    createTrigger(props) {
-        return new TooltipTriggerState(props, this);
-    }
-    createContent(props) {
-        return new TooltipContentState(props, this);
-    }
 }
 class TooltipTriggerState {
     #id;
@@ -217,6 +207,7 @@ class TooltipTriggerState {
         "data-delay-duration": `${this.#root.delayDuration}`,
         [TRIGGER_ATTR]: "",
         tabindex: this.#isDisabled ? undefined : 0,
+        disabled: this.#disabled.current,
         onpointerup: this.#onpointerup,
         onpointerdown: this.#onpointerdown,
         onpointermove: this.#onpointermove,
@@ -240,7 +231,7 @@ class TooltipContentState {
             onRefChange: (node) => {
                 this.root.contentNode = node;
             },
-            condition: () => this.root.open.current,
+            deps: () => this.root.open.current,
         });
         $effect(() => {
             if (!this.root.open.current)
@@ -270,6 +261,10 @@ class TooltipContentState {
         id: this.#id.current,
         "data-state": this.root.stateAttr,
         "data-disabled": getDataDisabled(this.root.disabled),
+        style: {
+            pointerEvents: "auto",
+            outline: "none",
+        },
         [CONTENT_ATTR]: "",
     }));
 }
@@ -282,11 +277,11 @@ export function useTooltipProvider(props) {
     return setTooltipProviderContext(new TooltipProviderState(props));
 }
 export function useTooltipRoot(props) {
-    return setTooltipRootContext(getTooltipProviderContext().createRoot(props));
+    return setTooltipRootContext(new TooltipRootState(props, getTooltipProviderContext()));
 }
 export function useTooltipTrigger(props) {
-    return getTooltipRootContext().createTrigger(props);
+    return new TooltipTriggerState(props, getTooltipRootContext());
 }
 export function useTooltipContent(props) {
-    return getTooltipRootContext().createContent(props);
+    return new TooltipContentState(props, getTooltipRootContext());
 }

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

@@ -2,8 +2,8 @@ import type { FloatingLayerContentProps } from "../utilities/floating-layer/type
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
 import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { PortalProps } from "../utilities/portal/types.js";
 export type TooltipProviderPropsWithoutHTML = WithChildren<{
     /**
@@ -104,7 +104,7 @@ export type TooltipContentSnippetProps = {
      */
     open: boolean;
 };
-export type TooltipContentPropsWithoutHTML = WithChild<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the tooltip will be forced to mount in the DOM.
      *
@@ -112,8 +112,8 @@ export type TooltipContentPropsWithoutHTML = WithChild<Pick<FloatingLayerContent
      */
     forceMount?: boolean;
 }, TooltipContentSnippetProps>;
-export type TooltipContentProps = TooltipContentPropsWithoutHTML & Without<PrimitiveDivAttributes, TooltipContentPropsWithoutHTML>;
-export type TooltipContentStaticPropsWithoutHTML = WithChild<Pick<FloatingLayerContentProps, "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+export type TooltipContentProps = TooltipContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TooltipContentPropsWithoutHTML>;
+export type TooltipContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the tooltip will be forced to mount in the DOM.
      *
@@ -121,7 +121,7 @@ export type TooltipContentStaticPropsWithoutHTML = WithChild<Pick<FloatingLayerC
      */
     forceMount?: boolean;
 }, TooltipContentSnippetProps>;
-export type TooltipContentStaticProps = TooltipContentStaticPropsWithoutHTML & Without<PrimitiveDivAttributes, TooltipContentStaticPropsWithoutHTML>;
+export type TooltipContentStaticProps = TooltipContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TooltipContentStaticPropsWithoutHTML>;
 export type TooltipArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type TooltipArrowProps = ArrowProps;
 export type TooltipPortalPropsWithoutHTML = PortalProps;
@@ -134,4 +134,4 @@ export type TooltipTriggerPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }>;
-export type TooltipTriggerProps = TooltipTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML>;
+export type TooltipTriggerProps = TooltipTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML>;

package/dist/bits/utilities/arrow/arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
 	import type { ArrowProps } from "./types.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -22,7 +22,7 @@
 		{#if children}
 			{@render children?.()}
 		{:else}
-			<svg {width} {height} viewBox="0 0 30 10" preserveAspectRatio="none">
+			<svg {width} {height} viewBox="0 0 30 10" preserveAspectRatio="none" data-arrow="">
 				<polygon points="0,0 30,0 15,10" fill="currentColor" />
 			</svg>
 		{/if}

package/dist/bits/utilities/arrow/types.d.ts

@@ -1,5 +1,5 @@
 import type { WithChild } from "../../../internal/types.js";
-import type { PrimitiveSpanAttributes } from "../../../shared/attributes.js";
+import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
 export type ArrowPropsWithoutHTML = WithChild<{
     /**
      * The width of the arrow in pixels.
@@ -14,4 +14,4 @@ export type ArrowPropsWithoutHTML = WithChild<{
      */
     height?: number;
 }>;
-export type ArrowProps = ArrowPropsWithoutHTML & PrimitiveSpanAttributes;
+export type ArrowProps = ArrowPropsWithoutHTML & BitsPrimitiveSpanAttributes;

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

@@ -7,7 +7,6 @@
 	let {
 		interactOutsideBehavior = "close",
 		onInteractOutside = noop,
-		onInteractOutsideStart = noop,
 		onFocusOutside = noop,
 		id,
 		children,
@@ -19,7 +18,6 @@
 		id: box.with(() => id),
 		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
 		onInteractOutside: box.with(() => onInteractOutside),
-		onInteractOutsideStart: box.with(() => onInteractOutsideStart),
 		enabled: box.with(() => enabled),
 		onFocusOutside: box.with(() => onFocusOutside),
 		isValidEvent: box.with(() => isValidEvent),

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
-export type InteractOutsideEvent = PointerEvent | MouseEvent | TouchEvent;
-export type InteractOutsideEventHandler = (e: InteractOutsideEvent) => void;
+export type InteractOutsideEvent = PointerEvent;
+export type InteractOutsideEventHandler = (e: PointerEvent) => void;
 export type InteractOutsideBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
 export type DismissibleLayerProps = {
     /**
@@ -9,16 +9,6 @@ export type DismissibleLayerProps = {
      * event, depending on the user's input device.
      */
     onInteractOutside?: InteractOutsideEventHandler;
-    /**
-     * Callback fired when an outside interaction event starts,
-     * which is either a `pointerdown`, `mousedown`, or `touchstart`
-     * event, depending on the user's input device.
-     *
-     * This callback is useful when you want to know when the user
-     * begins an outside interaction, but before the interaction
-     * completes.
-     */
-    onInteractOutsideStart?: InteractOutsideEventHandler;
     /**
      * Interact outside behavior type.
      * `close`: Closes the element immediately.
@@ -50,9 +40,8 @@ export type DismissibleLayerImplProps = {
      * right clicks for "close" events, but in this case we want to close the context menu when
      * another is open.
      */
-    isValidEvent?: (e: PointerEvent | MouseEvent | TouchEvent, node: HTMLElement) => boolean;
+    isValidEvent?: (e: PointerEvent, node: HTMLElement) => boolean;
     children?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
 } & DismissibleLayerProps;
-export type InteractOutsideInterceptEventType = "pointerdown" | "pointerup" | "mousedown" | "mouseup" | "touchstart" | "touchend" | "click";

package/dist/bits/utilities/dismissible-layer/useDismissibleLayer.svelte.js

@@ -1,39 +1,17 @@
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { composeHandlers } from "../../../internal/composeHandlers.js";
+import { afterSleep, afterTick, box, executeCallbacks, onDestroyEffect, useRefById, } from "svelte-toolbelt";
 import { addEventListener } from "../../../internal/events.js";
-import { afterTick } from "../../../internal/afterTick.js";
 import { debounce } from "../../../internal/debounce.js";
-import { executeCallbacks } from "../../../internal/executeCallbacks.js";
 import { noop } from "../../../internal/noop.js";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
 import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
 import { isElement } from "../../../internal/is.js";
-import { onDestroyEffect } from "../../../internal/onDestroyEffect.svelte.js";
-const layers = new Map();
-const interactOutsideStartEvents = [
-    "pointerdown",
-    "touchstart",
-];
-const interactOutsideEndEvents = [
-    "pointerup",
-    "touchend",
-    "click",
-];
+globalThis.bitsDismissableLayers ??= new Map();
 export class DismissibleLayerState {
-    #interactOutsideStartProp;
     #interactOutsideProp;
     #behaviorType;
     #interceptedEvents = {
         pointerdown: false,
-        pointerup: false,
-        mousedown: false,
-        mouseup: false,
-        touchstart: false,
-        touchend: false,
-        click: false,
     };
-    #isPointerDownOutside = false;
     #isResponsibleLayer = false;
     node = box(null);
     #documentObj = undefined;
@@ -42,19 +20,19 @@ export class DismissibleLayerState {
     #onFocusOutside;
     currNode = $state(null);
     #isValidEventProp;
+    #unsubClickListener = noop;
     constructor(props) {
         this.#enabled = props.enabled;
         this.#isValidEventProp = props.isValidEvent;
         useRefById({
             id: props.id,
             ref: this.node,
-            condition: () => this.#enabled.current,
+            deps: () => this.#enabled.current,
             onRefChange: (node) => {
                 this.currNode = node;
             },
         });
         this.#behaviorType = props.interactOutsideBehavior;
-        this.#interactOutsideStartProp = props.onInteractOutsideStart;
         this.#interactOutsideProp = props.onInteractOutside;
         this.#onFocusOutside = props.onFocusOutside;
         $effect(() => {
@@ -63,15 +41,16 @@ export class DismissibleLayerState {
         let unsubEvents = noop;
         const cleanup = () => {
             this.#resetState();
-            layers.delete(this);
-            this.#onInteractOutsideStart.destroy();
-            this.#onInteractOutside.destroy();
+            globalThis.bitsDismissableLayers.delete(this);
+            this.#handleInteractOutside.destroy();
             unsubEvents();
         };
         $effect(() => {
-            if (this.#enabled.current) {
-                layers.set(this, untrack(() => this.#behaviorType));
-                untrack(() => {
+            if (this.#enabled.current && this.currNode) {
+                afterSleep(1, () => {
+                    if (!this.currNode)
+                        return;
+                    globalThis.bitsDismissableLayers.set(this, untrack(() => this.#behaviorType));
                     unsubEvents();
                     unsubEvents = this.#addEventListeners();
                 });
@@ -82,9 +61,9 @@ export class DismissibleLayerState {
         });
         onDestroyEffect(() => {
             this.#resetState.destroy();
-            layers.delete(this);
-            this.#onInteractOutsideStart.destroy();
-            this.#onInteractOutside.destroy();
+            globalThis.bitsDismissableLayers.delete(this);
+            this.#handleInteractOutside.destroy();
+            this.#unsubClickListener();
             unsubEvents();
         });
     }
@@ -110,55 +89,52 @@ export class DismissibleLayerState {
          * to avoid checking if is responsible layer during interaction end
          * when a new floating element may have been opened.
          */
-        addEventListener(this.#documentObj, interactOutsideStartEvents, composeHandlers(this.#markInterceptedEvent, this.#markResponsibleLayer), true), 
-        /**
-         * CAPTURE INTERACTION END
-         * mark interaction-end event as intercepted. Debounce reset state to allow
-         * bubble events to be processed before resetting the state.
-         */
-        addEventListener(this.#documentObj, interactOutsideEndEvents, composeHandlers(this.#markInterceptedEvent, this.#resetState), true), 
+        addEventListener(this.#documentObj, "pointerdown", executeCallbacks(this.#markInterceptedEvent, this.#markResponsibleLayer), true), 
         /**
          * BUBBLE INTERACTION START
          * Mark interaction-start event as non-intercepted. Debounce `onInteractOutsideStart`
          * to avoid prematurely checking if other events were intercepted.
          */
-        addEventListener(this.#documentObj, interactOutsideStartEvents, composeHandlers(this.#markNonInterceptedEvent, this.#onInteractOutsideStart)), 
-        /**
-         * BUBBLE INTERACTION END
-         * Mark interaction-end event as non-intercepted. Debounce `onInteractOutside`
-         * to avoid prematurely checking if other events were intercepted.
-         */
-        addEventListener(this.#documentObj, interactOutsideEndEvents, composeHandlers(this.#markNonInterceptedEvent, this.#onInteractOutside)), 
+        addEventListener(this.#documentObj, "pointerdown", executeCallbacks(this.#markNonInterceptedEvent, this.#handleInteractOutside)), 
         /**
          * HANDLE FOCUS OUTSIDE
          */
         addEventListener(this.#documentObj, "focusin", this.#handleFocus));
     }
-    #onInteractOutsideStart = debounce((e) => {
-        if (!this.currNode)
-            return;
-        const isEventValid = this.#isValidEventProp.current(e, this.currNode) || isValidEvent(e, this.currNode);
-        if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
-            return;
+    #handleDismiss = (e) => {
+        let event = e;
+        if (event.defaultPrevented) {
+            event = createWrappedEvent(e);
         }
-        this.#interactOutsideStartProp.current(e);
-        if (e.defaultPrevented)
-            return;
-        this.#isPointerDownOutside = true;
-    }, 10);
-    #onInteractOutside = debounce((e) => {
-        if (!this.currNode)
+        this.#interactOutsideProp.current(e);
+    };
+    #handleInteractOutside = debounce((e) => {
+        if (!this.currNode) {
+            this.#unsubClickListener();
             return;
-        const behaviorType = this.#behaviorType.current;
+        }
         const isEventValid = this.#isValidEventProp.current(e, this.currNode) || isValidEvent(e, this.currNode);
         if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
+            this.#unsubClickListener();
             return;
         }
-        if (behaviorType !== "close" && behaviorType !== "defer-otherwise-close")
-            return;
-        if (!this.#isPointerDownOutside)
+        let event = e;
+        if (event.defaultPrevented) {
+            event = createWrappedEvent(event);
+        }
+        if (this.#behaviorType.current !== "close" &&
+            this.#behaviorType.current !== "defer-otherwise-close") {
+            this.#unsubClickListener();
             return;
-        this.#interactOutsideProp.current(e);
+        }
+        if (e.pointerType === "touch") {
+            this.#unsubClickListener();
+            // @ts-expect-error - later
+            this.#unsubClickListener = addEventListener(this.#documentObj, "click", this.#handleDismiss, { once: true });
+        }
+        else {
+            this.#interactOutsideProp.current(event);
+        }
     }, 10);
     #markInterceptedEvent = (e) => {
         this.#interceptedEvents[e.type] = true;
@@ -180,7 +156,6 @@ export class DismissibleLayerState {
         for (const eventType in this.#interceptedEvents) {
             this.#interceptedEvents[eventType] = false;
         }
-        this.#isPointerDownOutside = false;
         this.#isResponsibleLayer = false;
     }, 20);
     #isAnyEventIntercepted() {
@@ -205,7 +180,7 @@ function getTopMostLayer(layersArr) {
     return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
 }
 function isResponsibleLayer(node) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsDismissableLayers];
     /**
      * We first check if we can find a top layer with `close` or `ignore`.
      * If that top layer was found and matches the provided node, then the node is
@@ -228,3 +203,45 @@ function isValidEvent(e, node) {
     const isValid = ownerDocument.documentElement.contains(target) && !isOrContainsTarget(node, target);
     return isValid;
 }
+function createWrappedEvent(e) {
+    const capturedCurrentTarget = e.currentTarget;
+    const capturedTarget = e.target;
+    let newEvent;
+    if (e instanceof PointerEvent) {
+        newEvent = new PointerEvent(e.type, e);
+    }
+    else {
+        newEvent = new PointerEvent("pointerdown", e);
+    }
+    // track the prevented state separately
+    let isPrevented = false;
+    // Create a proxy to intercept property access and method calls
+    const wrappedEvent = new Proxy(newEvent, {
+        get: (target, prop) => {
+            if (prop === "currentTarget") {
+                return capturedCurrentTarget;
+            }
+            if (prop === "target") {
+                return capturedTarget;
+            }
+            if (prop === "preventDefault") {
+                return () => {
+                    isPrevented = true;
+                    if (typeof target.preventDefault === "function") {
+                        target.preventDefault();
+                    }
+                };
+            }
+            if (prop === "defaultPrevented") {
+                return isPrevented;
+            }
+            if (prop in target) {
+                // eslint-disable-next-line ts/no-explicit-any
+                return target[prop];
+            }
+            // eslint-disable-next-line ts/no-explicit-any
+            return e[prop];
+        },
+    });
+    return wrappedEvent;
+}