@ark-ui/svelte 5.7.0 → 5.8.0

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

@@ -18,6 +18,10 @@
   }
   export interface ComboboxRootProviderProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {}
+
+  export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ComboboxRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">

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

@@ -11,6 +11,7 @@ export interface ComboboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ComboboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ComboboxRootProviderBaseProps<T>> {
 }
+export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ComboboxRootProviderProps<T>, P>) => Snippet;
 declare function $$render<T extends CollectionItem>(): {
     props: ComboboxRootProviderProps<T>;
     exports: {};

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection'
   import type { UsePresenceProps } from '../presence'
   import type { UseComboboxProps } from './use-combobox.svelte'
@@ -12,6 +13,10 @@
 
   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
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">

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

@@ -1,4 +1,5 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection';
 import type { UsePresenceProps } from '../presence';
 import type { UseComboboxProps } from './use-combobox.svelte';
@@ -6,6 +7,7 @@ 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;
 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, } from './combobox-root.svelte';
-export { default as RootProvider, type ComboboxRootProviderBaseProps as RootProviderBaseProps, type ComboboxRootProviderProps as RootProviderProps, } from './combobox-root-provider.svelte';
+export { default as Root, type ComboboxRootBaseProps as RootBaseProps, type ComboboxRootProps as RootProps, type ComboboxRootComponent as RootComponent, } 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,8 +15,8 @@ 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 } from './combobox-root.svelte';
-export { default as ComboboxRootProvider, type ComboboxRootProviderBaseProps, type ComboboxRootProviderProps, } from './combobox-root-provider.svelte';
+export { default as ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps, type ComboboxRootComponent, } 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';
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox.svelte';

package/dist/components/combobox/index.js

@@ -14,7 +14,7 @@ export { default as ComboboxItemText, } from './combobox-item-text.svelte';
 export { default as ComboboxLabel } from './combobox-label.svelte';
 export { default as ComboboxList } from './combobox-list.svelte';
 export { default as ComboboxPositioner, } from './combobox-positioner.svelte';
-export { default as ComboboxRoot } from './combobox-root.svelte';
+export { default as ComboboxRoot, } from './combobox-root.svelte';
 export { default as ComboboxRootProvider, } from './combobox-root-provider.svelte';
 export { default as ComboboxTrigger, } from './combobox-trigger.svelte';
 export { comboboxAnatomy } from './combobox.anatomy';

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

@@ -67,6 +67,7 @@ export const useField = (inProps = {}) => {
         'data-disabled': dataAttr(disabled),
         'data-invalid': dataAttr(invalid),
         'data-readonly': dataAttr(readOnly),
+        'data-required': dataAttr(required),
         for: controlId,
     });
     const getControlProps = () => ({

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

@@ -11,8 +11,8 @@ 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 } from './listbox-root.svelte';
-export { default as ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, } from './listbox-root-provider.svelte';
+export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, } 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';
 export { useListbox, type UseListboxProps, type UseListboxReturn } from './use-listbox.svelte.js';

package/dist/components/listbox/index.js

@@ -10,7 +10,7 @@ export { default as ListboxItemGroupLabel, } from './listbox-item-group-label.sv
 export { default as ListboxItemIndicator, } from './listbox-item-indicator.svelte';
 export { default as ListboxItemText, } from './listbox-item-text.svelte';
 export { default as ListboxLabel } from './listbox-label.svelte';
-export { default as ListboxRoot } from './listbox-root.svelte';
+export { default as ListboxRoot, } from './listbox-root.svelte';
 export { default as ListboxRootProvider, } from './listbox-root-provider.svelte';
 export { default as ListboxValueText, } from './listbox-value-text.svelte';
 export { listboxAnatomy } from './listbox.anatomy.js';

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

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
   interface RootProviderProps<T extends CollectionItem> {
     value: UseListboxReturn<T>
   }
@@ -8,6 +10,10 @@
       RootProviderProps<T> {}
   export interface ListboxRootProviderProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {}
+
+  export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<ListboxRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem">

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface RootProviderProps<T extends CollectionItem> {
     value: UseListboxReturn<T>;
 }
@@ -5,6 +6,7 @@ export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends
 }
 export interface ListboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {
 }
