bits-ui 1.0.0-next.17 → 1.0.0-next.19

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

@@ -1,52 +1,50 @@
-import type { HTMLSelectAttributes } from "svelte/elements";
 import type { Expand } from "svelte-toolbelt";
-import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
+import type { PortalProps } from "../utilities/portal/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { Direction } from "../../shared/index.js";
-import type { PortalProps } from "../utilities/portal/index.js";
-export type SelectRootPropsWithoutHTML = WithChildren<{
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+export type SelectBaseRootPropsWithoutHTML = WithChildren<{
     /**
-     * The open state of the select.
-     */
-    open?: boolean;
-    /**
-     * A callback that is called when the select's open state changes.
-     */
-    onOpenChange?: OnChangeFn<boolean>;
-    /**
-     * The value of the select.
-     */
-    value?: string;
-    /**
-     * A callback that is called when the select's value changes.
+     * Whether the combobox is disabled.
+     *
+     * @defaultValue `false`
      */
-    onValueChange?: OnChangeFn<string>;
+    disabled?: boolean;
     /**
-     * The reading direction of the select.
+     * Whether the combobox is required (for form submission).
+     *
+     * @defaultValue `false`
      */
-    dir?: Direction;
+    required?: boolean;
     /**
-     * The name of the select used in form submission.
+     * The name to apply to the hidden input element for form submission.
+     * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
      */
     name?: string;
     /**
-     * The native HTML select autocomplete attribute.
+     * Whether the combobox popover is open.
+     *
+     * @defaultValue `false`
+     * @bindable
      */
-    autocomplete?: HTMLSelectAttributes["autocomplete"];
+    open?: boolean;
     /**
-     * The native HTML select `form` attribute.
+     * A callback function called when the open state changes.
      */
-    form?: string;
+    onOpenChange?: OnChangeFn<boolean>;
     /**
-     * Whether the select is disabled.
+     * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
+     *
+     * @defaultValue `false`
      */
-    disabled?: boolean;
+    loop?: boolean;
     /**
-     * Whether the select is required.
+     * How to scroll the combobox items into view when navigating with the keyboard.
+     *
+     * @defaultValue `"nearest"`
      */
-    required?: boolean;
+    scrollAlignment?: "nearest" | "center";
     /**
      * Whether or not the open state is controlled or not. If `true`, the component will not update
      * the open state internally, instead it will call `onOpenChange` when it would have
@@ -63,7 +61,69 @@ export type SelectRootPropsWithoutHTML = WithChildren<{
      * @defaultValue false
      */
     controlledValue?: boolean;
+    /**
+     * Optionally provide an array of `value` and `label` pairs that will be used to match
+     * and trigger selection when the trigger is focused and a key is pressed while the content
+     * is closed. It's also used to handle form autofill.
+     *
+     * By providing this value, you enable selecting a value when the trigger is focused and a key
+     * is pressed without the content being open, similar to how a native `<select>` works.
+     * For this to work, you must
+     *
+     * The label is what the user will potentially search for via typeahead, and the value is what
+     * is set as the selected value when a typeahead match is found.
+     *
+     * We can't rely on the individual `Item` components to do this because they may not ever be
+     * mounted to do the DOM if using a conditional block with a Svelte transition or certain
+     * animation libraries.
+     *
+     * IMPORTANT: This functionality is only available for single-select listboxes.
+     */
+    items?: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
 }>;
+export type SelectSingleRootPropsWithoutHTML = {
+    /**
+     * The value of the selected combobox item.
+     *
+     * @bindable
+     */
+    value?: string;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * The type of combobox.
+     *
+     * @required
+     */
+    type: "single";
+};
+export type SelectMultipleRootPropsWithoutHTML = {
+    /**
+     * The value of the selected combobox item.
+     *
+     * @bindable
+     */
+    value?: string[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string[]>;
+    /**
+     * The type of combobox.
+     *
+     * @required
+     */
+    type: "multiple";
+};
+export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSingleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
+export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & (SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
 export type SelectRootProps = SelectRootPropsWithoutHTML;
 export type _SharedSelectContentProps = {
     /**
@@ -73,79 +133,68 @@ export type _SharedSelectContentProps = {
      */
     loop?: boolean;
 };
-export type SelectContentImplPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerProps, "content"> & {
+export type SelectContentSnippetProps = {
     /**
-     *  The positioning mode to use
-     *
-     *  `item-aligned` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>
-     *  `floating  (default)` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
+     * Whether the content is open or closed. Used alongside the `forceMount` prop to conditionally
+     * render the content using Svelte transitions.
      */
-    position?: "item-aligned" | "floating";
-} & _SharedSelectContentProps>>;
-export type SelectContentImplProps = SelectContentImplPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentImplPropsWithoutHTML>;
-export type SelectContentPropsWithoutHTML = SelectContentImplPropsWithoutHTML & {
-    /**
-     * Whether to force mount the content for use with certain animation libraries.
-     */
-    forceMount?: boolean;
+    open: boolean;
 };
+export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, SelectContentSnippetProps>>;
 export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
+export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, SelectContentSnippetProps>>;
+export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
+export type SelectTriggerPropsWithoutHTML = WithChild;
+export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
 export type SelectItemSnippetProps = {
     selected: boolean;
+    highlighted: boolean;
 };
 export type SelectItemPropsWithoutHTML = WithChild<{
     /**
      * The value of the item.
+     *
+     * @required
      */
     value: string;
     /**
-     * Whether the item is disabled.
-     *
-     * @defaultValue false
+     * The label of the item. If provided, this is the item that users will search for.
+     * If not provided, the value will be used as the label.
      */
-    disabled?: boolean;
+    label?: string;
     /**
-     * Optionally provide text to use for typeahead purposes.
+     * Whether the item is disabled.
      *
-     * By default, the typeahead behavior will use the `textContent` of the `SelectItemText`
-     * component. Use this prop if the text content is not suitable for typeahead.
+     * @defaultValue `false`
      */
-    textValue?: string;
-}, SelectItemSnippetProps>;
-export type SelectItemProps = SelectItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
-export type SelectTriggerPropsWithoutHTML = WithChild<{
+    disabled?: boolean;
     /**
-     * Whether the trigger is disabled.
-     *
-     * @defaultValue false
+     * A callback function called when the item is highlighted. This can be used as a
+     * replacement for `onfocus` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    disabled?: boolean | null | undefined;
-}>;
-export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
-export type SelectValuePropsWithoutHTML = WithChild<{
+    onHighlight?: () => void;
     /**
-     * The content to render inside the `Select.Value` when no `value` is set.
+     * A callback function called when the item is unhighlighted. This can be used as a
+     * replacement for `onblur` since we don't actually focus the item and instead
+     * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
      */
-    placeholder?: string;
-}>;
-export type SelectValueProps = SelectValuePropsWithoutHTML & Without<Omit<BitsPrimitiveSpanAttributes, "id">, SelectValuePropsWithoutHTML>;
-export type SelectItemTextPropsWithoutHTML = WithChild;
-export type SelectItemTextProps = SelectItemTextPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SelectItemTextPropsWithoutHTML>;
-export type SelectViewportPropsWithoutHTML = WithChild;
-export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
-export type SelectPortalPropsWithoutHTML = PortalProps;
-export type SelectPortalProps = SelectPortalPropsWithoutHTML;
-export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
-export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
-export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
-export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;
-export type SelectIconPropsWithoutHTML = WithChild;
-export type SelectIconProps = SelectIconPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SelectIconPropsWithoutHTML>;
+    onUnhighlight?: () => void;
+}, SelectItemSnippetProps>;
+export type SelectItemProps = SelectItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
 export type SelectGroupPropsWithoutHTML = WithChild;
 export type SelectGroupProps = SelectGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
 export type SelectGroupHeadingPropsWithoutHTML = WithChild;
 export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
 export type SelectSeparatorPropsWithoutHTML = WithChild;
 export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+export type SelectPortalPropsWithoutHTML = PortalProps;
+export type SelectPortalProps = SelectPortalPropsWithoutHTML;
 export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type SelectArrowProps = ArrowProps;
+export type SelectViewportPropsWithoutHTML = WithChild;
+export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
+export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
+export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
+export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
+export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

package/dist/bits/slider/components/slider.svelte

@@ -12,7 +12,7 @@
 		ref = $bindable(null),
 		value = $bindable([]),
 		onValueChange = noop,
-		onValueChangeEnd = noop,
+		onValueCommit = noop,
 		disabled = false,
 		min = 0,
 		max = 100,
@@ -41,7 +41,7 @@
 				}
 			}
 		),
