@ark-ui/svelte 5.0.4 → 5.0.5

package/dist/components/accordion/accordion-item-content.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'> {}
+  export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface AccordionItemContentProps extends Assign<HTMLProps<'div'>, AccordionItemContentBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { useAccordionContext } from './use-accordion-context'
   import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
 
-  const props: AccordionItemContentProps = $props()
+  let { ref = $bindable(null), ...props }: AccordionItemContentProps = $props()
 
   const accordion = useAccordionContext()
   const itemProps = useAccordionItemPropsContext()
@@ -23,4 +23,4 @@
   const mergedProps = $derived(mergeProps(itemContentProps, props))
 </script>
 
-<CollapsibleContent {...mergedProps} />
+<CollapsibleContent bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface AccordionItemContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface AccordionItemContentProps extends Assign<HTMLProps<'div'>, AccordionItemContentBaseProps> {
 }
-declare const AccordionItemContent: import("svelte").Component<AccordionItemContentProps, {}, "">;
+declare const AccordionItemContent: import("svelte").Component<AccordionItemContentProps, {}, "ref">;
 type AccordionItemContent = ReturnType<typeof AccordionItemContent>;
 export default AccordionItemContent;

package/dist/components/accordion/accordion-item-indicator.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface AccordionItemIndicatorProps extends Assign<HTMLProps<'div'>, AccordionItemIndicatorBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useAccordionContext } from './use-accordion-context'
   import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
 
-  const props: AccordionItemIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: AccordionItemIndicatorProps = $props()
 
   const accordion = useAccordionContext()
   const itemProps = useAccordionItemPropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(accordion().getItemIndicatorProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface AccordionItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface AccordionItemIndicatorProps extends Assign<HTMLProps<'div'>, AccordionItemIndicatorBaseProps> {
 }
-declare const AccordionItemIndicator: import("svelte").Component<AccordionItemIndicatorProps, {}, "">;
+declare const AccordionItemIndicator: import("svelte").Component<AccordionItemIndicatorProps, {}, "ref">;
 type AccordionItemIndicator = ReturnType<typeof AccordionItemIndicator>;
 export default AccordionItemIndicator;

package/dist/components/accordion/accordion-item-trigger.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface AccordionItemTriggerProps extends Assign<HTMLProps<'button'>, AccordionItemTriggerBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { useAccordionContext } from './use-accordion-context'
   import { useAccordionItemPropsContext } from './use-accordion-item-props-context'
 
-  const props: AccordionItemTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: AccordionItemTriggerProps = $props()
 
   const accordion = useAccordionContext()
   const itemProps = useAccordionItemPropsContext()
@@ -31,4 +31,4 @@
   )
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark bind:ref as="button" {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface AccordionItemTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
 }
 export interface AccordionItemTriggerProps extends Assign<HTMLProps<'button'>, AccordionItemTriggerBaseProps> {
 }
-declare const AccordionItemTrigger: import("svelte").Component<AccordionItemTriggerProps, {}, "">;
+declare const AccordionItemTrigger: import("svelte").Component<AccordionItemTriggerProps, {}, "ref">;
 type AccordionItemTrigger = ReturnType<typeof AccordionItemTrigger>;
 export default AccordionItemTrigger;

package/dist/components/accordion/accordion-item.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ItemProps } from '@zag-js/accordion'
 
-  export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface AccordionItemProps extends Assign<HTMLProps<'div'>, AccordionItemBaseProps> {}
 </script>
 
@@ -15,7 +15,7 @@
   import { AccordionItemProvider } from './use-accordion-item-context'
   import { AccordionItemPropsProvider } from './use-accordion-item-props-context'
 
-  const props: AccordionItemProps = $props()
+  let { ref = $bindable(null), ...props }: AccordionItemProps = $props()
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled']))
 
   const accordion = useAccordionContext()
@@ -31,6 +31,7 @@
 </script>
 
 <CollapsibleRoot
+  bind:ref
   open={itemState.expanded}
   ids={{ content: itemContentProps.id ?? undefined }}
   {...renderStrategy()}

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/accordion';
-export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface AccordionItemProps extends Assign<HTMLProps<'div'>, AccordionItemBaseProps> {
 }
-declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "ref">;
 type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;

package/dist/components/accordion/accordion-root-provider.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseAccordionReturn } from './use-accordion.svelte'
 
-  export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps {
+  export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps, RefAttribute {
     value: UseAccordionReturn
   }
   export interface AccordionRootProviderProps extends Assign<HTMLProps<'div'>, AccordionRootProviderBaseProps> {}
@@ -18,7 +18,7 @@
   import { Ark } from '../factory'
   import { AccordionProvider } from './use-accordion-context'
 
-  let { value, ...props }: AccordionRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: AccordionRootProviderProps = $props()
 
   const [renderStrategyProps, localProps] = $derived(splitRenderStrategyProps(props))
   const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
@@ -27,4 +27,4 @@
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark bind:ref as="div" {...mergedProps} />

package/dist/components/accordion/accordion-root-provider.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseAccordionReturn } from './use-accordion.svelte';
-export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps {
+export interface AccordionRootProviderBaseProps extends PolymorphicProps<'div'>, RenderStrategyProps, RefAttribute {
     value: UseAccordionReturn;
 }
 export interface AccordionRootProviderProps extends Assign<HTMLProps<'div'>, AccordionRootProviderBaseProps> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
-declare const AccordionRootProvider: import("svelte").Component<AccordionRootProviderProps, {}, "">;
+declare const AccordionRootProvider: import("svelte").Component<AccordionRootProviderProps, {}, "ref">;
 type AccordionRootProvider = ReturnType<typeof AccordionRootProvider>;
 export default AccordionRootProvider;

package/dist/components/accordion/accordion-root.svelte

@@ -1,8 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseAccordionProps } from './use-accordion.svelte'
 
-  export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'> {}
+  export interface AccordionRootBaseProps
+    extends UseAccordionProps,
+      RenderStrategyProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface AccordionRootProps extends Assign<HTMLProps<'div'>, AccordionRootBaseProps> {}
 </script>
 
@@ -18,22 +22,24 @@
   import { AccordionProvider } from './use-accordion-context'
   import { useAccordion } from './use-accordion.svelte'
 
-  let { value = $bindable(), ...props }: AccordionRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: AccordionRootProps = $props()
   const providedId = $props.id()
 
