ui-ingredients 0.0.45 → 0.0.47

package/dist/accordion/context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/accordion';
 import type { CreateAccordionReturn } from './create-accordion.svelte.js';
-export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => void;
-export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => CreateAccordionReturn;
+export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/accordion/item-content.svelte

@@ -16,7 +16,12 @@
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionItemContentProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
@@ -43,7 +48,7 @@
   {#if asChild}
     {@render asChild(presence.ref, mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div bind:this={e} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/accordion/item-content.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { Action } from 'svelte/action';
+export interface AccordionItemContentProps extends HtmlIngredientProps<'div', never, Action> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/accordion/item-indicator.svelte

@@ -12,7 +12,12 @@
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionIndicatorProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/accordion/item-indicator.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AccordionIndicatorProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/accordion/item-trigger.svelte

@@ -12,7 +12,12 @@
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionItemTriggerProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/accordion/item-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AccordionItemTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/accordion/item.svelte

@@ -14,7 +14,7 @@
     setAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemProps = $props();
+  let {this: e, asChild, children, ...props}: AccordionItemProps = $props();
 
   let accordion = getAccordionContext();
 
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/accordion/item.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/accordion';
+export interface AccordionItemProps extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/accordion/root.svelte

@@ -1,61 +1,61 @@
-<script lang="ts" module>
-  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateAccordionProps,
-    CreateAccordionReturn,
-  } from './create-accordion.svelte.js';
-
-  export interface AccordionProps
-    extends Assign<
-        HtmlIngredientProps<'div', CreateAccordionReturn>,
-        CreateAccordionProps
-      >,
-      PresenceStrategyProps {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAccordionContext} from './context.svelte.js';
-  import {createAccordion} from './create-accordion.svelte.js';
-
-  let {asChild, children, ...props}: AccordionProps = $props();
-
-  let [presenceStrategyProps, rest] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
-  );
-
-  let [accordionProps, localProps] = $derived(
-    createSplitProps<CreateAccordionProps>([
-      'id',
-      'ids',
-      'value',
-      'disabled',
-      'multiple',
-      'orientation',
-      'collapsible',
-      'onFocusChange',
-      'onValueChange',
-    ])(rest),
-  );
-
-  let accordion = createAccordion(reflect(() => accordionProps));
-
-  let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
-
-  setAccordionContext(accordion);
-  setPresenceStrategyPropsContext(() => presenceStrategyProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, accordion)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.(accordion)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateAccordionProps,
+    CreateAccordionReturn,
+  } from './create-accordion.svelte.js';
+
+  export interface AccordionProps
+    extends Assign<
+        HtmlIngredientProps<'div', CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAccordionContext} from './context.svelte.js';
+  import {createAccordion} from './create-accordion.svelte.js';
+
+  let {this: e, asChild, children, ...props}: AccordionProps = $props();
+
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [accordionProps, localProps] = $derived(
+    createSplitProps<CreateAccordionProps>([
+      'id',
+      'ids',
+      'value',
+      'disabled',
+      'multiple',
+      'orientation',
+      'collapsible',
+      'onFocusChange',
+      'onValueChange',
+    ])(rest),
+  );
+
+  let accordion = createAccordion(reflect(() => accordionProps));
+
+  let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
+
+  setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, accordion)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

package/dist/accordion/root.svelte.d.ts

@@ -1,3 +1,8 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateAccordionProps, CreateAccordionReturn } from './create-accordion.svelte.js';
+export interface AccordionProps extends Assign<HtmlIngredientProps<'div', CreateAccordionReturn>, CreateAccordionProps>, PresenceStrategyProps {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/avatar/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateAvatarReturn } from './create-avatar.svelte.js';
-export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => void;
+export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => CreateAvatarReturn;

