@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/angle-slider/angle-slider.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';

package/dist/components/angle-slider/angle-slider.d.ts

@@ -0,0 +1,10 @@
+export { default as Context, type AngleSliderContextProps as ContextProps } from './angle-slider-context.svelte';
+export { default as Root, type AngleSliderRootProps as RootProps, type AngleSliderRootBaseProps as RootBaseProps, } from './angle-slider-root.svelte';
+export { default as RootProvider, type AngleSliderRootProviderProps as RootProviderProps, type AngleSliderRootProviderBaseProps as RootProviderBaseProps, } from './angle-slider-root-provider.svelte';
+export { default as Label, type AngleSliderLabelBaseProps as LabelBaseProps, type AngleSliderLabelProps as LabelProps, } from './angle-slider-label.svelte';
+export { default as Control, type AngleSliderControlBaseProps as ControlBaseProps, type AngleSliderControlProps as ControlProps, } from './angle-slider-control.svelte';
+export { default as Thumb, type AngleSliderThumbBaseProps as ThumbBaseProps, type AngleSliderThumbProps as ThumbProps, } from './angle-slider-thumb.svelte';
+export { default as MarkerGroup, type AngleSliderMarkerGroupBaseProps as MarkerGroupBaseProps, type AngleSliderMarkerGroupProps as MarkerGroupProps, } from './angle-slider-marker-group.svelte';
+export { default as Marker, type AngleSliderMarkerBaseProps as MarkerBaseProps, type AngleSliderMarkerProps as MarkerProps, } from './angle-slider-marker.svelte';
+export { default as ValueText, type AngleSliderValueTextBaseProps as ValueTextBaseProps, type AngleSliderValueTextProps as ValueTextProps, } from './angle-slider-value-text.svelte';
+export { default as HiddenInput, type AngleSliderHiddenInputBaseProps as HiddenInputBaseProps, type AngleSliderHiddenInputProps as HiddenInputProps, } from './angle-slider-hidden-input.svelte';

package/dist/components/angle-slider/angle-slider.js

@@ -0,0 +1,10 @@
+export { default as Context } from './angle-slider-context.svelte';
+export { default as Root, } from './angle-slider-root.svelte';
+export { default as RootProvider, } from './angle-slider-root-provider.svelte';
+export { default as Label, } from './angle-slider-label.svelte';
+export { default as Control, } from './angle-slider-control.svelte';
+export { default as Thumb, } from './angle-slider-thumb.svelte';
+export { default as MarkerGroup, } from './angle-slider-marker-group.svelte';
+export { default as Marker, } from './angle-slider-marker.svelte';
+export { default as ValueText, } from './angle-slider-value-text.svelte';
+export { default as HiddenInput, } from './angle-slider-hidden-input.svelte';

package/dist/components/angle-slider/index.d.ts

@@ -0,0 +1,14 @@
+export { default as AngleSliderContext, type AngleSliderContextProps } from './angle-slider-context.svelte';
+export { default as AngleSliderControl, type AngleSliderControlBaseProps, type AngleSliderControlProps, } from './angle-slider-control.svelte';
+export { default as AngleSliderHiddenInput, type AngleSliderHiddenInputBaseProps, type AngleSliderHiddenInputProps, } from './angle-slider-hidden-input.svelte';
+export { default as AngleSliderLabel, type AngleSliderLabelBaseProps, type AngleSliderLabelProps, } from './angle-slider-label.svelte';
+export { default as AngleSliderMarker, type AngleSliderMarkerBaseProps, type AngleSliderMarkerProps, } from './angle-slider-marker.svelte';
+export { default as AngleSliderMarkerGroup, type AngleSliderMarkerGroupBaseProps, type AngleSliderMarkerGroupProps, } from './angle-slider-marker-group.svelte';
+export { default as AngleSliderRoot, type AngleSliderRootBaseProps, type AngleSliderRootProps, } from './angle-slider-root.svelte';
+export { default as AngleSliderRootProvider, type AngleSliderRootProviderBaseProps, type AngleSliderRootProviderProps, } from './angle-slider-root-provider.svelte';
+export { default as AngleSliderThumb, type AngleSliderThumbBaseProps, type AngleSliderThumbProps, } from './angle-slider-thumb.svelte';
+export { default as AngleSliderValueText, type AngleSliderValueTextBaseProps, type AngleSliderValueTextProps, } from './angle-slider-value-text.svelte';
+export { angleSliderAnatomy } from './angle-slider.anatomy';
+export { useAngleSliderContext, type UseAngleSliderContext } from './use-angle-slider-context';
+export { useAngleSlider, type UseAngleSliderProps, type UseAngleSliderReturn } from './use-angle-slider.svelte';
+export * as AngleSlider from './angle-slider';

package/dist/components/angle-slider/index.js

