bits-ui 0.11.8 → 0.13.0

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/context-menu/components/context-menu.svelte

@@ -11,6 +11,7 @@ export let dir = void 0;
 export let typeahead = void 0;
 export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen },
   updateOption,
@@ -27,6 +28,7 @@ const {
   typeahead,
   disableFocusFirstItem,
   closeFocus,
+  onOutsideClick,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -62,6 +64,8 @@ $:
   updateOption("disableFocusFirstItem", disableFocusFirstItem);
 $:
   updateOption("typeahead", typeahead);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

package/dist/bits/context-menu/components/context-menu.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;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;

package/dist/bits/context-menu/ctx.d.ts

@@ -125,6 +125,7 @@ export declare function setCtx(props: CreateContextMenuProps): {
                 defaultOpen: false;
                 typeahead: true;
                 closeOnItemClick: true;
+                onOutsideClick: undefined;
             }, "ids">>;
         };
         createCheckboxItem: (props?: import("@melt-ui/svelte/dist/builders/menu")._CheckboxItemProps | undefined) => {
@@ -200,6 +201,7 @@ export declare function setCtx(props: CreateContextMenuProps): {
         closeOnItemClick: boolean;
         portal: string | HTMLElement | null | undefined;
         closeOnOutsideClick: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         loop: boolean;
         defaultOpen: boolean;
         open?: Writable<boolean> | undefined;

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-input.svelte.d.ts

@@ -12,14 +12,14 @@ declare const __propDef: {
                 id: string;
                 'aria-labelledby': string;
                 'aria-describedby': string;
-                'aria-disabled': string | undefined;
-                'aria-readonly': string | undefined;
+                'aria-disabled': "true" | undefined;
+                'aria-readonly': "true" | undefined;
                 'data-invalid': string | undefined;
                 'data-disabled': string | undefined;
             } & {
                 [x: `data-melt-${string}`]: "";
             } & {
-                action: <Node_1 extends unknown>() => {
+                action: <Node_1 extends unknown>(_node: HTMLElement) => {
                     destroy(): void;
                 };
             };

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-field/components/date-field-segment.svelte.d.ts

@@ -4,10 +4,10 @@ declare const __propDef: {
     props: SegmentProps;
     slots: {
         default: {
-            builder: ((part: import("@melt-ui/svelte/index.js").SegmentPart) => {
-                'aria-invalid': string | undefined;
-                'aria-disabled': string | undefined;
-                'aria-readonly': string | undefined;
+            builder: ({
+                'aria-invalid': "true" | undefined;
+                'aria-disabled': "true" | undefined;
+                'aria-readonly': "true" | undefined;
                 'data-invalid': string | undefined;
                 'data-disabled': string | undefined;
                 'data-segment': string;
@@ -17,9 +17,9 @@ declare const __propDef: {
                 contentEditable: boolean;
                 'aria-describedby': string | undefined;
                 tabindex: number | undefined;
-                'aria-invalid': string | undefined;
-                'aria-disabled': string | undefined;
-                'aria-readonly': string | undefined;
+                'aria-invalid': "true" | undefined;
+                'aria-disabled': "true" | undefined;
+                'aria-readonly': "true" | undefined;
                 'data-invalid': string | undefined;
                 'data-disabled': string | undefined;
                 'data-segment': string;

package/dist/bits/date-field/ctx.d.ts

@@ -13,7 +13,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
             label: string;
             description: string;
             validation: string;
-        }>], <Node_1 extends unknown>() => {
+        }>], <Node_1 extends unknown>(_node: HTMLElement) => {
             destroy(): void;
         }, ([$value, $isInvalid, $disabled, $readonly, $ids]: [import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
             field: string;
@@ -25,8 +25,8 @@ export declare function setCtx(props: CreateDateFieldProps): {
             id: string;
             'aria-labelledby': string;
             'aria-describedby': string;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -76,9 +76,9 @@ export declare function setCtx(props: CreateDateFieldProps): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -88,9 +88,9 @@ export declare function setCtx(props: CreateDateFieldProps): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -109,7 +109,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
         }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -203,7 +203,7 @@ export declare function getCtx(): {
             label: string;
             description: string;
             validation: string;
-        }>], <Node_1 extends unknown>() => {
+        }>], <Node_1 extends unknown>(_node: HTMLElement) => {
             destroy(): void;
         }, ([$value, $isInvalid, $disabled, $readonly, $ids]: [import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
             field: string;
@@ -215,8 +215,8 @@ export declare function getCtx(): {
             id: string;
             'aria-labelledby': string;
             'aria-describedby': string;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -266,9 +266,9 @@ export declare function getCtx(): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -278,9 +278,9 @@ export declare function getCtx(): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -299,7 +299,7 @@ export declare function getCtx(): {
         }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;

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-day.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: DayProps;
     slots: {
         default: {
-            builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
+            builder: {
                 readonly role: "button";
                 readonly 'aria-label': string;
                 readonly 'aria-selected': true | undefined;
@@ -18,7 +18,7 @@ declare const __propDef: {
                 readonly 'data-outside-visible-months': "" | undefined;
                 readonly 'data-focused': "" | undefined;
                 readonly tabindex: 0 | -1 | undefined;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">;

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

@@ -6,6 +6,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;
@@ -34,7 +35,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}

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

@@ -10,8 +10,8 @@ declare const __propDef: {
             builder: {
                 tabindex: number;
                 role: string;
-                'aria-readonly': string | undefined;
-                'aria-disabled': string | undefined;
+                'aria-readonly': "true" | undefined;
+                'aria-disabled': "true" | undefined;
                 'data-readonly': string | undefined;
                 'data-disabled': string | undefined;
             } & {

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}