bits-ui 0.11.7 → 0.12.0

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

@@ -2,7 +2,7 @@
  * These types are shared between the various menu components,
  * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
  */
-import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { DOMEl, HTMLDivAttributes } from "../../internal/index.js";
 import type { CustomEventHandler } from "../..";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
@@ -14,19 +14,19 @@ type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
 type GroupProps = I.GroupProps & HTMLDivAttributes;
 type AnchorElement = HTMLAnchorAttributes & {
     href?: HTMLAnchorAttributes["href"];
-};
+} & DOMEl<HTMLAnchorElement>;
 type DivElement = HTMLDivAttributes & {
     href?: never;
-};
-type ItemProps = I.ItemProps & (AnchorElement | DivElement);
+} & DOMEl;
+type ItemProps = Omit<I.ItemProps, "el"> & (AnchorElement | DivElement);
 type CheckboxIndicatorProps = I.CheckboxIndicatorProps & HTMLDivAttributes;
 type RadioIndicatorProps = I.RadioIndicatorProps & HTMLDivAttributes;
 type LabelProps = I.LabelProps & HTMLDivAttributes;
 type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
 type SubProps = I.SubProps;
 type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
-type ContextTriggerProps = I.TriggerProps & HTMLDivAttributes;
-type DropdownTriggerProps = I.TriggerProps & HTMLButtonAttributes;
+type ContextTriggerProps = Omit<I.TriggerProps, "el"> & HTMLDivAttributes & DOMEl;
+type DropdownTriggerProps = Omit<I.TriggerProps, "el"> & HTMLButtonAttributes & DOMEl<HTMLButtonElement>;
 type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 type ItemEvents<T extends Element = HTMLDivElement> = {
     click: CustomEventHandler<MouseEvent, T>;

package/dist/bits/menubar/_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 { AsChild, Expand, OmitIds } from "../../internal/index.js";
+import type { DOMElement, Expand, OmitIds } from "../../internal/index.js";
 import type { CreateMenubarProps } from "@melt-ui/svelte";
-type Props = Expand<OmitIds<CreateMenubarProps> & AsChild>;
+type Props = Expand<OmitIds<CreateMenubarProps> & DOMElement>;
 export type { Props };

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

@@ -3,6 +3,7 @@ import { getMenuCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { trigger },
   ids
@@ -23,6 +24,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

package/dist/bits/menubar/components/menubar.svelte

@@ -5,6 +5,7 @@ export let loop = true;
 export let closeOnEscape = true;
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { menubar },
   updateOption,
@@ -31,7 +32,7 @@ $:
 {#if asChild}
 	<slot {builder} ids={$idValues} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} ids={$idValues} />
 	</div>
 {/if}

package/dist/bits/pagination/_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 { AsChild, Expand, OnChangeFn } from "../../internal";
+import type { DOMElement, Expand, OnChangeFn } from "../../internal";
 import type { CreatePaginationProps, Page } from "@melt-ui/svelte";
 type OmitPaginationProps<T> = Omit<T, "page" | "defaultPage" | "onPageChange">;
 type Props = Expand<OmitPaginationProps<CreatePaginationProps> & {
@@ -17,10 +17,10 @@ type Props = Expand<OmitPaginationProps<CreatePaginationProps> & {
      * A callback function called when the page changes.
      */
     onPageChange?: OnChangeFn<number>;
-} & AsChild>;
+} & DOMElement>;
 type PageProps = {
     page: Page;
-} & AsChild;
-type PrevButtonProps = AsChild;
-type NextButtonProps = AsChild;
+} & DOMElement<HTMLButtonElement>;
+type PrevButtonProps = DOMElement<HTMLButtonElement>;
+type NextButtonProps = DOMElement<HTMLButtonElement>;
 export type { Props, PrevButtonProps, NextButtonProps, PageProps };

package/dist/bits/pagination/components/pagination-next-button.svelte

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

package/dist/bits/pagination/components/pagination-page.svelte

@@ -3,6 +3,7 @@ import { getAttrs, getCtx } from "../ctx.js";
 import { melt } from "@melt-ui/svelte";
 export let asChild = void 0;
 export let page;
+export let el = void 0;
 const {
   elements: { pageTrigger }
 } = getCtx();
@@ -18,6 +19,7 @@ const dispatch = createDispatcher();
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		type="button"
 		{...builder} use:builder.action
 		on:m-click={dispatch}

package/dist/bits/pagination/components/pagination-prev-button.svelte

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

package/dist/bits/pagination/components/pagination.svelte

@@ -6,6 +6,7 @@ export let onPageChange = void 0;
 export let perPage = void 0;
 export let siblingCount = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { root },
   states: { pages, range }
@@ -32,7 +33,7 @@ $:
 {#if asChild}
 	<slot {builder} pages={$pages} range={$range} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} pages={$pages} range={$range} />
 	</div>
 {/if}

package/dist/bits/pin-input/_export.types.d.ts

@@ -0,0 +1 @@
+export type { Props, InputProps as PinInputProps, HiddenInputProps as PinInputHiddenInputProps } from "./types.js";

package/dist/bits/pin-input/_export.types.js

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

package/dist/bits/pin-input/_types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreatePinInputProps } from "@melt-ui/svelte";
+import type { DOMElement, Expand, OmitIds, OmitValue, OnChangeFn } from "../../internal/index.js";
+type Props = Expand<OmitIds<OmitValue<CreatePinInputProps> & {
+    /**
+     * The value pin-input, which is an array of strings.
+     *
+     * You can bind to this to programmatically control the value.
+     */
+    value?: CreatePinInputProps["defaultValue"];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<CreatePinInputProps["defaultValue"]>;
+} & DOMElement>>;
+type InputProps = DOMElement<HTMLInputElement>;
+type HiddenInputProps = DOMElement<HTMLInputElement>;
+export type { Props, InputProps, HiddenInputProps };