@@ -0,0 +1,14 @@
+export { default as AngleSliderContext } from './angle-slider-context.svelte';
+export { default as AngleSliderControl, } from './angle-slider-control.svelte';
+export { default as AngleSliderHiddenInput, } from './angle-slider-hidden-input.svelte';
+export { default as AngleSliderLabel, } from './angle-slider-label.svelte';
+export { default as AngleSliderMarker, } from './angle-slider-marker.svelte';
+export { default as AngleSliderMarkerGroup, } from './angle-slider-marker-group.svelte';
+export { default as AngleSliderRoot, } from './angle-slider-root.svelte';
+export { default as AngleSliderRootProvider, } from './angle-slider-root-provider.svelte';
+export { default as AngleSliderThumb, } from './angle-slider-thumb.svelte';
+export { default as AngleSliderValueText, } from './angle-slider-value-text.svelte';
+export { angleSliderAnatomy } from './angle-slider.anatomy';
+export { useAngleSliderContext } from './use-angle-slider-context';
+export { useAngleSlider } from './use-angle-slider.svelte';
+export * as AngleSlider from './angle-slider';

package/dist/components/angle-slider/use-angle-slider-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseAngleSliderReturn } from './use-angle-slider.svelte';
+export interface UseAngleSliderContext extends UseAngleSliderReturn {
+}
+export declare const AngleSliderProvider: (opts: UseAngleSliderContext) => void, useAngleSliderContext: (fallback?: UseAngleSliderContext | undefined) => UseAngleSliderContext;

package/dist/components/angle-slider/use-angle-slider-context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../utils/create-context';
+export const [AngleSliderProvider, useAngleSliderContext] = createContext({
+    name: 'AngleSliderContext',
+});

package/dist/components/angle-slider/use-angle-slider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import * as angleSlider from '@zag-js/angle-slider';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseAngleSliderProps extends Omit<angleSlider.Props, 'dir' | 'getRootNode'> {
+}
+export interface UseAngleSliderReturn extends Accessor<angleSlider.Api<PropTypes>> {
+}
+export declare const useAngleSlider: (props: MaybeFunction<UseAngleSliderProps>) => () => angleSlider.Api<import("@zag-js/types").PropTypes>;

package/dist/components/angle-slider/use-angle-slider.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as angleSlider from '@zag-js/angle-slider';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useAngleSlider = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(angleSlider.machine, () => machineProps);
+    const api = $derived(angleSlider.connect(service, normalizeProps));
+    return () => api;
+};

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} />

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

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

package/dist/components/carousel/carousel-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/carousel'
 
-  export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselItemProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselItemProps = $props()
 
   const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['index', 'snapAlign']))
 
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(carousel().getItemProps(itemProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/carousel/carousel-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/carousel';
-export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+export interface CarouselItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface CarouselItemProps extends Assign<HTMLProps<'div'>, CarouselItemBaseProps> {
 }
-declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "">;
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "ref">;
 type CarouselItem = ReturnType<typeof CarouselItem>;
 export default CarouselItem;

package/dist/components/carousel/carousel-next-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 CarouselNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselNextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface CarouselNextTriggerProps extends Assign<HTMLProps<'button'>, CarouselNextTriggerBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselNextTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselNextTriggerProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getNextTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

package/dist/components/carousel/carousel-prev-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 CarouselPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface CarouselPrevTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface CarouselPrevTriggerProps extends Assign<HTMLProps<'button'>, CarouselPrevTriggerBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useCarouselContext } from './use-carousel-context'
 
-  const props: CarouselPrevTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: CarouselPrevTriggerProps = $props()
 
   const carousel = useCarouselContext()
   const mergedProps = $derived(mergeProps(carousel().getPrevTriggerProps(), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

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

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

package/dist/components/carousel/carousel-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 { UseCarouselReturn } from './use-carousel.svelte'
 
-  export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'> {
+  export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseCarouselReturn
   }
   export interface CarouselRootProviderProps extends Assign<HTMLProps<'div'>, CarouselRootProviderBaseProps> {}
@@ -13,10 +13,10 @@
   import { Ark } from '../factory'
   import { CarouselProvider } from './use-carousel-context'
 
-  let { value, ...props }: CarouselRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: CarouselRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   CarouselProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -1,10 +1,10 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseCarouselReturn } from './use-carousel.svelte';
-export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'> {
+export interface CarouselRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseCarouselReturn;
 }
 export interface CarouselRootProviderProps extends Assign<HTMLProps<'div'>, CarouselRootProviderBaseProps> {
 }
-declare const CarouselRootProvider: import("svelte").Component<CarouselRootProviderProps, {}, "">;
+declare const CarouselRootProvider: import("svelte").Component<CarouselRootProviderProps, {}, "ref">;
 type CarouselRootProvider = ReturnType<typeof CarouselRootProvider>;
 export default CarouselRootProvider;