@ark-ui/svelte 5.0.4 → 5.1.0

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/angle-slider/angle-slider-context.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { UseAngleSliderContext } from './use-angle-slider-context'
+
+  export interface AngleSliderContextProps {
+    render: Snippet<[UseAngleSliderContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  const { render }: AngleSliderContextProps = $props()
+  const angleSlider = useAngleSliderContext()
+</script>
+
+{@render render?.(angleSlider)}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseAngleSliderContext } from './use-angle-slider-context';
+export interface AngleSliderContextProps {
+    render: Snippet<[UseAngleSliderContext]>;
+}
+declare const AngleSliderContext: import("svelte").Component<AngleSliderContextProps, {}, "">;
+type AngleSliderContext = ReturnType<typeof AngleSliderContext>;
+export default AngleSliderContext;

package/dist/components/angle-slider/angle-slider-control.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface AngleSliderControlProps extends HTMLProps<'div'>, AngleSliderControlBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderControlProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getControlProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/angle-slider/angle-slider-hidden-input.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface AngleSliderHiddenInputProps extends HTMLProps<'input'>, AngleSliderHiddenInputBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderHiddenInputProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getHiddenInputProps(), props))
+</script>
+
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/angle-slider/angle-slider-hidden-input.svelte.d.ts

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

package/dist/components/angle-slider/angle-slider-label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface AngleSliderLabelProps extends HTMLProps<'label'>, AngleSliderLabelBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderLabelProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getLabelProps(), props))
+</script>
+
+<Ark as="label" bind:ref {...mergedProps} />

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

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

package/dist/components/angle-slider/angle-slider-marker-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderMarkerGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface AngleSliderMarkerGroupProps extends HTMLProps<'div'>, AngleSliderMarkerGroupBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderMarkerGroupProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getMarkerGroupProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/angle-slider/angle-slider-marker-group.svelte.d.ts

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

package/dist/components/angle-slider/angle-slider-marker.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { MarkerProps } from '@zag-js/angle-slider'
+
+  export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'>, RefAttribute {}
+  export interface AngleSliderMarkerProps extends HTMLProps<'span'>, AngleSliderMarkerBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderMarkerProps = $props()
+  const [markerProps, localProps] = $derived(createSplitProps<MarkerProps>()(props, ['value']))
+
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getMarkerProps(markerProps), localProps))
+</script>
+
+<Ark as="span" bind:ref {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { MarkerProps } from '@zag-js/angle-slider';
+export interface AngleSliderMarkerBaseProps extends MarkerProps, PolymorphicProps<'span'>, RefAttribute {
+}
+export interface AngleSliderMarkerProps extends HTMLProps<'span'>, AngleSliderMarkerBaseProps {
+}
+declare const AngleSliderMarker: import("svelte").Component<AngleSliderMarkerProps, {}, "ref">;
+type AngleSliderMarker = ReturnType<typeof AngleSliderMarker>;
+export default AngleSliderMarker;

package/dist/components/angle-slider/angle-slider-root-provider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseAngleSliderReturn } from './use-angle-slider.svelte'
+
+  interface RootProviderProps {
+    value: UseAngleSliderReturn
+  }
+
+  export interface AngleSliderRootProviderBaseProps extends RootProviderProps, RefAttribute {}
+  export interface AngleSliderRootProviderProps extends Assign<HTMLProps<'div'>, AngleSliderRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { AngleSliderProvider } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), value: angleSlider, ...localProps }: AngleSliderRootProviderProps = $props()
+  const mergedProps = $derived(mergeProps(angleSlider().getRootProps(), localProps))
+
+  AngleSliderProvider(angleSlider)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/angle-slider/angle-slider-root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
+import type { UseAngleSliderReturn } from './use-angle-slider.svelte';
+interface RootProviderProps {
+    value: UseAngleSliderReturn;
+}
+export interface AngleSliderRootProviderBaseProps extends RootProviderProps, RefAttribute {
+}
+export interface AngleSliderRootProviderProps extends Assign<HTMLProps<'div'>, AngleSliderRootProviderBaseProps> {
+}
+declare const AngleSliderRootProvider: import("svelte").Component<AngleSliderRootProviderProps, {}, "ref">;
+type AngleSliderRootProvider = ReturnType<typeof AngleSliderRootProvider>;
+export default AngleSliderRootProvider;

package/dist/components/angle-slider/angle-slider-root.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseAngleSliderProps } from './use-angle-slider.svelte'
+
+  export interface AngleSliderRootBaseProps
+    extends Optional<UseAngleSliderProps, 'id'>,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
+  export interface AngleSliderRootProps extends Assign<HTMLProps<'div'>, AngleSliderRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { AngleSliderProvider } from './use-angle-slider-context'
+  import { useAngleSlider } from './use-angle-slider.svelte'
+
+  let { ref = $bindable(null), value = $bindable(), ...props }: AngleSliderRootProps = $props()
+  const providedId = $props.id()
+
+  const [useAngleSliderProps, localProps] = $derived(
+    createSplitProps<Optional<UseAngleSliderProps, 'id'>>()(props, [
+      'id',
+      'ids',
+      'name',
+      'invalid',
+      'readOnly',
+      'disabled',
+      'onValueChangeEnd',
+      'onValueChange',
+      'defaultValue',
+      'value',
+      'step',
+    ]),
+  )
+
+  const resolvedProps = $derived<UseAngleSliderProps>({
+    ...useAngleSliderProps,
+    id: useAngleSliderProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      useAngleSliderProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const angleSlider = useAngleSlider(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(angleSlider().getRootProps(), localProps))
+
+  AngleSliderProvider(angleSlider)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseAngleSliderProps } from './use-angle-slider.svelte';
+export interface AngleSliderRootBaseProps extends Optional<UseAngleSliderProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface AngleSliderRootProps extends Assign<HTMLProps<'div'>, AngleSliderRootBaseProps> {
+}
+declare const AngleSliderRoot: import("svelte").Component<AngleSliderRootProps, {}, "ref" | "value">;
+type AngleSliderRoot = ReturnType<typeof AngleSliderRoot>;
+export default AngleSliderRoot;

package/dist/components/angle-slider/angle-slider-thumb.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface AngleSliderThumbProps extends HTMLProps<'div'>, AngleSliderThumbBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderThumbProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getThumbProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/angle-slider/angle-slider-value-text.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface AngleSliderValueTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface AngleSliderValueTextProps extends HTMLProps<'div'>, AngleSliderValueTextBaseProps {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useAngleSliderContext } from './use-angle-slider-context'
+
+  let { ref = $bindable(null), ...props }: AngleSliderValueTextProps = $props()
+  const angleSlider = useAngleSliderContext()
+  const mergedProps = $derived(mergeProps(angleSlider().getValueTextProps(), props))
+</script>
+
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/angle-slider/angle-slider-value-text.svelte.d.ts

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

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

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