bits-ui 0.11.8 → 0.12.0

package/dist/bits/dialog/components/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/dialog/components/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/dialog/components/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/dialog/components/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/dialog/components/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"
 		{...$$restProps}

package/dist/bits/floating/_types.d.ts

@@ -1,7 +1,7 @@
-import type { AsChild, Transition, TransitionProps } from "../../internal/index.js";
+import type { DOMElement, Transition, TransitionProps } from "../../internal/index.js";
 export type ArrowProps = Expand<{
     size?: number;
-} & AsChild>;
+} & DOMElement>;
 export type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
 export type Rect = {
     x: number;
@@ -82,4 +82,4 @@ export type FloatingProps = {
      */
     overlap?: boolean;
 };
-export type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<FloatingProps & TransitionProps<T, In, Out> & AsChild>;
+export type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<FloatingProps & TransitionProps<T, In, Out> & DOMElement>;

package/dist/bits/label/_types.d.ts

@@ -1,3 +1,3 @@
-import type { AsChild } from "../../internal/types.js";
-type Props = AsChild;
+import type { DOMElement } from "../../internal/types.js";
+type Props = DOMElement<HTMLLabelElement>;
 export type { Props };

package/dist/bits/label/components/label.svelte

@@ -2,6 +2,7 @@
 import { getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { root }
 } = createLabel();
@@ -16,7 +17,12 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<label {...builder} use:builder.action {...$$restProps} on:m-mousedown={dispatch}>
+	<label
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-mousedown={dispatch}
+	>
 		<slot {builder} />
 	</label>
 {/if}

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

@@ -1,4 +1,4 @@
-import type { CustomEventHandler } from "../..";
+import type { CustomEventHandler } from "../../index.js";
 import type { HTMLLabelAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
 type Props = I.Props & HTMLLabelAttributes;

package/dist/bits/link-preview/_types.d.ts

@@ -3,7 +3,7 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
-import type { Expand, OnChangeFn, AsChild, OmitFloating } from "../../internal/index.js";
+import type { Expand, OnChangeFn, OmitFloating, DOMElement } from "../../internal/index.js";
 import type { ArrowProps, ContentProps } from "../floating/_types.js";
 import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
 type Props = Expand<OmitFloating<CreateLinkPreviewProps> & {
@@ -19,5 +19,5 @@ type Props = Expand<OmitFloating<CreateLinkPreviewProps> & {
      */
     onOpenChange?: OnChangeFn<boolean>;
 }>;
-type TriggerProps = AsChild;
+type TriggerProps = DOMElement<HTMLAnchorElement>;
 export type { Props, ArrowProps, ContentProps, TriggerProps };

package/dist/bits/link-preview/components/link-preview-arrow.svelte

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

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -20,6 +20,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 },
@@ -55,6 +56,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -67,6 +69,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -80,6 +83,7 @@ $:
 	</div>
 {:else if inTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -92,6 +96,7 @@ $:
 	</div>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -104,6 +109,7 @@ $:
 	</div>
 {:else if $open}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-focusout={dispatch}

package/dist/bits/link-preview/components/link-preview-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
@@ -24,6 +25,7 @@ $:
 {:else}
 	<svelte:element
 		this={"a"}
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		{...attrs}

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

@@ -1,7 +1,7 @@
 /**
  * Shared internal types for the various menu components.
  */
-import type { AsChild, OmitChecked, OmitFloating, OnChangeFn } from "../../internal/index.js";
+import type { DOMElement, OmitChecked, OmitFloating, OnChangeFn } from "../../internal/index.js";
 import type { CreateContextMenuCheckboxItemProps, CreateContextMenuRadioGroupProps, ContextMenuRadioItemProps, CreateContextSubmenuProps, CreateContextMenuProps } from "@melt-ui/svelte";
 import type { ArrowProps as FloatingArrowProps, ContentProps } from "../floating/_types.js";
 export type Props = Expand<OmitFloating<CreateContextMenuProps> & {
@@ -24,7 +24,7 @@ export type SubTriggerProps = Expand<{
      * @defaultValue false;
      */
     disabled?: boolean;
-} & AsChild>;
+} & DOMElement>;
 export type CheckboxItemProps = Expand<OmitChecked<CreateContextMenuCheckboxItemProps> & {
     /**
      * The checked state of the checkbox item.
@@ -37,7 +37,7 @@ export type CheckboxItemProps = Expand<OmitChecked<CreateContextMenuCheckboxItem
      * A callback function called when the checked state changes.
      */
     onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-} & AsChild>;
+} & DOMElement>;
 export type RadioGroupProps = Expand<{
     /**
      * The value of the radio group.
@@ -49,8 +49,8 @@ export type RadioGroupProps = Expand<{
      * A callback function called when the value changes.
      */
     onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
-} & AsChild>;
-export type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild>;
+} & DOMElement>;
+export type RadioItemProps = Expand<ContextMenuRadioItemProps & DOMElement>;
 export type SubProps = Expand<OmitFloating<CreateContextSubmenuProps> & {
     /**
      * The open state of the submenu.
@@ -71,12 +71,12 @@ export type ItemProps = Expand<{
      * @defaultValue false
      */
     disabled?: boolean;
-} & AsChild>;
+} & DOMElement>;
 export type ArrowProps = FloatingArrowProps;
-export type GroupProps = AsChild;
-export type CheckboxIndicatorProps = AsChild;
-export type RadioIndicatorProps = AsChild;
-export type LabelProps = AsChild;
-export type SeparatorProps = AsChild;
-export type TriggerProps = AsChild;
+export type GroupProps = DOMElement;
+export type CheckboxIndicatorProps = DOMElement;
+export type RadioIndicatorProps = DOMElement;
+export type LabelProps = DOMElement;
+export type SeparatorProps = DOMElement;
+export type TriggerProps = DOMElement<HTMLElement>;
 export { ContentProps, ContentProps as SubContentProps };

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

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

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