-  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props)
-  const [useAccordionProps, localProps] = createSplitProps<UseAccordionProps>()(accordionProps, [
-    'collapsible',
-    'defaultValue',
-    'disabled',
-    'id',
-    'ids',
-    'multiple',
-    'onFocusChange',
-    'onValueChange',
-    'orientation',
-    'value',
-  ])
+  const [renderStrategyProps, accordionProps] = $derived(splitRenderStrategyProps(props))
+  const [useAccordionProps, localProps] = $derived(
+    createSplitProps<UseAccordionProps>()(accordionProps, [
+      'collapsible',
+      'defaultValue',
+      'disabled',
+      'id',
+      'ids',
+      'multiple',
+      'onFocusChange',
+      'onValueChange',
+      'orientation',
+      'value',
+    ]),
+  )
 
   const resolvedProps = $derived<UseAccordionProps>({
     ...useAccordionProps,
@@ -41,7 +47,7 @@
     value,
     onValueChange(details) {
       useAccordionProps.onValueChange?.(details)
-      value = details.value
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -52,4 +58,4 @@
   AccordionProvider(accordion)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseAccordionProps } from './use-accordion.svelte';
-export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'> {
+export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface AccordionRootProps extends Assign<HTMLProps<'div'>, AccordionRootBaseProps> {
 }
 import { type RenderStrategyProps } from '../../utils/render-strategy';
-declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "value">;
+declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "ref" | "value">;
 type AccordionRoot = ReturnType<typeof AccordionRoot>;
 export default AccordionRoot;

package/dist/components/avatar/avatar-fallback.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface AvatarFallbackBaseProps extends PolymorphicProps<'span'> {}
+  export interface AvatarFallbackBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface AvatarFallbackProps extends HTMLProps<'span'>, AvatarFallbackBaseProps {}
 </script>
 
@@ -10,10 +10,10 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
 
-  const props: AvatarFallbackProps = $props()
+  let { ref = $bindable(null), ...props }: AvatarFallbackProps = $props()
 
   const avatar = useAvatarContext()
   const mergedProps = $derived(mergeProps(avatar().getFallbackProps(), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
-export interface AvatarFallbackBaseProps extends PolymorphicProps<'span'> {
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface AvatarFallbackBaseProps extends PolymorphicProps<'span'>, RefAttribute {
 }
 export interface AvatarFallbackProps extends HTMLProps<'span'>, AvatarFallbackBaseProps {
 }
-declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
+declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "ref">;
 type AvatarFallback = ReturnType<typeof AvatarFallback>;
 export default AvatarFallback;

package/dist/components/avatar/avatar-image.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface AvatarImageBaseProps extends PolymorphicProps<'img'> {}
+  export interface AvatarImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {}
   export interface AvatarImageProps extends HTMLProps<'img'>, AvatarImageBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { mergeProps } from '@zag-js/svelte'
   import { useAvatarContext } from './use-avatar-context'
 
-  const props: AvatarImageProps = $props()
+  let { ref = $bindable(null), ...props }: AvatarImageProps = $props()
   const avatar = useAvatarContext()
   const mergedProps = $derived(mergeProps(avatar().getImageProps(), props))
 </script>
 
-<Ark as="img" {...mergedProps} />
+<Ark as="img" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
-export interface AvatarImageBaseProps extends PolymorphicProps<'img'> {
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface AvatarImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {
 }
 export interface AvatarImageProps extends HTMLProps<'img'>, AvatarImageBaseProps {
 }
-declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "">;
+declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "ref">;
 type AvatarImage = ReturnType<typeof AvatarImage>;
 export default AvatarImage;

package/dist/components/avatar/avatar-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps } from '../../types'
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
   import type { UseAvatarReturn } from './use-avatar.svelte'
 
   interface RootProviderProps {
     value: UseAvatarReturn
   }
 
-  export interface AvatarRootProviderBaseProps extends RootProviderProps {}
+  export interface AvatarRootProviderBaseProps extends RootProviderProps, RefAttribute {}
   export interface AvatarRootProviderProps extends Assign<HTMLProps<'div'>, AvatarRootProviderBaseProps> {}
 </script>
 
@@ -15,11 +15,11 @@
   import { Ark } from '../factory'
   import { AvatarProvider } from './use-avatar-context'
 
-  const props: AvatarRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: AvatarRootProviderProps = $props()
   const { value: avatar, ...localProps } = props
   const mergedProps = $derived(mergeProps(avatar().getRootProps(), localProps))
 
   AvatarProvider(avatar)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/avatar/avatar-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UseAvatarReturn } from './use-avatar.svelte';
 interface RootProviderProps {
     value: UseAvatarReturn;
 }
-export interface AvatarRootProviderBaseProps extends RootProviderProps {
+export interface AvatarRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
 export interface AvatarRootProviderProps extends Assign<HTMLProps<'div'>, AvatarRootProviderBaseProps> {
 }
-declare const AvatarRootProvider: import("svelte").Component<AvatarRootProviderProps, {}, "">;
+declare const AvatarRootProvider: import("svelte").Component<AvatarRootProviderProps, {}, "ref">;
 type AvatarRootProvider = ReturnType<typeof AvatarRootProvider>;
 export default AvatarRootProvider;

package/dist/components/avatar/avatar-root.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseAvatarProps } from './use-avatar.svelte'
 
-  export interface AvatarRootBaseProps extends Optional<UseAvatarProps, 'id'>, PolymorphicProps<'div'> {}
+  export interface AvatarRootBaseProps extends Optional<UseAvatarProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface AvatarRootProps extends Assign<HTMLProps<'div'>, AvatarRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { AvatarProvider } from './use-avatar-context'
   import { useAvatar } from './use-avatar.svelte'
 
-  const props: AvatarRootProps = $props()
+  let { ref = $bindable(null), ...props }: AvatarRootProps = $props()
   const providedId = $props.id()
 
   const [useAvatarProps, localProps] = $derived(
@@ -31,4 +31,4 @@
   AvatarProvider(avatar)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseAvatarProps } from './use-avatar.svelte';
-export interface AvatarRootBaseProps extends Optional<UseAvatarProps, 'id'>, PolymorphicProps<'div'> {
+export interface AvatarRootBaseProps extends Optional<UseAvatarProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface AvatarRootProps extends Assign<HTMLProps<'div'>, AvatarRootBaseProps> {
 }
-declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "">;
+declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "ref">;
 type AvatarRoot = ReturnType<typeof AvatarRoot>;
 export default AvatarRoot;

package/dist/components/carousel/carousel-autoplay-trigger.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface CarouselAutoplayTriggerProps extends Assign<HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselAutoplayTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselAutoplayTriggerProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getAutoplayTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/carousel/carousel-autoplay-trigger.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CarouselAutoplayTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
 }
 export interface CarouselAutoplayTriggerProps extends Assign<HTMLProps<'button'>, CarouselAutoplayTriggerBaseProps> {
 }
-declare const CarouselAutoplayTrigger: import("svelte").Component<CarouselAutoplayTriggerProps, {}, "">;
+declare const CarouselAutoplayTrigger: import("svelte").Component<CarouselAutoplayTriggerProps, {}, "ref">;
 type CarouselAutoplayTrigger = ReturnType<typeof CarouselAutoplayTrigger>;
 export default CarouselAutoplayTrigger;

package/dist/components/carousel/carousel-control.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CarouselControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselControlProps extends Assign<HTMLProps<'div'>, CarouselControlBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselControlProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselControlProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getControlProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/carousel/carousel-control.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CarouselControlBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CarouselControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CarouselControlProps extends Assign<HTMLProps<'div'>, CarouselControlBaseProps> {
 }
-declare const CarouselControl: import("svelte").Component<CarouselControlProps, {}, "">;
+declare const CarouselControl: import("svelte").Component<CarouselControlProps, {}, "ref">;
 type CarouselControl = ReturnType<typeof CarouselControl>;
 export default CarouselControl;

package/dist/components/carousel/carousel-indicator-group.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CarouselIndicatorGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselIndicatorGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselIndicatorGroupProps extends Assign<HTMLProps<'div'>, CarouselIndicatorGroupBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselIndicatorGroupProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselIndicatorGroupProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getIndicatorGroupProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface CarouselIndicatorGroupBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CarouselIndicatorGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CarouselIndicatorGroupProps extends Assign<HTMLProps<'div'>, CarouselIndicatorGroupBaseProps> {
 }
-declare const CarouselIndicatorGroup: import("svelte").Component<CarouselIndicatorGroupProps, {}, "">;
+declare const CarouselIndicatorGroup: import("svelte").Component<CarouselIndicatorGroupProps, {}, "ref">;
 type CarouselIndicatorGroup = ReturnType<typeof CarouselIndicatorGroup>;
 export default CarouselIndicatorGroup;

package/dist/components/carousel/carousel-indicator.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { IndicatorProps } from '@zag-js/carousel'
 
-  export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'> {}
+  export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'>, RefAttribute {}
   export interface CarouselIndicatorProps extends Assign<HTMLProps<'button'>, CarouselIndicatorBaseProps> {}
 </script>
 
@@ -12,11 +12,11 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselIndicatorProps = $props()
   const [indicatorProps, localProps] = $derived(createSplitProps<IndicatorProps>()(props, ['index', 'readOnly']))
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getIndicatorProps(indicatorProps), localProps))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { IndicatorProps } from '@zag-js/carousel';
-export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'> {
+export interface CarouselIndicatorBaseProps extends IndicatorProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface CarouselIndicatorProps extends Assign<HTMLProps<'button'>, CarouselIndicatorBaseProps> {
 }
-declare const CarouselIndicator: import("svelte").Component<CarouselIndicatorProps, {}, "">;
+declare const CarouselIndicator: import("svelte").Component<CarouselIndicatorProps, {}, "ref">;
 type CarouselIndicator = ReturnType<typeof CarouselIndicator>;
 export default CarouselIndicator;

package/dist/components/carousel/carousel-item-group.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface CarouselItemGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface CarouselItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselItemGroupProps extends Assign<HTMLProps<'div'>, CarouselItemGroupBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselItemGroupProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselItemGroupProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getItemGroupProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />