ui-ingredients 0.0.70 → 0.1.1

package/README.md

@@ -1,94 +1,98 @@
-# UI Ingredients
-
-Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
-
-## Installation
-
-```bash
-npm install ui-ingredients
-# yarn add ui-ingredients
-# pnpm add ui-ingredients
-```
-
-## Usage
-
-```svelte
-<script>
-  import {Dialog, Portal} from 'ui-ingredients';
-  import {XCloseIcon} from '$lib/icons';
-</script>
-
-<Dialog.Root>
-  <Dialog.Trigger>Open</Dialog.Trigger>
-
-  <Portal>
-    <Dialog.Backdrop />
-    <Dialog.Positioner>
-      <Dialog.Content>
-        <Dialog.Title>Title</Dialog.Title>
-        <Dialog.Description>Description</Dialog.Description>
-        <Dialog.CloseTrigger>
-          <XCloseIcon />
-        </Dialog.CloseTrigger>
-      </Dialog.Content>
-    </Dialog.Positioner>
-  </Portal>
-</Dialog.Root>
-```
-
-## Documentation
-
-- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
-- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
-- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
-- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
-- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
-- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
-- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
-- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
-- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
-- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
-- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
-- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
-- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
-- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
-- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
-- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
-- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
-- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
-- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
-- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
-- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
-- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
-- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
-- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
-- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
-- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
-- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
-- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
-- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
-- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
-- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
-- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
-- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
-- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
-- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
-- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
-- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
-- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
-- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
-- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
-- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
-- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
-- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
-- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
-- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
-
-## Credits
-
-- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
-- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
-
-## Demo
-
-View components demo [here](https://ui-ingredients.vercel.app/)
+# UI Ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+# yarn add ui-ingredients
+# pnpm add ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Dialog, Portal} from 'ui-ingredients';
+  import {XCloseIcon, Button} from '$lib';
+</script>
+
+<Dialog.Root lazyMount keepMounted>
+  <Dialog.Trigger>
+    {#snippet asChild(attrs)}
+      <Button {...attrs}>Open</Button>
+    {/snippet}
+  </Dialog.Trigger>
+
+  <Portal>
+    <Dialog.Backdrop />
+    <Dialog.Positioner>
+      <Dialog.Content>
+        <Dialog.Title>Title</Dialog.Title>
+        <Dialog.Description>Description</Dialog.Description>
+        <Dialog.CloseTrigger>
+          <XCloseIcon />
+        </Dialog.CloseTrigger>
+      </Dialog.Content>
+    </Dialog.Positioner>
+  </Portal>
+</Dialog.Root>
+```
+
+## Documentation
+
+- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
+- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
+- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
+- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
+- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
+- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
+- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
+- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
+- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
+- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
+- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
+- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
+- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
+- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
+- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
+- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
+- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
+- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
+- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
+- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
+- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
+- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
+- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
+- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
+- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
+- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
+- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
+- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
+- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
+- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
+- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
+- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
+- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
+- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
+- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
+- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
+- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
+- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
+- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
+- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
+- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
+- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
+- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
+- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
+- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
+
+## Credits
+
+- [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
+- [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
+
+## Demo
+
+View components demo [here](https://ui-ingredients.vercel.app/)

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.1",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -270,52 +270,52 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.73.0",
-    "@zag-js/anatomy": "0.73.0",
-    "@zag-js/avatar": "0.73.0",
-    "@zag-js/carousel": "0.73.0",
-    "@zag-js/checkbox": "0.73.0",
-    "@zag-js/clipboard": "0.73.0",
-    "@zag-js/collapsible": "0.73.0",
-    "@zag-js/color-picker": "0.73.0",
-    "@zag-js/combobox": "0.73.0",
-    "@zag-js/core": "0.73.0",
-    "@zag-js/date-picker": "0.73.0",
-    "@zag-js/dialog": "0.73.0",
-    "@zag-js/dom-query": "0.73.0",
-    "@zag-js/editable": "0.73.0",
-    "@zag-js/file-upload": "0.73.0",
-    "@zag-js/floating-panel": "0.73.0",
-    "@zag-js/highlight-word": "0.73.0",
-    "@zag-js/hover-card": "0.73.0",
-    "@zag-js/i18n-utils": "0.73.0",
-    "@zag-js/menu": "0.73.0",
-    "@zag-js/number-input": "0.73.0",
-    "@zag-js/pagination": "0.73.0",
-    "@zag-js/pin-input": "0.73.0",
-    "@zag-js/popover": "0.73.0",
-    "@zag-js/presence": "0.73.0",
-    "@zag-js/progress": "0.73.0",
-    "@zag-js/qr-code": "0.73.0",
-    "@zag-js/radio-group": "0.73.0",
-    "@zag-js/rating-group": "0.73.0",
-    "@zag-js/select": "0.73.0",
-    "@zag-js/signature-pad": "0.73.0",
-    "@zag-js/slider": "0.73.0",
-    "@zag-js/splitter": "0.73.0",
-    "@zag-js/steps": "0.73.0",
-    "@zag-js/svelte": "0.73.0",
-    "@zag-js/switch": "0.73.0",
-    "@zag-js/tabs": "0.73.0",
-    "@zag-js/tags-input": "0.73.0",
-    "@zag-js/time-picker": "0.73.0",
-    "@zag-js/timer": "0.73.0",
-    "@zag-js/toast": "0.73.0",
-    "@zag-js/toggle-group": "0.73.0",
-    "@zag-js/tooltip": "0.73.0",
-    "@zag-js/tour": "0.73.0",
-    "@zag-js/tree-view": "0.73.0",
-    "@zag-js/utils": "0.73.0",
+    "@zag-js/accordion": "0.73.1",
+    "@zag-js/anatomy": "0.73.1",
+    "@zag-js/avatar": "0.73.1",
+    "@zag-js/carousel": "0.73.1",
+    "@zag-js/checkbox": "0.73.1",
+    "@zag-js/clipboard": "0.73.1",
+    "@zag-js/collapsible": "0.73.1",
+    "@zag-js/color-picker": "0.73.1",
+    "@zag-js/combobox": "0.73.1",
+    "@zag-js/core": "0.73.1",
+    "@zag-js/date-picker": "0.73.1",
+    "@zag-js/dialog": "0.73.1",
+    "@zag-js/dom-query": "0.73.1",
+    "@zag-js/editable": "0.73.1",
+    "@zag-js/file-upload": "0.73.1",
+    "@zag-js/floating-panel": "0.73.1",
+    "@zag-js/highlight-word": "0.73.1",
+    "@zag-js/hover-card": "0.73.1",
+    "@zag-js/i18n-utils": "0.73.1",
+    "@zag-js/menu": "0.73.1",
+    "@zag-js/number-input": "0.73.1",
+    "@zag-js/pagination": "0.73.1",
+    "@zag-js/pin-input": "0.73.1",
+    "@zag-js/popover": "0.73.1",
+    "@zag-js/presence": "0.73.1",
+    "@zag-js/progress": "0.73.1",
+    "@zag-js/qr-code": "0.73.1",
+    "@zag-js/radio-group": "0.73.1",
+    "@zag-js/rating-group": "0.73.1",
+    "@zag-js/select": "0.73.1",
+    "@zag-js/signature-pad": "0.73.1",
+    "@zag-js/slider": "0.73.1",
+    "@zag-js/splitter": "0.73.1",
+    "@zag-js/steps": "0.73.1",
+    "@zag-js/svelte": "0.73.1",
+    "@zag-js/switch": "0.73.1",
+    "@zag-js/tabs": "0.73.1",
+    "@zag-js/tags-input": "0.73.1",
+    "@zag-js/time-picker": "0.73.1",
+    "@zag-js/timer": "0.73.1",
+    "@zag-js/toast": "0.73.1",
+    "@zag-js/toggle-group": "0.73.1",
+    "@zag-js/tooltip": "0.73.1",
+    "@zag-js/tour": "0.73.1",
+    "@zag-js/tree-view": "0.73.1",
+    "@zag-js/utils": "0.73.1",
     "uid": "2.0.2"
   },
   "peerDependencies": {
@@ -328,11 +328,12 @@
     "@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",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
     "@untitled-theme/icons-svelte": "0.10.9",
     "autoprefixer": "10.4.20",
-    "globals": "15.9.0",
+    "globals": "15.10.0",
     "jsdom": "25.0.1",
     "postcss": "8.4.47",
     "publint": "0.2.11",
@@ -340,12 +341,12 @@
     "resize-observer-polyfill": "1.5.1",
     "svelte": "5.0.0-next.260",
     "svelte-check": "4.0.4",
-    "tailwind-merge": "2.5.2",
+    "tailwind-merge": "2.5.3",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "3.4.13",
     "typescript": "5.6.2",
     "vite": "5.4.8",
-    "vitest": "2.1.1",
+    "vitest": "2.1.2",
     "vitest-axe": "1.0.0-pre.3",
     "vitest-canvas-mock": "0.3.3"
   },
@@ -359,7 +360,8 @@
     },
     "hooks": {
       "before:init": [
-        "pnpm check"
+        "pnpm check",
+        "pnpm test"
       ],
       "after:bump": [
         "pnpm package"