@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/floating-panel/floating-panel-resize-trigger.svelte

@@ -1,8 +1,11 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import type { ResizeTriggerProps } from '@zag-js/floating-panel'
 
-  export interface FloatingPanelResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'div'> {}
+  export interface FloatingPanelResizeTriggerBaseProps
+    extends ResizeTriggerProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
   export interface FloatingPanelResizeTriggerProps
     extends Assign<HTMLProps<'div'>, FloatingPanelResizeTriggerBaseProps> {}
 </script>
@@ -13,11 +16,11 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelResizeTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelResizeTriggerProps = $props()
   const [resizeProps, localProps] = createSplitProps<ResizeTriggerProps>()(props, ['axis'])
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getResizeTriggerProps(resizeProps), localProps))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-resize-trigger.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
 import type { ResizeTriggerProps } from '@zag-js/floating-panel';
-export interface FloatingPanelResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'div'> {
+export interface FloatingPanelResizeTriggerBaseProps extends ResizeTriggerProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface FloatingPanelResizeTriggerProps extends Assign<HTMLProps<'div'>, FloatingPanelResizeTriggerBaseProps> {
 }
-declare const FloatingPanelResizeTrigger: import("svelte").Component<FloatingPanelResizeTriggerProps, {}, "">;
+declare const FloatingPanelResizeTrigger: import("svelte").Component<FloatingPanelResizeTriggerProps, {}, "ref">;
 type FloatingPanelResizeTrigger = ReturnType<typeof FloatingPanelResizeTrigger>;
 export default FloatingPanelResizeTrigger;

package/dist/components/floating-panel/floating-panel-root.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { PolymorphicProps } from '../../types.js'
+  import type { Snippet } from 'svelte'
   import type { UsePresenceProps } from '../presence/use-presence.svelte.js'
   import type { UseFloatingPanelProps } from './use-floating-panel.svelte.js'
 
@@ -7,7 +8,9 @@
     extends UseFloatingPanelProps,
       UsePresenceProps,
       PolymorphicProps<'div'> {}
-  export interface FloatingPanelRootProps extends Assign<HTMLProps<'div'>, FloatingPanelRootBaseProps> {}
+  export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
+    children?: Snippet
+  }
 </script>
 
 <script lang="ts">
@@ -20,38 +23,40 @@
   let { open = $bindable(), position = $bindable(), size = $bindable(), ...props }: FloatingPanelRootProps = $props()
   const providedId = $props.id()
 
