@ark-ui/svelte 5.10.1 → 5.11.0

package/dist/components/collapsible/split-collapsible-props.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { UseCollapsibleProps } from './use-collapsible.svelte';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "lazyMount" | "unmountOnExit" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "disabled" | "id">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "lazyMount" | "unmountOnExit" | "open" | "ids" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "disabled" | "collapsedHeight" | "collapsedWidth" | "id">];

package/dist/components/collapsible/split-collapsible-props.svelte.js

@@ -1,6 +1,8 @@
 import { createSplitProps } from '../../utils/create-split-props';
 const splitFn = createSplitProps();
 export const splitCollapsibleProps = (props) => splitFn(props, [
+    'collapsedHeight',
+    'collapsedWidth',
     'defaultOpen',
     'disabled',
     'id',

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

@@ -14,8 +14,10 @@
   export interface ComboboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
 
+  export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ComboboxRootProps<T>, P>
+
   export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
-    props: Assign<ComboboxRootProps<T>, P>,
+    props: ComboboxRootComponentProps<T, P>,
   ) => Snippet
 </script>
 

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

@@ -7,7 +7,8 @@ export interface ComboboxRootBaseProps<T extends CollectionItem> extends UseComb
 }
 export interface ComboboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {
 }
-export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ComboboxRootProps<T>, P>) => Snippet;
+export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ComboboxRootProps<T>, P>;
+export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(props: ComboboxRootComponentProps<T, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ComboboxRootProps<T>;
     exports: {};

package/dist/components/combobox/combobox.d.ts

@@ -14,6 +14,6 @@ export { default as ItemText, type ComboboxItemTextProps as ItemTextProps, type
 export { default as Label, type ComboboxLabelProps as LabelProps, type ComboboxLabelBaseProps as LabelBaseProps, } from './combobox-label.svelte';
 export { default as List, type ComboboxListProps as ListProps, type ComboboxListBaseProps as ListBaseProps, } from './combobox-list.svelte';
 export { default as Positioner, type ComboboxPositionerProps, type ComboboxPositionerBaseProps, } from './combobox-positioner.svelte';
-export { default as Root, type ComboboxRootBaseProps as RootBaseProps, type ComboboxRootProps as RootProps, type ComboboxRootComponent as RootComponent, } from './combobox-root.svelte';
+export { default as Root, type ComboboxRootBaseProps as RootBaseProps, type ComboboxRootProps as RootProps, type ComboboxRootComponent as RootComponent, type ComboboxRootComponentProps as RootComponentProps, } from './combobox-root.svelte';
 export { default as RootProvider, type ComboboxRootProviderBaseProps as RootProviderBaseProps, type ComboboxRootProviderProps as RootProviderProps, type ComboboxRootProviderComponent as RootProviderComponent, } from './combobox-root-provider.svelte';
 export { default as Trigger, type ComboboxTriggerProps as TriggerProps, type ComboboxTriggerBaseProps as TriggerBaseProps, } from './combobox-trigger.svelte';

package/dist/components/combobox/index.d.ts

@@ -15,7 +15,7 @@ export { default as ComboboxItemText, type ComboboxItemTextProps, type ComboboxI
 export { default as ComboboxLabel, type ComboboxLabelProps, type ComboboxLabelBaseProps } from './combobox-label.svelte';
 export { default as ComboboxList, type ComboboxListProps, type ComboboxListBaseProps } from './combobox-list.svelte';
 export { default as ComboboxPositioner, type ComboboxPositionerProps, type ComboboxPositionerBaseProps, } from './combobox-positioner.svelte';
-export { default as ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps, type ComboboxRootComponent, } from './combobox-root.svelte';
+export { default as ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps, type ComboboxRootComponent, type ComboboxRootComponentProps, } from './combobox-root.svelte';
 export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, type ComboboxRootProviderComponent, } from './combobox-root-provider.svelte';
 export { default as ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerBaseProps, } from './combobox-trigger.svelte';
 export { comboboxAnatomy } from './combobox.anatomy';

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

@@ -9,10 +9,19 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
+  import type { HTMLInputAttributes } from 'svelte/elements'
 
-  let { ref = $bindable(null), ...props }: FieldInputProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: FieldInputProps = $props()
   const field = useFieldContext()
-  const mergedProps = $derived(mergeProps(field?.().getInputProps() ?? {}, props))
+
+  const nativeInputProps: HTMLInputAttributes = $derived({
+    value,
+    oninput(e) {
+      value = e.currentTarget.value
+    },
+  })
+
+  const mergedProps = $derived(mergeProps(field?.().getInputProps() ?? {}, nativeInputProps, props))
 </script>
 
 <Ark as="input" bind:ref {...mergedProps} />

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

@@ -3,6 +3,6 @@ export interface FieldInputBaseProps extends PolymorphicProps<'input'>, RefAttri
 }
 export interface FieldInputProps extends Assign<HTMLProps<'input'>, FieldInputBaseProps> {
 }
-declare const FieldInput: import("svelte").Component<FieldInputProps, {}, "ref">;
+declare const FieldInput: import("svelte").Component<FieldInputProps, {}, "ref" | "value">;
 type FieldInput = ReturnType<typeof FieldInput>;
 export default FieldInput;

package/dist/components/field/field-select.svelte

@@ -10,9 +10,21 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  let { ref = $bindable(null), ...props }: FieldSelectProps = $props()
+  let { ref = $bindable(null), value = $bindable(), multiple, ...props }: FieldSelectProps = $props()
+
   const field = useFieldContext()
-  const mergedProps = $derived(mergeProps(field?.().getSelectProps() ?? {}, props))
+
+  const nativeSelectProps: HTMLProps<'select'> = $derived({
+    value,
+    multiple,
+    oninput(e) {
+      value = multiple
+        ? Array.from(e.currentTarget.selectedOptions).map((option) => option.value)
+        : e.currentTarget.value
+    },
+  })
+
+  const mergedProps = $derived(mergeProps(field?.().getSelectProps() ?? {}, nativeSelectProps, props))
 </script>
 
 <Ark as="select" bind:ref {...mergedProps} />

package/dist/components/field/field-select.svelte.d.ts

@@ -3,6 +3,6 @@ export interface FieldSelectBaseProps extends PolymorphicProps<'select'>, RefAtt
 }
 export interface FieldSelectProps extends Assign<HTMLProps<'select'>, FieldSelectBaseProps> {
 }
-declare const FieldSelect: import("svelte").Component<FieldSelectProps, {}, "ref">;
+declare const FieldSelect: import("svelte").Component<FieldSelectProps, {}, "ref" | "value">;
 type FieldSelect = ReturnType<typeof FieldSelect>;
 export default FieldSelect;

package/dist/components/field/field-textarea.svelte

@@ -17,20 +17,26 @@
   import { Ark } from '../factory'
   import { useFieldContext } from './use-field-context'
 
-  let { ref = $bindable(null), autoresize, ...props }: FieldTextareaProps = $props()
+  let { ref = $bindable(null), value = $bindable(), autoresize, ...props }: FieldTextareaProps = $props()
 
   let textareaRef = $state<HTMLTextAreaElement | null>(null)
-
-  const field = useFieldContext()
-  const mergedProps = $derived(
-    mergeProps(field?.().getTextareaProps() ?? {}, { style: { resize: autoresize ? 'none' : undefined } }, props),
-  )
-
   $effect(() => {
     if (!autoresize) return
     return autoresizeTextarea(textareaRef)
   })
 
+  const field = useFieldContext()
+
+  const nativeTextareaProps: HTMLProps<'textarea'> = $derived({
+    value,
+    oninput(e) {
+      value = e.currentTarget.value
+    },
+    style: autoresize ? 'resize: none' : undefined,
+  })
+
+  const mergedProps = $derived(mergeProps(field?.().getTextareaProps() ?? {}, nativeTextareaProps, props))
+
   function setNode(node: HTMLTextAreaElement | null) {
     textareaRef = node
   }

package/dist/components/field/field-textarea.svelte.d.ts

@@ -8,6 +8,6 @@ export interface FieldTextareaBaseProps extends PolymorphicProps<'textarea'>, Re
 }
 export interface FieldTextareaProps extends Assign<HTMLProps<'textarea'>, FieldTextareaBaseProps> {
 }
-declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "ref">;
+declare const FieldTextarea: import("svelte").Component<FieldTextareaProps, {}, "ref" | "value">;
 type FieldTextarea = ReturnType<typeof FieldTextarea>;
 export default FieldTextarea;

package/dist/components/listbox/index.d.ts

@@ -11,7 +11,7 @@ export { default as ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps,
 export { default as ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, } from './listbox-item-indicator.svelte';
 export { default as ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps, } from './listbox-item-text.svelte';
 export { default as ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label.svelte';
-export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, } from './listbox-root.svelte';
+export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, type ListboxRootComponentProps, } from './listbox-root.svelte';
 export { default as ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, type ListboxRootProviderComponent, } from './listbox-root-provider.svelte';
 export { default as ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps, } from './listbox-value-text.svelte';
 export { listboxAnatomy } from './listbox.anatomy.js';

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

@@ -9,8 +9,13 @@
   export interface ListboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {}
 
+  export type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
+    ListboxRootProps<T>,
+    P
+  >
+
   export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(
-    props: Assign<ListboxRootProps<T>, P>,
+    props: ListboxRootComponentProps<T, P>,
   ) => Snippet
 </script>
 

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

@@ -6,7 +6,8 @@ export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListb
 }
 export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
 }
-export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProps<T>, P>) => Snippet;
+export type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ListboxRootProps<T>, P>;
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: ListboxRootComponentProps<T, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ListboxRootProps<T>;
     exports: {};

package/dist/components/listbox/listbox.d.ts

@@ -9,6 +9,6 @@ export { default as ItemGroupLabel, type ListboxItemGroupLabelBaseProps as ItemG
 export { default as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator.svelte';
 export { default as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text.svelte';
 export { default as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label.svelte';
-export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, } from './listbox-root.svelte';
+export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, type ListboxRootComponentProps as RootComponentProps, } from './listbox-root.svelte';
 export { default as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, type ListboxRootProviderComponent as RootProviderComponent, } from './listbox-root-provider.svelte';
 export { default as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text.svelte';

package/dist/components/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, PageUrlDetails as PaginationPageUrlDetails, } from '@zag-js/pagination';
 export { default as PaginationContext, type PaginationContextProps } from './pagination-context.svelte';
 export { default as PaginationEllipsis, type PaginationEllipsisBaseProps, type PaginationEllipsisProps, } from './pagination-ellipsis.svelte';
 export { default as PaginationItem, type PaginationItemBaseProps, type PaginationItemProps, } from './pagination-item.svelte';

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

@@ -21,6 +21,7 @@
       'count',
       'defaultPage',
       'defaultPageSize',
+      'getPageUrl',
       'id',
       'ids',
       'onPageChange',

package/dist/components/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails, PageUrlDetails } from '@zag-js/pagination';
 export { default as Context, type PaginationContextProps as ContextProps } from './pagination-context.svelte';
 export { default as Ellipsis, type PaginationEllipsisBaseProps as EllipsisBaseProps, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis.svelte';
 export { default as Item, type PaginationItemBaseProps as ItemBaseProps, type PaginationItemProps as ItemProps, } from './pagination-item.svelte';

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

@@ -10,9 +10,18 @@
   import { Ark } from '../factory'
   import { usePasswordInputContext } from './use-password-input-context'
 
-  let { ref = $bindable(null), ...props }: PasswordInputInputProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: PasswordInputInputProps = $props()
+
   const passwordInput = usePasswordInputContext()
-  const mergedProps = $derived(mergeProps(passwordInput().getInputProps(), props))
+
+  const nativeInputProps: HTMLProps<'input'> = $derived({
+    value,
+    oninput(e) {
+      value = e.currentTarget.value
+    },
+  })
+
+  const mergedProps = $derived(mergeProps(passwordInput().getInputProps(), nativeInputProps, props))
 </script>
 
 <Ark as="input" bind:ref {...mergedProps} />

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

@@ -3,6 +3,6 @@ export interface PasswordInputInputBaseProps extends PolymorphicProps<'input'>,
 }
 export interface PasswordInputInputProps extends Assign<HTMLProps<'input'>, PasswordInputInputBaseProps> {
 }
-declare const PasswordInputInput: import("svelte").Component<PasswordInputInputProps, {}, "ref">;
+declare const PasswordInputInput: import("svelte").Component<PasswordInputInputProps, {}, "ref" | "value">;
 type PasswordInputInput = ReturnType<typeof PasswordInputInput>;
 export default PasswordInputInput;

package/dist/components/presence/use-presence.svelte.js

@@ -16,8 +16,6 @@ export const usePresence = (props) => {
     const setNode = (node) => {
         if (!node)
             return;
-        if (service.refs.get('node'))
-            return;
         service.send({ type: 'NODE.SET', node });
     };
     const unmounted = $derived((!api.present && !wasEverPresent && renderStrategyProps.lazyMount) ||

package/dist/components/select/index.d.ts

@@ -15,7 +15,7 @@ export { default as SelectItemText, type SelectItemTextBaseProps, type SelectIte
 export { default as SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label.svelte';
 export { default as SelectList, type SelectListBaseProps, type SelectListProps } from './select-list.svelte';
 export { default as SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps, } from './select-positioner.svelte';
-export { default as SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent, } from './select-root.svelte';
+export { default as SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent, type SelectRootComponentProps, } from './select-root.svelte';
 export { default as SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, type SelectRootProviderComponent, } from './select-root-provider.svelte';
 export { default as SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger.svelte';
 export { default as SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps, } from './select-value-text.svelte';

package/dist/components/select/select-hidden-select.svelte

@@ -16,8 +16,11 @@
 </script>
 
 <Ark as="select" bind:ref {...mergedProps}>
+  {#if select().value.length === 0}
+    <option value=""></option>
+  {/if}
   {#each select().collection.items as item}
-    <option value={select().collection.stringifyItem(item)}>
+    <option value={select().collection.getItemValue(item) ?? ''} disabled={select().collection.getItemDisabled(item)}>
       {select().collection.stringifyItem(item)}
     </option>
   {/each}

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

@@ -13,7 +13,12 @@
   export interface SelectRootProps<T extends CollectionItem = CollectionItem>
     extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {}
 
-  export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P>) => Snippet
+  export type SelectRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
+    SelectRootProps<T>,
+    P
+  >
+
+  export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: SelectRootComponentProps<T, P>) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">

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

@@ -6,7 +6,8 @@ export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem>
 }
 export interface SelectRootProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootBaseProps<T>> {
 }
-export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProps<T>, P>) => Snippet;
+export type SelectRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<SelectRootProps<T>, P>;
+export type SelectRootComponent<P = {}> = <T extends CollectionItem>(props: SelectRootComponentProps<T, P>) => Snippet;
 import { type UsePresenceProps } from '../presence';
 declare function $$render<T extends CollectionItem = CollectionItem>(): {
     props: SelectRootProps<T>;

package/dist/components/select/select.d.ts

@@ -16,6 +16,6 @@ export { default as Label, type SelectLabelProps as LabelProps } from './select-
 export { default as List, type SelectListProps as ListProps } from './select-list.svelte';
 export { default as Positioner, type SelectPositionerProps as PositionerProps } from './select-positioner.svelte';
 export { default as RootProvider, type SelectRootProviderBaseProps as RootProviderBaseProps, type SelectRootProviderProps as RootProviderProps, type SelectRootProviderComponent as RootProviderComponent, } from './select-root-provider.svelte';
-export { default as Root, type SelectRootBaseProps as RootBaseProps, type SelectRootProps as RootProps, type SelectRootComponent as RootComponent, } from './select-root.svelte';
+export { default as Root, type SelectRootBaseProps as RootBaseProps, type SelectRootProps as RootProps, type SelectRootComponent as RootComponent, type SelectRootComponentProps as RootComponentProps, } from './select-root.svelte';
 export { default as Trigger, type SelectTriggerProps as TriggerProps } from './select-trigger.svelte';
 export { default as ValueText, type SelectValueTextProps as ValueTextProps } from './select-value-text.svelte';

package/dist/components/tree-view/index.d.ts

@@ -1,4 +1,4 @@
-export type { ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, NodeState as TreeViewNodeState, NodeProps as TreeViewNodeProps, } from '@zag-js/tree-view';
+export type { CheckedChangeDetails as TreeViewCheckedChangeDetails, ExpandedChangeDetails as TreeViewExpandedChangeDetails, FocusChangeDetails as TreeViewFocusChangeDetails, LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenErrorDetails as TreeViewLoadChildrenErrorDetails, NodeProps as TreeViewNodeProps, NodeState as TreeViewNodeState, RenameCompleteDetails as TreeViewRenameCompleteDetails, RenameStartDetails as TreeViewRenameStartDetails, SelectionChangeDetails as TreeViewSelectionChangeDetails, } from '@zag-js/tree-view';
 export { createFileTreeCollection, createTreeCollection, type TreeCollection, type TreeNode } from '../collection';
 export { default as TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps, } from './tree-view-branch.svelte';
 export { default as TreeViewBranchContent, type TreeViewBranchContentBaseProps, type TreeViewBranchContentProps, } from './tree-view-branch-content.svelte';
@@ -15,8 +15,9 @@ export { default as TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLab
 export { default as TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.svelte';
 export { default as TreeViewNodeCheckbox, type TreeViewNodeCheckboxBaseProps, type TreeViewNodeCheckboxProps, } from './tree-view-node-checkbox.svelte';
 export { default as TreeViewNodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
+export { default as TreeViewNodeRenameInput, type TreeViewNodeRenameInputBaseProps, type TreeViewNodeRenameInputProps, } from './tree-view-node-rename-input.svelte';
 export { default as TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.svelte';
-export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootComponent, type TreeViewRootProps, } from './tree-view-root.svelte';
+export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootComponent, type TreeViewRootComponentProps, type TreeViewRootProps, } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderComponent, type TreeViewRootProviderProps, } from './tree-view-root-provider.svelte';
 export { default as TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree.svelte';
 export { treeViewAnatomy } from './tree-view.anatomy';

package/dist/components/tree-view/index.js

@@ -14,6 +14,7 @@ export { default as TreeViewLabel, } from './tree-view-label.svelte';
 export { default as TreeViewNodeContext } from './tree-view-node-context.svelte';
 export { default as TreeViewNodeCheckbox, } from './tree-view-node-checkbox.svelte';
 export { default as TreeViewNodeCheckboxIndicator, } from './tree-view-node-checkbox-indicator.svelte';
+export { default as TreeViewNodeRenameInput, } from './tree-view-node-rename-input.svelte';
 export { default as TreeViewNodeProvider, } from './tree-view-node-provider.svelte';
 export { default as TreeViewRoot, } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, } from './tree-view-root-provider.svelte';

package/dist/components/tree-view/tree-view-node-rename-input.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface TreeViewNodeRenameInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface TreeViewNodeRenameInputProps extends Assign<HTMLProps<'input'>, TreeViewNodeRenameInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  let { ref = $bindable(null), ...props }: TreeViewNodeRenameInputProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+  const mergedProps = $derived(mergeProps(treeView().getNodeRenameInputProps(nodeProps()), props))
+</script>
+
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/tree-view/tree-view-node-rename-input.svelte.d.ts

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

package/dist/components/tree-view/tree-view-root.svelte

@@ -12,7 +12,9 @@
 
   export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {}
 
-  export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProps<T>, P>) => Snippet
+  export type TreeViewRootComponentProps<T extends TreeNode = TreeNode, P = {}> = Assign<TreeViewRootProps<T>, P>
+
+  export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: TreeViewRootComponentProps<T, P>) => Snippet
 </script>
 
 <script lang="ts" generics="T extends TreeNode">

package/dist/components/tree-view/tree-view-root.svelte.d.ts

@@ -6,7 +6,8 @@ export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewPr
 }
 export interface TreeViewRootProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootBaseProps<T>> {
 }
-export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProps<T>, P>) => Snippet;
+export type TreeViewRootComponentProps<T extends TreeNode = TreeNode, P = {}> = Assign<TreeViewRootProps<T>, P>;
+export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: TreeViewRootComponentProps<T, P>) => Snippet;
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 declare function $$render<T extends TreeNode>(): {
     props: TreeViewRootProps<T>;

package/dist/components/tree-view/tree-view-split-props.d.ts

@@ -1,3 +1,3 @@
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
-export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "selectionMode" | "focusedValue" | "defaultFocusedValue" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "typeahead" | "loadChildren">];
+export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "selectionMode" | "focusedValue" | "defaultFocusedValue" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "canRename" | "onRenameStart" | "onBeforeRename" | "onRenameComplete" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "typeahead" | "loadChildren">];

