bits-ui 1.0.0-next.85 → 1.0.0-next.87

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

@@ -8,11 +8,9 @@ type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
     loop: boolean;
 }>>;
 declare class AccordionBaseState {
-    #private;
-    disabled: AccordionBaseStateProps["disabled"];
-    orientation: AccordionBaseStateProps["orientation"];
+    readonly opts: AccordionBaseStateProps;
     rovingFocusGroup: UseRovingFocusReturn;
-    constructor(props: AccordionBaseStateProps);
+    constructor(opts: AccordionBaseStateProps);
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -24,9 +22,9 @@ type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{
     value: string;
 }>;
 export declare class AccordionSingleState extends AccordionBaseState {
-    #private;
+    readonly opts: AccordionSingleStateProps;
     isMulti: false;
-    constructor(props: AccordionSingleStateProps);
+    constructor(opts: AccordionSingleStateProps);
     includesItem(item: string): boolean;
     toggleItem(item: string): void;
 }
@@ -47,13 +45,11 @@ type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
     rootState: AccordionState;
 }>;
 export declare class AccordionItemState {
-    #private;
-    value: AccordionItemStateProps["value"];
-    disabled: AccordionItemStateProps["disabled"];
+    readonly opts: AccordionItemStateProps;
     root: AccordionState;
     isActive: boolean;
     isDisabled: boolean;
-    constructor(props: AccordionItemStateProps);
+    constructor(opts: AccordionItemStateProps);
     updateValue(): void;
     props: {
         readonly id: string;
@@ -68,7 +64,9 @@ type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
 }>>;
 declare class AccordionTriggerState {
     #private;
-    constructor(props: AccordionTriggerStateProps, itemState: AccordionItemState);
+    readonly opts: AccordionTriggerStateProps;
+    readonly itemState: AccordionItemState;
+    constructor(opts: AccordionTriggerStateProps, itemState: AccordionItemState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
@@ -90,9 +88,10 @@ type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
 }>>;
 declare class AccordionContentState {
     #private;
-    item: AccordionItemState;
+    readonly opts: AccordionContentStateProps;
+    readonly item: AccordionItemState;
     present: boolean;
-    constructor(props: AccordionContentStateProps, item: AccordionItemState);
+    constructor(opts: AccordionContentStateProps, item: AccordionItemState);
     snippetProps: {
         open: boolean;
     };
@@ -112,8 +111,9 @@ type AccordionHeaderStateProps = WithRefProps<ReadableBoxedValues<{
     level: 1 | 2 | 3 | 4 | 5 | 6;
 }>>;
 declare class AccordionHeaderState {
-    #private;
-    constructor(props: AccordionHeaderStateProps, item: AccordionItemState);
+    readonly opts: AccordionHeaderStateProps;
+    readonly item: AccordionItemState;
+    constructor(opts: AccordionHeaderStateProps, item: AccordionItemState);
     props: {
         readonly id: string;
         readonly role: "heading";

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

@@ -9,50 +9,39 @@ const ACCORDION_CONTENT_ATTR = "data-accordion-content";
 const ACCORDION_ITEM_ATTR = "data-accordion-item";
 const ACCORDION_HEADER_ATTR = "data-accordion-header";
 class AccordionBaseState {
-    #id;
-    #ref;
-    disabled;
-    #loop;
-    orientation;
+    opts;
     rovingFocusGroup;
-    constructor(props) {
-        this.#id = props.id;
-        this.disabled = props.disabled;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-        this.orientation = props.orientation;
-        this.#loop = props.loop;
+    constructor(opts) {
+        this.opts = opts;
+        useRefById(this.opts);
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.#id,
+            rootNodeId: this.opts.id,
             candidateAttr: ACCORDION_TRIGGER_ATTR,
-            loop: this.#loop,
-            orientation: this.orientation,
+            loop: this.opts.loop,
+            orientation: this.opts.orientation,
         });
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
-        "data-orientation": getDataOrientation(this.orientation.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
+        id: this.opts.id.current,
+        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "data-disabled": getDataDisabled(this.opts.disabled.current),
         [ACCORDION_ROOT_ATTR]: "",
     }));
 }
 export class AccordionSingleState extends AccordionBaseState {
-    #value;
+    opts;
     isMulti = false;
-    constructor(props) {
-        super(props);
-        this.#value = props.value;
+    constructor(opts) {
+        super(opts);
+        this.opts = opts;
         this.includesItem = this.includesItem.bind(this);
         this.toggleItem = this.toggleItem.bind(this);
     }
     includesItem(item) {
-        return this.#value.current === item;
+        return this.opts.value.current === item;
     }
     toggleItem(item) {
-        this.#value.current = this.includesItem(item) ? "" : item;
+        this.opts.value.current = this.includesItem(item) ? "" : item;
     }
 }
 export class AccordionMultiState extends AccordionBaseState {
@@ -77,84 +66,70 @@ export class AccordionMultiState extends AccordionBaseState {
     }
 }
 export class AccordionItemState {
-    #id;
-    #ref;
-    value;
-    disabled;
+    opts;
     root;
-    isActive = $derived.by(() => this.root.includesItem(this.value.current));
-    isDisabled = $derived.by(() => this.disabled.current || this.root.disabled.current);
-    constructor(props) {
-        this.value = props.value;
-        this.disabled = props.disabled;
-        this.root = props.rootState;
-        this.#id = props.id;
-        this.#ref = props.ref;
+    isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
+    isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    constructor(opts) {
+        this.opts = opts;
+        this.root = opts.rootState;
         this.updateValue = this.updateValue.bind(this);
         useRefById({
-            id: this.#id,
-            ref: this.#ref,
+            ...opts,
             deps: () => this.isActive,
         });
     }
     updateValue() {
-        this.root.toggleItem(this.value.current);
+        this.root.toggleItem(this.opts.value.current);
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.isActive),
         "data-disabled": getDataDisabled(this.isDisabled),
-        "data-orientation": getDataOrientation(this.root.orientation.current),
+        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [ACCORDION_ITEM_ATTR]: "",
     }));
 }
 class AccordionTriggerState {
-    #ref;
-    #disabled;
-    #id;
+    opts;
+    itemState;
     #root;
-    #itemState;
-    #isDisabled = $derived.by(() => this.#disabled.current ||
-        this.#itemState.disabled.current ||
-        this.#root.disabled.current);
-    constructor(props, itemState) {
-        this.#disabled = props.disabled;
-        this.#itemState = itemState;
+    #isDisabled = $derived.by(() => this.opts.disabled.current ||
+        this.itemState.opts.disabled.current ||
+        this.#root.opts.disabled.current);
+    constructor(opts, itemState) {
+        this.opts = opts;
+        this.itemState = itemState;
         this.#root = itemState.root;
-        this.#id = props.id;
-        this.#ref = props.ref;
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
-        useRefById({
-            id: props.id,
-            ref: this.#ref,
-        });
+        useRefById(opts);
     }
     onclick(e) {
         if (this.#isDisabled)
             return;
         if (e.button !== 0)
             return e.preventDefault();
-        this.#itemState.updateValue();
+        this.itemState.updateValue();
     }
     onkeydown(e) {
         if (this.#isDisabled)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
             e.preventDefault();
-            this.#itemState.updateValue();
+            this.itemState.updateValue();
             return;
         }
-        this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
+        this.#root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         disabled: this.#isDisabled,
-        "aria-expanded": getAriaExpanded(this.#itemState.isActive),
+        "aria-expanded": getAriaExpanded(this.itemState.isActive),
         "aria-disabled": getAriaDisabled(this.#isDisabled),
         "data-disabled": getDataDisabled(this.#isDisabled),
-        "data-state": getDataOpenClosed(this.#itemState.isActive),
-        "data-orientation": getDataOrientation(this.#root.orientation.current),
+        "data-state": getDataOpenClosed(this.itemState.isActive),
+        "data-orientation": getDataOrientation(this.#root.opts.orientation.current),
         [ACCORDION_TRIGGER_ATTR]: "",
         tabindex: 0,
         //
@@ -163,25 +138,19 @@ class AccordionTriggerState {
     }));
 }
 class AccordionContentState {
+    opts;
     item;
-    #ref;
-    #id;
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
     #width = $state(0);
     #height = $state(0);
-    #forceMount;
-    present = $derived.by(() => this.#forceMount.current || this.item.isActive);
-    constructor(props, item) {
+    present = $derived.by(() => this.opts.forceMount.current || this.item.isActive);
+    constructor(opts, item) {
+        this.opts = opts;
+        this.item = item;
         this.item = item;
-        this.#forceMount = props.forceMount;
         this.#isMountAnimationPrevented = this.item.isActive;
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
+        useRefById(opts);
         $effect.pre(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
@@ -190,11 +159,11 @@ class AccordionContentState {
                 cancelAnimationFrame(rAF);
             };
         });
-        watch([() => this.present, () => this.#ref.current], ([_, node]) => {
+        watch([() => this.present, () => this.opts.ref.current], ([_, node]) => {
             if (!node)
                 return;
             afterTick(() => {
-                if (!this.#ref.current)
+                if (!this.opts.ref.current)
                     return;
                 // get the dimensions of the element
                 this.#originalStyles = this.#originalStyles || {
@@ -220,10 +189,10 @@ class AccordionContentState {
         open: this.item.isActive,
     }));
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-disabled": getDataDisabled(this.item.isDisabled),
-        "data-orientation": getDataOrientation(this.item.root.orientation.current),
+        "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
         [ACCORDION_CONTENT_ATTR]: "",
         style: {
             "--bits-accordion-content-height": `${this.#height}px`,
@@ -232,27 +201,20 @@ class AccordionContentState {
     }));
 }
 class AccordionHeaderState {
-    #id;
-    #ref;
-    #level;
-    #item;
-    constructor(props, item) {
-        this.#level = props.level;
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-        this.#item = item;
+    opts;
+    item;
+    constructor(opts, item) {
+        this.opts = opts;
+        this.item = item;
+        useRefById(opts);
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         role: "heading",
-        "aria-level": this.#level.current,
-        "data-heading-level": this.#level.current,
-        "data-state": getDataOpenClosed(this.#item.isActive),
-        "data-orientation": getDataOrientation(this.#item.root.orientation.current),
+        "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),
         [ACCORDION_HEADER_ATTR]: "",
     }));
 }

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

@@ -40,7 +40,11 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer {...mergedProps} {forceMount} present={contentState.root.open.current || forceMount}>
+<PresenceLayer
+	{...mergedProps}
+	{forceMount}
+	present={contentState.root.opts.open.current || forceMount}
+>
 	{#snippet presence({ present })}
 		<FocusScope
 			loop
@@ -48,7 +52,7 @@
 				forceMount,
 				present: present.current,
 				trapFocus,
-				open: contentState.root.open.current,
+				open: contentState.root.opts.open.current,
 			})}
 			{...mergedProps}
 			onCloseAutoFocus={(e) => {
@@ -85,7 +89,7 @@
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
 							{#if child}
-								{#if contentState.root.open.current}
+								{#if contentState.root.opts.open.current}
 									<ScrollLock {preventScroll} {restoreScrollDelay} />
 								{/if}
 								{@render child({

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -3,9 +3,9 @@ import type { WithRefProps } from "../../internal/types.js";
 type AspectRatioRootStateProps = WithRefProps<ReadableBoxedValues<{
     ratio: number;
 }>>;
-export declare class AspectRatioRootState {
-    #private;
-    constructor(props: AspectRatioRootStateProps);
+declare class AspectRatioRootState {
+    readonly opts: AspectRatioRootStateProps;
+    constructor(opts: AspectRatioRootStateProps);
     wrapperProps: {
         style: {
             position: string;

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

@@ -1,27 +1,20 @@
 import { useRefById } from "svelte-toolbelt";
 const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
-export class AspectRatioRootState {
-    #ref;
-    #id;
-    #ratio;
-    constructor(props) {
-        this.#ref = props.ref;
-        this.#id = props.id;
-        this.#ratio = props.ratio;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
+class AspectRatioRootState {
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+        useRefById(opts);
     }
     wrapperProps = $derived.by(() => ({
         style: {
             position: "relative",
             width: "100%",
-            paddingBottom: `${this.#ratio.current ? 100 / this.#ratio.current : 0}%}`,
+            paddingBottom: `${this.opts.ratio.current ? 100 / this.opts.ratio.current : 0}%}`,
         },
     }));
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         style: {
             position: "absolute",
             top: 0,

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

@@ -14,10 +14,8 @@ type AvatarRootStateProps = WithRefProps<{
 }>;
 type AvatarImageSrc = string | null | undefined;
 declare class AvatarRootState {
-    #private;
-    delayMs: AvatarRootStateProps["delayMs"];
-    loadingStatus: AvatarRootStateProps["loadingStatus"];
-    constructor(props: AvatarRootStateProps);
+    readonly opts: AvatarRootStateProps;
+    constructor(opts: AvatarRootStateProps);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): () => void;
     props: {
         readonly id: string;
@@ -34,8 +32,9 @@ type AvatarImageStateProps = WithRefProps<ReadableBoxedValues<{
     referrerPolicy: ReferrerPolicy;
 }>>;
 declare class AvatarImageState {
-    #private;
-    constructor(props: AvatarImageStateProps, root: AvatarRootState);
+    readonly opts: AvatarImageStateProps;
+    readonly root: AvatarRootState;
+    constructor(opts: AvatarImageStateProps, root: AvatarRootState);
     props: {
         readonly id: string;
         readonly style: {
@@ -53,8 +52,9 @@ declare class AvatarImageState {
  */
 type AvatarFallbackStateProps = WithRefProps;
 declare class AvatarFallbackState {
-    #private;
-    constructor(props: AvatarFallbackStateProps, root: AvatarRootState);
+    readonly opts: AvatarFallbackStateProps;
+    readonly root: AvatarRootState;
+    constructor(opts: AvatarFallbackStateProps, root: AvatarRootState);
     props: {
         readonly style: {
             readonly display: "none" | undefined;

package/dist/bits/avatar/avatar.svelte.js

@@ -5,20 +5,11 @@ const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
 const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
 class AvatarRootState {
-    #id;
-    #ref;
-    delayMs;
-    loadingStatus;
-    constructor(props) {
-        this.delayMs = props.delayMs;
-        this.loadingStatus = props.loadingStatus;
-        this.#ref = props.ref;
-        this.#id = props.id;
+    opts;
+    constructor(opts) {
+        this.opts = opts;
         this.loadImage = this.loadImage.bind(this);
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
+        useRefById(opts);
     }
     loadImage(src, crossorigin, referrerPolicy) {
         let imageTimerId;
@@ -28,83 +19,67 @@ class AvatarRootState {
             image.crossOrigin = crossorigin;
         if (referrerPolicy)
             image.referrerPolicy = referrerPolicy;
-        this.loadingStatus.current = "loading";
+        this.opts.loadingStatus.current = "loading";
         image.onload = () => {
             imageTimerId = window.setTimeout(() => {
-                this.loadingStatus.current = "loaded";
-            }, this.delayMs.current);
+                this.opts.loadingStatus.current = "loaded";
+            }, this.opts.delayMs.current);
         };
         image.onerror = () => {
-            this.loadingStatus.current = "error";
+            this.opts.loadingStatus.current = "error";
         };
         return () => {
             window.clearTimeout(imageTimerId);
         };
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         [AVATAR_ROOT_ATTR]: "",
-        "data-status": this.loadingStatus.current,
+        "data-status": this.opts.loadingStatus.current,
     }));
 }
 class AvatarImageState {
-    #id;
-    #ref;
-    #crossOrigin;
-    #referrerPolicy;
-    #src;
-    #root;
-    constructor(props, root) {
-        this.#root = root;
-        this.#src = props.src;
-        this.#id = props.id;
-        this.#ref = props.ref;
-        this.#crossOrigin = props.crossOrigin;
-        this.#referrerPolicy = props.referrerPolicy;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById(opts);
         $effect.pre(() => {
-            if (!this.#src.current) {
-                this.#root.loadingStatus.current = "error";
+            if (!this.opts.src.current) {
+                this.root.opts.loadingStatus.current = "error";
                 return;
             }
             // dependency on crossorigin
-            this.#crossOrigin.current;
-            untrack(() => this.#root.loadImage(this.#src.current ?? "", this.#crossOrigin.current, this.#referrerPolicy.current));
+            this.opts.crossOrigin.current;
+            untrack(() => this.root.loadImage(this.opts.src.current ?? "", this.opts.crossOrigin.current, this.opts.referrerPolicy.current));
         });
     }
     props = $derived.by(() => ({
-        id: this.#id.current,
+        id: this.opts.id.current,
         style: {
-            display: this.#root.loadingStatus.current === "loaded" ? "block" : "none",
+            display: this.root.opts.loadingStatus.current === "loaded" ? "block" : "none",
         },
-        "data-status": this.#root.loadingStatus.current,
+        "data-status": this.root.opts.loadingStatus.current,
         [AVATAR_IMAGE_ATTR]: "",
-        src: this.#src.current,
-        crossorigin: this.#crossOrigin.current,
-        referrerpolicy: this.#referrerPolicy.current,
+        src: this.opts.src.current,
+        crossorigin: this.opts.crossOrigin.current,
+        referrerpolicy: this.opts.referrerPolicy.current,
     }));
 }
 class AvatarFallbackState {
-    #id;
-    #ref;
-    #root;
-    constructor(props, root) {
-        this.#root = root;
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById(opts);
     }
     props = $derived.by(() => ({
         style: {
-            display: this.#root.loadingStatus.current === "loaded" ? "none" : undefined,
+            display: this.root.opts.loadingStatus.current === "loaded" ? "none" : undefined,
         },
-        "data-status": this.#root.loadingStatus.current,
+        "data-status": this.root.opts.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
     }));
 }