bits-ui 0.11.8 → 0.13.0

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

@@ -1,4 +1,4 @@
-import type { ObjectVariation, Transition, OmitValue, OmitForceVisible, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
+import type { ObjectVariation, Transition, OmitValue, OmitForceVisible, Expand, OnChangeFn, TransitionProps, DOMElement } from "../../internal/index.js";
 import type { CreateAccordionProps, AccordionItemProps, AccordionHeadingProps } from "@melt-ui/svelte";
 type Props<Multiple extends boolean> = Expand<OmitValue<OmitForceVisible<CreateAccordionProps<Multiple>>> & {
     /**
@@ -10,14 +10,14 @@ type Props<Multiple extends boolean> = Expand<OmitValue<OmitForceVisible<CreateA
      * A callback function called when the value changes.
      */
     onValueChange?: OnChangeFn<CreateAccordionProps<Multiple>["defaultValue"]>;
-} & AsChild>;
-type ItemProps = Expand<ObjectVariation<AccordionItemProps> & AsChild>;
+} & DOMElement>;
+type ItemProps = Expand<ObjectVariation<AccordionItemProps> & DOMElement>;
 type HeaderProps = Expand<{
     /**
      * The heading level of the accordion header.
      */
     level?: ObjectVariation<AccordionHeadingProps>["level"];
-} & AsChild>;
-type TriggerProps = AsChild;
-type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild>;
+} & DOMElement>;
+type TriggerProps = DOMElement<HTMLButtonElement>;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & DOMElement>;
 export type { Props, ItemProps, HeaderProps, TriggerProps, ContentProps };

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

@@ -7,6 +7,7 @@ export let inTransitionConfig = void 0;
 export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let asChild = false;
+export let el = void 0;
 const { content, isSelected, props } = getContent();
 const attrs = getAttrs("content");
 $:
@@ -19,6 +20,7 @@ $:
 	<slot {builder} />
 {:else if transition && $isSelected(props)}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -27,6 +29,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $isSelected(props)}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -35,11 +38,17 @@ $:
 		<slot {builder} />
 	</div>
 {:else if inTransition && $isSelected(props)}
