@johly/bits-ui 2.18.1

package/dist/bits/utilities/hidden-input.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { mergeProps, srOnlyStyles } from "svelte-toolbelt";
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	let { value = $bindable(), ...restProps }: HTMLInputAttributes = $props();
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			"aria-hidden": "true",
+			tabindex: -1,
+			style: {
+				...srOnlyStyles,
+				position: "absolute",
+				top: "0",
+				left: "0",
+			},
+		})
+	);
+</script>
+
+{#if mergedProps.type === "checkbox"}
+	<input {...mergedProps} {value} />
+{:else}
+	<input bind:value {...mergedProps} />
+{/if}

package/dist/bits/utilities/hidden-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+declare const HiddenInput: import("svelte").Component<HTMLInputAttributes, {}, "value">;
+type HiddenInput = ReturnType<typeof HiddenInput>;
+export default HiddenInput;

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

@@ -0,0 +1 @@
+export { default as Mounted } from "./mounted.svelte";

package/dist/bits/utilities/index.js

@@ -0,0 +1 @@
+export { default as Mounted } from "./mounted.svelte";

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AnyFn } from "svelte-toolbelt";
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export declare class IsUsingKeyboard {
+    static _refs: number;
+    static _cleanup?: AnyFn;
+    constructor();
+    get current(): boolean;
+    set current(value: boolean);
+}

package/dist/bits/utilities/is-using-keyboard/is-using-keyboard.svelte.js

@@ -0,0 +1,51 @@
+import { executeCallbacks } from "svelte-toolbelt";
+import { on } from "svelte/events";
+// Using global state to avoid multiple listeners.
+let isUsingKeyboard = $state(false);
+/**
+ * Detects whether the user is currently using the keyboard
+ * or not by listening to keyboard and pointer events. Uses shared global
+ * state to avoid listener duplication.
+ */
+export class IsUsingKeyboard {
+    static _refs = 0; // Reference counting to avoid multiple listeners.
+    static _cleanup;
+    constructor() {
+        $effect(() => {
+            if (IsUsingKeyboard._refs === 0) {
+                IsUsingKeyboard._cleanup = $effect.root(() => {
+                    const callbacksToDispose = [];
+                    const handlePointer = (_) => {
+                        isUsingKeyboard = false;
+                    };
+                    const handleKeydown = (_) => {
+                        isUsingKeyboard = true;
+                    };
+                    callbacksToDispose.push(on(document, "pointerdown", handlePointer, {
+                        capture: true,
+                    }), on(document, "pointermove", handlePointer, {
+                        capture: true,
+                    }), on(document, "keydown", handleKeydown, {
+                        capture: true,
+                    }));
+                    // Don't forget to spread and call twice.
+                    return executeCallbacks(...callbacksToDispose);
+                });
+            }
+            IsUsingKeyboard._refs++;
+            return () => {
+                IsUsingKeyboard._refs--;
+                if (IsUsingKeyboard._refs === 0) {
+                    isUsingKeyboard = false;
+                    IsUsingKeyboard._cleanup?.();
+                }
+            };
+        });
+    }
+    get current() {
+        return isUsingKeyboard;
+    }
+    set current(value) {
+        isUsingKeyboard = value;
+    }
+}

package/dist/bits/utilities/mounted.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { onMountEffect } from "svelte-toolbelt";
+	import { noop } from "../../internal/noop.js";
+
+	let {
+		mounted = $bindable(false),
+		onMountedChange = noop,
+	}: { mounted?: boolean; onMountedChange?: (mounted: boolean) => void } = $props();
+
+	onMountEffect(() => {
+		mounted = true;
+		onMountedChange(true);
+		return () => {
+			mounted = false;
+			onMountedChange(false);
+		};
+	});
+</script>

package/dist/bits/utilities/mounted.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    mounted?: boolean;
+    onMountedChange?: (mounted: boolean) => void;
+};
+declare const Mounted: import("svelte").Component<$$ComponentProps, {}, "mounted">;
+type Mounted = ReturnType<typeof Mounted>;
+export default Mounted;

package/dist/bits/utilities/popper-layer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PopperLayer } from "./popper-layer.svelte";
+export type { PopperLayerProps } from "./types.js";

package/dist/bits/utilities/popper-layer/index.js

@@ -0,0 +1 @@
+export { default as PopperLayer } from "./popper-layer.svelte";