package/dist/bits/pin-input/_types.js

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

package/dist/bits/pin-input/components/pin-input-hidden-input.svelte

@@ -0,0 +1,24 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getAttrs } from "../ctx.js";
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { hiddenInput },
+  options: { disabled }
+} = getCtx();
+$:
+  attrs = {
+    ...getAttrs("hidden-input"),
+    disabled: $disabled ? true : void 0
+  };
+$:
+  builder = $hiddenInput;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<input bind:this={el} {...builder} use:builder.action {...$$restProps} />
+{/if}

package/dist/bits/pin-input/components/pin-input-hidden-input.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { HiddenInputProps } from "../types.js";
+declare const __propDef: {
+    props: HiddenInputProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                value: string;
+                name: string | undefined;
+                type: string;
+                'aria-hidden': boolean;
+                hidden: boolean;
+                tabIndex: number;
+                style: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type PinInputHiddenInputProps = typeof __propDef.props;
+export type PinInputHiddenInputEvents = typeof __propDef.events;
+export type PinInputHiddenInputSlots = typeof __propDef.slots;
+export default class PinInputHiddenInput extends SvelteComponent<PinInputHiddenInputProps, PinInputHiddenInputEvents, PinInputHiddenInputSlots> {
+}
+export {};

package/dist/bits/pin-input/components/pin-input-input.svelte

@@ -0,0 +1,31 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { input }
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("input");
+$:
+  builder = $input();
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<input
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+		on:m-input={dispatch}
+		on:m-paste={dispatch}
+		on:m-change={dispatch}
+		on:m-focus={dispatch}
+		on:m-blur={dispatch}
+	/>
+{/if}

package/dist/bits/pin-input/components/pin-input-input.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { InputEvents, InputProps } from "../types.js";
+declare const __propDef: {
+    props: InputProps;
+    slots: {
+        default: {
+            builder: (() => {
+                'data-complete': string | undefined;
+                placeholder: string;
+                disabled: boolean | undefined;
+                type: "text" | "password";
+                value: string;
+            }) & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLInputElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "blur" | "change" | "focus" | "paste">;
+            };
+        };
+    };
+    events: InputEvents;
+};
+export type PinInputInputProps = typeof __propDef.props;
+export type PinInputInputEvents = typeof __propDef.events;
+export type PinInputInputSlots = typeof __propDef.slots;
+export default class PinInputInput extends SvelteComponent<PinInputInputProps, PinInputInputEvents, PinInputInputSlots> {
+}
+export {};

