bits-ui 0.11.7 → 0.12.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-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-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-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.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/_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,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}

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/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;
-}>;
+} & 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": ""
 };
@@ -10,6 +11,7 @@ const attrs = {
 	style:padding-bottom="{100 / ratio}%"
 >
 	<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}

package/dist/bits/button/components/button.svelte

@@ -2,6 +2,7 @@
 export let href = void 0;
 export let type = void 0;
 export let builders = [];
+export let el = void 0;
 const attrs = {
   "data-button-root": ""
 };
@@ -11,6 +12,7 @@ const attrs = {
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<svelte:element
 		this={href ? "a" : "button"}
+		bind:this={el}
 		type={href ? undefined : type}
 		{href}
 		on:click

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

@@ -1,13 +1,14 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
+import type { DOMEl } from "../../internal/types.js";
 type AnchorElement = I.Props & HTMLAnchorAttributes & {
     href?: HTMLAnchorAttributes["href"];
     type?: never;
-};
+} & DOMEl<HTMLAnchorElement>;
 type ButtonElement = I.Props & HTMLButtonAttributes & {
     type?: HTMLButtonAttributes["type"];
     href?: never;
-};
+} & DOMEl<HTMLButtonElement>;
 type Props = AnchorElement | ButtonElement;
 type ButtonEventHandler<T extends Event = Event> = T & {
     currentTarget: EventTarget & HTMLButtonElement;

package/dist/bits/calendar/_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, OnChangeFn } from "../../internal";
+import type { DOMElement, OnChangeFn } from "../../internal/index.js";
 import type { DateValue } from "@internationalized/date";
 import type { CreateCalendarProps } from "@melt-ui/svelte";
 type OmitCalendarProps<T> = Omit<T, "placeholder" | "defaultPlaceholder" | "value" | "defaultValue" | "onPlaceholderChange" | "onValueChange" | "ids">;
@@ -41,16 +41,16 @@ type Props<Multiple extends boolean = false> = Expand<OmitCalendarProps<CreateCa
      * @default false
      */
     initialFocus?: boolean;
-} & AsChild>;
-type PrevButtonProps = AsChild;
-type NextButtonProps = AsChild;
-type HeadingProps = AsChild;
-type HeaderProps = AsChild;
-type GridHeadProps = AsChild;
-type HeadCellProps = AsChild;
-type GridProps = AsChild;
-type GridBodyProps = AsChild;
-type GridRowProps = AsChild;
+} & DOMElement>;
+type PrevButtonProps = DOMElement<HTMLButtonElement>;
+type NextButtonProps = DOMElement<HTMLButtonElement>;
+type HeadingProps = DOMElement;
+type HeaderProps = DOMElement<HTMLElement>;
+type GridHeadProps = DOMElement<HTMLTableSectionElement>;
+type HeadCellProps = DOMElement<HTMLTableCellElement>;
+type GridProps = DOMElement<HTMLTableElement>;
+type GridBodyProps = DOMElement<HTMLTableSectionElement>;
+type GridRowProps = DOMElement<HTMLTableRowElement>;
 type BaseDayProps = Expand<{
     /**
      * The date value of the cell.
@@ -60,7 +60,7 @@ type BaseDayProps = Expand<{
      * The month value that the cell belongs to.
      */
     month: DateValue;
-} & AsChild>;
-type CellProps = Expand<Omit<BaseDayProps, "month">>;
-type DayProps = Expand<BaseDayProps>;
+}>;
+type CellProps = Expand<Omit<BaseDayProps, "month">> & DOMElement<HTMLTableCellElement>;
+type DayProps = Expand<BaseDayProps & DOMElement>;
 export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DayProps };

package/dist/bits/calendar/components/calendar-cell.svelte

@@ -1,6 +1,7 @@
 <script>import { getCtx, getAttrs } 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/calendar/components/calendar-day.svelte

@@ -4,6 +4,7 @@ import { createDispatcher } from "../../../internal/events.js";
 export let date;
 export let month;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { cell },
   helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
@@ -25,7 +26,7 @@ $:
 {#if asChild}
 	<slot {builder} {disabled} {unavailable} {selected} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
 		<slot {builder} {disabled} {unavailable} {selected}>
 			{date.day}
 		</slot>

package/dist/bits/calendar/components/calendar-grid-body.svelte

@@ -1,12 +1,13 @@
 <script>import { getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const attrs = getAttrs("grid-body");
 </script>
 
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<tbody {...$$restProps} {...attrs}>
+	<tbody bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</tbody>
 {/if}

package/dist/bits/calendar/components/calendar-grid-head.svelte

@@ -1,12 +1,13 @@
 <script>import { getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
 </script>
 
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<thead {...$$restProps} {...attrs}>
+	<thead bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</thead>
 {/if}

package/dist/bits/calendar/components/calendar-grid-row.svelte

@@ -1,12 +1,13 @@
 <script>import { getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const attrs = getAttrs("grid-row");
 </script>
 
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<tr {...$$restProps} {...attrs}>
+	<tr bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</tr>
 {/if}

package/dist/bits/calendar/components/calendar-grid.svelte

@@ -1,6 +1,7 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getAttrs, 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}