ui-ingredients 0.0.45 → 0.0.46

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-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-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.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/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/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/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/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/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.svelte

@@ -11,7 +11,7 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselIndicatorProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselIndicatorProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -27,7 +27,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/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.svelte

@@ -11,7 +11,7 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselItemProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselItemProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -28,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

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/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/root.svelte

@@ -19,7 +19,7 @@
   import {setCarouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 
-  let {asChild, children, ...props}: CarouselProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselProps = $props();
 
   let [carouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, carousel)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(carousel)}
   </div>
 {/if}

package/dist/carousel/viewport.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselViewportProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselViewportProps = $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/checkbox/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateCheckboxReturn } from './create-checkbox.svelte.js';
-export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => void;
+export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => CreateCheckboxReturn;

package/dist/checkbox/control.svelte

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

package/dist/checkbox/hidden-input.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getCheckboxContext} from './context.svelte.js';
 
-  let {asChild, ...props}: CheckboxHiddenInputProps = $props();
+  let {this: e, asChild, ...props}: CheckboxHiddenInputProps = $props();
 
   let checkbox = getCheckboxContext();
 
@@ -19,5 +19,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

package/dist/checkbox/indicator.svelte

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

package/dist/checkbox/label.svelte

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

package/dist/checkbox/root.svelte

@@ -20,7 +20,7 @@
 
   import {reflect} from '@zag-js/svelte';
 
-  let {asChild, children, ...props}: CheckboxProps = $props();
+  let {this: e, asChild, children, ...props}: CheckboxProps = $props();
 
   let [checkboxProps, localProps] = $derived(
     createSplitProps<CreateCheckboxProps>([
@@ -48,7 +48,7 @@
 {#if asChild}
   {@render asChild(mergedProps, checkbox)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.(checkbox)}
   </label>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateClipboardReturn } from './create-clipboard.svelte.js';
-export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => void;
+export declare const getClipboardContext: () => CreateClipboardReturn, setClipboardContext: (context: CreateClipboardReturn | (() => CreateClipboardReturn)) => CreateClipboardReturn;

package/dist/clipboard/control.svelte

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

package/dist/clipboard/indicator.svelte

@@ -11,6 +11,7 @@
   import {getClipboardContext} from './context.svelte.js';
 
   let {
+    this: e,
     copied = false,
     asChild,
     children,
@@ -27,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/clipboard/input.svelte

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

package/dist/clipboard/label.svelte

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

package/dist/clipboard/root.svelte

@@ -19,7 +19,7 @@
   import {setClipboardContext} from './context.svelte.js';
   import {createClipboard} from './create-clipboard.svelte.js';
 
-  let {asChild, children, ...props}: ClipboardProps = $props();
+  let {this: e, asChild, children, ...props}: ClipboardProps = $props();
 
   let [clipboardProps, localProps] = $derived(
     createSplitProps<CreateClipboardProps>([
@@ -41,7 +41,7 @@
 {#if asChild}
   {@render asChild(mergedProps, clipboard)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(clipboard)}
   </div>
 {/if}

package/dist/clipboard/trigger.svelte

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