bits-ui 0.11.8 → 0.12.0

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

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

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

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

package/dist/bits/calendar/components/calendar-heading.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: { 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/calendar/components/calendar-next-button.svelte

@@ -2,6 +2,7 @@
 import { getAttrs, 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 @@ const dispatch = createDispatcher();
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -2,6 +2,7 @@
 import { getAttrs, 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 @@ const dispatch = createDispatcher();
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -25,7 +25,7 @@ export let asChild = false;
 export let id = void 0;
 export let numberOfMonths = void 0;
 export let initialFocus = false;
-let el = void 0;
+export let el = void 0;
 onMount(() => {
   if (!initialFocus || !el)
     return;

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

@@ -1,7 +1,7 @@
-import type { HTMLDivAttributes } from "../../internal";
+import type { HTMLDivAttributes } from "../../internal/index.js";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
-import type { CustomEventHandler } from "../..";
+import type { CustomEventHandler } from "../../index.js";
 type Props<Multiple extends boolean = false> = I.Props<Multiple> & Omit<HTMLDivAttributes, "placeholder">;
 type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;
 type NextButtonProps = I.NextButtonProps & HTMLButtonAttributes;

package/dist/bits/checkbox/_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, OmitChecked, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { Expand, OmitChecked, OnChangeFn, DOMElement } from "../../internal/index.js";
 import type { CreateCheckboxProps } from "@melt-ui/svelte";
 type Props = Expand<OmitChecked<CreateCheckboxProps> & {
     /**
@@ -17,6 +17,6 @@ type Props = Expand<OmitChecked<CreateCheckboxProps> & {
      * A callback function called when the checked state changes.
      */
     onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-} & AsChild>;
-type IndicatorProps = AsChild;
+} & DOMElement<HTMLButtonElement>>;
+type IndicatorProps = DOMElement;
 export type { Props, IndicatorProps, Props as CheckboxProps, IndicatorProps as CheckboxIndicatorProps };

package/dist/bits/checkbox/components/checkbox-indicator.svelte

@@ -1,5 +1,6 @@
 <script>import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const {
   helpers: { isChecked, isIndeterminate },
   states: { checked }
@@ -21,7 +22,7 @@ $:
 {#if asChild}
 	<slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
 {:else}
-	<div {...$$restProps} {...attrs}>
+	<div bind:this={el} {...$$restProps} {...attrs}>
 		<slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
 	</div>
 {/if}

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

@@ -1,9 +1,15 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getCtx } from "../ctx.js";
+export let el = void 0;
 const {
   elements: { input },
   options: { value }
 } = getCtx();
 </script>
 
-<input {...$input} use:$input.action value={$value ?? "on"} {...$$restProps} />
+<input
+	bind:this={el}
+	{...$input} use:$input.action
+	value={$value ?? "on"}
+	{...$$restProps}
+/>

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

@@ -1,8 +1,7 @@
 import { SvelteComponent } from "svelte";
+import type { InputProps } from "../types.js";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
+    props: InputProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/bits/checkbox/components/checkbox.svelte

@@ -8,6 +8,7 @@ export let required = void 0;
 export let value = void 0;
 export let onCheckedChange = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { root },
   states: { checked: localChecked },
@@ -49,6 +50,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

@@ -1,10 +1,10 @@
-import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { DOMEl, HTMLDivAttributes } from "../../internal/index.js";
 import type { CustomEventHandler } from "../../index.js";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
 type Props = I.Props & HTMLButtonAttributes;
 type IndicatorProps = I.IndicatorProps & HTMLDivAttributes;
-type InputProps = Omit<HTMLInputAttributes, "value">;
+type InputProps = Omit<HTMLInputAttributes, "value"> & DOMEl<HTMLInputElement>;
 type Events = {
     click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
     keydown: CustomEventHandler<KeyboardEvent, HTMLButtonElement>;

package/dist/bits/collapsible/_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 { Transition, OmitOpen, OmitForceVisible, Expand, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
+import type { Transition, OmitOpen, OmitForceVisible, Expand, OnChangeFn, TransitionProps, DOMElement } from "../../internal/index.js";
 import type { CreateCollapsibleProps } from "@melt-ui/svelte";
 type Props = Expand<OmitOpen<OmitForceVisible<CreateCollapsibleProps>> & {
     /**
@@ -17,7 +17,7 @@ type Props = Expand<OmitOpen<OmitForceVisible<CreateCollapsibleProps>> & {
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
-} & AsChild>;
-type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild>;
-type TriggerProps = AsChild;
+} & DOMElement>;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & DOMElement>;
+type TriggerProps = DOMElement<HTMLButtonElement>;
 export type { Props, ContentProps, TriggerProps };

package/dist/bits/collapsible/components/collapsible-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 {
   elements: { content },
   states: { open }
@@ -22,6 +23,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -30,6 +32,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -38,11 +41,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}
@@ -50,7 +59,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/collapsible/components/collapsible-trigger.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: { trigger }
 } = getCtx();
@@ -17,6 +18,7 @@ $:
 	<slot {builder} />
 {:else}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

package/dist/bits/collapsible/components/collapsible.svelte

@@ -4,6 +4,7 @@ export let disabled = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { root },
   states: { open: localOpen },
@@ -34,7 +35,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/context-menu/_types.d.ts

@@ -1,5 +1,5 @@
-import type { AsChild, Transition, TransitionProps } from "../../internal/index.js";
+import type { DOMElement, Transition, TransitionProps } from "../../internal/index.js";
 import type { FloatingProps } from "../floating/_types.js";
 type ContextFloatingProps = Omit<FloatingProps, "sameWidth" | "side" | "sideOffset" | "align">;
-export type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<ContextFloatingProps & TransitionProps<T, In, Out> & AsChild>;
+export type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<ContextFloatingProps & TransitionProps<T, In, Out> & DOMElement>;
 export {};

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -14,6 +14,7 @@ export let collisionPadding = 8;
 export let avoidCollisions = true;
 export let collisionBoundary = void 0;
 export let fitViewport = false;
+export let el = void 0;
 const {
   elements: { menu },
   states: { open },
@@ -43,6 +44,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -52,6 +54,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -62,6 +65,7 @@ $:
 	</div>
 {:else if inTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -71,6 +75,7 @@ $:
 	</div>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -79,7 +84,12 @@ $:
 		<slot {builder} />
 	</div>
 {:else if $open}
-	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
+	<div
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
 		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/context-menu/components/context-menu-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}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-contextmenu={dispatch}

package/dist/bits/date-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 { SegmentPart } from "../../shared";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateFieldProps } from "@melt-ui/svelte";
@@ -36,10 +36,10 @@ type Props = Expand<Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> &
      */
     descriptionId?: string;
 }>;
-type InputProps = AsChild;
-type DescriptionProps = AsChild;
-type LabelProps = AsChild;
+type InputProps = DOMElement;
+type DescriptionProps = DOMElement;
+type LabelProps = DOMElement<HTMLSpanElement>;
 type SegmentProps = Expand<{
     part: SegmentPart;
-} & AsChild>;
+} & DOMElement>;
 export type { Props, LabelProps, DescriptionProps, InputProps, SegmentProps };

package/dist/bits/date-field/components/date-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 },
@@ -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-field/components/date-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-field/components/date-field-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/_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 { SegmentPart } from "../../shared";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDatePickerProps } from "@melt-ui/svelte";
@@ -46,12 +46,12 @@ type Props = Expand<Omit<OmitFloating<OmitDates<CreateDatePickerProps>>, "requir
      * This is used to apply the appropriate `aria-describedby` attribute to the input.
      */
     descriptionId?: string;
-} & 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<{
     part: SegmentPart;
-} & AsChild>;
+} & DOMElement>;
 export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };

package/dist/bits/date-picker/components/date-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-picker/components/date-picker-calendar.svelte

@@ -3,6 +3,7 @@ import { getCtx, getCalendarAttrs } 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: { calendar },
   states: { months: localMonths, weekdays },
@@ -26,7 +27,12 @@ $:
 {#if asChild}
 	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
+	<div
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
 		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

package/dist/bits/date-picker/components/date-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-picker/components/date-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-picker/components/date-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-picker/components/date-picker-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/date-picker/components/date-picker-field.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/components/date-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}