+export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProviderProps<T>, P>) => Snippet;
 import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
 import type { CollectionItem } from '../collection/index.js';
 import type { UseListboxReturn } from './use-listbox.svelte.js';

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

@@ -1,16 +1,26 @@
-<script lang="ts" generics="T extends CollectionItem">
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
   import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
-  import { mergeProps } from '@zag-js/svelte'
   import type { CollectionItem } from '../collection/index.js'
-  import { Ark } from '../factory/index.js'
-  import { ListboxProvider } from './use-listbox-context.js'
-  import { type UseListboxProps, useListbox } from './use-listbox.svelte.js'
-  import { createSplitProps } from '../../utils/create-split-props.js'
+  import type { UseListboxProps } from './use-listbox.svelte.js'
 
   export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {}
   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
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { ListboxProvider } from './use-listbox-context.js'
+  import { useListbox } from './use-listbox.svelte.js'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+
   let { highlightedValue = $bindable(), value = $bindable(), ...props }: ListboxRootProps<T> = $props()
   const providedId = $props.id()
 

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

@@ -1,10 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
 import type { CollectionItem } from '../collection/index.js';
-import { type UseListboxProps } from './use-listbox.svelte.js';
+import type { UseListboxProps } from './use-listbox.svelte.js';
 export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {
 }
 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;
 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, } from './listbox-root.svelte';
-export { default as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider.svelte';
+export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, type ListboxRootComponent as RootComponent, } 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/menu/menu-trigger-item.svelte

@@ -9,11 +9,14 @@
   import { mergeProps } from '@zag-js/svelte'
   import { Ark } from '../factory'
   import { useMenuTriggerItemContext } from './use-menu-trigger-item-context'
+  import { MenuItemPropsProvider } from './use-menu-option-item-props-context'
 
   let { ref = $bindable(null), ...props }: MenuTriggerItemProps = $props()
 
   const getTriggerItemProps = useMenuTriggerItemContext()
   const mergedProps = $derived(mergeProps(getTriggerItemProps?.() ?? {}, props))
+
+  MenuItemPropsProvider(() => ({ value: mergedProps['data-value'] }))
 </script>
 
 <Ark as="div" bind:ref {...mergedProps} />

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

@@ -15,8 +15,8 @@ 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 } from './select-root.svelte';
-export { default as SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider.svelte';
+export { default as SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent, } 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';
 export { selectAnatomy } from './select.anatomy';

package/dist/components/select/index.js

@@ -14,7 +14,7 @@ export { default as SelectItemText, } from './select-item-text.svelte';
 export { default as SelectLabel } from './select-label.svelte';
 export { default as SelectList } from './select-list.svelte';
 export { default as SelectPositioner, } from './select-positioner.svelte';
-export { default as SelectRoot } from './select-root.svelte';
+export { default as SelectRoot, } from './select-root.svelte';
 export { default as SelectRootProvider, } from './select-root-provider.svelte';
 export { default as SelectTrigger } from './select-trigger.svelte';
 export { default as SelectValueText, } from './select-value-text.svelte';

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

@@ -12,6 +12,10 @@
 
   export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem>
     extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {}
+
+  export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(
+    props: Assign<SelectRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">
@@ -19,6 +23,7 @@
   import { Ark } from '../factory'
   import { SelectProvider } from './use-select-context'
   import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
+  import type { Snippet } from 'svelte'
 
   let { ref = $bindable(null), ...props }: SelectRootProviderProps<T> = $props()
 

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

@@ -6,7 +6,9 @@ export interface SelectRootProviderBaseProps<T extends CollectionItem = Collecti
 }
 export interface SelectRootProviderProps<T extends CollectionItem = CollectionItem> extends Assign<HTMLProps<'div'>, SelectRootProviderBaseProps<T>> {
 }
+export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(props: Assign<SelectRootProviderProps<T>, P>) => Snippet;
 import { type UsePresenceProps } from '../presence';
+import type { Snippet } from 'svelte';
 declare function $$render<T extends CollectionItem = CollectionItem>(): {
     props: SelectRootProviderProps<T>;
     exports: {};

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection'
   import type { UseSelectProps } from './use-select.svelte'
 
@@ -11,6 +12,8 @@
 
   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
 </script>
 
 <script lang="ts" generics="T extends CollectionItem = CollectionItem">

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

@@ -1,10 +1,12 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection';
 import type { UseSelectProps } from './use-select.svelte';
 export interface SelectRootBaseProps<T extends CollectionItem = CollectionItem> extends UseSelectProps<T>, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
 }
 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;
 import { type UsePresenceProps } from '../presence';
 declare function $$render<T extends CollectionItem = CollectionItem>(): {
     props: SelectRootProps<T>;

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

@@ -15,7 +15,7 @@ export { default as Item, type SelectItemProps as ItemProps } from './select-ite
 export { default as Label, type SelectLabelProps as LabelProps } from './select-label.svelte';
 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, } from './select-root-provider.svelte';
-export { default as Root, type SelectRootBaseProps as RootBaseProps, type SelectRootProps as RootProps, } from './select-root.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 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

@@ -16,8 +16,8 @@ export { default as TreeViewNodeContext, type TreeViewNodeContextProps } from '.
 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 TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.svelte';
-export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root.svelte';
-export { default as TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderProps, } from './tree-view-root-provider.svelte';
+export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootComponent, 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';
 export { useTreeViewContext } from './use-tree-view-context';

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

@@ -15,7 +15,7 @@ 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 TreeViewNodeProvider, } from './tree-view-node-provider.svelte';
-export { default as TreeViewRoot } from './tree-view-root.svelte';
+export { default as TreeViewRoot, } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, } from './tree-view-root-provider.svelte';
 export { default as TreeViewTree } from './tree-view-tree.svelte';
 export { treeViewAnatomy } from './tree-view.anatomy';

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewReturn } from './use-tree-view.svelte'
 