package/dist/avatar/fallback.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getAvatarContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: AvatarFallbackProps = $props();
+  let {this: e, asChild, children, ...props}: AvatarFallbackProps = $props();
 
   let avatar = getAvatarContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/avatar/fallback.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AvatarFallbackProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/avatar/image.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getAvatarContext} from './context.svelte.js';
 
-  let {asChild, ...props}: AvatarImageProps = $props();
+  let {this: e, asChild, ...props}: AvatarImageProps = $props();
 
   let avatar = getAvatarContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <img {...mergedProps} />
+  <img bind:this={e} {...mergedProps} />
 {/if}

package/dist/avatar/image.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface AvatarImageProps extends HtmlIngredientProps<'img'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/avatar/root.svelte

@@ -19,7 +19,7 @@
   import {setAvatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
-  let {asChild, children, ...props}: AvatarProps = $props();
+  let {this: e, asChild, children, ...props}: AvatarProps = $props();
 
   let [avatarProps, localProps] = $derived(
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
@@ -35,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps, avatar)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(avatar)}
   </div>
 {/if}

package/dist/avatar/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import { type CreateAvatarProps, type CreateAvatarReturn } from './create-avatar.svelte.js';
+export interface AvatarProps extends Assign<HtmlIngredientProps<'div', CreateAvatarReturn>, CreateAvatarProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateCarouselReturn } from './create-carousel.svelte.js';
-export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => void;
+export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => CreateCarouselReturn;

package/dist/carousel/indicator-group.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselIndicatorGroupProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: CarouselIndicatorGroupProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -21,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/carousel/indicator-group.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface CarouselIndicatorGroupProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/indicator.svelte

@@ -1,33 +1,33 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {IndicatorProps} from '@zag-js/carousel';
-
-  export interface CarouselIndicatorProps
-    extends Assign<HtmlIngredientProps<'button'>, IndicatorProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
-  import {getCarouselContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: CarouselIndicatorProps = $props();
-
-  let carousel = getCarouselContext();
-
-  let [indicatorProps, localProps] = $derived(
-    createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button type="button" {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {IndicatorProps} from '@zag-js/carousel';
+
+  export interface CarouselIndicatorProps
+    extends Assign<HtmlIngredientProps<'button'>, IndicatorProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getCarouselContext} from './context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: CarouselIndicatorProps = $props();
+
+  let carousel = getCarouselContext();
+
+  let [indicatorProps, localProps] = $derived(
+    createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={e} type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/carousel/indicator.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { IndicatorProps } from '@zag-js/carousel';
+export interface CarouselIndicatorProps extends Assign<HtmlIngredientProps<'button'>, IndicatorProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/item-group.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselItemGroupProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselItemGroupProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/carousel/item-group.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface CarouselItemGroupProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/item.svelte

@@ -1,34 +1,34 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/carousel';
-
-  export interface CarouselItemProps
-    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
-  import {getCarouselContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: CarouselItemProps = $props();
-
-  let carousel = getCarouselContext();
-
-  let [itemProps, localProps] = $derived(
-    createSplitProps<ItemProps>(['index'])(props),
-  );
-
-  let itemState = $derived(carousel.getItemState(itemProps));
-  let mergedProps = $derived(
-    mergeProps(localProps, carousel.getItemProps(itemProps)),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, itemState)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.(itemState)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/carousel';
+
+  export interface CarouselItemProps
+    extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getCarouselContext} from './context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: CarouselItemProps = $props();
+
+  let carousel = getCarouselContext();
+
+  let [itemProps, localProps] = $derived(
+    createSplitProps<ItemProps>(['index'])(props),
+  );
+
+  let itemState = $derived(carousel.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(localProps, carousel.getItemProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/carousel/item.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/carousel';
+export interface CarouselItemProps extends Assign<HtmlIngredientProps<'div', ItemState>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/next-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselNextTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: CarouselNextTriggerProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/next-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface CarouselNextTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/carousel/prev-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselPrevTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: CarouselPrevTriggerProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/prev-trigger.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface CarouselPrevTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;