-  const [presenceProps, otherProps] = splitPresenceProps(props)
-  const [floatingPanelProps, localProps] = createSplitProps<UseFloatingPanelProps>()(otherProps, [
-    'allowOverflow',
-    'closeOnEscape',
-    'defaultOpen',
-    'defaultPosition',
-    'defaultSize',
-    'dir',
-    'disabled',
-    'draggable',
-    'getAnchorPosition',
-    'getBoundaryEl',
-    'gridSize',
-    'id',
-    'ids',
-    'lockAspectRatio',
-    'maxSize',
-    'minSize',
-    'onOpenChange',
-    'onPositionChange',
-    'onPositionChangeEnd',
-    'onSizeChange',
-    'onSizeChangeEnd',
-    'onStageChange',
-    'open',
-    'persistRect',
-    'position',
-    'resizable',
-    'size',
-    'strategy',
-    'translations',
-  ])
+  const [presenceProps, otherProps] = $derived(splitPresenceProps(props))
+  const [floatingPanelProps, localProps] = $derived(
+    createSplitProps<UseFloatingPanelProps>()(otherProps, [
+      'allowOverflow',
+      'closeOnEscape',
+      'defaultOpen',
+      'defaultPosition',
+      'defaultSize',
+      'dir',
+      'disabled',
+      'draggable',
+      'getAnchorPosition',
+      'getBoundaryEl',
+      'gridSize',
+      'id',
+      'ids',
+      'lockAspectRatio',
+      'maxSize',
+      'minSize',
+      'onOpenChange',
+      'onPositionChange',
+      'onPositionChangeEnd',
+      'onSizeChange',
+      'onSizeChangeEnd',
+      'onStageChange',
+      'open',
+      'persistRect',
+      'position',
+      'resizable',
+      'size',
+      'strategy',
+      'translations',
+    ]),
+  )
 
   const resolvedProps = $derived<UseFloatingPanelProps>({
     ...floatingPanelProps,
@@ -82,4 +87,4 @@
   PresenceProvider(presence)
 </script>
 
-{@render props.children?.()}
+{@render localProps.children?.()}

package/dist/components/floating-panel/floating-panel-root.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { PolymorphicProps } from '../../types.js';
+import type { Snippet } from 'svelte';
 import type { UsePresenceProps } from '../presence/use-presence.svelte.js';
 import type { UseFloatingPanelProps } from './use-floating-panel.svelte.js';
 export interface FloatingPanelRootBaseProps extends UseFloatingPanelProps, UsePresenceProps, PolymorphicProps<'div'> {
 }
-export interface FloatingPanelRootProps extends Assign<HTMLProps<'div'>, FloatingPanelRootBaseProps> {
+export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
+    children?: Snippet;
 }
 declare const FloatingPanelRoot: import("svelte").Component<FloatingPanelRootProps, {}, "open" | "size" | "position">;
 type FloatingPanelRoot = ReturnType<typeof FloatingPanelRoot>;

package/dist/components/floating-panel/floating-panel-stage-trigger.svelte

@@ -1,8 +1,11 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
   import type { StageTriggerProps } from '@zag-js/floating-panel'
 
-  export interface FloatingPanelStageTriggerBaseProps extends StageTriggerProps, PolymorphicProps<'button'> {}
+  export interface FloatingPanelStageTriggerBaseProps
+    extends StageTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
   export interface FloatingPanelStageTriggerProps
     extends Assign<HTMLProps<'button'>, FloatingPanelStageTriggerBaseProps> {}
 </script>
@@ -12,10 +15,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let { stage, ...props }: FloatingPanelStageTriggerProps = $props()
+  let { ref = $bindable(null), stage, ...props }: FloatingPanelStageTriggerProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getStageTriggerProps({ stage }), props))
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-stage-trigger.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
 import type { StageTriggerProps } from '@zag-js/floating-panel';
-export interface FloatingPanelStageTriggerBaseProps extends StageTriggerProps, PolymorphicProps<'button'> {
+export interface FloatingPanelStageTriggerBaseProps extends StageTriggerProps, PolymorphicProps<'button'>, RefAttribute {
 }
 export interface FloatingPanelStageTriggerProps extends Assign<HTMLProps<'button'>, FloatingPanelStageTriggerBaseProps> {
 }
-declare const FloatingPanelStageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "">;
+declare const FloatingPanelStageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "ref">;
 type FloatingPanelStageTrigger = ReturnType<typeof FloatingPanelStageTrigger>;
 export default FloatingPanelStageTrigger;

package/dist/components/floating-panel/floating-panel-title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelTitleBaseProps extends PolymorphicProps<'h2'> {}
+  export interface FloatingPanelTitleBaseProps extends PolymorphicProps<'h2'>, RefAttribute {}
   export interface FloatingPanelTitleProps extends Assign<HTMLProps<'h2'>, FloatingPanelTitleBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelTitleProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelTitleProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const mergedProps = $derived(mergeProps(floatingPanel().getTitleProps(), props))
 </script>
 
-<Ark as="h2" {...mergedProps} />
+<Ark as="h2" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-title.svelte.d.ts

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

package/dist/components/floating-panel/floating-panel-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface FloatingPanelTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface FloatingPanelTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
   export interface FloatingPanelTriggerProps extends Assign<HTMLProps<'button'>, FloatingPanelTriggerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence/index.js'
   import { useFloatingPanelContext } from './use-floating-panel-context.js'
 
-  let props: FloatingPanelTriggerProps = $props()
+  let { ref = $bindable(null), ...props }: FloatingPanelTriggerProps = $props()
 
   const floatingPanel = useFloatingPanelContext()
   const presence = usePresenceContext()
@@ -28,4 +28,4 @@
   )
 </script>
 