-	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+	<div
+		bind:this={el}
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {:else if outTransition && $isSelected(props)}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -47,7 +56,7 @@ $:
 		<slot {builder} />
 	</div>
 {:else if $isSelected(props)}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -8,13 +8,13 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
     };
     slots(): {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").AccordionItemProps) => {
+            builder: {
                 'data-state': string;
                 'data-disabled': boolean | undefined;
                 'data-value': string;
                 hidden: boolean | undefined;
                 style: string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => void;

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

@@ -2,6 +2,7 @@
 import { getAttrs, getCtx } from "../ctx.js";
 export let level = 3;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { heading: header }
 } = getCtx();
@@ -15,7 +16,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -7,11 +7,11 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").AccordionHeadingProps) => {
+            builder: {
                 role: string;
                 'aria-level': number;
                 'data-heading-level': number;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

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

@@ -3,6 +3,7 @@ import { setItem, getAttrs } from "../ctx.js";
 export let value;
 export let disabled = void 0;
 export let asChild = false;
+export let el = void 0;
 const { item, props } = setItem({ value, disabled });
 const attrs = getAttrs("item");
 $:
@@ -14,7 +15,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -7,10 +7,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").AccordionItemProps) => {
+            builder: {
                 'data-state': string;
                 'data-disabled': boolean | undefined;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

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

@@ -2,6 +2,7 @@
 import { getTrigger, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
+export let el = void 0;
 const { trigger, props } = getTrigger();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");
@@ -15,6 +16,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -4,14 +4,14 @@ declare const __propDef: {
     props: TriggerProps;
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").AccordionItemProps) => {
+            builder: {
                 disabled: boolean | undefined;
                 'aria-expanded': boolean;
                 'aria-disabled': boolean;
                 'data-disabled': boolean | undefined;
                 'data-value': string;
                 'data-state': string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;

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

@@ -5,6 +5,7 @@ export let value = void 0;
 export let onValueChange = void 0;
 export let disabled = false;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { root },
   states: { value: localValue },
@@ -45,7 +46,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/alert-dialog/_export.types.d.ts

@@ -1 +1 @@
-export type { Props as AlertDialogProps, TriggerProps as AlertDialogTriggerProps, ActionProps as AlertDialogActionProps, CancelProps as AlertDialogCancelProps, ContentProps as AlertDialogContentProps, DescriptionProps as AlertDialogDescriptionProps, PortalProps as AlertDialogPortalProps, OverlayProps as AlertDialogOverlayProps, TitleProps as AlertDialogTitleProps, TriggerEvents as AlertDialogTriggerEvents, CancelEvents as AlertDialogCancelEvents, ActionEvents as AlertDialogActionEvents } from "./types.js";
+export type { Props as AlertDialogProps, TriggerProps as AlertDialogTriggerProps, ActionProps as AlertDialogActionProps, CancelProps as AlertDialogCancelProps, ContentProps as AlertDialogContentProps, DescriptionProps as AlertDialogDescriptionProps, PortalProps as AlertDialogPortalProps, OverlayProps as AlertDialogOverlayProps, TitleProps as AlertDialogTitleProps, TriggerEvents as AlertDialogTriggerEvents, CancelEvents as AlertDialogCancelEvents, ActionEvents as AlertDialogActionEvents, ContentEvents as AlertDialogContentEvents } from "./types.js";

package/dist/bits/alert-dialog/_types.d.ts

@@ -3,7 +3,7 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
-import type { OmitOpen, Expand, OnChangeFn, Transition, AsChild, TransitionProps } from "../../internal/index.js";
+import type { OmitOpen, Expand, OnChangeFn, Transition, TransitionProps, DOMElement } from "../../internal/index.js";
 import type { CreateDialogProps } from "@melt-ui/svelte";
 type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "forceVisible" | "ids">> & {
     /**
@@ -18,13 +18,13 @@ type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "forceVisible" | "
      */
     onOpenChange?: OnChangeFn<boolean>;
 }>;
-type TriggerProps = AsChild;
+type TriggerProps = DOMElement<HTMLButtonElement>;
 type ActionProps = TriggerProps;
 type CancelProps = TriggerProps;
-type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild>;
-type DescriptionProps = AsChild;
-type PortalProps = AsChild;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & DOMElement>;
+type DescriptionProps = DOMElement;
+type PortalProps = DOMElement;
 type TitleProps = Expand<{
     level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & AsChild>;
+} & DOMElement<HTMLHeadingElement>>;
 export type { Props, TriggerProps, ActionProps, CancelProps, ContentProps, DescriptionProps, ContentProps as OverlayProps, PortalProps, TitleProps };

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

@@ -2,6 +2,7 @@
 import { createDispatcher } from "../../../internal/events.js";
 import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { close }
 } = getCtx();
@@ -17,6 +18,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -2,6 +2,7 @@
 import { getCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { close }
 } = getCtx();
@@ -17,6 +18,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -8,6 +8,7 @@ export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let id = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { content },
   states: { open },
@@ -28,35 +29,62 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+	<div
+		bind:this={el}
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
 		{...$$restProps}
 	>
 		<slot {builder} />
 	</div>
 {:else if $open}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div
+		bind:this={el}
+		{...builder} use:builder.action
+		on:pointerdown
+		on:pointermove
+		on:pointerup
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -3,7 +3,11 @@ import type { Transition } from "../../../internal/index.js";
 import type { ContentProps } from "../types.js";
 declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): ContentProps<T, In, Out>;
-    events(): {} & {
+    events(): {
+        pointerdown: PointerEvent;
+        pointermove: PointerEvent;
+        pointerup: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {

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

@@ -2,6 +2,7 @@
 import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { description },
   ids
@@ -20,7 +21,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -7,6 +7,7 @@ export let inTransitionConfig = void 0;
 export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { overlay },
   states: { open }
@@ -22,12 +23,14 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
 	/>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -35,16 +38,18 @@ $:
 	/>
 {:else if inTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
 	/>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
 	/>
 {:else if $open}
-	<div {...builder} use:builder.action {...$$restProps} />
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps} />
 {/if}

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

@@ -1,6 +1,7 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { portalled }
 } = getCtx();
@@ -14,7 +15,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -3,6 +3,7 @@ import { getCtx, getAttrs } from "../ctx.js";
 export let level = "h2";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { title },
   ids
@@ -21,7 +22,12 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<svelte:element this={level} {...builder} use:builder.action {...$$restProps}>
+	<svelte:element
+		this={level}
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</svelte:element>
 {/if}

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

@@ -2,6 +2,7 @@
 import { getCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { trigger }
 } = getCtx();
@@ -17,6 +18,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		on:m-click={dispatch}

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

@@ -8,6 +8,7 @@ export let open = void 0;
 export let onOpenChange = void 0;
 export let openFocus = void 0;
 export let closeFocus = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -21,6 +22,7 @@ const {
   defaultOpen: open,
   openFocus,
   closeFocus,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -51,6 +53,8 @@ $:
   updateOption("openFocus", openFocus);
 $:
   updateOption("closeFocus", closeFocus);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;

package/dist/bits/alert-dialog/ctx.d.ts

@@ -67,6 +67,7 @@ export declare function setCtx(props: SetProps): {
         preventScroll: boolean;
         closeOnEscape: boolean;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         role: "dialog" | "alertdialog";
         defaultOpen: boolean;
         open?: import("svelte/store").Writable<boolean> | undefined;

package/dist/bits/alert-dialog/types.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "../../internal/index.js";
+import type { HTMLDivAttributes, HTMLHeadingAttributes, SvelteEvent, Transition } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
 import type * as I from "./_types.js";
@@ -14,6 +14,11 @@ type TriggerEvents<T extends Element = HTMLButtonElement> = {
     click: CustomEventHandler<MouseEvent, T>;
     keydown: CustomEventHandler<KeyboardEvent, T>;
 };
+type ContentEvents<T extends Element = HTMLElement> = {
+    pointerdown: SvelteEvent<PointerEvent, T>;
+    pointerup: SvelteEvent<PointerEvent, T>;
+    pointermove: SvelteEvent<PointerEvent, T>;
+};
 type ActionEvents = TriggerEvents;
 type CancelEvents = TriggerEvents;
-export type { Props, TriggerProps, ActionProps, CancelProps, ContentProps, DescriptionProps, ContentProps as OverlayProps, PortalProps, TitleProps, TriggerEvents, CancelEvents, ActionEvents };
+export type { Props, TriggerProps, ActionProps, CancelProps, ContentProps, DescriptionProps, ContentProps as OverlayProps, PortalProps, TitleProps, TriggerEvents, CancelEvents, ActionEvents, ContentEvents };

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

@@ -3,7 +3,8 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
+import type { DOMEl } from "../../internal/index.js";
 type Props = Expand<{
-    ratio: number;
-}>;
+    ratio?: number;
+} & DOMEl>;
 export type { Props };

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

@@ -1,4 +1,5 @@
 <script>export let ratio = 1 / 1;
+export let el = void 0;
 const attrs = {
   "data-aspect-ratio-root": ""
 };
@@ -7,9 +8,10 @@ const attrs = {
 <div
 	style:position="relative"
 	style:width="100%"
-	style:padding-bottom="{100 / ratio}%"
+	style:padding-bottom="{ratio ? 100 / ratio : 0}%"
 >
 	<div
+		bind:this={el}
 		style:position="absolute"
 		style:top="0"
 		style:right="0"

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

@@ -3,7 +3,7 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
-import type { Expand, AsChild, OnChangeFn } from "../../internal/index.js";
+import type { Expand, OnChangeFn, DOMElement } from "../../internal/index.js";
 import type { CreateAvatarProps } from "@melt-ui/svelte";
 type Props = Expand<Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
     /**
@@ -15,7 +15,7 @@ type Props = Expand<Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingSt
      * A callback function called when the loading state changes.
      */
     onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
-} & AsChild>;
-type ImageProps = Expand<AsChild>;
-type FallbackProps = AsChild;
+} & DOMElement>;
+type ImageProps = DOMElement<HTMLImageElement>;
+type FallbackProps = DOMElement<HTMLSpanElement>;
 export type { Props, ImageProps, FallbackProps };

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

@@ -1,6 +1,7 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { fallback }
 } = getCtx();
@@ -14,7 +15,7 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<span {...builder} use:builder.action {...$$restProps}>
+	<span bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</span>
 {/if}

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

@@ -3,6 +3,7 @@ import { getImage, getAttrs } from "../ctx.js";
 export let src = void 0;
 export let alt = void 0;
 export let asChild = false;
+export let el = void 0;
 const attrs = getAttrs("image");
 $:
   image = getImage(src).elements.image;
@@ -15,5 +16,5 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<img {...builder} use:builder.action {alt} {...$$restProps} />
+	<img bind:this={el} {...builder} use:builder.action {alt} {...$$restProps} />
 {/if}

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

@@ -3,6 +3,7 @@ export let delayMs = void 0;
 export let loadingStatus = void 0;
 export let onLoadingStatusChange = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   states: { loadingStatus: localLoadingStatus },
   updateOption
@@ -25,7 +26,7 @@ $:
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<div {...$$restProps} {...attrs}>
+	<div bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</div>
 {/if}