@@ -1,5 +1,6 @@
 <script>import { getAttrs, getCheckboxIndicator } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const checked = getCheckboxIndicator();
 const attrs = getAttrs("checkbox-indicator");
 </script>
@@ -7,7 +8,7 @@ const attrs = getAttrs("checkbox-indicator");
 {#if asChild}
 	<slot {attrs} checked={$checked} />
 {:else}
-	<div {...$$restProps} {...attrs}>
+	<div bind:this={el} {...$$restProps} {...attrs}>
 		{#if $checked}
 			<slot {attrs} checked={$checked} />
 		{/if}

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -5,6 +5,7 @@ export let checked = void 0;
 export let onCheckedChange = void 0;
 export let disabled = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { checkboxItem },
   states: { checked: localChecked },
@@ -36,6 +37,7 @@ $:
 	<slot {builder} />
 {:else}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-click={dispatch}

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

@@ -20,6 +20,7 @@ export let sameWidth = false;
 export let fitViewport = false;
 export let strategy = "absolute";
 export let overlap = false;
+export let el = void 0;
 const {
   elements: { menu },
   states: { open },
@@ -55,6 +56,7 @@ $:
 	<slot {builder} />
 {:else if transition && $open}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -64,6 +66,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -74,6 +77,7 @@ $:
 	</div>
 {:else if inTransition && $open}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -83,6 +87,7 @@ $:
 	</div>
 {:else if outTransition && $open}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -91,7 +96,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/menu/components/menu-group.svelte

@@ -1,6 +1,7 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { setGroupCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const { group, id } = setGroupCtx();
 const attrs = getAttrs("group");
 $:
@@ -12,7 +13,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/menu/components/menu-item.svelte

@@ -5,6 +5,7 @@ import { getCtx, getAttrs } from "../ctx.js";
 export let href = void 0;
 export let asChild = false;
 export let disabled = false;
+export let el = void 0;
 const {
   elements: { item }
 } = getCtx();
@@ -22,6 +23,7 @@ $:
 {:else}
 	<svelte:element
 		this={href ? "a" : "div"}
+		bind:this={el}
 		{href}
 		{...builder} use:builder.action
 		{...$$restProps}

package/dist/bits/menu/components/menu-label.svelte

@@ -1,6 +1,7 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { getGroupLabel, getAttrs } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const { groupLabel, id } = getGroupLabel();
 const attrs = getAttrs("label");
 $:
@@ -12,7 +13,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/menu/components/menu-radio-group.svelte

@@ -3,6 +3,7 @@ import { setRadioGroupCtx, getAttrs } from "../ctx.js";
 export let value = void 0;
 export let onValueChange = void 0;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { radioGroup },
   states: { value: localValue }
@@ -28,7 +29,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/menu/components/menu-radio-indicator.svelte

@@ -1,5 +1,6 @@
 <script>import { getAttrs, getRadioIndicator } from "../ctx.js";
 export let asChild = false;
+export let el = void 0;
 const { isChecked, value } = getRadioIndicator();
 const attrs = getAttrs("radio-indicator");
 $:
@@ -9,7 +10,7 @@ $:
 {#if asChild}
 	<slot {attrs} {checked} />
 {:else}
-	<div {...$$restProps} {...attrs}>
+	<div bind:this={el} {...$$restProps} {...attrs}>
 		{#if checked}
 			<slot {attrs} {checked} />
 		{/if}

package/dist/bits/menu/components/menu-radio-item.svelte

@@ -4,6 +4,7 @@ import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = false;
 export let asChild = false;
+export let el = void 0;
 const {
   elements: { radioItem }
 } = setRadioItem(value);
@@ -19,6 +20,7 @@ $:
 	<slot {builder} />
 {:else}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-click={dispatch}

package/dist/bits/menu/components/menu-separator.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: { separator }
 } = getCtx();
@@ -14,5 +15,5 @@ $:
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<div {...$separator} use:$separator.action {...$$restProps} />
+	<div bind:this={el} {...$separator} use:$separator.action {...$$restProps} />
 {/if}

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

@@ -20,6 +20,7 @@ export let sameWidth = false;
 export let fitViewport = false;
 export let strategy = "absolute";
 export let overlap = false;
+export let el = void 0;
 const {
   elements: { subMenu },
   states: { subOpen },
@@ -55,6 +56,7 @@ $:
 	<slot {builder} />
 {:else if transition && $subOpen}
 	<div
+		bind:this={el}
 		transition:transition={transitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -66,6 +68,7 @@ $:
 	</div>
 {:else if inTransition && outTransition && $subOpen}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
@@ -78,6 +81,7 @@ $:
 	</div>
 {:else if inTransition && $subOpen}
 	<div
+		bind:this={el}
 		in:inTransition={inTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -89,6 +93,7 @@ $:
 	</div>
 {:else if outTransition && $subOpen}
 	<div
+		bind:this={el}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
@@ -100,6 +105,7 @@ $:
 	</div>
 {:else if $subOpen}
 	<div
+		bind:this={el}
 		{...builder} use:builder.action
 		{...$$restProps}
 		on:m-focusout={dispatch}

package/dist/bits/menu/components/menu-sub-trigger.svelte

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

package/dist/bits/menu/components/menu-sub-trigger.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         asChild?: boolean | undefined;
+        el?: HTMLDivElement | undefined;
     } & import("../../../internal/index.js").HTMLDivAttributes & {
         disabled?: boolean | undefined;
     };

package/dist/bits/menu/components/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}
 	<button
+		bind:this={el}
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}

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

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