-<Ark as="button" {...mergedProps} />
+<Ark as="button" bind:ref {...mergedProps} />

package/dist/components/floating-panel/floating-panel-trigger.svelte.d.ts

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

package/dist/components/focus-trap/focus-trap.svelte

@@ -40,9 +40,8 @@
   })
 
   function setNode(node: HTMLDivElement | null) {
-    ref = node
     localNode = node
   }
 </script>
 
-<Ark as="div" {@attach setNode} {...localProps} />
+<Ark as="div" bind:ref {@attach setNode} {...localProps} />

package/dist/components/frame/frame.svelte

@@ -11,8 +11,10 @@
     onMount?: () => void
     /** Callback function to be executed when the frame is unmounted */
     onUnmount?: () => void
+    /** The source document to be displayed in the frame */
     srcdoc?: string
-    ref?: HTMLIFrameElement
+    /** The bindable ref of the iframe */
+    ref?: HTMLIFrameElement | null
   }
   export interface FrameProps extends Assign<HTMLIframeAttributes, FrameBaseProps> {}
 
@@ -34,9 +36,9 @@
 
   import FrameContent from './frame-content.svelte'
 
-  let { head, onMount, onUnmount, srcdoc, ref = $bindable(), ...localProps }: FrameProps = $props()
+  let { head, onMount, onUnmount, srcdoc, ref = $bindable(null), ...localProps }: FrameProps = $props()
 
-  let frameRef: HTMLIFrameElement | undefined = $state()
+  let frameRef: HTMLIFrameElement | null = $state(null)
   let mountNode: HTMLElement | null = $derived(frameRef ? getMountNode(frameRef) : null)
 
   $effect(() => {
@@ -78,9 +80,13 @@
       resizeObserver.disconnect()
     }
   })
+
+  function setFrameNode(node: HTMLIFrameElement | null) {
+    frameRef = node
+  }
 </script>
 