package/dist/bits/utilities/popper-layer/popper-content.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import FloatingLayerContentStatic from "../floating-layer/components/floating-layer-content-static.svelte";
+	import FloatingLayerContent from "../floating-layer/components/floating-layer-content.svelte";
+	import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
+
+	let {
+		content,
+		isStatic = false,
+		onPlaced,
+		...restProps
+	}: FloatingLayerContentImplProps & { isStatic: boolean } = $props();
+</script>
+
+{#if isStatic}
+	<FloatingLayerContentStatic {content} {onPlaced} />
+{:else}
+	<FloatingLayerContent {content} {onPlaced} {...restProps} />
+{/if}

package/dist/bits/utilities/popper-layer/popper-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
+type $$ComponentProps = FloatingLayerContentImplProps & {
+    isStatic: boolean;
+};
+declare const PopperContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopperContent = ReturnType<typeof PopperContent>;
+export default PopperContent;

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		...restProps
+	}: Omit<PopperLayerImplProps, "open"> & {
+		enabled: boolean;
+	} = $props();
+</script>
+
+<PopperLayerInner
+	{popper}
+	{onEscapeKeydown}
+	{escapeKeydownBehavior}
+	{preventOverflowTextSelection}
+	{id}
+	{onPointerDown}
+	{onPointerUp}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	{strategy}
+	{dir}
+	{preventScroll}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+	{isStatic}
+	{enabled}
+	{onInteractOutside}
+	{onCloseAutoFocus}
+	{onOpenAutoFocus}
+	{interactOutsideBehavior}
+	{loop}
+	{trapFocus}
+	{isValidEvent}
+	{onFocusOutside}
+	{...restProps}
+	forceMount={true}
+/>