package/dist/bits/pin-input/components/pin-input.svelte

@@ -0,0 +1,67 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setCtx, getAttrs } from "../ctx.js";
+import { derived } from "svelte/store";
+export let placeholder = void 0;
+export let value = void 0;
+export let name = void 0;
+export let disabled = void 0;
+export let type = "text";
+export let onValueChange = void 0;
+export let id = void 0;
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { root },
+  states: { value: localValue },
+  updateOption,
+  ids
+} = setCtx({
+  placeholder,
+  defaultValue: value,
+  name,
+  disabled,
+  type,
+  onValueChange: ({ next }) => {
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
+    return next;
+  }
+});
+$:
+  value !== void 0 && localValue.set(value);
+const attrs = getAttrs("root");
+$:
+  updateOption("placeholder", placeholder);
+$:
+  updateOption("name", name);
+$:
+  updateOption("disabled", disabled);
+$:
+  updateOption("type", type);
+$:
+  builder = $root;
+$:
+  Object.assign(builder, attrs);
+const idValues = derived([ids.root], ([$menubarId]) => ({
+  menubar: $menubarId
+}));
+$:
+  if (id) {
+    ids.root.set(id);
+  }
+$:
+  slotProps = {
+    builder,
+    ids: $idValues
+  };
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps} />
+	</div>
+{/if}

package/dist/bits/pin-input/components/pin-input.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "../types.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                id: string;
+                'data-complete': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            ids: {
+                menubar: string;
+            };
+        };
+    };
+};
+export type PinInputProps = typeof __propDef.props;
+export type PinInputEvents = typeof __propDef.events;
+export type PinInputSlots = typeof __propDef.slots;
+export default class PinInput extends SvelteComponent<PinInputProps, PinInputEvents, PinInputSlots> {
+}
+export {};

package/dist/bits/pin-input/ctx.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="svelte" />
+import { type PinInput as PinInputReturn, type CreatePinInputProps as PinInputProps } from "@melt-ui/svelte";
+export declare const getAttrs: (part: "input" | "root" | "hidden-input") => Record<string, string>;
+export declare function setCtx(props: PinInputProps): {
+    updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
+        root: string;
+    }>;
+    elements: {
+        root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<string>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $rootId]: [string[], string]) => {
+            id: string;
+            'data-complete': string | undefined;
+        }, string>;
+        input: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<string>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"text" | "password">], (node: HTMLInputElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "blur" | "change" | "focus" | "paste">, ([$value, $placeholder, $disabled, $type]: [string[], string, boolean, "text" | "password"]) => () => {
+            'data-complete': string | undefined;
+            placeholder: string;
+            disabled: boolean | undefined;
+            type: "text" | "password";
+            value: string;
+        }, string>;
+        hiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<string>, import("svelte/store").Writable<string | undefined>], import("svelte/action").Action<any, any, Record<never, any>>, ([$valueStr, $nameStore]: [string, string | undefined]) => {
+            value: string;
+            name: string | undefined;
+            type: string;
+            'aria-hidden': boolean;
+            hidden: boolean;
+            tabIndex: number;
+            style: string;
+        }, string>;
+    };
+    states: {
+        value: {
+            update: (updater: import("svelte/store").Updater<string[]>, sideEffect?: ((newValue: string[]) => void) | undefined) => void;
+            set: (this: void, value: string[]) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined): import("svelte/store").Unsubscriber;
+        };
+        valueStr: import("svelte/store").Readable<string>;
+    };
+    helpers: {
+        clear: () => void;
+    };
+    options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
+        placeholder: string;
+        name: string | undefined;
+        disabled: boolean;
+        type: "text" | "password";
+        defaultValue: string[];
+        value?: import("svelte/store").Writable<string[]> | undefined;
+        onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<string[]> | undefined;
+        ids?: Partial<{
+            root: string;
+        }> | undefined;
+    }, "value" | "ids">>;
+};
+export declare function getCtx(): PinInputReturn;

