ui-ingredients 0.0.70 → 0.1.0

package/dist/combobox/combobox-input.svelte

@@ -13,7 +13,9 @@
 
   let combobox = getComboboxContext();
 
-  let mergedProps = $derived(mergeProps(combobox.getInputProps(), props));
+  let mergedProps = $derived(
+    mergeProps({'aria-expanded': false}, combobox.getInputProps(), props),
+  );
 </script>
 
 {#if asChild}

package/dist/editable/editable-preview.svelte

@@ -18,7 +18,10 @@
 
   let editable = getEditableContext();
 
-  let mergedProps = $derived(mergeProps(editable.getPreviewProps(), props));
+  let mergedProps = $derived({
+    ...mergeProps(editable.getPreviewProps(), props),
+    'aria-label': props['aria-label'] ?? undefined,
+  });
 </script>
 
 {#if asChild}

package/dist/highlight/highlight.svelte

@@ -30,7 +30,7 @@
 {#if asChild}
   {@render asChild(localProps)}
 {:else}
-  <div bind:this={ref} {...localProps}>
+  <div bind:this={ref} data-scope="highlight" data-part="root" {...localProps}>
     {#each chunks as chunk}
       {#if chunk.match}
         <mark>{chunk.text}</mark>

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
+export * from './merge-props.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';

package/dist/index.js

@@ -17,6 +17,7 @@ export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
+export * from './merge-props.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';

package/dist/number-input/index.d.ts

@@ -6,5 +6,6 @@ export type { NumberInputInputProps } from './number-input-input.svelte';
 export type { NumberInputLabelProps } from './number-input-label.svelte';
 export type { NumberInputProps } from './number-input-root.svelte';
 export type { NumberInputScrubberProps } from './number-input-scrubber.svelte';
+export type { NumberInputValueTextProps } from './number-input-value-text.svelte';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { getNumberInputContext } from './number-input-context.svelte.js';

package/dist/number-input/number-input-value-text.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface NumberInputValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getNumberInputContext} from './number-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: NumberInputValueTextProps = $props();
+
+  let numberInput = getNumberInputContext();
+
+  let mergedProps = $derived(
+    mergeProps(numberInput.getValueTextProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {numberInput.valueAsNumber}
+    {/if}
+  </span>
+{/if}

package/dist/number-input/number-input-value-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface NumberInputValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NumberInputValueText: $$__sveltets_2_IsomorphicComponent<NumberInputValueTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NumberInputValueText = InstanceType<typeof NumberInputValueText>;
+export default NumberInputValueText;

package/dist/number-input/number-input.d.ts

@@ -5,3 +5,4 @@ export { default as Input } from './number-input-input.svelte';
 export { default as Label } from './number-input-label.svelte';
 export { default as Root } from './number-input-root.svelte';
 export { default as Scrubber } from './number-input-scrubber.svelte';
+export { default as ValueText } from './number-input-value-text.svelte';

package/dist/number-input/number-input.js

@@ -5,3 +5,4 @@ export { default as Input } from './number-input-input.svelte';
 export { default as Label } from './number-input-label.svelte';
 export { default as Root } from './number-input-root.svelte';
 export { default as Scrubber } from './number-input-scrubber.svelte';
+export { default as ValueText } from './number-input-value-text.svelte';

package/dist/pagination/pagination-ellipsis.svelte

@@ -32,6 +32,10 @@
   {@render asChild(mergedProps)}
 {:else}
   <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
+    {#if children}
+      {@render children?.()}
+    {:else}
+      ...
+    {/if}
   </span>
 {/if}

package/dist/pagination/pagination-item.svelte

@@ -38,6 +38,10 @@
   {@render asChild(mergedProps)}
 {:else}
   <button bind:this={ref} type="button" {...mergedProps}>
-    {@render children?.()}
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {value}
+    {/if}
   </button>
 {/if}

package/dist/pin-input/index.d.ts

@@ -1,5 +1,6 @@
 export * as PinInput from './pin-input.js';
 export type { PinInputClearTriggerProps } from './pin-input-clear-trigger.svelte';
+export type { PinInputControlProps } from './pin-input-control.svelte';
 export type { PinInputHiddenInputProps } from './pin-input-hidden-input.svelte';
 export type { PinInputInputProps } from './pin-input-input.svelte';
 export type { PinInputLabelProps } from './pin-input-label.svelte';

package/dist/pin-input/pin-input-control.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PinInputControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPinInputContext} from './pin-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PinInputControlProps = $props();
+
+  let pinInput = getPinInputContext();
+
+  let mergedProps = $derived(mergeProps(pinInput.getControlProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/pin-input/pin-input-control.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PinInputControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PinInputControl: $$__sveltets_2_IsomorphicComponent<PinInputControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type PinInputControl = InstanceType<typeof PinInputControl>;
+export default PinInputControl;

package/dist/pin-input/pin-input.d.ts

@@ -1,4 +1,5 @@
 export { default as ClearTrigger } from './pin-input-clear-trigger.svelte';
+export { default as Control } from './pin-input-control.svelte';
 export { default as HiddenInput } from './pin-input-hidden-input.svelte';
 export { default as Input } from './pin-input-input.svelte';
 export { default as Label } from './pin-input-label.svelte';

package/dist/pin-input/pin-input.js

@@ -1,4 +1,5 @@
 export { default as ClearTrigger } from './pin-input-clear-trigger.svelte';
+export { default as Control } from './pin-input-control.svelte';
 export { default as HiddenInput } from './pin-input-hidden-input.svelte';
 export { default as Input } from './pin-input-input.svelte';
 export { default as Label } from './pin-input-label.svelte';

package/dist/popover/index.d.ts

@@ -1,9 +1,11 @@
 export * as Popover from './popover.js';
+export type { PopoverAnchorProps } from './popover-anchor.svelte';
 export type { PopoverArrowTipProps } from './popover-arrow-tip.svelte';
 export type { PopoverArrowProps } from './popover-arrow.svelte';
 export type { PopoverCloseTriggerProps } from './popover-close-trigger.svelte';
 export type { PopoverContentProps } from './popover-content.svelte';
 export type { PopoverDescriptionProps } from './popover-description.svelte';
+export type { PopoverIndicatorProps } from './popover-indicator.svelte';
 export type { PopoverPositionerProps } from './popover-positioner.svelte';
 export type { PopoverProps } from './popover-root.svelte';
 export type { PopoverTitleProps } from './popover-title.svelte';

package/dist/popover/popover-anchor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PopoverAnchorProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPopoverContext} from './popover-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PopoverAnchorProps = $props();
+
+  let popover = getPopoverContext();
+
+  let mergedProps = $derived(mergeProps(popover.getAnchorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/popover/popover-anchor.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PopoverAnchorProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PopoverAnchor: $$__sveltets_2_IsomorphicComponent<PopoverAnchorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type PopoverAnchor = InstanceType<typeof PopoverAnchor>;
+export default PopoverAnchor;

package/dist/popover/popover-indicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PopoverIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPopoverContext} from './popover-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PopoverIndicatorProps = $props();
+
+  let popover = getPopoverContext();
+
+  let mergedProps = $derived(mergeProps(popover.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/popover/popover-indicator.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PopoverIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PopoverIndicator: $$__sveltets_2_IsomorphicComponent<PopoverIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type PopoverIndicator = InstanceType<typeof PopoverIndicator>;
+export default PopoverIndicator;

package/dist/popover/popover.d.ts

@@ -1,8 +1,10 @@
+export { default as Anchor } from './popover-anchor.svelte';
 export { default as ArrowTip } from './popover-arrow-tip.svelte';
 export { default as Arrow } from './popover-arrow.svelte';
 export { default as CloseTrigger } from './popover-close-trigger.svelte';
 export { default as Content } from './popover-content.svelte';
 export { default as Description } from './popover-description.svelte';
+export { default as Indicator } from './popover-indicator.svelte';
 export { default as Positioner } from './popover-positioner.svelte';
 export { default as Root } from './popover-root.svelte';
 export { default as Title } from './popover-title.svelte';

package/dist/popover/popover.js

@@ -1,8 +1,10 @@
+export { default as Anchor } from './popover-anchor.svelte';
 export { default as ArrowTip } from './popover-arrow-tip.svelte';
 export { default as Arrow } from './popover-arrow.svelte';
 export { default as CloseTrigger } from './popover-close-trigger.svelte';
 export { default as Content } from './popover-content.svelte';
 export { default as Description } from './popover-description.svelte';
+export { default as Indicator } from './popover-indicator.svelte';
 export { default as Positioner } from './popover-positioner.svelte';
 export { default as Root } from './popover-root.svelte';
 export { default as Title } from './popover-title.svelte';

package/dist/rating-group/rating-group-item.svelte

@@ -25,7 +25,11 @@
 
   let itemState = $derived(ratingGroup.getItemState({index}));
   let mergedProps = $derived(
-    mergeProps(ratingGroup.getItemProps({index}), props),
+    mergeProps(
+      {'aria-checked': itemState.checked},
+      ratingGroup.getItemProps({index}),
+      props,
+    ),
   );
 </script>
 

package/dist/select/select-trigger.svelte

@@ -18,7 +18,9 @@
 
   let select = getSelectContext();
 
-  let mergedProps = $derived(mergeProps(select.getTriggerProps(), props));
+  let mergedProps = $derived(
+    mergeProps({'aria-expanded': false}, select.getTriggerProps(), props),
+  );
 </script>
 
 {#if asChild}

package/dist/tabs/index.d.ts

@@ -1,5 +1,6 @@
 export * as Tabs from './tabs.js';
 export type { TabsContentProps } from './tabs-content.svelte';
+export type { TabsIndicatorProps } from './tabs-indicator.svelte';
 export type { TabsListProps } from './tabs-list.svelte';
 export type { TabsProps } from './tabs-root.svelte';
 export type { TabsTriggerProps } from './tabs-trigger.svelte';

package/dist/tabs/tabs-indicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TabsIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTabsContext} from './tabs-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: TabsIndicatorProps = $props();
+
+  let tabs = getTabsContext();
+
+  let mergedProps = $derived(mergeProps(tabs.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/tabs/tabs-indicator.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TabsIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TabsIndicator: $$__sveltets_2_IsomorphicComponent<TabsIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type TabsIndicator = InstanceType<typeof TabsIndicator>;
+export default TabsIndicator;

package/dist/tabs/tabs.d.ts

@@ -1,4 +1,5 @@
 export { default as Content } from './tabs-content.svelte';
+export { default as Indicator } from './tabs-indicator.svelte';
 export { default as List } from './tabs-list.svelte';
 export { default as Root } from './tabs-root.svelte';
 export { default as Trigger } from './tabs-trigger.svelte';

package/dist/tabs/tabs.js

@@ -1,4 +1,5 @@
 export { default as Content } from './tabs-content.svelte';
+export { default as Indicator } from './tabs-indicator.svelte';
 export { default as List } from './tabs-list.svelte';
 export { default as Root } from './tabs-root.svelte';
 export { default as Trigger } from './tabs-trigger.svelte';

package/dist/tree-view/tree-view-branch.svelte

@@ -5,15 +5,17 @@
   export interface TreeViewBranchProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, BranchState>,
-      BranchProps
+      Omit<BranchProps, 'depth'>
     > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
+    getTreeViewTreePropsContext,
     setTreeViewBranchPropsContext,
   } from './tree-view-context.svelte.js';
 
@@ -25,11 +27,17 @@
   }: TreeViewBranchProps = $props();
 
   let treeView = getTreeViewContext();
+  let treeViewProps = getTreeViewTreePropsContext();
 
-  let [branchProps, localProps] = $derived(
-    createSplitProps<BranchProps>(['depth', 'value', 'disabled'])(props),
+  let [branchPartialProps, localProps] = $derived(
+    createSplitProps<Omit<BranchProps, 'depth'>>(['value', 'disabled'])(props),
   );
 
+  let branchProps = reflect(() => ({
+    ...branchPartialProps,
+    ...treeViewProps,
+  }));
+
   let branchState = $derived(treeView.getBranchState(branchProps));
 
   let mergedProps = $derived(

package/dist/tree-view/tree-view-branch.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { BranchProps, BranchState } from '@zag-js/tree-view';
-export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, BranchState>, BranchProps> {
+export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, BranchState>, Omit<BranchProps, 'depth'>> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tree-view/tree-view-context.svelte.d.ts

@@ -3,3 +3,10 @@ import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
 export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
 export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
 export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;
+export declare const getTreeViewTreePropsContext: () => {
+    depth: number;
+}, setTreeViewTreePropsContext: (context: {
+    depth: number;
+} | (() => {
+    depth: number;
+})) => void;

package/dist/tree-view/tree-view-context.svelte.js

@@ -2,3 +2,4 @@ import { createContext } from '../create-context.svelte.js';
 export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
 export const [getTreeViewItemPropsContext, setTreeViewItemPropsContext] = createContext('TreeViewItem');
 export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch');
+export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree');

package/dist/tree-view/tree-view-item.svelte

@@ -5,15 +5,17 @@
   export interface TreeViewItemProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
-      ItemProps
+      Omit<ItemProps, 'depth'>
     > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
+    getTreeViewTreePropsContext,
     setTreeViewItemPropsContext,
   } from './tree-view-context.svelte.js';
 
@@ -25,11 +27,17 @@
   }: TreeViewItemProps = $props();
 
   let treeView = getTreeViewContext();
+  let treeViewProps = getTreeViewTreePropsContext();
 
-  let [itemProps, localProps] = $derived(
-    createSplitProps<ItemProps>(['depth', 'value', 'disabled'])(props),
+  let [itemPartialProps, localProps] = $derived(
+    createSplitProps<Omit<ItemProps, 'depth'>>(['value', 'disabled'])(props),
   );
 
+  let itemProps: ItemProps = reflect(() => ({
+    ...itemPartialProps,
+    ...treeViewProps,
+  }));
+
   let itemState = $derived(treeView.getItemState(itemProps));
 
   let mergedProps = $derived(

package/dist/tree-view/tree-view-item.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ItemProps, ItemState } from '@zag-js/tree-view';
-export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, ItemProps> {
+export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, Omit<ItemProps, 'depth'>> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -2,15 +2,21 @@
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface TreeViewTreeProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement> {
+    depth?: number;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {getTreeViewContext} from './tree-view-context.svelte.js';
+  import {
+    getTreeViewContext,
+    setTreeViewTreePropsContext,
+  } from './tree-view-context.svelte.js';
 
   let {
     ref = $bindable(null),
+    depth = 1,
     asChild,
     children,
     ...props
@@ -19,6 +25,8 @@
   let treeView = getTreeViewContext();
 
   let mergedProps = $derived(mergeProps(treeView.getTreeProps(), props));
+
+  setTreeViewTreePropsContext({depth});
 </script>
 
 {#if asChild}

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

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface TreeViewTreeProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+    depth?: number;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.0.70",
+  "version": "0.1.0",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -328,7 +328,7 @@
     "@sveltejs/package": "2.3.5",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/svelte": "5.2.1",
+    "@testing-library/svelte": "5.2.3",
     "@types/jsdom": "21.1.7",
     "@untitled-theme/icons-svelte": "0.10.9",
     "autoprefixer": "10.4.20",