package/dist/bits/utilities/popper-layer/popper-layer-force-mount.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PopperLayerImplProps } from "./types.js";
+type $$ComponentProps = Omit<PopperLayerImplProps, "open"> & {
+    enabled: boolean;
+};
+declare const PopperLayerForceMount: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopperLayerForceMount = ReturnType<typeof PopperLayerForceMount>;
+export default PopperLayerForceMount;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperContent from "./popper-content.svelte";
+	import EscapeLayer from "../escape-layer/escape-layer.svelte";
+	import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
+	import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
+	import FocusScope from "../focus-scope/focus-scope.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		ref,
+		tooltip = false,
+		contentPointerEvents = "auto",
+		...restProps
+	}: Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
+		enabled: boolean;
+		contentPointerEvents?: "auto" | "none";
+	} = $props();
+
+	const resolvedPreventScroll = $derived(preventScroll ?? true);
+	const effectiveStrategy = $derived(strategy ?? (resolvedPreventScroll ? "fixed" : "absolute"));
+</script>
+
+<PopperContent
+	{isStatic}
+	{id}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	strategy={effectiveStrategy}
+	{dir}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+	{enabled}
+	{tooltip}
+>
+	{#snippet content({ props: floatingProps, wrapperProps })}
+		{#if restProps.forceMount && enabled}
+			<ScrollLock preventScroll={resolvedPreventScroll} />
+		{:else if !restProps.forceMount}
+			<ScrollLock preventScroll={resolvedPreventScroll} />
+		{/if}
+		<FocusScope
+			{onOpenAutoFocus}
+			{onCloseAutoFocus}
+			{loop}
+			{enabled}
+			{trapFocus}
+			forceMount={restProps.forceMount}
+			{ref}
+		>
+			{#snippet focusScope({ props: focusScopeProps })}
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
+					<DismissibleLayer
+						{id}
+						{onInteractOutside}
+						{onFocusOutside}
+						{interactOutsideBehavior}
+						{isValidEvent}
+						{enabled}
+						{ref}
+					>
+						{#snippet children({ props: dismissibleProps })}
+							<TextSelectionLayer
+								{id}
+								{preventOverflowTextSelection}
+								{onPointerDown}
+								{onPointerUp}
+								{enabled}
+								{ref}
+							>
+								{@render popper?.({
+									props: mergeProps(
+										restProps,
+										floatingProps,
+										dismissibleProps,
+										focusScopeProps,
+										{
+											style: {
+												pointerEvents: contentPointerEvents,
+											},
+										}
+									),
+									wrapperProps,
+								})}
+							</TextSelectionLayer>
+						{/snippet}
+					</DismissibleLayer>
+				</EscapeLayer>
+			{/snippet}
+		</FocusScope>
+	{/snippet}
+</PopperContent>

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PopperLayerImplProps } from "./types.js";
+type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
+    enabled: boolean;
+    contentPointerEvents?: "auto" | "none";
+};
+declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopperLayerInner = ReturnType<typeof PopperLayerInner>;
+export default PopperLayerInner;

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+
+	let {
+		popper,
+		open,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		ref,
+		shouldRender,
+		...restProps
+	}: PopperLayerImplProps = $props();
+</script>
+
+{#if shouldRender}
+	<PopperLayerInner
+		{popper}
+		{onEscapeKeydown}
+		{escapeKeydownBehavior}
+		{preventOverflowTextSelection}
+		{id}
+		{onPointerDown}
+		{onPointerUp}
+		{side}
+		{sideOffset}
+		{align}
+		{alignOffset}
+		{arrowPadding}
+		{avoidCollisions}
+		{collisionBoundary}
+		{collisionPadding}
+		{sticky}
+		{hideWhenDetached}
+		{updatePositionStrategy}
+		{strategy}
+		{dir}
+		{preventScroll}
+		{wrapperId}
+		{style}
+		{onPlaced}
+		{customAnchor}
+		{isStatic}
+		enabled={open}
+		{onInteractOutside}
+		{onCloseAutoFocus}
+		{onOpenAutoFocus}
+		{interactOutsideBehavior}
+		{loop}
+		{trapFocus}
+		{isValidEvent}
+		{onFocusOutside}
+		forceMount={false}
+		{ref}
+		{...restProps}
+	/>
+{/if}

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

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

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

@@ -0,0 +1,43 @@
+import type { Snippet } from "svelte";
+import type { EscapeLayerImplProps, EscapeLayerProps } from "../escape-layer/types.js";
+import type { DismissibleLayerImplProps, DismissibleLayerProps } from "../dismissible-layer/types.js";
+import type { FloatingLayerContentImplProps, FloatingLayerContentProps } from "../floating-layer/types.js";
+import type { TextSelectionLayerImplProps, TextSelectionLayerProps } from "../text-selection-layer/types.js";
+import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-layer/types.js";
+import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
+import type { ScrollLockProps } from "../scroll-lock/index.js";
+import type { Direction } from "../../../shared/index.js";
+export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
+export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
+    content?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    dir?: Direction;
+};
+export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerImplProps & FloatingLayerContentImplProps & Omit<PresenceLayerImplProps, "presence"> & TextSelectionLayerImplProps & FocusScopeImplProps & {
+    popper: Snippet<[
+        {
+            props: Record<string, unknown>;
+            wrapperProps: Record<string, unknown>;
+        }
+    ]>;
+    isStatic?: boolean;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
+    /**
+     * Whether the popper layer should be rendered.
+     */
+    shouldRender: boolean;
+    /**
+     * Override for the content's pointer-events style.
+     * @default "auto"
+     */
+    contentPointerEvents?: "auto" | "none";
+}, "enabled">;

package/dist/bits/utilities/popper-layer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/utilities/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Portal } from "./portal.svelte";
+export type { PortalProps } from "./types.js";

package/dist/bits/utilities/portal/index.js

@@ -0,0 +1 @@
+export { default as Portal } from "./portal.svelte";

package/dist/bits/utilities/portal/portal-consumer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	const { children }: { children?: Snippet } = $props();
+</script>
+
+{#key children}
+	{@render children?.()}
+{/key}

package/dist/bits/utilities/portal/portal-consumer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const PortalConsumer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PortalConsumer = ReturnType<typeof PortalConsumer>;
+export default PortalConsumer;

package/dist/bits/utilities/portal/portal.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { getAllContexts, mount, unmount } from "svelte";
+	import { DEV } from "esm-env";
+	import { watch } from "runed";
+	import PortalConsumer from "./portal-consumer.svelte";
+	import type { PortalProps } from "./types.js";
+	import { isBrowser } from "../../../internal/is.js";
+	import { resolvePortalToProp } from "../config/prop-resolvers.js";
+
+	let { to: toProp, children, disabled }: PortalProps = $props();
+
+	const to = resolvePortalToProp(() => toProp);
+	const context = getAllContexts();
+
+	let target = $derived(getTarget());
+
+	function getTarget() {
+		if (!isBrowser || disabled) return null;
+
+		let localTarget: Element | null = null;
+
+		if (typeof to.current === "string") {
+			const target = document.querySelector(to.current);
+			if (DEV && target === null) {
+				throw new Error(`Target element "${to.current}" not found.`);
+			}
+			localTarget = target;
+		} else {
+			localTarget = to.current;
+		}
+
+		if (DEV && !(localTarget instanceof Element)) {
+			const type = localTarget === null ? "null" : typeof localTarget;
+			throw new TypeError(
+				`Unknown portal target type: ${type}. Allowed types: string (query selector) or Element.`
+			);
+		}
+
+		return localTarget;
+	}
+
+	let instance: ReturnType<typeof mount> | null;
+
+	function unmountInstance() {
+		if (instance) {
+			unmount(instance);
+			instance = null;
+		}
+	}
+
+	watch([() => target, () => disabled], ([target, disabled]) => {
+		if (!target || disabled) {
+			unmountInstance();
+			return;
+		}
+		instance = mount(PortalConsumer, {
+			target: target,
+			props: { children },
+			context,
+		});
+
+		return () => {
+			unmountInstance();
+		};
+	});
+</script>
+
+{#if disabled}
+	{@render children?.()}
+{/if}

package/dist/bits/utilities/portal/portal.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+export type PortalTarget = Element | string;
+export type PortalProps = {
+    /**
+     * Where to portal the content to.
+     *
+     * @default document.body
+     */
+    to?: PortalTarget;
+    /**
+     * Disable portalling and render the component inline
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * The children content to render within the portal.
+     */
+    children?: Snippet;
+};

package/dist/bits/utilities/portal/types.js

@@ -0,0 +1 @@
+export {};