@@ -11,6 +12,10 @@
   }
   export interface TreeViewRootProviderProps<T extends TreeNode>
     extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {}
+
+  export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(
+    props: Assign<TreeViewRootProviderProps<T>, P>,
+  ) => Snippet
 </script>
 
 <script lang="ts" generics="T extends TreeNode">

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

@@ -1,4 +1,5 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewReturn } from './use-tree-view.svelte';
 export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
@@ -6,6 +7,7 @@ export interface TreeViewRootProviderBaseProps<T extends TreeNode> extends Rende
 }
 export interface TreeViewRootProviderProps<T extends TreeNode> extends Assign<HTMLProps<'div'>, TreeViewRootProviderBaseProps<T>> {
 }
+export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProviderProps<T>, P>) => Snippet;
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 declare function $$render<T extends TreeNode>(): {
     props: TreeViewRootProviderProps<T>;

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
   import type { TreeNode } from '../collection'
   import type { UseTreeViewProps } from './use-tree-view.svelte'
 
@@ -10,6 +11,8 @@
       RefAttribute {}
 
   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
 </script>
 
 <script lang="ts" generics="T extends TreeNode">

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

@@ -1,10 +1,12 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
 export interface TreeViewRootBaseProps<T extends TreeNode> extends UseTreeViewProps<T>, RenderStrategyProps, PolymorphicProps<'div'>, RefAttribute {
 }
 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;
 import { type RenderStrategyProps } from '../../utils/render-strategy';
 declare function $$render<T extends TreeNode>(): {
     props: TreeViewRootProps<T>;

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

@@ -15,6 +15,6 @@ export { default as NodeCheckbox, type TreeViewNodeCheckboxBaseProps as NodeChec
 export { default as NodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.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 TreeViewRootProps as RootProps, } from './tree-view-root.svelte';
-export { default as RootProvider, type TreeViewRootProviderBaseProps as RootProviderBaseProps, type TreeViewRootProviderProps as RootProviderProps, } from './tree-view-root-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 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/lucide-optimize.d.ts

@@ -0,0 +1,34 @@
+/**
+ * SourceMap interface for transformation output
+ */
+interface SourceMap {
+    version: number;
+    sources: string[];
+    names: string[];
+    sourceRoot?: string;
+    sourcesContent?: string[];
+    mappings: string;
+    file: string;
+}
+/**
+ * Plugin interface matching Vite/Rollup plugin structure
+ */
+interface SveltePlugin {
+    name: string;
+    transform: (code: string, id: string) => TransformResult | null | undefined;
+}
+/**
+ * Result of the transform operation
+ */
+interface TransformResult {
+    code: string;
+    map?: SourceMap | null;
+}
+/**
+ * Creates a Vite/Svelte plugin that optimizes lucide-svelte imports by converting
+ * destructured imports to direct imports for better tree-shaking
+ *
+ * @returns A Svelte plugin that transforms lucide-svelte imports
+ */
+export declare function lucideOptimizeImports(): SveltePlugin;
+export {};

package/dist/lucide-optimize.js

@@ -0,0 +1,89 @@
+// Pre-compile regex for better performance
+const LUCIDE_IMPORT_PATTERN = /([ \t]*)import\s+\{\s*([^}]+)\s*\}\s+from\s+['"]lucide-svelte['"]/g;
+/**
+ * Creates a Vite/Svelte plugin that optimizes lucide-svelte imports by converting
+ * destructured imports to direct imports for better tree-shaking
+ *
+ * @returns A Svelte plugin that transforms lucide-svelte imports
+ */
+export function lucideOptimizeImports() {
+    return {
+        name: 'lucide-svelte-optimizer',
+        transform(sourceCode, filePath) {
+            if (!isValidInput(sourceCode, filePath))
+                return null;
+            try {
+                // Quick check if the file contains lucide-svelte imports
+                if (!sourceCode.includes('lucide-svelte'))
+                    return null;
+                const { transformedCode, hasChanges } = transformLucideImports(sourceCode);
+                if (hasChanges) {
+                    return {
+                        code: transformedCode,
+                        map: null, // No source maps in this implementation
+                    };
+                }
+                return null;
+            }
+            catch (error) {
+                handleTransformError(error);
+                return null;
+            }
+        },
+    };
+}
+/**
+ * Validates the input parameters for processing
+ */
+function isValidInput(code, id) {
+    return Boolean(code && id);
+}
+/**
+ * Transforms lucide-svelte imports from destructured to individual imports
+ */
+function transformLucideImports(sourceCode) {
+    let hasChanges = false;
+    const transformedCode = sourceCode.replace(LUCIDE_IMPORT_PATTERN, (match, indentation, importNames) => {
+        if (!importNames.trim())
+            return match;
+        const semicolonAtEnd = match.endsWith(';');
+        const individualImports = convertToIndividualImports(importNames, indentation, semicolonAtEnd);
+        if (individualImports) {
+            hasChanges = true;
+            return individualImports;
+        }
+        return match;
+    });
+    return { transformedCode, hasChanges };
+}
+/**
+ * Converts a comma-separated list of imports to individual import statements
+ */
+function convertToIndividualImports(importNames, indentation, withSemicolon) {
+    return importNames
+        .split(',')
+        .map((name) => name.trim())
+        .filter(Boolean)
+        .map((name) => {
+        const kebabCasePath = convertToKebabCase(name);
+        const semicolon = withSemicolon ? ';' : '';
+        return `${indentation}import ${name} from 'lucide-svelte/icons/${kebabCasePath}'${semicolon}`;
+    })
+        .join('\n');
+}
+/**
+ * Converts a camelCase or PascalCase string to kebab-case
+ */
+function convertToKebabCase(str) {
+    return str
+        .replace(/Icon$/, '') // Remove 'Icon' suffix
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase();
+}
+/**
+ * Handles and logs transformation errors
+ */
+function handleTransformError(error) {
+    const typedError = error instanceof Error ? error : new Error(String(error));
+    console.error('Error in lucide-svelte-optimizer plugin:', typedError);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -189,12 +189,14 @@
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "6.1.3",
     "@tanstack/svelte-form": "1.19.2",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
     "@vitest/coverage-v8": "3.2.4",
     "clean-package": "2.2.0",
     "image-conversion": "2.1.1",
+    "jsdom": "26.1.0",
     "lucide-svelte": "0.541.0",
     "storybook": "9.1.3",
     "svelte": "5.38.3",
@@ -202,7 +204,8 @@
     "tslib": "2.8.1",
     "typescript": "5.9.2",
     "vite": "7.1.3",
-    "vitest": "3.2.4"
+    "vitest": "3.2.4",
+    "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
     "svelte": ">=5.20.0"