-		onValueChangeEnd: box.with(() => onValueChangeEnd),
+		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
 		max: box.with(() => max),

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

@@ -13,7 +13,7 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
-    onValueChangeEnd: OnChangeFn<number[]>;
+    onValueCommit: OnChangeFn<number[]>;
 }> & WritableBoxedValues<{
     value: number[];
 }>>;
@@ -35,7 +35,7 @@ declare class SliderRootState {
     isActive: boolean;
     currentThumbIdx: number;
     direction: "rl" | "lr" | "tb" | "bt";
-    onValueChangeEnd: SliderRootStateProps["onValueChangeEnd"];
+    onValueCommit: SliderRootStateProps["onValueCommit"];
     constructor(props: SliderRootStateProps);
     applyPosition: ({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;

package/dist/bits/slider/slider.svelte.js

@@ -38,7 +38,7 @@ class SliderRootState {
             return this.dir.current === "rtl" ? "tb" : "bt";
         }
     });
-    onValueChangeEnd;
+    onValueCommit;
     constructor(props) {
         this.id = props.id;
         this.ref = props.ref;
@@ -50,7 +50,7 @@ class SliderRootState {
         this.dir = props.dir;
         this.autoSort = props.autoSort;
         this.value = props.value;
-        this.onValueChangeEnd = props.onValueChangeEnd;
+        this.onValueCommit = props.onValueCommit;
         useRefById({
             id: this.id,
             ref: this.ref,
@@ -187,7 +187,7 @@ class SliderRootState {
     };
     handlePointerUp = () => {
         if (this.isActive) {
-            this.onValueChangeEnd.current(untrack(() => this.value.current));
+            this.onValueCommit.current(untrack(() => this.value.current));
         }
         this.isActive = false;
     };
@@ -477,7 +477,7 @@ class SliderThumbState {
                 }
                 break;
         }
-        this.#root.onValueChangeEnd.current(this.#root.value.current);
+        this.#root.onValueCommit.current(this.#root.value.current);
     };
     props = $derived.by(() => ({
         ...this.#root.thumbsPropsArr[this.#index.current],

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

@@ -17,9 +17,10 @@ export type SliderRootPropsWithoutHTML = WithChild<{
     onValueChange?: OnChangeFn<number[]>;
     /**
      * A callback function called when the user stops dragging the thumb,
-     * which is useful for knowing when the user has finished interacting with the slider.
+     * which is useful for knowing when the user has finished interacting with the
+     * slider and _commits_ the value.
      */
-    onValueChangeEnd?: OnChangeFn<number[]>;
+    onValueCommit?: OnChangeFn<number[]>;
     /**
      * Whether to automatically sort the values in the array when moving thumbs past
      * one another.

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

@@ -74,9 +74,7 @@
 			{customAnchor}
 		>
 			{#snippet content({ props: floatingProps })}
-				{#if preventScroll}
-					<ScrollLock {preventScroll} />
-				{/if}
+				<ScrollLock {preventScroll} />
 				<FocusScope
 					{id}
 					{onOpenAutoFocus}

package/dist/internal/arrays.d.ts

@@ -65,3 +65,26 @@ export declare function forward<T>(array: T[], index: number, increment: number,
  * @param loop loop around the array if the target index is out of bounds?
  */
 export declare function backward<T>(array: T[], index: number, decrement: number, loop?: boolean): T | undefined;
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export declare function wrapArray<T>(array: T[], startIndex: number): T[];

package/dist/internal/arrays.js

@@ -168,3 +168,38 @@ export function backward(array, index, decrement, loop = true) {
     }
     return array[targetIndex];
 }
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export function getNextMatch(values, search, currentMatch) {
+    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+    const normalizedSearch = isRepeated ? search[0] : search;
+    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+    let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+    const excludeCurrentMatch = normalizedSearch.length === 1;
+    if (excludeCurrentMatch)
+        wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+    return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -62,7 +62,12 @@ function createMonth(props) {
         if (!startFrom) {
             startFrom = dateObj.add({ months: 1 }).set({ day: 1 });
         }
-        const extraDaysArray = Array.from({ length: extraDays }, (_, i) => {
+        let length = extraDays;
+        if (nextMonthDays.length === 0) {
+            length = extraDays - 1;
+            nextMonthDays.push(startFrom);
+        }
+        const extraDaysArray = Array.from({ length }, (_, i) => {
             const incr = i + 1;
             return startFrom.add({ days: incr });
         });

package/dist/internal/use-body-scroll-lock.svelte.js

@@ -1,10 +1,11 @@
 import { SvelteMap } from "svelte/reactivity";
 import { afterTick, box } from "svelte-toolbelt";
+import { Previous, watch } from "runed";
+import { untrack } from "svelte";
 import { isBrowser, isIOS } from "./is.js";
 import { addEventListener } from "./events.js";
 import { useId } from "./use-id.js";
 import { createSharedHook } from "./create-shared-hook.svelte.js";
-import { watch } from "./box.svelte.js";
 const useBodyLockStackCount = createSharedHook(() => {
     const map = new SvelteMap();
     const locked = $derived.by(() => {
@@ -15,6 +16,7 @@ const useBodyLockStackCount = createSharedHook(() => {
         }
         return false;
     });
+    const prevLocked = new Previous(() => locked);
     let initialBodyStyle = $state({});
     let stopTouchMoveListener = null;
     function resetBodyStyle() {
@@ -27,43 +29,43 @@ const useBodyLockStackCount = createSharedHook(() => {
         document.body.style.overflow = initialBodyStyle.overflow ?? "";
         isIOS && stopTouchMoveListener?.();
     }
-    watch(box.with(() => locked), (curr, prev) => {
-        if (!curr) {
-            if (prev) {
-                resetBodyStyle();
+    $effect(() => {
+        const curr = locked;
+        return untrack(() => {
+            if (!curr) {
+                return;
             }
-            return;
-        }
-        const bodyStyle = getComputedStyle(document.body);
-        initialBodyStyle.overflow = bodyStyle.overflow;
-        initialBodyStyle.paddingRight = bodyStyle.paddingRight;
-        initialBodyStyle.marginRight = bodyStyle.marginRight;
-        initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
-        // TODO: account for RTL direction, etc.
-        const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
-        const config = {
-            padding: paddingRight + verticalScrollbarWidth,
-            margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
-        };
-        if (verticalScrollbarWidth > 0) {
-            document.body.style.paddingRight = `${config.padding}px`;
-            document.body.style.marginRight = `${config.margin}px`;
-            document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
-            document.body.style.overflow = "hidden";
-        }
-        if (isIOS) {
-            stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
-                if (e.target !== document.documentElement)
-                    return;
-                if (e.touches.length > 1)
-                    return;
-                e.preventDefault();
-            }, { passive: false });
-        }
-        afterTick(() => {
-            document.body.style.pointerEvents = "none";
-            document.body.style.overflow = "hidden";
+            const bodyStyle = getComputedStyle(document.body);
+            initialBodyStyle.overflow = bodyStyle.overflow;
+            initialBodyStyle.paddingRight = bodyStyle.paddingRight;
+            initialBodyStyle.marginRight = bodyStyle.marginRight;
+            initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
+            // TODO: account for RTL direction, etc.
+            const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
+            const config = {
+                padding: paddingRight + verticalScrollbarWidth,
+                margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
+            };
+            if (verticalScrollbarWidth > 0) {
+                document.body.style.paddingRight = `${config.padding}px`;
+                document.body.style.marginRight = `${config.margin}px`;
+                document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
+                document.body.style.overflow = "hidden";
+            }
+            if (isIOS) {
+                stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
+                    if (e.target !== document.documentElement)
+                        return;
+                    if (e.touches.length > 1)
+                        return;
+                    e.preventDefault();
+                }, { passive: false });
+            }
+            afterTick(() => {
+                document.body.style.pointerEvents = "none";
+                document.body.style.overflow = "hidden";
+            });
         });
     });
     $effect(() => {
@@ -71,16 +73,25 @@ const useBodyLockStackCount = createSharedHook(() => {
             stopTouchMoveListener?.();
         };
     });
-    return map;
+    return {
+        get map() {
+            return map;
+        },
+        resetBodyStyle,
+    };
 });
 export function useBodyScrollLock(initialState) {
     const id = useId();
-    const map = useBodyLockStackCount();
-    map.set(id, initialState ?? false);
-    const locked = box.with(() => map.get(id) ?? false, (v) => map.set(id, v));
+    const countState = useBodyLockStackCount();
+    countState.map.set(id, initialState ?? false);
+    const locked = box.with(() => countState.map.get(id) ?? false, (v) => countState.map.set(id, v));
     $effect(() => {
         return () => {
-            map.delete(id);
+            countState.map.delete(id);
+            const length = Array.from(countState.map.values()).length;
+            if (length === 0) {
+                countState.resetBodyStyle();
+            }
         };
     });
     return locked;

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -0,0 +1,12 @@
+export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
+type UseDataTypeaheadOpts = {
+    onMatch: (value: string) => void;
+    getCurrentItem: () => string;
+    enabled: boolean;
+};
+export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
+    search: import("svelte-toolbelt").WritableBox<string>;
+    handleTypeaheadSearch: (key: string, candidateValues: string[]) => string | undefined;
+    resetTypeahead: () => void;
+};
+export {};

package/dist/internal/use-data-typeahead.svelte.js

@@ -0,0 +1,30 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export function useDataTypeahead(opts) {
+    // Reset `search` 1 second after it was last updated
+    const search = boxAutoReset("", 1000);
+    function handleTypeaheadSearch(key, candidateValues) {
+        if (!opts.enabled)
+            return;
+        if (!candidateValues.length)
+            return;
+        search.current = search.current + key;
+        const currentItem = opts.getCurrentItem();
+        const currentMatch = candidateValues.find((item) => item === currentItem) ?? "";
+        const values = candidateValues.map((item) => item ?? "");
+        const nextMatch = getNextMatch(values, search.current, currentMatch);
+        const newItem = candidateValues.find((item) => item === nextMatch);
+        if (newItem) {
+            opts.onMatch(newItem);
+        }
+        return newItem;
+    }
+    function resetTypeahead() {
+        search.current = "";
+    }
+    return {
+        search,
+        handleTypeaheadSearch,
+        resetTypeahead,
+    };
+}

package/dist/internal/use-dom-typeahead.svelte.d.ts

@@ -0,0 +1,11 @@
+export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
+type UseDOMTypeaheadOpts = {
+    onMatch?: (item: HTMLElement) => void;
+    getCurrentItem?: () => HTMLElement | null;
+};
+export declare function useDOMTypeahead(opts?: UseDOMTypeaheadOpts): {
+    search: import("svelte-toolbelt").WritableBox<string>;
+    handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
+    resetTypeahead: () => void;
+};
+export {};