bits-ui 0.11.8 → 0.12.0

package/dist/bits/date-picker/components/date-picker-heading.svelte

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

package/dist/bits/date-picker/components/date-picker-input.svelte

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

package/dist/bits/date-picker/components/date-picker-label.svelte

@@ -2,6 +2,7 @@
 import { getCtx, getFieldAttrs } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { label },
   ids
@@ -19,7 +20,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/date-picker/components/date-picker-next-button.svelte

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

package/dist/bits/date-picker/components/date-picker-prev-button.svelte

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

package/dist/bits/date-picker/components/date-picker-segment.svelte

@@ -4,6 +4,7 @@ import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let id = void 0;
 export let part;
+export let el = void 0;
 const {
   elements: { segment },
   ids
@@ -24,6 +25,7 @@ $:
 	<slot {builder} />
 {:else}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-click={dispatch}

package/dist/bits/date-picker/components/date-picker-trigger.svelte

@@ -3,6 +3,7 @@ import { getCtx, getPopoverAttrs } 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/date-picker/components/date-picker.svelte.d.ts

@@ -34,7 +34,6 @@ declare const __propDef: {
         onPlaceholderChange?: import("../../../internal/types.js").OnChangeFn<import("@internationalized/date").DateValue> | undefined;
         validationId?: string | undefined;
         descriptionId?: string | undefined;
-        asChild?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bits/date-picker/types.d.ts

@@ -4,7 +4,7 @@ import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, G
 import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
 import type { SegmentEvents } from "../date-field/types.js";
 type Props = I.Props;
-type LabelProps = I.Props & HTMLSpanAttributes;
+type LabelProps = I.LabelProps & HTMLSpanAttributes;
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
 type InputProps = I.InputProps & HTMLDivAttributes;
 type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;

package/dist/bits/date-range-field/_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, OmitDates } from "../../internal/index.js";
+import type { Expand, OnChangeFn, OmitDates, DOMElement } from "../../internal/index.js";
 import type { DateRange, SegmentPart } from "../../shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateFieldProps } from "@melt-ui/svelte";
@@ -36,8 +36,8 @@ type Props = Expand<Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> &
      */
     descriptionId?: string;
 }>;
-type InputProps = AsChild;
-type LabelProps = AsChild;
+type InputProps = DOMElement;
+type LabelProps = DOMElement<HTMLSpanElement>;
 type SegmentProps = Expand<{
     /**
      * The type of field to render (start or end).
@@ -47,5 +47,5 @@ type SegmentProps = Expand<{
      * The part of the date to render.
      */
     part: SegmentPart;
-} & AsChild>;
+} & DOMElement>;
 export type { Props, LabelProps, InputProps, SegmentProps };

package/dist/bits/date-range-field/components/date-range-field-input.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: { field },
   states: { segmentContents },
@@ -26,7 +27,7 @@ $:
 {#if asChild}
 	<slot {builder} {segments} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} {segments} />
 	</div>
 {/if}

package/dist/bits/date-range-field/components/date-range-field-label.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: { label },
   ids
@@ -19,7 +20,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/date-range-field/components/date-range-field-segment.svelte

@@ -5,6 +5,7 @@ export let asChild = false;
 export let id = void 0;
 export let part;
 export let type;
+export let el = void 0;
 const {
   elements: { startSegment, endSegment },
   ids
@@ -29,6 +30,7 @@ $:
 	<slot {builder} />
 {:else}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-click={dispatch}

package/dist/bits/date-range-picker/_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, OmitDates, OmitFloating } from "../../internal/index.js";
+import type { Expand, OnChangeFn, OmitDates, OmitFloating, DOMElement } from "../../internal/index.js";
 import type { DateRange, SegmentPart } from "../../shared";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateRangePickerProps } from "@melt-ui/svelte";
@@ -66,11 +66,11 @@ type Props = Expand<WithOmission<CreateDateRangePickerProps> & {
      * the `value` is set.
      */
     startValue?: DateValue | undefined;
-} & AsChild>;
-type InputProps = AsChild;
-type DescriptionProps = AsChild;
-type LabelProps = AsChild;
-type CalendarProps = AsChild;
+}>;
+type InputProps = DOMElement;
+type DescriptionProps = DOMElement;
+type LabelProps = DOMElement<HTMLSpanElement>;
+type CalendarProps = DOMElement;
 type SegmentProps = Expand<{
     /**
      * The type of field to render (start or end).
@@ -80,5 +80,5 @@ type SegmentProps = Expand<{
      * The part of the date to render.
      */
     part: SegmentPart;
-} & AsChild>;
+} & DOMElement>;
 export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };

package/dist/bits/date-range-picker/components/date-range-picker-arrow.svelte

@@ -1,6 +1,7 @@
 <script>import { getPopoverAttrs, getCtx } 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 },
@@ -18,5 +19,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/date-range-picker/components/date-range-picker-calendar.svelte