package/dist/bits/pin-input/ctx.js

@@ -0,0 +1,17 @@
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
+import { createPinInput } from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+const NAME = "pin-input";
+const PARTS = ["root", "input", "hidden-input"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
+    const pinInput = createPinInput(removeUndefined(props));
+    setContext(NAME, pinInput);
+    return {
+        ...pinInput,
+        updateOption: getOptionUpdater(pinInput.options)
+    };
+}
+export function getCtx() {
+    return getContext(NAME);
+}

package/dist/bits/pin-input/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Input } from "./components/pin-input-input.svelte";
+export { default as HiddenInput } from "./components/pin-input-hidden-input.svelte";
+export * from "./types.js";

package/dist/bits/pin-input/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Input } from "./components/pin-input-input.svelte";
+export { default as HiddenInput } from "./components/pin-input-hidden-input.svelte";
+export * from "./types.js";

package/dist/bits/pin-input/types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { CustomEventHandler } from "../..";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
+type Props = I.Props & HTMLDivAttributes;
+type InputProps = I.InputProps & HTMLInputAttributes;
+type HiddenInputProps = I.HiddenInputProps & HTMLInputAttributes;
+type InputEvents = {
+    keydown: CustomEventHandler<KeyboardEvent, HTMLInputElement>;
+    input: CustomEventHandler<InputEvent, HTMLInputElement>;
+    paste: CustomEventHandler<ClipboardEvent, HTMLInputElement>;
+    change: CustomEventHandler<Event, HTMLInputElement>;
+    focus: CustomEventHandler<FocusEvent, HTMLInputElement>;
+    blur: CustomEventHandler<FocusEvent, HTMLInputElement>;
+};
+export type { Props, InputProps, HiddenInputProps, InputEvents };

package/dist/bits/pin-input/types.js

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

package/dist/bits/popover/_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, OnChangeFn, AsChild, OmitFloating } from "../../internal/index.js";
+import type { Expand, OnChangeFn, OmitFloating, DOMElement } from "../../internal/index.js";
 import type { ArrowProps, ContentProps } from "../floating/_types.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 type Props = Expand<OmitFloating<CreatePopoverProps> & {
@@ -19,6 +19,6 @@ type Props = Expand<OmitFloating<CreatePopoverProps> & {
      */
     onOpenChange?: OnChangeFn<boolean>;
 }>;
-type TriggerProps = AsChild;
-type CloseProps = AsChild;
+type TriggerProps = DOMElement<HTMLButtonElement>;
+type CloseProps = DOMElement<HTMLButtonElement>;
 export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps };

package/dist/bits/popover/components/popover-arrow.svelte

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

package/dist/bits/popover/components/popover-close.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/popover/components/popover-content.svelte

@@ -17,6 +17,7 @@ export let avoidCollisions = true;
 export let collisionBoundary = void 0;
 export let sameWidth = false;
 export let fitViewport = false;
+export let el = void 0;
 const {
   elements: { content },
   states: { open },
@@ -49,6 +50,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -57,6 +59,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -65,11 +68,17 @@ $:
 		<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
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -77,7 +86,7 @@ $:
 		<slot {builder} />
 	</div>
 {:else if $open}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} />
 	</div>
 {/if}

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

@@ -3,6 +3,7 @@ import { getCtx, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { trigger },
   ids
@@ -23,6 +24,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}