bits-ui 2.10.0 → 2.11.0

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

@@ -29,6 +29,7 @@ interface AccordionTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }
 interface AccordionContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     forceMount: boolean;
+    hiddenUntilFound: boolean;
 }> {
 }
 interface AccordionHeaderStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -53,7 +54,7 @@ declare abstract class AccordionBaseState {
     abstract toggleItem(item: string): void;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -87,7 +88,7 @@ export declare class AccordionItemState {
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 export declare class AccordionTriggerState {
@@ -106,7 +107,7 @@ export declare class AccordionTriggerState {
         readonly "aria-disabled": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly tabindex: 0;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -127,11 +128,12 @@ export declare class AccordionContentState {
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: {
             readonly "--bits-accordion-content-height": `${number}px`;
             readonly "--bits-accordion-content-width": `${number}px`;
         };
+        readonly hidden: "until-found" | undefined;
     };
 }
 export declare class AccordionHeaderState {
@@ -143,10 +145,10 @@ export declare class AccordionHeaderState {
     readonly props: {
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
-        readonly "data-heading-level": 1 | 2 | 3 | 4 | 6 | 5;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "data-heading-level": 1 | 2 | 3 | 4 | 5 | 6;
         readonly "data-state": "open" | "closed";
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 export {};

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

@@ -1,9 +1,10 @@
 import { afterTick, attachRef, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { on } from "svelte/events";
 const accordionAttrs = createBitsAttrs({
     component: "accordion",
     parts: ["root", "trigger", "content", "item", "header"],
@@ -26,8 +27,8 @@ class AccordionBaseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         [accordionAttrs.root]: "",
         ...this.attachment,
     }));
@@ -96,8 +97,8 @@ export class AccordionItemState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.isActive),
-        "data-disabled": getDataDisabled(this.isDisabled),
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
+        "data-orientation": this.root.opts.orientation.current,
         [accordionAttrs.item]: "",
         ...this.attachment,
     }));
@@ -141,11 +142,11 @@ export class AccordionTriggerState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         disabled: this.#isDisabled,
-        "aria-expanded": getAriaExpanded(this.itemState.isActive),
-        "aria-disabled": getAriaDisabled(this.#isDisabled),
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "aria-expanded": boolToStr(this.itemState.isActive),
+        "aria-disabled": boolToStr(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-state": getDataOpenClosed(this.itemState.isActive),
-        "data-orientation": getDataOrientation(this.#root.opts.orientation.current),
+        "data-orientation": this.#root.opts.orientation.current,
         [accordionAttrs.trigger]: "",
         tabindex: 0,
         onclick: this.onclick,
@@ -160,7 +161,11 @@ export class AccordionContentState {
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
     #dimensions = $state({ width: 0, height: 0 });
-    open = $derived.by(() => this.opts.forceMount.current || this.item.isActive);
+    open = $derived.by(() => {
+        if (this.opts.hiddenUntilFound.current)
+            return this.item.isActive;
+        return this.opts.forceMount.current || this.item.isActive;
+    });
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
@@ -173,6 +178,21 @@ export class AccordionContentState {
             });
             return () => cancelAnimationFrame(rAF);
         });
+        watch.pre([() => this.opts.ref.current, () => this.opts.hiddenUntilFound.current], ([node, hiddenUntilFound]) => {
+            if (!node || !hiddenUntilFound)
+                return;
+            const handleBeforeMatch = () => {
+                if (this.item.isActive)
+                    return;
+                // we need to defer opening until after browser completes search highlighting
+                // otherwise the browser will immediately open the accordion
+                // and the search highlighting will not be visible
+                requestAnimationFrame(() => {
+                    this.item.updateValue();
+                });
+            };
+            return on(node, "beforematch", handleBeforeMatch);
+        });
         // Handle dimension updates
         watch([() => this.open, () => this.opts.ref.current], this.#updateDimensions);
     }
@@ -207,13 +227,16 @@ export class AccordionContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.item.isActive),
-        "data-disabled": getDataDisabled(this.item.isDisabled),
-        "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.item.isDisabled),
+        "data-orientation": this.item.root.opts.orientation.current,
         [accordionAttrs.content]: "",
         style: {
             "--bits-accordion-content-height": `${this.#dimensions.height}px`,
             "--bits-accordion-content-width": `${this.#dimensions.width}px`,
         },
+        hidden: this.opts.hiddenUntilFound.current && !this.item.isActive
+            ? "until-found"
+            : undefined,
         ...this.attachment,
     }));
 }