@@ -2,6 +2,7 @@
 import { getCtx, getCalendarAttrs } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { calendar },
   states: { months: localMonths, weekdays },
@@ -24,7 +25,7 @@ $:
 {#if asChild}
 	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

package/dist/bits/date-range-picker/components/date-range-picker-cell.svelte

@@ -1,6 +1,7 @@
 <script>import { getCtx, getCalendarAttrs } from "../ctx.js";
 export let date;
 export let asChild = false;
+export let el = void 0;
 const {
   helpers: { isDateDisabled, isDateUnavailable }
 } = getCtx();
@@ -16,7 +17,7 @@ $:
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<td {...$$restProps} {...attrs}>
+	<td bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</td>
 {/if}

package/dist/bits/date-range-picker/components/date-range-picker-close.svelte

@@ -2,6 +2,7 @@
 import { getCtx, getPopoverAttrs } 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/date-range-picker/components/date-range-picker-content.svelte

@@ -19,6 +19,7 @@ export let sameWidth = false;
 export let fitViewport = false;
 export let strategy = "absolute";
 export let overlap = false;
+export let el = void 0;
 const {
   elements: { content },
   states: { open },
@@ -53,6 +54,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -61,6 +63,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -69,11 +72,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}
@@ -81,7 +90,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/date-range-picker/components/date-range-picker-day.svelte

@@ -3,6 +3,7 @@ import { getCtx, getCalendarAttrs } from "../ctx.js";
 export let date;
 export let month;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { cell },
   helpers: { isDateDisabled, isDateUnavailable }
@@ -21,7 +22,7 @@ $:
 {#if asChild}
 	<slot {builder} {disabled} {unavailable} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
 		<slot {builder} {disabled} {unavailable}>
 			{date.day}
 		</slot>

package/dist/bits/date-range-picker/components/date-range-picker-field.svelte.d.ts

@@ -34,7 +34,6 @@ declare const __propDef: {
         validationId?: string | undefined;
         descriptionId?: string | undefined;
         startValue?: import("@internationalized/date").DateValue | undefined;
-        asChild?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bits/date-range-picker/components/date-range-picker-grid.svelte

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

package/dist/bits/date-range-picker/components/date-range-picker-heading.svelte

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

package/dist/bits/date-range-picker/components/date-range-picker-input.svelte

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

package/dist/bits/date-range-picker/components/date-range-picker-label.svelte

@@ -2,6 +2,7 @@
 import { getCtx, getFieldAttrs } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { label },
   ids
@@ -19,7 +20,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/date-range-picker/components/date-range-picker-next-button.svelte

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

package/dist/bits/date-range-picker/components/date-range-picker-prev-button.svelte

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

package/dist/bits/date-range-picker/components/date-range-picker-segment.svelte

@@ -4,6 +4,7 @@ export let asChild = false;
 export let id = void 0;
 export let part;
 export let type;
+export let el = void 0;
 const {
   elements: { startSegment, endSegment },
   ids
@@ -26,7 +27,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/date-range-picker/components/date-range-picker-trigger.svelte

@@ -3,6 +3,7 @@ import { getCtx, getPopoverAttrs } 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/date-range-picker/components/date-range-picker.svelte.d.ts

@@ -34,7 +34,6 @@ declare const __propDef: {
         validationId?: string | undefined;
         descriptionId?: string | undefined;
         startValue?: import("@internationalized/date").DateValue | undefined;
-        asChild?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bits/date-range-picker/types.d.ts

@@ -4,7 +4,7 @@ import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, G
 import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
 import type { SegmentEvents } from "../date-range-field/types.js";
 type Props = I.Props;
-type LabelProps = I.Props & HTMLSpanAttributes;
+type LabelProps = I.LabelProps & HTMLSpanAttributes;
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
 type InputProps = I.InputProps & HTMLDivAttributes;
 type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;

package/dist/bits/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 { AsChild, Expand, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
+import type { DOMElement, Expand, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { CreateDialogProps } from "@melt-ui/svelte";
 type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisible">> & {
     /**
@@ -18,13 +18,13 @@ type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisi
      */
     onOpenChange?: OnChangeFn<boolean>;
 }>;
-type TriggerProps = AsChild;
+type TriggerProps = DOMElement<HTMLButtonElement>;
 type CloseProps = 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 OverlayProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & 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 OverlayProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & DOMElement>;
+type PortalProps = DOMElement;
 type TitleProps = Expand<{
     level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & AsChild>;
+} & DOMElement<HTMLHeadingElement>>;
 export type { Props, CloseProps, TitleProps, PortalProps, ContentProps, TriggerProps, OverlayProps, DescriptionProps };

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

@@ -8,6 +8,7 @@ export let outTransition = void 0;
 export let outTransitionConfig = void 0;
 export let asChild = false;
 export let id = void 0;
+export let el = void 0;
 const {
   elements: { content },
   states: { open },
@@ -28,6 +29,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -36,6 +38,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -44,11 +47,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}
@@ -56,7 +65,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}