package/dist/components/tree-view/tree-view-split-props.js

@@ -2,6 +2,7 @@ import { createSplitProps } from '../../utils/create-split-props';
 const splitFn = createSplitProps();
 export function splitTreeViewProps(props) {
     return splitFn(props, [
+        'canRename',
         'checkedValue',
         'collection',
         'defaultCheckedValue',
@@ -14,11 +15,14 @@ export function splitTreeViewProps(props) {
         'id',
         'ids',
         'loadChildren',
+        'onBeforeRename',
         'onCheckedChange',
         'onExpandedChange',
         'onFocusChange',
         'onLoadChildrenComplete',
         'onLoadChildrenError',
+        'onRenameComplete',
+        'onRenameStart',
         'onSelectionChange',
         'selectedValue',
         'selectionMode',

package/dist/components/tree-view/tree-view.d.ts

@@ -1,4 +1,4 @@
-export type { ExpandedChangeDetails, FocusChangeDetails, SelectionChangeDetails, LoadChildrenDetails, LoadChildrenCompleteDetails, NodeState, NodeProps, } from '@zag-js/tree-view';
+export type { CheckedChangeDetails, ExpandedChangeDetails, FocusChangeDetails, LoadChildrenCompleteDetails, LoadChildrenDetails, LoadChildrenErrorDetails, NodeProps, NodeState, RenameCompleteDetails, RenameStartDetails, SelectionChangeDetails, } from '@zag-js/tree-view';
 export { default as Branch, type TreeViewBranchBaseProps as BranchBaseProps, type TreeViewBranchProps as BranchProps, } from './tree-view-branch.svelte';
 export { default as BranchContent, type TreeViewBranchContentBaseProps as BranchContentBaseProps, type TreeViewBranchContentProps as BranchContentProps, } from './tree-view-branch-content.svelte';
 export { default as BranchControl, type TreeViewBranchControlBaseProps as BranchControlBaseProps, type TreeViewBranchControlProps as BranchControlProps, } from './tree-view-branch-control.svelte';
@@ -13,8 +13,9 @@ export { default as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProp
 export { default as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label.svelte';
 export { default as NodeCheckbox, type TreeViewNodeCheckboxBaseProps as NodeCheckboxBaseProps, type TreeViewNodeCheckboxProps as NodeCheckboxProps, } from './tree-view-node-checkbox.svelte';
 export { default as NodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
+export { default as NodeRenameInput, type TreeViewNodeRenameInputBaseProps as NodeRenameInputBaseProps, type TreeViewNodeRenameInputProps as NodeRenameInputProps, } from './tree-view-node-rename-input.svelte';
 export { default as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.svelte';
 export { default as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.svelte';
-export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootComponent as RootComponent, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
+export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootComponent as RootComponent, type TreeViewRootComponentProps as RootComponentProps, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
 export { default as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderComponent as RootProviderComponent, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-provider.svelte';
 export { default as Tree, type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree.svelte';

package/dist/components/tree-view/tree-view.js

@@ -12,6 +12,7 @@ export { default as ItemText, } from './tree-view-item-text.svelte';
 export { default as Label, } from './tree-view-label.svelte';
 export { default as NodeCheckbox, } from './tree-view-node-checkbox.svelte';
 export { default as NodeCheckboxIndicator, } from './tree-view-node-checkbox-indicator.svelte';
+export { default as NodeRenameInput, } from './tree-view-node-rename-input.svelte';
 export { default as NodeContext, } from './tree-view-node-context.svelte';
 export { default as NodeProvider, } from './tree-view-node-provider.svelte';
 export { default as Root, } from './tree-view-root.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.10.1",
+  "version": "5.11.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -136,91 +136,92 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.9.0",
-    "@zag-js/accordion": "1.24.2",
-    "@zag-js/anatomy": "1.24.2",
-    "@zag-js/angle-slider": "1.24.2",
-    "@zag-js/async-list": "1.24.2",
-    "@zag-js/auto-resize": "1.24.2",
-    "@zag-js/avatar": "1.24.2",
-    "@zag-js/bottom-sheet": "1.24.2",
-    "@zag-js/carousel": "1.24.2",
-    "@zag-js/checkbox": "1.24.2",
-    "@zag-js/clipboard": "1.24.2",
-    "@zag-js/collapsible": "1.24.2",
-    "@zag-js/collection": "1.24.2",
-    "@zag-js/color-picker": "1.24.2",
-    "@zag-js/color-utils": "1.24.2",
-    "@zag-js/combobox": "1.24.2",
-    "@zag-js/core": "1.24.2",
-    "@zag-js/date-picker": "1.24.2",
-    "@zag-js/date-utils": "1.24.2",
-    "@zag-js/dialog": "1.24.2",
-    "@zag-js/dom-query": "1.24.2",
-    "@zag-js/editable": "1.24.2",
-    "@zag-js/file-upload": "1.24.2",
-    "@zag-js/file-utils": "1.24.2",
-    "@zag-js/floating-panel": "1.24.2",
-    "@zag-js/focus-trap": "1.24.2",
-    "@zag-js/highlight-word": "1.24.2",
-    "@zag-js/hover-card": "1.24.2",
-    "@zag-js/i18n-utils": "1.24.2",
-    "@zag-js/json-tree-utils": "1.24.2",
-    "@zag-js/listbox": "1.24.2",
-    "@zag-js/menu": "1.24.2",
-    "@zag-js/number-input": "1.24.2",
-    "@zag-js/pagination": "1.24.2",
-    "@zag-js/password-input": "1.24.2",
-    "@zag-js/pin-input": "1.24.2",
-    "@zag-js/popover": "1.24.2",
-    "@zag-js/presence": "1.24.2",
-    "@zag-js/progress": "1.24.2",
-    "@zag-js/qr-code": "1.24.2",
-    "@zag-js/radio-group": "1.24.2",
-    "@zag-js/rating-group": "1.24.2",
-    "@zag-js/scroll-area": "1.24.2",
-    "@zag-js/select": "1.24.2",
-    "@zag-js/signature-pad": "1.24.2",
-    "@zag-js/slider": "1.24.2",
-    "@zag-js/splitter": "1.24.2",
-    "@zag-js/steps": "1.24.2",
-    "@zag-js/svelte": "1.24.2",
-    "@zag-js/switch": "1.24.2",
-    "@zag-js/tabs": "1.24.2",
-    "@zag-js/tags-input": "1.24.2",
-    "@zag-js/timer": "1.24.2",
-    "@zag-js/toast": "1.24.2",
-    "@zag-js/toggle": "1.24.2",
-    "@zag-js/toggle-group": "1.24.2",
-    "@zag-js/tooltip": "1.24.2",
-    "@zag-js/tour": "1.24.2",
-    "@zag-js/tree-view": "1.24.2",
-    "@zag-js/types": "1.24.2",
-    "@zag-js/utils": "1.24.2"
+    "@internationalized/date": "3.10.0",
+    "@zag-js/accordion": "1.26.1",
+    "@zag-js/anatomy": "1.26.1",
+    "@zag-js/angle-slider": "1.26.1",
+    "@zag-js/async-list": "1.26.1",
+    "@zag-js/auto-resize": "1.26.1",
+    "@zag-js/avatar": "1.26.1",
+    "@zag-js/bottom-sheet": "1.26.1",
+    "@zag-js/carousel": "1.26.1",
+    "@zag-js/checkbox": "1.26.1",
+    "@zag-js/clipboard": "1.26.1",
+    "@zag-js/collapsible": "1.26.1",
+    "@zag-js/collection": "1.26.1",
+    "@zag-js/color-picker": "1.26.1",
+    "@zag-js/color-utils": "1.26.1",
+    "@zag-js/combobox": "1.26.1",
+    "@zag-js/core": "1.26.1",
+    "@zag-js/date-picker": "1.26.1",
+    "@zag-js/date-utils": "1.26.1",
+    "@zag-js/dialog": "1.26.1",
+    "@zag-js/dom-query": "1.26.1",
+    "@zag-js/editable": "1.26.1",
+    "@zag-js/file-upload": "1.26.1",
+    "@zag-js/file-utils": "1.26.1",
+    "@zag-js/floating-panel": "1.26.1",
+    "@zag-js/focus-trap": "1.26.1",
+    "@zag-js/highlight-word": "1.26.1",
+    "@zag-js/hover-card": "1.26.1",
+    "@zag-js/i18n-utils": "1.26.1",
+    "@zag-js/json-tree-utils": "1.26.1",
+    "@zag-js/listbox": "1.26.1",
+    "@zag-js/menu": "1.26.1",
+    "@zag-js/number-input": "1.26.1",
+    "@zag-js/pagination": "1.26.1",
+    "@zag-js/password-input": "1.26.1",
+    "@zag-js/pin-input": "1.26.1",
+    "@zag-js/popover": "1.26.1",
+    "@zag-js/presence": "1.26.1",
+    "@zag-js/progress": "1.26.1",
+    "@zag-js/qr-code": "1.26.1",
+    "@zag-js/radio-group": "1.26.1",
+    "@zag-js/rating-group": "1.26.1",
+    "@zag-js/scroll-area": "1.26.1",
+    "@zag-js/select": "1.26.1",
+    "@zag-js/signature-pad": "1.26.1",
+    "@zag-js/slider": "1.26.1",
+    "@zag-js/splitter": "1.26.1",
+    "@zag-js/steps": "1.26.1",
+    "@zag-js/svelte": "1.26.1",
+    "@zag-js/switch": "1.26.1",
+    "@zag-js/tabs": "1.26.1",
+    "@zag-js/tags-input": "1.26.1",
+    "@zag-js/timer": "1.26.1",
+    "@zag-js/toast": "1.26.1",
+    "@zag-js/toggle": "1.26.1",
+    "@zag-js/toggle-group": "1.26.1",
+    "@zag-js/tooltip": "1.26.1",
+    "@zag-js/tour": "1.26.1",
+    "@zag-js/tree-view": "1.26.1",
+    "@zag-js/types": "1.26.1",
+    "@zag-js/utils": "1.26.1"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.1.7",
-    "@storybook/sveltekit": "9.1.7",
-    "@sveltejs/adapter-auto": "6.1.0",
-    "@sveltejs/kit": "2.42.2",
-    "@sveltejs/package": "2.5.3",
-    "@sveltejs/vite-plugin-svelte": "6.2.0",
-    "@tanstack/svelte-form": "1.23.0",
+    "@storybook/addon-a11y": "9.1.10",
+    "@storybook/sveltekit": "9.1.10",
+    "@sveltejs/adapter-auto": "6.1.1",
+    "@sveltejs/kit": "2.44.0",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@tanstack/svelte-form": "1.23.5",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
     "@vitest/coverage-v8": "3.2.4",
+    "check-password-strength": "3.0.0",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
     "jsdom": "26.1.0",
     "lucide-svelte": "0.544.0",
-    "storybook": "9.1.7",
-    "svelte": "5.39.4",
-    "svelte-check": "4.3.1",
+    "storybook": "9.1.10",
+    "svelte": "5.39.9",
+    "svelte-check": "4.3.2",
     "tslib": "2.8.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.6",
+    "typescript": "5.9.3",
+    "vite": "7.1.9",
     "vitest": "3.2.4",
     "vitest-axe": "1.0.0-pre.5"
   },