-<iframe bind:this={frameRef} bind:this={ref} {...localProps}>
+<iframe bind:this={ref} {@attach setFrameNode} {...localProps}>
   <EnvironmentProvider value={() => frameRef?.contentDocument ?? document}>
     {#if mountNode}
       <Portal container={mountNode}>

package/dist/components/frame/frame.svelte.d.ts

@@ -8,8 +8,10 @@ export interface FrameBaseProps {
     onMount?: () => void;
     /** Callback function to be executed when the frame is unmounted */
     onUnmount?: () => void;
+    /** The source document to be displayed in the frame */
     srcdoc?: string;
-    ref?: HTMLIFrameElement;
+    /** The bindable ref of the iframe */
+    ref?: HTMLIFrameElement | null;
 }
 export interface FrameProps extends Assign<HTMLIframeAttributes, FrameBaseProps> {
 }

package/dist/components/highlight/highlight.svelte

@@ -8,18 +8,15 @@
 
   const props: HighlightProps = $props()
 
-  const [highlightProps, localProps] = createSplitProps<HighlightBaseProps>()(props, [
-    'query',
-    'text',
-    'ignoreCase',
-    'matchAll',
-  ])
+  const [highlightProps, localProps] = $derived(
+    createSplitProps<HighlightBaseProps>()(props, ['query', 'text', 'ignoreCase', 'matchAll']),
+  )
 
   if (typeof props.text !== 'string') {
     throw new Error('[ark-ui/highlight] text must be a string')
   }
 
-  const chunks = useHighlight(highlightProps)
+  const chunks = useHighlight(() => highlightProps)
 </script>
 
 {#each chunks() as { text, match }, i}

package/dist/components/hover-card/hover-card-arrow-tip.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 HoverCardArrowTipBaseProps extends PolymorphicProps<'div'> {}
+  export interface HoverCardArrowTipBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface HoverCardArrowTipProps extends Assign<HTMLProps<'div'>, HoverCardArrowTipBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useHoverCardContext } from './use-hover-card-context'
 
-  const props: HoverCardArrowTipProps = $props()
+  let { ref = $bindable(null), ...props }: HoverCardArrowTipProps = $props()
 
   const hoverCard = useHoverCardContext()
   const mergedProps = $derived(mergeProps(hoverCard().getArrowTipProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/hover-card/hover-card-arrow-tip.svelte.d.ts

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

package/dist/components/hover-card/hover-card-arrow.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 HoverCardArrowBaseProps extends PolymorphicProps<'div'> {}
+  export interface HoverCardArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface HoverCardArrowProps extends Assign<HTMLProps<'div'>, HoverCardArrowBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useHoverCardContext } from './use-hover-card-context'
 
-  const props: HoverCardArrowProps = $props()
+  let { ref = $bindable(null), ...props }: HoverCardArrowProps = $props()
 
   const hoverCard = useHoverCardContext()
   const mergedProps = $derived(mergeProps(hoverCard().getArrowProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/hover-card/hover-card-arrow.svelte.d.ts

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

package/dist/components/hover-card/hover-card-content.svelte

@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useHoverCardContext } from './use-hover-card-context'
 
-  let { ref = $bindable<Element | null>(), ...props }: HoverCardContentProps = $props()
+  let { ref = $bindable(null), ...props }: HoverCardContentProps = $props()
 
   const hoverCard = useHoverCardContext()
   const presence = usePresenceContext()
@@ -19,10 +19,9 @@
 
   function setNode(node: HTMLElement | null) {
     presence().setNode(node)
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {@attach setNode} {...mergedProps} />
+  <Ark as="div" bind:ref {@attach setNode} {...mergedProps} />
 {/if}

package/dist/components/hover-card/hover-card-positioner.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 HoverCardPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface HoverCardPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface HoverCardPositionerProps extends Assign<HTMLProps<'div'>, HoverCardPositionerBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { usePresenceContext } from '../presence'
   import { useHoverCardContext } from './use-hover-card-context'
 
-  const props: HoverCardPositionerProps = $props()
+  let { ref = $bindable(null), ...props }: HoverCardPositionerProps = $props()
 
   const hoverCard = useHoverCardContext()
   const presence = usePresenceContext()
@@ -19,5 +19,5 @@
 </script>
 
 {#if !presence().unmounted}
-  <Ark as="div" {...mergedProps} />
+  <Ark as="div" bind:ref {...mergedProps} />
 {/if}

package/dist/components/hover-card/hover-card-positioner.svelte.d.ts

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

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

package/dist/components/hover-card/hover-card-trigger.svelte.d.ts

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

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './angle-slider';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './angle-slider';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';

package/dist/components/listbox/listbox-content.svelte

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

package/dist/components/listbox/listbox-content.svelte.d.ts

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

package/dist/components/listbox/listbox-input.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import type { InputProps } from '@zag-js/listbox'
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
-  export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'> {}
+  export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {}
   export interface ListboxInputProps extends Assign<HTMLProps<'input'>, ListboxInputBaseProps> {}
 </script>
 
@@ -12,11 +12,11 @@
   import { Ark } from '../factory/index.js'
   import { useListboxContext } from './use-listbox-context.js'
 
-  const props: ListboxInputProps = $props()
+  let { ref = $bindable(null), ...props }: ListboxInputProps = $props()
 
   const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['autoHighlight']))
   const listbox = useListboxContext()
   const mergedProps = $derived(mergeProps(listbox().getInputProps(inputProps), localProps))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/listbox/listbox-input.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { InputProps } from '@zag-js/listbox';
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
-export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
+export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {
 }
 export interface ListboxInputProps extends Assign<HTMLProps<'input'>, ListboxInputBaseProps> {
 }
-declare const ListboxInput: import("svelte").Component<ListboxInputProps, {}, "">;
+declare const ListboxInput: import("svelte").Component<ListboxInputProps, {}, "ref">;
 type ListboxInput = ReturnType<typeof ListboxInput>;
 export default ListboxInput;