@@ -235,7 +258,7 @@ export class AccordionHeaderState {
         "aria-level": this.opts.level.current,
         "data-heading-level": this.opts.level.current,
         "data-state": getDataOpenClosed(this.item.isActive),
-        "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
+        "data-orientation": this.item.root.opts.orientation.current,
         [accordionAttrs.header]: "",
         ...this.attachment,
     }));

package/dist/bits/accordion/components/accordion-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { mergeProps, boxWith } from "svelte-toolbelt";
 	import { AccordionContentState } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
@@ -13,24 +13,32 @@
 		id = createId(uid),
 		forceMount = false,
 		children,
+		hiddenUntilFound = false,
 		...restProps
 	}: AccordionContentProps = $props();
 
 	const contentState = AccordionContentState.create({
-		forceMount: box.with(() => forceMount),
-		id: box.with(() => id),
-		ref: box.with(
+		forceMount: boxWith(() => forceMount),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
+		hiddenUntilFound: boxWith(() => hiddenUntilFound),
 	});
 </script>
 
 <PresenceLayer forceMount={true} open={contentState.open} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
-		{@const mergedProps = mergeProps(restProps, contentState.props, {
-			hidden: forceMount ? undefined : !present,
-		})}
+		{@const mergedProps = mergeProps(
+			restProps,
+			contentState.props,
+			hiddenUntilFound && !present
+				? {}
+				: {
+						hidden: hiddenUntilFound ? !present : forceMount ? undefined : !present,
+					}
+		)}
 		{#if child}
 			{@render child({
 				props: mergedProps,

package/dist/bits/accordion/components/accordion-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { AccordionHeaderState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,9 +16,9 @@
 	}: AccordionHeaderProps = $props();
 
 	const headerState = AccordionHeaderState.create({
-		id: box.with(() => id),
-		level: box.with(() => level),
-		ref: box.with(
+		id: boxWith(() => id),
+		level: boxWith(() => level),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/accordion/components/accordion-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
 	import { AccordionItemState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,10 +18,10 @@
 	}: AccordionItemProps = $props();
 
 	const itemState = AccordionItemState.create({
-		value: box.with(() => value),
-		disabled: box.with(() => disabled),
-		id: box.with(() => id),
-		ref: box.with(
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/accordion/components/accordion-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { AccordionTriggerState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,9 +16,9 @@
 	}: AccordionTriggerProps = $props();
 
 	const triggerState = AccordionTriggerState.create({
-		disabled: box.with(() => disabled),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/accordion/components/accordion.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box, mergeProps } from "svelte-toolbelt";
+	import { type WritableBox, boxWith, mergeProps } from "svelte-toolbelt";
 	import { AccordionRootState } from "../accordion.svelte.js";
 	import type { AccordionRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
@@ -39,7 +39,7 @@
 
 	const rootState = AccordionRootState.create({
 		type,
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -47,11 +47,11 @@
 				onValueChange(v as any);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		loop: box.with(() => loop),
-		orientation: box.with(() => orientation),
-		ref: box.with(
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		loop: boxWith(() => loop),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

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

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

@@ -5,20 +5,20 @@ export type BaseAccordionRootPropsWithoutHTML = {
     /**
      * Whether the accordion is disabled or not.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
      * Whether to loop through the accordion items when navigating
      * with the arrow keys.
      *
-     * @defaultValue true
+     * @default true
      */
     loop?: boolean;
     /**
      * The orientation of the accordion.
      *
-     * @defaultValue "vertical"
+     * @default "vertical"
      */
     orientation?: Orientation;
 };
@@ -35,7 +35,7 @@ export type AccordionRootSinglePropsWithoutHTML = BaseAccordionRootPropsWithoutH
      * The value of the currently open accordion item.
      *
      * @bindable
-     * @defaultValue ""
+     * @default ""
      */
     value?: string;
     /**
@@ -56,7 +56,7 @@ export type AccordionRootMultiplePropsWithoutHTML = BaseAccordionRootPropsWithou
      * The value of the currently open accordion item.
      *
      * @bindable
-     * @defaultValue []
+     * @default []
      */
     value?: string[];
     /**
@@ -81,9 +81,18 @@ export type AccordionContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<{
      * Whether to forcefully mount the content, regardless of the open state.
      * This is useful if you want to use Svelte transitions for the content.
      *
-     * @defaultValue `true`
+     * @default true
      */
     forceMount?: boolean;
+    /**
+     * Whether to allow the browser to expand the content when searching for content
+     * within the panel via the browser's built-in search functionality.
+     *
+     * When `true`, this prop will override the `forceMount` prop.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
 }, AccordionContentSnippetProps>;
 export type AccordionContentProps = AccordionContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionContentPropsWithoutHTML>;
 export type AccordionItemPropsWithoutHTML = WithChild<{
@@ -95,7 +104,7 @@ export type AccordionItemPropsWithoutHTML = WithChild<{
     /**
      * Whether the accordion item is disabled, which prevents users from interacting with it.
      *
-     * @defaultValue `false`
+     * @default false
      */
     disabled?: boolean;
 }>;
@@ -105,7 +114,7 @@ export type AccordionHeaderPropsWithoutHTML = WithChild<{
      * The level of the accordion header, applied to the element's `aria-level` attribute.
      * This is used to indicate the hierarchical relationship between the accordion items.
      *
-     * @defaultValue `3`
+     * @default `3`
      */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }>;

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogActionProps } from "../types.js";
 	import { DialogActionState } from "../../dialog/dialog.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: AlertDialogActionProps = $props();
 
 	const actionState = DialogActionState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogCancelProps } from "../types.js";
 	import { AlertDialogCancelState } from "../../dialog/dialog.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: AlertDialogCancelProps = $props();
 
 	const cancelState = AlertDialogCancelState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, cancelState.props));

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
+	import { afterSleep, boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
@@ -32,8 +32,8 @@
 	}: AlertDialogContentProps = $props();
 
 	const contentState = DialogContentState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/alert-dialog/components/alert-dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import type { AlertDialogRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { DialogRootState } from "../../dialog/dialog.svelte.js";
@@ -12,15 +12,15 @@
 	}: AlertDialogRootProps = $props();
 
 	DialogRootState.create({
-		variant: box.with(() => "alert-dialog"),
-		open: box.with(
+		variant: boxWith(() => "alert-dialog"),
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AspectRatioRootProps } from "../types.js";
 	import { AspectRatioRootState } from "../aspect-ratio.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: AspectRatioRootProps = $props();
 
 	const rootState = AspectRatioRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		ratio: box.with(() => ratio),
+		ratio: boxWith(() => ratio),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/avatar/components/avatar-fallback.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AvatarFallbackProps } from "../types.js";
 	import { AvatarFallbackState } from "../avatar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: AvatarFallbackProps = $props();
 
 	const fallbackState = AvatarFallbackState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/avatar/components/avatar-image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AvatarImageProps } from "../types.js";
 	import { AvatarImageState } from "../avatar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,14 +17,14 @@
 	}: AvatarImageProps = $props();
 
 	const imageState = AvatarImageState.create({
-		src: box.with(() => src),
-		id: box.with(() => id),
-		ref: box.with(
+		src: boxWith(() => src),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		crossOrigin: box.with(() => crossorigin),
-		referrerPolicy: box.with(() => referrerpolicy),
+		crossOrigin: boxWith(() => crossorigin),
+		referrerPolicy: boxWith(() => referrerpolicy),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, imageState.props));

package/dist/bits/avatar/components/avatar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { AvatarRootProps } from "../types.js";
 	import { AvatarRootState } from "../avatar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,8 +18,8 @@
 	}: AvatarRootProps = $props();
 
 	const rootState = AvatarRootState.create({
-		delayMs: box.with(() => delayMs),
-		loadingStatus: box.with(
+		delayMs: boxWith(() => delayMs),
+		loadingStatus: boxWith(
 			() => loadingStatus,
 			(v) => {
 				if (loadingStatus !== v) {
@@ -28,8 +28,8 @@
 				}
 			}
 		),
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),